import { FC, useEffect, useRef } 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 Image from 'next/image'; interface Props { source: MDXRemoteSerializeResult; frontMatter: any; } const PortfolioProject: FC = ({ source, frontMatter }) => { const router = useRouter(); const metaRef = useRef(null); 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}
); }; export default PortfolioProject; export const getStaticPaths: GetStaticPaths = async () => { const paths = getPortfolioPorjectsSlugs(); return { paths, fallback: false }; }; export const getStaticProps: GetStaticProps = async ({ params }: any) => { const blogPostContent = await getPortfolioProjectdata(params.slug); const { data, content } = matter(blogPostContent); const mdxSource = await serialize(content, { scope: data }); return { props: { source: mdxSource, frontMatter: data } }; };