change post into blog for posts

Author: khendrikse

README.md

@@ -2,4 +2,4 @@
 
 This repo contains my personal website including some blogs and project examples.
 
-Right now it's built using Nextjs for fun so I could try it out. Who knows what it evolves to next.
+Right now it's built using Nextjs for fun so I could try it out. Who knows what it evolves to next. It is also a little playground, so always under construction! ❤️

components/Layout/index.js

@@ -9,7 +9,9 @@ export default function Layout({
   children,
   breadcrumbs,
   socialMeta,
-  structured
+  structured,
+  canonical,
+  refreshUrl
 }) {
   return (
     <>
@@ -21,6 +23,18 @@ export default function Layout({
               {content}
             </script>
           ))}
+        {refreshUrl && (
+          <meta
+            httpEquiv='refresh'
+            content={`2;url=https://khendrikse.github.io/${refreshUrl}`}
+          />
+        )}
+        {canonical && (
+          <link
+            rel='canonical'
+            href={`https://khendrikse.github.io/${canonical}`}
+          />
+        )}
         <script type='application/ld+json'>
           {generateBreadcrumbs(breadcrumbs)}
         </script>
@@ -52,5 +66,6 @@ Layout.propTypes = {
     type: PropTypes.string,
     url: PropTypes.string
   }),
-  structured: PropTypes.array
+  structured: PropTypes.array,
+  canonical: PropTypes.string
 };

components/PostItem/index.js

@@ -11,7 +11,7 @@ export default function PostItem({ item }) {
           {new Date(item.date).toDateString()}
         </div>
         <h2 className={styles.post_item__title}>
-          <Link href={`/post/${item.slug}`}>
+          <Link href={`/blog/${item.slug}`}>
             <a className={styles.post_item__title__link}>{item.title}</a>
           </Link>
         </h2>

helpers/parse-posts.js

@@ -17,7 +17,8 @@ const parsePosts = context => {
         date
       };
     })
-    .sort((a, b) => new Date(b.date) - new Date(a.date));
+    .sort((a, b) => new Date(b.date) - new Date(a.date))
+    .filter(post => post.published);
   return data;
 };
 

next.config.js

