hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix content loading

Browse Source
This commit is contained in:
Hazem Krimi
2022-02-13 19:30:46 +01:00
parent 763db6f5c1
commit 8fdc27152a
4 changed files with 50 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/blog/[slug].tsx
+19 -10
View File
@@ -37,7 +37,7 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
<meta <meta
name='description' name='description'
content={ content={
frontMatter.description frontMatter?.description
? frontMatter.description ? frontMatter.description
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : '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 <meta
property='og:description' property='og:description'
content={ content={
frontMatter.description frontMatter?.description
? frontMatter.description ? frontMatter.description
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : '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 <meta
name='keywords' name='keywords'
content={ content={
frontMatter.tags frontMatter?.tags
? frontMatter.tags.join(' ') ? 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' : '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> </Head>
<Wrapper> <Wrapper>
<div className='meta'> <div className='meta'>
@@ -69,19 +69,19 @@ const BlogPost: FC<Props> = ({ source, frontMatter, text }) => {
<IconButton icon='/icons/arrow-left.svg' /> <IconButton icon='/icons/arrow-left.svg' />
<span>Back</span> <span>Back</span>
</div> </div>
<h1>{frontMatter.title}</h1> <h1>{frontMatter?.title}</h1>
<p>{frontMatter.description}</p> <p>{frontMatter?.description}</p>
<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> </p>
{frontMatter.tags ? ( {frontMatter?.tags ? (
<div className='tags-wrapper'> <div className='tags-wrapper'>
{frontMatter.tags.map((tag: string, index: number) => ( {frontMatter.tags.map((tag: string, index: number) => (
<span key={index}>#{tag}&nbsp;</span> <span key={index}>#{tag}&nbsp;</span>
))} ))}
</div> </div>
) : null} ) : null}
{frontMatter.image ? ( {frontMatter?.image ? (
<div className='image'> <div className='image'>
<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' /> <Image src={frontMatter.image} width='100%' height='100%' layout='responsive' />
</div> </div>
@@ -111,6 +111,15 @@ export const getStaticPaths: GetStaticPaths = async () => {
}; };
export const getStaticProps: GetStaticProps = async ({ params }: any) => { export const getStaticProps: GetStaticProps = async ({ params }: any) => {
const blogPostContent = await getBlogPostdata(params.slug); const blogPostContent = await getBlogPostdata(params.slug);
if (!blogPostContent)
return {
props: {
source: undefined,
frontMatter: undefined
}
};
const { data, content } = matter(blogPostContent); const { data, content } = matter(blogPostContent);
const mdxSource = await serialize(content, { const mdxSource = await serialize(content, {
scope: data scope: data
pages/portfolio/[slug].tsx
+27 -14
View File
@@ -35,7 +35,7 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
<meta <meta
name='description' name='description'
content={ content={
frontMatter.description frontMatter?.description
? frontMatter.description ? frontMatter.description
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast'
} }
@@ -45,17 +45,21 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
<meta <meta
property='og:description' property='og:description'
content={ content={
frontMatter.description frontMatter?.description
? frontMatter.description ? frontMatter.description
: 'Hazem Krimi is a Full Stack JavaScript Developer and a Software Engineering Enthusiast' : '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 <meta
name='keywords' 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> </Head>
<Wrapper> <Wrapper>
<div className='meta'> <div className='meta'>
@@ -63,18 +67,18 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
<IconButton icon='/icons/arrow-left.svg' /> <IconButton icon='/icons/arrow-left.svg' />
<span>Back</span> <span>Back</span>
</div> </div>
<h1>{frontMatter.title}</h1> <h1>{frontMatter?.title}</h1>
<p>{frontMatter.description}</p> <p>{frontMatter?.description}</p>
{frontMatter.tags ? ( {frontMatter?.tags ? (
<div className='tags-wrapper'> <div className='tags-wrapper'>
{frontMatter.tags.map((tag: string, index: number) => ( {frontMatter.tags.map((tag: string, index: number) => (
<span key={index}>#{tag}&nbsp;</span> <span key={index}>#{tag}&nbsp;</span>
))} ))}
</div> </div>
) : null} ) : null}
{frontMatter.image && !frontMatter.hideImage ? ( {frontMatter?.image && !frontMatter?.hideImage ? (
<div className='image'> <div className='image'>
<Image src={frontMatter.image} width='100%' height='100%' layout='responsive' /> <Image src={frontMatter?.image} width='100%' height='100%' layout='responsive' />
</div> </div>
) : null} ) : null}
<hr /> <hr />
@@ -85,10 +89,10 @@ const PortfolioProject: FC<Props> = ({ source, frontMatter }) => {
<MDXRemote {...source} components={components} /> <MDXRemote {...source} components={components} />
<h1>Showcase</h1> <h1>Showcase</h1>
<div className='showcase-buttons'> <div className='showcase-buttons'>
<MDXButton variant='action' link={frontMatter.demo} target='_blank'> <MDXButton variant='action' link={frontMatter?.demo} target='_blank'>
Demo Demo
</MDXButton> </MDXButton>
<MDXButton variant='outline' link={frontMatter.code} target='_blank'> <MDXButton variant='outline' link={frontMatter?.code} target='_blank'>
Source Code Source Code
</MDXButton> </MDXButton>
</div> </div>
@@ -110,8 +114,17 @@ export const getStaticPaths: GetStaticPaths = async () => {
}; };
}; };
export const getStaticProps: GetStaticProps = async ({ params }: any) => { export const getStaticProps: GetStaticProps = async ({ params }: any) => {
const blogPostContent = await getPortfolioProjectdata(params.slug); const portfolioProjectContent = await getPortfolioProjectdata(params.slug);
const { data, content } = matter(blogPostContent);
if (!portfolioProjectContent)
return {
props: {
source: undefined,
frontMatter: undefined
}
};
const { data, content } = matter(portfolioProjectContent);
const mdxSource = await serialize(content, { const mdxSource = await serialize(content, {
scope: data scope: data
}); });
utils/blog.ts
+2
View File
@@ -61,5 +61,7 @@ export const getBlogPostdata = async (slug: string) => {
const fullPath = path.join(blogPostsDirectory, `${slug}.mdx`); const fullPath = path.join(blogPostsDirectory, `${slug}.mdx`);
const postContent = fs.readFileSync(fullPath, 'utf8'); const postContent = fs.readFileSync(fullPath, 'utf8');
if (!postContent) return undefined;
return postContent; return postContent;
}; };
utils/portfolio.ts
+2
View File
@@ -61,5 +61,7 @@ export const getPortfolioProjectdata = async (slug: string) => {
const fullPath = path.join(portfolioProjects, `${slug}.mdx`); const fullPath = path.join(portfolioProjects, `${slug}.mdx`);
const postContent = fs.readFileSync(fullPath, 'utf8'); const postContent = fs.readFileSync(fullPath, 'utf8');
if (!postContent) return undefined;
return postContent; return postContent;
}; };