import { FC, useEffect } from 'react'; import { getBlogPostsSlugs, getBlogPostdata } from '../../utils/blog'; import { useRouter } from 'next/router'; import { MdxRemote } from 'next-mdx-remote/types'; import { MDXProvider } from '@mdx-js/react'; import { MDXEmbedProvider } from 'mdx-embed'; import { GetStaticPaths, GetStaticProps } from 'next'; import renderToString from 'next-mdx-remote/render-to-string'; import hydrate from 'next-mdx-remote/hydrate'; import styled from 'styled-components'; import matter from 'gray-matter'; import AllComponents from '../../components/All'; import Head from 'next/head'; import IconButton from '../../components/IconButton'; import CodeBlock from '../../components/CodeBlock'; interface Props { source: MdxRemote.Source; frontMatter: any; } const Wrapper = styled.div` min-height: 75vh; padding: 1rem 0rem; display: grid; grid-template-rows: auto 1fr; row-gap: 2rem; @media (max-width: 768px) { row-gap: 1rem; } .meta { .back { cursor: pointer; text-align: left; color: #3f9aee; display: flex; align-items: center; } h1, p, .tags-wrapper { text-align: left; width: 85%; margin: 0.5rem auto; } h1 { font-size: 2rem; } h2 { font-size: 1.2rem; } .tags-wrapper { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; } } hr { height: 0.1rem; opacity: 0.3; width: 85%; margin: 1rem auto 0rem auto; @media (max-width: 768px) { width: 95%; margin: 1rem auto 0rem auto; } } .content { width: 85%; margin: 0rem auto; @media (max-width: 768px) { width: 95%; } h1 { font-size: 1.5rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; } & > * { margin: 0.5rem 0rem; } p * { width: 100%; height: auto; } } `; const components = AllComponents; const BlogPost: FC = ({ source, frontMatter }) => { const content = hydrate(source, { components }); const router = useRouter(); useEffect(() => { window.scrollTo(0, 0); }, []); return ( <> {frontMatter.title} | Hazem Krimi
router.back()}> Back

{frontMatter.title}

{frontMatter.description}

Written by {frontMatter.author} on {frontMatter.date}

{frontMatter.tags && (
{frontMatter.tags.map((tag: string, index: number) => ( #{tag}  ))}
)}
{content}
 ); }; 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 renderToString(content, { components, scope: data }); return { props: { source: mdxSource, frontMatter: data } }; };