import { 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 { GetStaticPaths, GetStaticProps } from 'next'; import { serialize } from 'next-mdx-remote/serialize'; import { Wrapper } from '../../styles/blog/slug'; import matter from 'gray-matter'; 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 = ({ source, frontMatter, text }: Props) => { const router = useRouter(); const stats = readingTime(text); const htmlOverrides = { code: CodeBlock }; const mdxComponents = {}; 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 ? (
{frontMatter?.title}
) : 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); if (!blogPostContent) return { props: { source: undefined, frontMatter: undefined } }; const { data, content } = matter(blogPostContent); const mdxSource = await serialize(content, { scope: data }); return { props: { source: mdxSource, frontMatter: data, text: content } }; };