import { useEffect } from 'react'; import { getPorjectsSlugs, getProjectdata } from '../../utils/projects'; 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 matter from 'gray-matter'; import { Wrapper } from '../../styles/projects/slug'; import Head from 'next/head'; import IconButton from '../../components/IconButton'; import CodeBlock from '../../components/CodeBlock'; import MDXButton from '../../components/MDXButton'; import Image from 'next/image'; interface Props { source: MDXRemoteSerializeResult; frontMatter: any; } const Project = ({ source, frontMatter }: Props) => { const router = useRouter(); const htmlOverrides = { code: CodeBlock }; const mdxComponents = { Button: MDXButton }; useEffect(() => { window.scrollTo(0, 0); }, []); return ( <> {`${frontMatter?.title} | Hazem Krimi`}

router.back()}> Back

{frontMatter?.title}

{frontMatter?.description}

{frontMatter?.tags ? (

{frontMatter.tags.map((tag: string, index: number) => ( #{tag} ))}

) : null} {frontMatter?.image && !frontMatter?.hideImage ? (

) : null}

Showcase

Demo Source Code

); }; export default Project; export const getStaticPaths: GetStaticPaths = async () => { const paths = getPorjectsSlugs(); return { paths, fallback: false, }; }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { const projectContent = await getProjectdata(params.slug); if (!projectContent) return { props: { source: undefined, frontMatter: undefined, }, }; const { data, content } = matter(projectContent); const mdxSource = await serialize(content, { scope: data, }); return { props: { source: mdxSource, frontMatter: data, }, }; };