fix(opengraph): added mandatory opengraph tags to all pages. Also fixed some other minor bugs

content/pages/resume/index.md

@@ -64,6 +64,7 @@ Building an interactive and fully customizable dashboard on top of VAA's existin
 I'll list some of the training courses I've had whilst working.
 Some of these have (official) certificates, some don't, but all have brought value and knowledge.
 
+- Young Executive Program (YEP) - [De Baak](https://debaak.nl/trainingen/young-executives-program)
 - Hiring & interview training ([icm.nl](https://www.icm.nl/opleidingen-en-trainingen/hrm/selectiegesprekken-voeren/))
 - Conversation techniques & de-escalation ([TIJDwinst.com](https://gesprekstechnieken.com/cursus-gesprekstechnieken/)](<https://gesprekstechnieken.com/cursus-gesprekstechnieken/>)).
 - Kubernetes (NobleProg Certification Kubernetes on Azure (AKS), 26 August 2019 - 27 August 2019)

content/posts/2015/making-things/index.md

@@ -50,7 +50,7 @@ We also started working on the controllers. The final design will be compromised
 ![back](./media/back.jpg "Back of the controller")
 ![bottom](./media/bottom.jpg "bottom of the controller")
 ![controller_pot](./media/controller_pot.jpg "potentiometer used inside the controller")
-![front](./media/Front_thumb.png "The front of the controller with the logo")
+![front](./media/front-thumb.png "The front of the controller with the logo")
 ![inside](./media/inside.jpg "the inside of an assembled controller")
 ![left_side](./media/left_side.jpg "The left side of the controller")
 ![right_side](./media/right_side.jpg "The right side of the controller")

content/posts/2015/tektree-part-3-wiring/index.md

@@ -11,23 +11,23 @@ disqusId: "17"
 socialImage: "./media/wiring1.jpg"
 ---
 
-In the 3rd part of my TekTree project I'll show you guys how to wire everything. This time I even used separate colours for the power,ground and signal wires. So no more complaining ! ^\_^ All in all I think the result looks absolutely wicked. Even without the arduino case which has yet to come in the mail. (and probably won't fit)
+In the 3rd part of my TekTree project I'll show you guys how to wire everything. This time I even used separate colours for the power, ground and signal wires. So no more complaining! ^\_^ All in all I think the result looks absolutely wicked. Even without the Arduino case which has yet to come in the mail. (and probably won't fit)
 
 ## Wiring part 1 - schematics
 
-Before I started to jam wires in every nook and cranny I could find I had to come up with a plan. Most of that plan has been put into a "Fritzing" sketch which can be found below and on [Github](https://github.com/Mastermindzh/TekTree). The only thing I couldn't figure out how to model on fritzing is the actual christmas tree and the power cord for the arduino.
+Before I started to jam wires in every nook and cranny I could find I had to come up with a plan. Most of that plan has been put into a "Fritzing" sketch which can be found below and on [Github](https://github.com/Mastermindzh/TekTree). The only thing I couldn't figure out how to model on fritzing is the actual Christmas tree and the power cord for the Arduino.
 
-The arduino will get power from a regular adaptor. The only modification I did to the adapter is putting a button on one of the wires. And the only reason I did that is because I'm too lazy to unplug the TekTree when I want to turn it off :)
+The Arduino will get power from a regular adaptor. The only modification I made to the adapter was putting a button on one of the wires. The only reason I did that is because I'm too lazy to unplug the TekTree when I want to turn it off :)
 
 ![Wiring of the back of the Tektree. You can see a lot of jumper wires sticking out and connecting to LEDs](./media/wiring1.jpg)
 
 ## Why so many wires?
 
-I want the project to be "manageable" for everyone. To do this I kept the wiring as simple as possible. Every LED has 2 prongs, 1 goes to ground 1 goes to the arduino. Simple. Same goes for the potentiometers, 3 legs, 1 power 1 ground 1 signal. The only led's I did bundle together (in terms of wiring) is the star. I did this to create a single star instead of multiple led's.
+I want the project to be "manageable" for everyone. To do this I kept the wiring as simple as possible. Every LED has 2 prongs, 1 goes to ground 1 goes to the Arduino. Simple. Same goes for the potentiometers, 3 legs, 1 power 1 ground 1 signal. The only leds I did bundle together (in terms of wiring) is the star. I did this to create a single star instead of multiple led's.
 
 ## Well you could've made it way prettier... and
 
-Well yes, as all of us know I'm perfectly capable of designing a [refined build](/images/blogs/han4pi/Front_thumb.png). I didn't want to go with a pcb this time however because that would make the barrier to entry way higher on this project. And that is something I definitely **don't** want.
+Well yes, as all of us know I'm perfectly capable of designing a [refined build](/images/blogs/han4pi/front.png). I didn't want to go with a pcb this time however because that would make the barrier to entry way higher on this project. And that is something I definitely **don't** want.
 
 I also didn't "group" all my ground wires together. (led -> led -> led -> board) This would've made the project a lot neater but it wouldn't be anywhere near as service friendly. (which was kinda the idea...)
 

gatsby-config.ts

@@ -171,7 +171,7 @@ export default {
         stripQueryString: true,
       },
     },
-    // remove the old serviceworker if it is available.
+    // remove the old service worker if it is available.
     "gatsby-plugin-remove-serviceworker",
     "gatsby-plugin-image",
     "gatsby-plugin-catch-links",

src/components/Layout/Layout.tsx

@@ -11,6 +11,7 @@ interface Props {
   socialImage?: string;
   children: React.ReactNode;
   noIndex?: boolean;
+  slug?: string;
 }
 
 const Layout: React.FC<Props> = ({
@@ -19,6 +20,7 @@ const Layout: React.FC<Props> = ({
   description,
   socialImage = "",
   noIndex = false,
+  slug,
 }: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;
@@ -33,6 +35,7 @@ const Layout: React.FC<Props> = ({
         <meta property="og:description" content={description} />
         <meta property="og:site_name" content={title} />
         <meta property="og:image" content={metaImageUrl} />
+        {slug && <meta property="og:url" content={`${url}${slug}`} />}
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />

src/components/Page/Page.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
-import * as styles from "./Page.module.scss";
 import type { Nullable } from "@/types";
-
+import { Helmet } from "react-helmet";
+import * as styles from "./Page.module.scss";
 
 interface Props {
   title?: string;
@@ -19,12 +19,17 @@ const Page: React.FC<Props> = ({ title, children }: Props) => {
   }, []);
 
   return (
+    <>
+      <Helmet>
+        <meta property="og:type" content="website" />
+      </Helmet>
       <div ref={pageRef} className={styles.page}>
         <div className={styles.inner}>
           {title && <h1 className={styles.title}>{title}</h1>}
           <div className={styles.body}>{children}</div>
         </div>
       </div>
+    </>
   );
 };
 

src/templates/CategoriesTemplate/CategoriesTemplate.tsx

@@ -13,7 +13,7 @@ const CategoriesTemplate: React.FC = () => {
   const categories = useCategoriesList();
 
   return (
-    <Layout title={`Categories - ${title}`} description={subtitle}>
+    <Layout title={`Categories - ${title}`} description={subtitle} slug="/categories/">
       <Sidebar />
       <Page title="Categories">
         <ul>

src/templates/CategoryTemplate/CategoryTemplate.tsx

@@ -28,7 +28,7 @@ const CategoryTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
     currentPage > 0 ? `${group} - Page ${currentPage} - ${siteTitle}` : `${group} - ${siteTitle}`;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug={`/category/${group}/`}>
       <Sidebar />
       <Page title={group}>
         <Feed edges={edges} />

src/templates/IndexTemplate/IndexTemplate.tsx

@@ -26,7 +26,7 @@ const IndexTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
   const pageTitle = currentPage > 0 ? `Posts - Page ${currentPage} - ${siteTitle}` : siteTitle;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug="">
       <Sidebar isIndex />
       <Page>
         <Feed edges={edges} />

src/templates/NotFoundTemplate/NotFoundTemplate.tsx

@@ -10,7 +10,7 @@ const NotFoundTemplate: React.FC = () => {
   const { title, subtitle } = useSiteMetadata();
 
   return (
-    <Layout title={`Not Found - ${title}`} description={subtitle}>
+    <Layout title={`Not Found - ${title}`} description={subtitle} slug="/404.html">
       <Sidebar />
       <Page title="Oh no! page be lost">
         <p>

src/templates/PageTemplate/PageTemplate.tsx

@@ -26,6 +26,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
       socialImage={socialImage?.publicURL}
+      slug={data.markdownRemark.fields.slug}
     >
       <Sidebar />
       <Page title={title}>
@@ -40,6 +41,9 @@ export const query = graphql`
     markdownRemark(fields: { slug: { eq: $slug } }) {
       id
       html
+      fields {
+        slug
+      }
       frontmatter {
         title
         date

src/templates/PostTemplate/PostTemplate.tsx

@@ -24,6 +24,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
       socialImage={socialImage?.publicURL}
+      slug={data.markdownRemark.fields.slug}
     >
       <Post post={data.markdownRemark} />
     </Layout>

src/templates/TagTemplate/TagTemplate.tsx

@@ -28,7 +28,7 @@ const TagTemplate: React.FC<Props> = ({ data, pageContext }: Props) => {
     currentPage > 0 ? `${group} - Page ${currentPage} - ${siteTitle}` : `${group} - ${siteTitle}`;
 
   return (
-    <Layout title={pageTitle} description={siteSubtitle}>
+    <Layout title={pageTitle} description={siteSubtitle} slug={`/tag/${group}/`}>
       <Sidebar />
       <Page title={group}>
         <Feed edges={edges} />

src/templates/TagsTemplate/TagsTemplate.tsx

@@ -13,7 +13,7 @@ const TagsTemplate: React.FC = () => {
   const tags = useTagsList();
 
   return (
-    <Layout title={`Tags - ${title}`} description={subtitle}>
+    <Layout title={`Tags - ${title}`} description={subtitle} slug="/tags/">
       <Sidebar />
       <Page title="Tags">
         <ul>