@@ -2,15 +2,6 @@ const withPlugins = require('next-compose-plugins');
 const optimizedImages = require('next-optimized-images');
 
 const nextConfig = {
-  async redirects() {
-    return [
-      {
-        source: '/about',
-        destination: '/',
-        permanent: false
-      }
-    ];
-  },
   swcMinify: true,
   images: {
     disableStaticImages: true

pages/blog/[postname].js

@@ -13,6 +13,7 @@ import ProgressiveImage from 'components/ProgressiveImage';
 import isExternalImage from 'helpers/is-external-image';
 import generateArticleStructuredData from 'helpers/generate-article-structured-data';
 import generateFaqStructuredData from 'helpers/generate-faq-structured-data';
+import parsePosts from 'helpers/parse-posts';
 
 export default function BlogPost({
   siteTitle,
@@ -138,18 +139,11 @@ export async function getStaticProps({ ...ctx }) {
 }
 
 export async function getStaticPaths() {
-  const blogSlugs = (context => {
-    const keys = context.keys();
-    const data = keys.map(key => {
-      const slug = key.replace(/^.*[\\/]/, '').slice(0, -3);
+  const allPosts = parsePosts(
+    require.context('../../posts', true, /\.\/.*\.md$/)
+  ).map(post => post.slug);
 
-      return slug;
-    });
-
-    return data;
-  })(require.context('../../posts', true, /\.\/.*\.md$/));
-
-  const paths = blogSlugs.map(slug => `/blog/${slug}`);
+  const paths = allPosts.map(slug => `/blog/${slug}`);
 
   return {
     paths,

pages/post/[postname].js

@@ -13,6 +13,7 @@ import ProgressiveImage from 'components/ProgressiveImage';
 import isExternalImage from 'helpers/is-external-image';
 import generateArticleStructuredData from 'helpers/generate-article-structured-data';
 import generateFaqStructuredData from 'helpers/generate-faq-structured-data';
+import parsePosts from '../../helpers/parse-posts';
 
 export default function BlogPost({
   siteTitle,
@@ -35,10 +36,12 @@ export default function BlogPost({
         title: `${frontmatter.title} | ${siteTitle}`,
         description: frontmatter.description
       }}
+      canonical={`blog/${slug}`}
       breadcrumbs={[
         { name: 'blog', item: 'blog/' },
         { name: frontmatter.title, item: `post/${slug}` }
       ]}
+      refreshUrl={`blog/${slug}`}
       structured={[
         generateFaqStructuredData(frontmatter.faq),
         generateArticleStructuredData({
@@ -138,18 +141,13 @@ export async function getStaticProps({ ...ctx }) {
 }
 
 export async function getStaticPaths() {
-  const blogSlugs = (context => {
-    const keys = context.keys();
-    const data = keys.map(key => {
-      const slug = key.replace(/^.*[\\/]/, '').slice(0, -3);
+  const allPosts = parsePosts(
+    require.context('../../posts', true, /\.\/.*\.md$/)
+  )
+    .filter(post => post.oldBlog)
+    .map(post => post.slug);
 
-      return slug;
-    });
-
-    return data;
-  })(require.context('../../posts', true, /\.\/.*\.md$/));
-
-  const paths = blogSlugs.map(slug => `/post/${slug}`);
+  const paths = allPosts.map(slug => `/post/${slug}`);
 
   return {
     paths,

posts/2019-09-17-awesome-soft-airy-and-fluffy-vsc-themes.md

@@ -2,6 +2,7 @@
 layout: post
 title: Awesome soft, airy and fluffy VSC themes
 published: true
+oldBlog: true
 description: These themes will lift you off for cozy coding.
 tags: theme, vsc, pastel, productivity
 intro: When coding I sometimes feel the need to change the aesthetics of my workspace. Why? I don't know. Maybe because it gives me a fresh look at my code. Maybe because with the seasons changing, I feel the need to lighten or darken my workspace colours. Either way, for those searching for something airy and new. Here is a list of wonderful Visual Studio Code themes that have a cozy, soft or fluffy aesthetic.

posts/2019-09-19-how-to-get-ready-for-hacktoberfest.md

@@ -2,6 +2,7 @@
 layout: post
 title: How to get ready for Hacktoberfest ✨
 published: true
+oldBlog: true
 description: 5 Tips to get you ready for coding
 intro: October is creeping closer... That means it's almost time for Hacktoberfest! Last year it was a great opportunity for me to get to know the open source community and to spend time coding something different for a change. As I enjoyed the event so much, I'd love to help others out getting a head start for this awesome month-long event!
 tags: beginner, hacktoberfest, open-source

posts/2019-10-07-coding-with-a-group-of-11-year-olds.md

@@ -2,6 +2,7 @@
 layout: post
 title: Coding with a group of 11 year olds
 published: true
+oldBlog: true
 description: Get them 'hacking' their favourite websites
 tags: beginner, teaching, tutorial, programming
 intro: Recently a we were asked if we could give a short lesson about coding to a group of 11 year olds in primary school. So my colleague and me started preparing a 1,5 hour workshop with the goal of showing the kids how much fun programming could be. This is the story of how it went.

posts/2020-01-26-beautify-your-raspberry-pi-with-the-pimoroni-blinkt.md

@@ -2,6 +2,7 @@
 layout: post
 title: Beautify your Raspberry Pi with the Pimoroni Blinkt!
 published: true
+oldBlog: true
 description: Make your Raspberry Pi shine in blue and purple colors.
 cover_image: https://thepracticaldev.s3.amazonaws.com/i/jwk9ue7pvtuj151srtod.JPG
 cover_image_alt: a raspberry pi with shining LED lights

posts/2020-02-02-get-a-head-start-with-your-new-app-cra-custom-templates.md

@@ -2,6 +2,7 @@
 layout: post
 title: Get a head start with your new app - CRA custom templates
 published: true
+oldBlog: true
 description: Let's take a look at Create React App's custom templates
 tags: #react #javascript #npm #beginner
 intro: Create React App (CRA) already increases the speed of getting a new React app up and running. You run one script and it creates a functioning React app that you can start working on. With Custom Templates things have become even easier. In this post, we're going to discover what goes into creating a custom template.

posts/2020-02-02-light-up-leds-when-you-start-your-raspberry-pi-and-clear-them-on-shutdown.md

@@ -2,6 +2,7 @@
 layout: post
 title: Light up LEDs when you start your Raspberry Pi and clear them on shutdown
 published: true
+oldBlog: true
 description: Set up your Pimoroni Blinkt so it automatically turns on and off when you start-up or shut down your Raspberry Pi.
 cover_image: https://dev-to-uploads.s3.amazonaws.com/i/5o1drx3yby1z853rjm8d.JPG
 cover_image_alt: a raspberry pi with blue and purple LEDs lighting up

posts/2020-02-17-personalize-your-Linux-terminal-prompt.md

@@ -2,6 +2,7 @@
 layout: post
 title: Personalize your Linux terminal prompt ✨
 published: true
+oldBlog: true
 description: Add your own personal touch to your Linux terminal when you're not using a GUI.
 tags: #linux #beginner
 intro: If you're just as much of a fan of personalizing your coding environment as I am, you must have been just as bummed out when you ran your Linux environment without a GUI and found out there was no real 'theming' going on in your terminal. No worries, there is hope!

posts/2020-05-11-redirection-and-pipeline-magic.md

@@ -2,6 +2,7 @@
 layout: post
 title: Redirection and pipeline magic
 published: true
+oldBlog: true
 description: For when you don't feel like diving deep into bash but do want to know what redirection is when you see it.
 intro: Enough developers out there deliver great day-to-day work without having to touch bash whatsoever. Yet, every now and then we all encounter a piece of bash script, be it from a colleague or copied from a Stack Overflow post. Yeah, the script works, but do we understand what is happening? I wanted to know myself so I started small. Let's dive into redirection.
 tags: #bash #linux #beginner #til

posts/2020-05-21-The-basics-of-a-function-illustrated.md

@@ -2,6 +2,7 @@
 layout: post
 title: The basics of a function, illustrated! ✨
 published: true
+oldBlog: true
 description: Learn about JavaScript functions with a simple metaphor.
 intro: One thing that can be difficult to understand when you just start out learning how to program is what a function is and how it works. As a beginner developer, it can be especially difficult to understand what arguments are and where they come from. This blog illustrates how a  javascript function works in its most basic form.
 tags: beginner, javascript, codenewbie

posts/2020-06-16-Test-global-npm-packages-in-a-quick-and-easy-way.md

@@ -2,6 +2,7 @@
 layout: post
 title: Test global npm packages in a quick and easy way
 published: true
+oldBlog: true
 description: A quick guide on testing out local global npm packages line using npm or yarn.
 intro: You might already be used to creating symlinks between projects locally using yarn or npm. But what if you are  working on a cli package that you want the user to use globally? You also want to be able to test your package locally to make sure everything is working as it should. But how do you do this? Here’s an easy guide on achieving a link to a local project to test out globally in your command line using either yarn or npm.
 tags: beginner, javascript, npm, yarn

posts/2020-12-14-how-to-stay-connected-to-your-co-workers.md

@@ -2,6 +2,7 @@
 layout: post
 title: How to stay connected to your co-workers
 published: true
+oldBlog: true
 description: Staying connected in a work-from-home world
 intro: Let’s be honest, every post nowadays starts with how weird 2020 has been. So I am doing the same; it’s been weird. There. Having been working from home full-time since March, it has been both a productivity booster and an isolating experience. Especially in the beginning.
 tags: productivity, career, watercooler, remote

posts/2021-02-23-finding-meaning-landmarks-explained.md

@@ -2,6 +2,7 @@
 layout: post
 title: 'Finding meaning: landmarks explained'
 published: true
+oldBlog: true
 description: Learning more about HTML5 elements and their landmarks
 intro: Have you ever done a semantic html course? Or read about it? If you have, you might remember elements like <main>, <section> or maybe <aside>. But did you know that using these elements does not automatically provide the proper semantic meaning? Let's go on a journey of creating meaningful landmarks.
 tags: accessibility, html

posts/2021-07-15-using-roadmapsh-for-structured-self-learning.md

@@ -2,6 +2,7 @@
 layout: post
 title: 'Using roadmap.sh for structured self-learning'
 published: true
+oldBlog: true
 description: These tips, tricks and resources helped me become a self-taught software developer and hopefully they can help you too.
 intro: Three years ago I made the switch from an entirely different work field to becoming a software developer. I got lucky enough to be hired at a company that allowed me to learn on the job. Yet, I had no formal computer science education and there was no plan set up for me to structurally start learning programming. I had to devise my own. These tips, tricks and resources helped me become a self-taught software developer and hopefully they can help you too.
 tags: beginner, programming, learning

posts/2021-08-16-get-to-know-the-terminal.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: 'Get to know the terminal'
-published: false
+published: true
+oldBlog: true
 description: Learn to understand the difference between the terminal, command line and shell. And become more comfortable using them.
 intro: Once you start coding there will come a time you are introduced to the terminal. Opening this hacker looking window on your computer can be daunting at first. But things become less scary once we get to know the terminal better.
 cover_image: 2021-08-16.jpg

posts/2021-08-17-9-cozy-vim-color-schemes.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: '9 Cozy Vim color schemes'
-published: false
+published: true
+oldBlog: true
 description: A list of very cozy vim color schemes.
 intro: Ahh... to be as cozy as a cat loaf. It's hard for us humans to achieve the same comfort. But having your Vim scheme set up properly to give you a relaxed vibe might just be the next best thing. If you are looking for some cute, cozy, fluffy and pastel color schemes for Vim, you've come to the right place. Here are 9 highly curated schemes just for you.
 cover_image: 2021-08-17.jpg

posts/2021-09-25-set-your-gatsby-develop-security-headers.md

@@ -1,7 +1,8 @@
 ---
 layout: post
 title: 'TIL: How to set security headers for Gatsby Develop'
-published: false
+published: true
+oldBlog: true
 description: If, for any reason, you need to run gatsby develop and set security headers. Using advanced proxying is the way to go.
 intro:
 cover_image: 2021-09-25.jpg

scripts/feed.js

@@ -37,7 +37,7 @@ const getImageFileName = filename => {
 };
 
 const parsePostData = (data, filename) => {
-  const link = `https://khendrikse.github.io/post/${filename.replace(
+  const link = `https://khendrikse.github.io/blog/${filename.replace(
     '.md',
     ''
   )}`;