From 8fdc27152aa3d8a7556823a06a458036822924f1 Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Sun, 13 Feb 2022 19:30:46 +0100
Subject: [PATCH] Fix content loading

---
 pages/blog/[slug].tsx      | 29 +++++++++++++++++----------
 pages/portfolio/[slug].tsx | 41 +++++++++++++++++++++++++-------------
 utils/blog.ts              |  2 ++
 utils/portfolio.ts         |  2 ++
 4 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/pages/blog/[slug].tsx b/pages/blog/[slug].tsx
index c45d839..3a271e0 100644
--- a/pages/blog/[slug].tsx
+++ b/pages/blog/[slug].tsx
@@ -37,7 +37,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 				<meta
 					name='description'
 					content={
-						frontMatter.description
+						frontMatter?.description
 							? frontMatter.description
 							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
 					}
@@ -47,21 +47,21 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 				<meta
 					property='og:description'
 					content={
-						frontMatter.description
+						frontMatter?.description
 							? frontMatter.description
 							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
 					}
 				/>
-				<meta property='og:title' content={`${frontMatter.title} | Hazem Krimi`} />
+				<meta property='og:title' content={`${frontMatter?.title} | Hazem Krimi`} />
 				<meta
 					name='keywords'
 					content={
-						frontMatter.tags
+						frontMatter?.tags
 							? frontMatter.tags.join(' ')
 							: 'Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
 					}
 				/>
-				<title>{frontMatter.title} | Hazem Krimi</title>
+				<title>{frontMatter?.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
 				<div className='meta'>
@@ -69,19 +69,19 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
-					<h1>{frontMatter.title}</h1>
-					<p>{frontMatter.description}</p>
+					<h1>{frontMatter?.title}</h1>
+					<p>{frontMatter?.description}</p>
 					<p>
-						By <b>{frontMatter.author}</b> on <b>{frontMatter.date}</b> ({stats.text})
+						By <b>{frontMatter?.author}</b> on <b>{frontMatter?.date}</b> ({stats.text})
 					</p>
-					{frontMatter.tags ? (
+					{frontMatter?.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
 					) : null}
-					{frontMatter.image ? (
+					{frontMatter?.image ? (
 						<div className='image'>
 							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
 						</div>
@@ -111,6 +111,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
 };
 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
diff --git a/pages/portfolio/[slug].tsx b/pages/portfolio/[slug].tsx
index 2d35801..49b686f 100644
--- a/pages/portfolio/[slug].tsx
+++ b/pages/portfolio/[slug].tsx
@@ -35,7 +35,7 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				<meta
 					name='description'
 					content={
-						frontMatter.description
+						frontMatter?.description
 							? frontMatter.description
 							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
 					}
@@ -45,17 +45,21 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 				<meta
 					property='og:description'
 					content={
-						frontMatter.description
+						frontMatter?.description
 							? frontMatter.description
 							: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
 					}
 				/>
-				<meta property='og:title' content={`${frontMatter.title} | Hazem Krimi`} />
+				<meta property='og:title' content={`${frontMatter?.title} | Hazem Krimi`} />
 				<meta
 					name='keywords'
-					content='Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
+					content={
+						frontMatter?.tags
+							? frontMatter.tags.join(' ')
+							: 'Hazem, Krimi, Developer, Software, Engineer, Web, Mobile, Frontend, Backend, Fullstack, JavaScript, React.js, React Native, Node.js, Portfolio, Blog, Tutorials, Tech News'
+					}
 				/>
-				<title>{frontMatter.title} | Hazem Krimi</title>
+				<title>{frontMatter?.title} | Hazem Krimi</title>
 			</Head>
 			<Wrapper>
 				<div className='meta'>
@@ -63,18 +67,18 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 						<IconButton icon='/icons/arrow-left.svg' />
 						<span>Back</span>
 					</div>
-					<h1>{frontMatter.title}</h1>
-					<p>{frontMatter.description}</p>
-					{frontMatter.tags ? (
+					<h1>{frontMatter?.title}</h1>
+					<p>{frontMatter?.description}</p>
+					{frontMatter?.tags ? (
 						<div className='tags-wrapper'>
 							{frontMatter.tags.map((tag: string, index: number) => (
 								<span key={index}>#{tag}&nbsp;</span>
 							))}
 						</div>
 					) : null}
-					{frontMatter.image && !frontMatter.hideImage ? (
+					{frontMatter?.image && !frontMatter?.hideImage ? (
 						<div className='image'>
-							<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
+							<Image src={frontMatter?.image} width='100%' height='100%' layout='responsive' />
 						</div>
 					) : null}
 					<hr />
@@ -85,10 +89,10 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
 							<MDXRemote {...source} components={components} />
 							<h1>Showcase</h1>
 							<div className='showcase-buttons'>
-								<MDXButton variant='action' link={frontMatter.demo} target='_blank'>
+								<MDXButton variant='action' link={frontMatter?.demo} target='_blank'>
 									Demo
 								</MDXButton>
-								<MDXButton variant='outline' link={frontMatter.code} target='_blank'>
+								<MDXButton variant='outline' link={frontMatter?.code} target='_blank'>
 									Source Code
 								</MDXButton>
 							</div>
@@ -110,8 +114,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
 	};
 };
 export const getStaticProps: GetStaticProps = async ({ params }: any) => {
-	const blogPostContent = await getPortfolioProjectdata(params.slug);
-	const { data, content } = matter(blogPostContent);
+	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
 	});
diff --git a/utils/blog.ts b/utils/blog.ts
index 1ef2525..15238f9 100644
--- a/utils/blog.ts
+++ b/utils/blog.ts
@@ -61,5 +61,7 @@ export const getBlogPostdata = async (slug: string) => {
 	const fullPath = path.join(blogPostsDirectory, `${slug}.mdx`);
 	const postContent = fs.readFileSync(fullPath, 'utf8');
 
+	if (!postContent) return undefined;
+
 	return postContent;
 };
diff --git a/utils/portfolio.ts b/utils/portfolio.ts
index be53093..36d1be8 100644
--- a/utils/portfolio.ts
+++ b/utils/portfolio.ts
@@ -61,5 +61,7 @@ export const getPortfolioProjectdata = async (slug: string) => {
 	const fullPath = path.join(portfolioProjects, `${slug}.mdx`);
 	const postContent = fs.readFileSync(fullPath, 'utf8');
 
+	if (!postContent) return undefined;
+
 	return postContent;
 };