I created a blog:
- frontend - Next.js
- backend - Strapi for API
Post has content (full text) in markdown in Strapi.
Is it possible to do typographing and parsing oembed links on the server-side in Strapi before sending it to GraphQL?
I would like:
- Strapi to save original editor’s text in a database,
- GraphQL to show text with typographed phrases and parsed oembed links.
- Next.js show typographed phrases and iframe codes with minimal changes on the front side.
If yes, how and at which Strapi file I could do it?
Now Next.js has component PostFull.js, and I would like to make it faster on front side:
import Markdown from 'react-markdown';
import rehypeRaw from 'rehype-raw';
import rehypeSanitize from 'rehype-sanitize';
import Typograf from 'typograf';
import styles from './PostFull.module.css';
const PostFull = ({ id, fulltext }) => {
const tp = new Typograf({ locale: ['ru', 'en-US'] });
const postFulltextTypografed = tp.execute(`${fulltext}`);
return (
<article className={styles.article} itemScope={true} itemType="http://schema.org/Article">
...
<div className={styles.body}>
<div className={styles.content} itemProp="articleBody">
<Markdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
{postFulltextTypografed}
</Markdown>
</div>
</div>
</article>
);
};
export default PostFull;
It works well, except for the post with any kind of embeds.
Some posts have youtube embeds, for example:
Text paragraph 1
https://www.youtube.com/watch?v=PRfV5TvRjEA
Text paragraph 2
There was a suggestion to use custom components (link: mdx-embed.com) instead of simple text of youtube’s url.
I don’t want to push editors to use custom components in their text, especially for the big archive of old texts.
There are plugins for markdown, for example, remark-oembed (npm sergioramos/remark-oembed) that can parse links in markdown and convert them to the real embed code.
Also for the editor’s text, I would like to use a typograph (npm typograf). It’s very useful for Cyrillic text.