import { FC, useEffect } from 'react'; import { getBlogPostsSlugs, getBlogPostdata } from '../../utils/blog'; import { useRouter } from 'next/router'; import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'; import { MDXProvider } from '@mdx-js/react'; import { MDXEmbedProvider } from 'mdx-embed'; import { GetStaticPaths, GetStaticProps } from 'next'; import { serialize } from 'next-mdx-remote/serialize'; import { Wrapper } from '../../styles/blog/slug'; import matter from 'gray-matter'; import components from '../../components'; import Head from 'next/head'; import IconButton from '../../components/IconButton'; import CodeBlock from '../../components/CodeBlock'; import readingTime from 'reading-time'; import Image from 'next/image'; interface Props { source: MDXRemoteSerializeResult; frontMatter: any; text: string; } const BlogPost: FC = ({ source, frontMatter, text }) => { const router = useRouter(); const stats = readingTime(text); useEffect(() => { window.scrollTo(0, 0); }, []); return ( <> {frontMatter.title} | Hazem Krimi
router.back()}> Back

{frontMatter.title}

{frontMatter.description}

By {frontMatter.author} on {frontMatter.date} ({stats.text})

{frontMatter.tags ? (
{frontMatter.tags.map((tag: string, index: number) => ( #{tag}  ))}
) : null} {frontMatter.image ? (
) : null}
); }; export default BlogPost; export const getStaticPaths: GetStaticPaths = async () => { const paths = getBlogPostsSlugs(); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { const blogPostContent = await getBlogPostdata(params.slug); const { data, content } = matter(blogPostContent); const mdxSource = await serialize(content, { scope: data }); return { props: { source: mdxSource, frontMatter: data, text: content } }; };