import { FC, useEffect } from 'react'; import { getPortfolioPorjectsSlugs, getPortfolioProjectdata } from '../../utils/portfolio'; 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 matter from 'gray-matter'; import components from '../../components'; import { Wrapper } from '../../styles/portfolio/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 PortfolioProject: FC = ({ source, frontMatter }) => { const router = useRouter(); 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 PortfolioProject; export const getStaticPaths: GetStaticPaths = async () => { const paths = getPortfolioPorjectsSlugs(); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { const portfolioProjectContent = await getPortfolioProjectdata(params.slug); if (!portfolioProjectContent) return { props: { source: undefined, frontMatter: undefined } }; const { data, content } = matter(portfolioProjectContent); const mdxSource = await serialize(content, { scope: data }); return { props: { source: mdxSource, frontMatter: data } }; };