chore(release): 1.2.0

Reviewed-on: #5

.drone.yml

@@ -0,0 +1,19 @@
+kind: pipeline
+type: docker
+name: default
+
+steps:
+  - name: install
+    image: node:19.4.0
+    commands:
+      - npm install
+
+  - name: test
+    image: node:19.4.0
+    commands:
+      - npm run test:coverage
+
+  - name: build
+    image: node:19.4.0
+    commands:
+      - npm run build

CHANGELOG.md

@@ -2,6 +2,29 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.2.0](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.1.0...v1.2.0) (2023-02-14)
+
+
+### Bug Fixes
+
+* added social images to the frontmatter of most blogs ([6f0fb54](https://github.com/mastermindzh/rickvanlieshout.com/commits/6f0fb545dfcbb59f677b2408622cdbc4de19325f))
+* navigate link now always returns to all articles beacuse history can be empty ([80c31d7](https://github.com/mastermindzh/rickvanlieshout.com/commits/80c31d70f43b6d4e41105a7ede5b2ed032e67eb7))
+* removed the estranged '1' from the description of the latest blogpost ([b963241](https://github.com/mastermindzh/rickvanlieshout.com/commits/b9632410d2369e09300231e7152941d850a4f421))
+* socialImage code doesnt properly use publicURL ([561faa3](https://github.com/mastermindzh/rickvanlieshout.com/commits/561faa3a4585a73f0dc8aba63d72146dd670b544))
+
+
+### New content
+
+* added a picture of Eddy's completed urn. Also changed my function title to Tech Lead ([c50c6fb](https://github.com/mastermindzh/rickvanlieshout.com/commits/c50c6fb9273ddd3fb180609fd977cf6d0dbbdb74))
+* **blog:** A blog post about my new hobby: Legos ([ab47ca8](https://github.com/mastermindzh/rickvanlieshout.com/commits/ab47ca863779167069030f152569cbfe8cab0e65))
+
+## [1.1.0](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.0.0...v1.1.0) (2022-11-07)
+
+
+### New content
+
+* Added a new post about adopting conventional commits ([b710c24](https://github.com/mastermindzh/rickvanlieshout.com/commits/b710c243aca703040716af52df4405a05eddd458))
+
 ## 1.0.0 (2022-11-05)
 
 

README.md

@@ -2,8 +2,8 @@
 
 This is the repository for my personal blog/website [rickvanlieshout.com](https://rickvanlieshout.com).
 
+[![Build Status](https://ci.mastermindzh.tech/api/badges/mastermindzh/rickvanlieshout.com/status.svg)](https://ci.mastermindzh.tech/mastermindzh/rickvanlieshout.com)
+
 ## todos
 
 - Links on printed pages need to display
-- Combine cookies/disclaimer in menu to make it shorter
-- Improve/replace menu on mobile (on old phones pages need a few scrolls)

categories.list.md

@@ -3,10 +3,12 @@
 A list of categories used in the blog
 
 <!-- prettier-ignore -->
-| category     | What it does                                             |
-| ------------ | -------------------------------------------------------- |
-| blog         | random blog stuff                                        |
-| IOT          | anything to do with IOT                                  |
-| Homelab      | anything to do with my homelab (including smart home...) |
-| Development  | anything to do with regular development                  |
-| exploits     | blogs about exploits and bugs in open-source software    |
+| category    | What it does                                             |
+| ----------- | -------------------------------------------------------- |
+| blog        | random blog stuff                                        |
+| IOT         | anything to do with IOT                                  |
+| Homelab     | anything to do with my homelab (including smart home...) |
+| Development | anything to do with regular development                  |
+| exploits    | blogs about exploits and bugs in open-source software    |
+| Lego        | blogs about Lego                                         |
+| house       | Content about the place I live                           |

content/pages/resume/index.md

@@ -20,20 +20,20 @@ template: "page"
 _Always_<br />
 A fair share of my private work is done through open-source media. I don't have a portfolio but I have a [Github](https://github.com/mastermindzh) where I share most things.
 
-**Software architect at INFORIT**<br />
+**Tech lead at INFORIT**<br />
 _2018 - Now_<br />
-At INFORIT I am responsible for the entire technical architecture of the new TFX stack that I launched shortly after 2018. This involves setting up and maintaining a modern event based microservice architecture on a Kubernetes based SaaS cloud solution and migrating to modern programming languages such as dotnetcore and React.
+At INFORIT I am responsible for the entire technical architecture of the new TFX stack that I launched shortly after 2018. This involves setting up and maintaining a modern event-based microservice architecture on a Kubernetes-based SaaS cloud solution and migrating to modern programming languages such as dotnetcore and React.
 
-The other main responsibility I have is creating and maintaining a coherent team of lead-developers by sharing knowledge, making decisions, and empowering leads to explore technologies outside of their comfort zone.
+The other main responsibility I have is creating and maintaining a coherent team of lead developers by sharing knowledge, making decisions, and empowering leads to explore technologies outside of their comfort zone.
 
-At INFORIT I also help with recruitment of new employees, setting up and maintaining agile strategies including proper test-management, and general software development.
-During my time at INFORIT we've grown from 5-7 in-house developers to 10, full-sized, SCRUM teams.
+At INFORIT I also help with the recruitment of new employees, setting up and maintaining agile strategies including proper test management, and general software development.
+During my time at INFORIT, we've grown from 5-7 in-house developers to 10, full-sized, SCRUM teams.
 
 Most relevant technologies used: dotnetcore, React, Angular, Kafka, RabbitMQ, Mongo, PostgreSQL, Growthbook, Docker & Kubernetes
 
 **Hanflex employee**<br />
 _September 2015 - July 2018_<br />
-I started working for the HAN (hogeschool van Arnhem en Nijmegen) in 2015. The HAN offers us different jobs (teaching others, open door days, etc) and we are free to reply and take those. I primarily respond to the open door days and the teaching jobs. On the open door days I usually work with 3d printers and a lasercutter.
+I started working for the HAN (hogeschool van Arnhem en Nijmegen) in 2015. The HAN offers us different jobs (teaching others, open door days, etc) and we are free to reply and take those. I primarily respond to the open-door days and the teaching jobs. On the open-door days, I usually work with 3d printers and a laser cutter.
 
 **mi-soft.nl**<br />
 _2006 - January 2019_<br />
@@ -50,7 +50,7 @@ _2005 - 2010_
 
 **HBO ICT / software engineering HAN - Nijmegen**<br />
 _2014 - 2018_<br />
-After a few rocky years I enrolled into college and I'm now trying to get a software engineering degree. I finished my first year with an average of 8.3/10 and will graduate in mid 2018.
+After a few rocky years I enrolled in college and I'm now trying to get a software engineering degree. I finished my first year with an average of 8.3/10 and will graduate in mid-2018.
 
 **Bilingual Senior General Secondary Education - Maaslandcollege Oss**<br />
 _2005 - 2010_
@@ -65,7 +65,7 @@ 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.
 
 - Hiring & interview training ([icm.nl](https://www.icm.nl/opleidingen-en-trainingen/hrm/selectiegesprekken-voeren/))
-- Conversation techniques & deescalation ([TIJDwinst.com](https://gesprekstechnieken.com/cursus-gesprekstechnieken/)).
+- Conversation techniques & de-escalation ([TIJDwinst.com](https://gesprekstechnieken.com/cursus-gesprekstechnieken/)](<https://gesprekstechnieken.com/cursus-gesprekstechnieken/>)).
 - Kubernetes
 - SEEBURGER b2b integration
 
@@ -82,7 +82,7 @@ All of the code is available on [Github](https://github.com/mastermindzh/han4pi.
 
 **Solidwinds developer**<br />
 _2015 - 2016_<br />
-Set up an architecture and start of an implementation for a scalable metrics collection system for windmills.
+Set up an architecture and started implementation for a scalable metrics collection system for windmills.
 
 **Quintor bulk-mail**<br />
 _April 2016 - June 2016_<br />
@@ -96,7 +96,7 @@ The list below is far from complete and unordered but focuses on the skills & te
 - Teaching, coaching & presenting
 - Agile development
 - Docker, Kubernetes & CI/CD
-- Event based architecture
+Event-based architecture
 - Reactive architecture
 - Typescript (Javascript)
 - dotnetcore

content/posts/2014/a-status-update/index.md

@@ -8,6 +8,7 @@ tags:
   - "school"
 description: ""
 disqusId: "10"
+socialImage: "./media/face.png"
 ---
 
 ## School
@@ -24,7 +25,7 @@ Last night a friend of mine tried installing the Numix square theme, something t
 
 That is why the team behind Numix has requested the package to be removed from the aur. And their request was granted. (as it should have been). Last night however we didn't have the tools handy to be able to make a purchase of the Icon theme, so I sent him my version and he installed that instead. I will however buy a license from them today, since I use the icon theme on pretty much all my machines.
 
-## Arduino sneak peak.
+## Arduino sneak peak
 
 I acquired some new toys for the arduino, two of them being the "Adafruit mini 8x8 LED matrix". To use them I had to install 2 libraries, and with those came "Example sketches". One of those example sketches was a "Robotic eye", naturally with me having 2 new toys I decided to create a little "face" (just eyes) with the prebuilt sketches. Anyways I thought that looked cool so I made a photo which you can view below:
 

content/posts/2014/pi-cluster-2-the-build/index.md

@@ -9,6 +9,7 @@ tags:
   - "pi"
 description: "Assembling all the parts and creating a cute little cluster"
 disqusId: "3"
+socialImage: "./media/improvising.jpg"
 ---
 
 So today I finally received the required parts to finish up my Raspberry pi cluster and I was **extremely** excited! To share this excitement with you lot here's a picture of all the parts I'll be using:

content/posts/2014/pi-cluster-3-installing-the-os/index.md

@@ -9,6 +9,7 @@ tags:
   - "pi"
 description: "Installing the raspberry pi OS (Raspbian) and prepping for a cluster"
 disqusId: "4"
+socialImage: "./media/windows.jpg"
 ---
 
 Installing an OS for a Raspberry pi is quite different from installing an OS on any other computer. We will have to write an "image" to the SD card rather than actually "installing" anything. Don't worry if you're confused just now, even I don't know what I'm rambling on about at times!

content/posts/2014/pi-cluster-4-setting-up-the-master-node/index.md

@@ -9,6 +9,7 @@ tags:
   - "pi"
 description: "We're going to set up the master node. The master node will be the one that gives work orders to the slaves."
 disqusId: "5"
+socialImage: "./media/pi1-prev.jpg"
 ---
 
 After installing raspbian to the sd card it's time to plug in that SD card and fire up the Raspberry pi. If everything went well you should end up with a screen similar to mine:

content/posts/2014/pi-cluster-5-expanding-the-cluster/index.md

@@ -9,6 +9,7 @@ tags:
   - "pi"
 description: "Today's blog post will be about expanding the cluster with more nodes."
 disqusId: "6"
+socialImage: "./media/pidark_full.JPG"
 ---
 
 In today's post we'll have a look at expanding the cluster with more nodes! We will have a look at how to clone them and how we can set up a universal login using ssh keys.
@@ -65,7 +66,7 @@ nano mpi_scripts/machinefile
 
 Simply add all the other pi's ip addresses to the file (each on a new line).
 
-## Testing!
+## Testing
 
 Now that we've added the pi's ip's to the machinefile we can use them from our master node. To test this we can run the following command:
 

content/posts/2014/shellshock-why-you-shouldnt-get-your-panties-in-a-bunch/index.md

@@ -10,12 +10,13 @@ tags:
   - "bug"
 description: "In today's blog I share my opinion on shellshock and why I think you shouldn't get your panties in a bunch! hah!"
 disqusId: "8"
+socialImage: "./media/hackzors.png"
 ---
 
 On September 24 2014, A Bash vulnerability, known as "Shellshock" was disclosed. This "bug" allows an attacker to run code on your machine, which is bad, very bad.
 
 <figure class="float-right" style="width: 420px">
-	<img src="/media/hackzors.png" alt="terminal with shellshock exploit">
+ <img src="/media/hackzors.png" alt="terminal with shellshock exploit">
 </figure>
 
 Now then, what exactly is "Shellshock". Shellshock is a "bug" (or vulnerability) that can be used to remotely run code on someone's machine by altering an environment variable. The real danger however lies in programs that can alter these variables without requiring root. Thus enabling anyone with access to your computer to run commands.

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

@@ -10,6 +10,7 @@ tags:
   - "raspberry"
 description: 'The creation process of a Raspberry PI based "game console" and its controllers'
 disqusId: "14"
+socialImage: "./media/fritzing_example.png"
 ---
 
 Even though this week has been extremely busy I wanted to bring you guys a little blog because the things I've been doing are truly wicked.
@@ -22,7 +23,7 @@ As some of you know, next semester I will be working on a (school issued) projec
 
 We do not yet know what this special assignment will entail but one thing we know for sure. WE ARE EXCITED ABOUT IT !
 
-## Maker thingies !
+## Maker thingies
 
 Even though I love software development, deep down I am also still a maker. And a maker likes to "make" things (go figure...), so when I got asked to do a project involving a Raspberry Pi I couldn't refuse. Even though I had no idea what exactly the project was going to entail I enlisted anyways.
 
@@ -34,7 +35,7 @@ So we came up with "pong". We are going to create simple controllers (based on p
 
 Throughout the entire project we will be using a [github repo](https://github.com/Mastermindzh/han4pi) to sync changes. One of the benefits of a github repo, apart from the actual git stuff, is that we automatically share all our code / designs. This means that anyone who is interested can either reproduce or follow along with us.
 
-## Enough talking, show us something!
+## Enough talking, show us something
 
 Well alright then, we've got a couple of things "ready" to show others. The first of which are the design schematics of our controllers and our "hubs".
 

content/posts/2015/raspberry-pi-screen/index.md

@@ -11,6 +11,7 @@ tags:
   - "touchscreen"
 description: "A look at the new official raspberry pi touchscreen"
 disqusId: "13"
+socialImage: "./media/box.jpg"
 ---
 
 Hey guys, as some of you know I was really, and I mean **really**, excited when they announced the official raspberry pi screen. Now why is that might you ask? Everything the raspberry pi people have released so far has been really solid. The boards, the sd cards, the wifi-dongle, all of them work absolutely fantastic! So as soon as I saw that the official screen was available for pre-order in the UK I ordered myself one and started waiting.
@@ -66,7 +67,7 @@ The red and black cables provide power (and ground) to the pi from the logic boa
 
 The moment had arrived, I plugged the pi into a battery pack (creating a makeshift tablet-like device) and waited. First boot wasn't all that promising... Touch didn't work and I had an annoying little square in the top right. This was however not my first rodeo with a pi and I quickly worked out that the little square indicates insufficient input power. I did a quick update and after rebooting touch worked wonders! The only thing my makeshift tablet test was missing was some sort of input method for the keyboard. For this I used a program called "matchbox", which was available in the default repository. After playing around with touch for a bit I switched to a solid 2 amp power supply and the little, coloured square disappeared, as suspected.
 
-## That's nice and all... But we want a video...
+## That's nice and all... But we want a video
 
 Of course I prepared a little video, wouldn't be a showcase if I hadn't now would it. So here goes:
 

content/posts/2015/tektree-part-1-a-christmas-surprise/index.md

@@ -8,6 +8,7 @@ tags:
   - "christmas"
 description: "A new maker project based on a big piece of lumber that my parents erected 🤔"
 disqusId: "15"
+socialImage: "./media/new.jpg"
 ---
 
 I'm very excited to announce a new maker project to you guys ! It will be simple, and thus reproducible, yet fun and quite possibly even useful. (oh, and a tad crazy)
@@ -24,7 +25,7 @@ I got the idea after my parents put up their christmas tree. My mom opted for a
 
 Of course! All code will be open source! All other stuff (drawings etc.) will also be opened up to the public. Everything can be found on [Github](https://github.com/Mastermindzh/TekTree) once again.
 
-## Step 1 - Design!
+## Step 1 - Design
 
 I've thought long and hard about what kind of "controller" I wanted to use. And of course I immediately wanted to use a Raspberry pi. But I asked myself, why a pi? Why not use something simpler (like an arduino) to control the lights and switches. After some serious brainstorming I decided to go with an arduino in the end. I figured the Raspberry pi zero would be too cumbersome to work with for a simple christmas tree. Besides, I have a lot more uses for a pi zero than I have for an arduino, and I got more arduino's laying around than pi zero's at the moment.
 

content/posts/2015/tektree-part-2-lasercutting/index.md

@@ -8,6 +8,7 @@ tags:
   - "christmas"
 description: "Dangerous things involving lasers and christmassy figures. Fun!"
 disqusId: "16"
+socialImage: "./media/plate.jpg"
 ---
 
 Last friday I actually got to cut the parts for my TekTree! So excited! This is by far the biggest "piece" I have ever laser cut but luckily everything went well. This in part is thanks to my brilliant friend [Ron](http://www.ronnabuurs.nl) who helped me create the sketches for the laser cutter. Thanks again [Ron](http://www.ronnabuurs.nl)!

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

@@ -8,6 +8,7 @@ tags:
   - "christmas"
 description: "Read about me being tangled with wires and generally just making a mess of things"
 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)
@@ -24,7 +25,7 @@ The arduino will get power from a regular adaptor. The only modification I did t
 
 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.
 
-## Well you could've made it way prettier... and....
+## 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.
 

content/posts/2015/what-ive-been-doing/index.md

@@ -7,9 +7,10 @@ tags:
   - life
 description: "A brief update of what I've been up to lately "
 disqusId: "12"
+socialImage: "./media/mic1.jpg"
 ---
 
-## My goals....
+## My goals
 
 Last blog we talked about a couple of goals I set for myself. As usual, not all of these have been completed. But instead of focusing on the ones I didn't complete I'll focus on the ones I did.
 
@@ -31,7 +32,7 @@ I kinda made this goal.... kinda. Hear me out on this one ! When I wrote my last
 
 Only a few of the goals I had set I haven't reached. I have given up on losing weight and because of the extra portfolio work I didn't really start LSR either. 5 new tutorials is a detable goal. I haven't exactly written 5 tutorials but I have done some work on mi-soft.nl (and still wrote 2 tutorials). And 1 blogpost.... well I'm trying !
 
-## Losing some of my stuff!
+## Losing some of my stuff
 
 As I mentioned before I have lost some of my hardware to a lightning strike. I didn't just lose my motherboard however. I also lost my microphone (blue snowball), my keyboard (razer blackwidow), my xbox controller receiver, 8gb's of ram and some random usb peripherals. Some of the stuff was insured and thus I have gotten some money for it. However I did not simply want to replace the lost stuff, I wanted to upgrade too.
 

content/posts/2017/keep-a-sata-port-available/index.md

@@ -8,6 +8,7 @@ tags:
   - "homelab"
 description: "What was meant to be a simple hard drive migration turned into a long night due to a rogue sata cable"
 disqusId: "25"
+socialImage: "./media/sata.jpg"
 ---
 
 Servers.... Both a joy and a pain. This week my server has just been a pain though.... What should've been a relaxing night with some easy peasy hard drive replacements quickly turned into hours of downtime and lots of yelling and screaming :(
@@ -16,7 +17,7 @@ During my holiday stay (at [Tropical Islands](https://www.tropical-islands.de) i
 
 So, the drives arrived, I ran a quick benchmark followed by a quick drive test and all seemed fine with the first drive. At this point, I decide to open up the server and replace the first 500 GB hard drive. After a lot of gymnastics (trying to read drive labels while the drives are in the drive bays) I finally figured out which drive I should replace and I went to work on that drive. I was careful not to touch any of the other cables to avoid accidentally unplugging them and I thought I had done a good job. I remember thinking: "Drive replaced, cables still connected, not much hassle so far. Let's turn it on". And so I did.
 
-## Prepare for trouble...
+## Prepare for trouble
 
 My good mood was rudely interrupted by a loud beep followed by three, rapid, beeps. At first, I thought it was the regular old "fan not spinning" error (I use several ways to limit fan speed) but on further inspection, I realised that the fan was spinning just fine. Things were about to turn bad....
 

content/posts/2022/adopting-convential-commits/index.md

@@ -0,0 +1,546 @@
+---
+title: Adopting conventional commits and standard versions in a git and npm codebase
+date: "2022-11-07"
+template: "post"
+category: "Development"
+tags:
+  - "git"
+  - "conventional commits"
+  - "semantic commits"
+  - "INFORIT"
+  - "Standard releases"
+
+description: "A dive into conventional commits and their benefit whilst releasing with standard versions."
+socialImage: "./media/husky-error.png"
+---
+
+At my place of work, [INFORIT](http://inforit.nl/), we are talking about adopting conventional commits as a company standard.
+However... debating commits is a tricky endeavor, everyone seems to have their own opinion about it and pretty much no one is following even the basic git rules (e.g title + body). It is precisely because of all of this that an earlier proposal about standardizing commit messages brought us nothing.
+
+Now though, a solid 2 years later, our company has grown tremendously!
+Not just in actual size, but also in knowledge. The developers that were resistant to standardization, hell... even git, have since come around to many of the ideas that were implemented. Especially after seeing their, often new, colleagues thrive with it.
+
+After seeing one of the new hires use conventional commits and their team being fine with it I decided to take the plunge and submit a proposal for it myself.
+Though the proposal only covers "conventional commits" and generating changelog entries from it I will be explaining the entire process of adopting conventional commits and standard versions in this blog post.
+
+## Getting started
+
+Before we can do anything we need a git repository.
+I'll be using a hosted git repository (on [Github](https://github.com/Mastermindzh/conventional-commits-showcase)) so I will clone it:
+
+```sh
+git clone git@github.com:Mastermindzh/conventional-commits-showcase.git
+```
+
+But, if you want to follow along without a hosted repository you can also manually create it yourself:
+
+```sh
+mkdir conventional-commits-showcase # create a folder with the name "conventional-commits-showcase"
+cd conventional-commits-showcase
+git init
+```
+
+## What exactly are "conventional commits"
+
+"[Conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)" is a specification that allows developers to write commits that are easily parsable by both developers and systems alike. Or in their own words:
+
+> The Conventional Commits specification is a lightweight convention on top of commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with SemVer, by describing the features, fixes, and breaking changes made in commit messages.
+
+According to the specifications the commit message should be structured as follows:
+
+```git
+<type>[optional scope]: <description>
+
+[optional body]
+
+[optional footer(s)]
+```
+
+The specification also allows us to specify a "footer" with breaking changes and ticket references.
+A full example, with a breaking change and a fictional ticket number of `95043` would look like this:
+
+```git
+feat(api): A test title for a change to the API
+
+I made a few changes to the API. Now I have to write a body.
+This is a looooooong body.
+Multiple lines :O
+
+BREAKING CHANGE: Well, I have to write something here... so :)
+fixes #95043
+```
+
+## Let's get the dependencies installed
+
+First, let's make sure our repository contains an npm environment.
+If not, run:
+
+```sh
+npm init
+```
+
+Now that we have a `package.json` file we can start installing some dependencies:
+
+```sh
+npm install --save-dev husky @commitlint/cz-commitlint commitizen commitlint standard-version
+```
+
+That will give us all the dependencies we need during this blog:
+
+| Dependency                                                                        | function                                                                              |
+| --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
+| [Husky](https://github.com/typicode/husky)                                        | Allows us to easily manage and execute git hooks                                      |
+| [commitlint](https://github.com/conventional-changelog/commitlint)                | Checks whether our commit messages meet the conventional commits specification        |
+| [@commitlint/cz-commitlint](https://github.com/conventional-changelog/commitlint) | adapter for commitlint to use commitizen                                              |
+| [commitizen](https://github.com/commitizen/cz-cli)                                | Provides a prompt during commit to fill in necessary information                      |
+| [standard-version](https://github.com/conventional-changelog/standard-version)    | Semver based release management and changelog generator based on conventional commits |
+
+## Setting up the commitlint and commitizen configuration
+
+First, let's add a script to the `package.json` that will do our commit for us:
+
+```json
+{
+  "scripts": {
+    "commit": "git-cz",
+  }
+}
+```
+
+Now, when we call `npm run commit` it will actually run `git-cz` which will start our commitizen prompt.
+You can try it if you want, it won't actually do anything but throw an error right now.
+We can also configure commitizen in the package.json as well, to do so we add `commitizen` to the `package.json`'s config object:
+
+```json
+{
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/cz-commitlint"
+    }
+  }
+}
+```
+
+If you ran `npm run commit` before and got an error, you can now do it again and face another, but different, error!
+
+Now we'll set up the actual commit linting. Start by creating a file `commitlint.config.js` with the following content:
+
+```js
+module.exports = {
+  rules: {
+    "body-leading-blank": [1, "always"],
+    "body-max-line-length": [2, "always", 100],
+    "footer-leading-blank": [1, "always"],
+    "footer-max-line-length": [2, "always", 100],
+    "header-max-length": [2, "always", 100],
+    "subject-case": [2, "never", ["start-case", "pascal-case", "upper-case"]],
+    "subject-empty": [2, "never"],
+    "subject-full-stop": [2, "never", "."],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "first type",
+        "second type",
+      ],
+    ],
+  },
+  prompt: {
+    questions: {
+      type: {
+        description: "This is the first prompt!",
+      },
+    },
+  },
+};
+
+```
+
+As you can see we have configured a whole bunch of things, but there are 2 things that matter for now:
+
+- a single "question" in our prompt.
+- a few types (first and second type)
+
+Staging a few files (`git add <file>`) and running `npm run commit` will show us our prompt and a choice between the two types:
+
+![terminal showing the result of npm run commit](/media/first-config-commit.png "output of 'npm run commit'")
+
+Now, our current config isn't very useful, so let's add some more types and a few additional questions (the defaults):
+
+```js
+module.exports = {
+  rules: {
+    "body-leading-blank": [1, "always"],
+    "body-max-line-length": [2, "always", 100],
+    "footer-leading-blank": [1, "always"],
+    "footer-max-line-length": [2, "always", 100],
+    "header-max-length": [2, "always", 100],
+    "subject-case": [2, "never", ["start-case", "pascal-case", "upper-case"]],
+    "subject-empty": [2, "never"],
+    "subject-full-stop": [2, "never", "."],
+    "type-case": [2, "always", "lower-case"],
+    "type-empty": [2, "never"],
+    "type-enum": [
+      2,
+      "always",
+      [
+        "build",
+        "chore",
+        "ci",
+        "docs",
+        "feat",
+        "fix",
+        "perf",
+        "refactor",
+        "revert",
+        "style",
+        "test",
+        "content",
+        "blog",
+      ],
+    ],
+  },
+  prompt: {
+    questions: {
+      type: {
+        description: "Select the type of change that you're committing",
+        enum: {
+          content: {
+            description: "A new piece of content",
+            title: "Content",
+            emoji: "✨",
+          },
+          feat: {
+            description: "A new feature",
+            title: "Features",
+            emoji: "✨",
+          },
+          fix: {
+            description: "A bug fix",
+            title: "Bug Fixes",
+            emoji: "🐛",
+          },
+          docs: {
+            description: "Documentation only changes",
+            title: "Documentation",
+            emoji: "📚",
+          },
+          style: {
+            description:
+              "Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)",
+            title: "Styles",
+            emoji: "💎",
+          },
+          refactor: {
+            description:
+              "A code change that neither fixes a bug nor adds a feature",
+            title: "Code Refactoring",
+            emoji: "📦",
+          },
+          perf: {
+            description: "A code change that improves performance",
+            title: "Performance Improvements",
+            emoji: "🚀",
+          },
+          test: {
+            description: "Adding missing tests or correcting existing tests",
+            title: "Tests",
+            emoji: "🚨",
+          },
+          build: {
+            description:
+              "Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)",
+            title: "Builds",
+            emoji: "🛠",
+          },
+          ci: {
+            description:
+              "Changes to our CI configuration files and scripts (example scopes: Docker, Kubernetes, npm, git)",
+            title: "Continuous Integrations",
+            emoji: "⚙️",
+          },
+          chore: {
+            description: "Other changes that don't modify src or test files",
+            title: "Chores",
+            emoji: "♻️",
+          },
+          revert: {
+            description: "Reverts a previous commit",
+            title: "Reverts",
+            emoji: "🗑",
+          },
+        },
+      },
+      scope: {
+        description:
+          "What is the scope of this change (e.g. component or file name)",
+      },
+      subject: {
+        description:
+          "Write a short, imperative tense description of the change",
+      },
+      body: {
+        description: "Provide a longer description of the change",
+      },
+      isBreaking: {
+        description: "Are there any breaking changes?",
+      },
+      breakingBody: {
+        description:
+          "A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself",
+      },
+      breaking: {
+        description: "Describe the breaking changes",
+      },
+      isIssueAffected: {
+        description: "Does this change affect any open issues?",
+      },
+      issuesBody: {
+        description:
+          "If issues are closed, the commit requires a body. Please enter a longer description of the commit itself",
+      },
+      issues: {
+        description: 'Add issue references (e.g. "fix #123", "re #123".)',
+      },
+    },
+  },
+};
+```
+
+As you can see we have a fair few questions, each with its own description.
+The one that will be new to most people is "content", which is a custom type that I added for this very blog.
+Reenacting our example commit from before will look like this:
+
+![terminal output of npm run commit showing the full commit](/media/full-commit.png "Looking good so far!")
+
+That's pretty nice already! Creating our example commit is nice and easy now.
+Next, let's add a git hook to stop us from messing up.
+
+## Setting up git hooks
+
+Without the git hook, we can simply make a commit that doesn't adhere to conventional commits:
+
+```sh
+mkdir test-files && touch test-files/test1
+git commit -m "this is not conventional :O"
+```
+
+Yikes! That is not what we want!
+Let's quickly revert it:
+
+```sh
+git reset --soft HEAD~1
+```
+
+Now, let's add a Husky git hook to combat future commits that are unconventional:
+
+```sh
+npx husky-init && npm install
+```
+
+This will automatically create the `.husky/pre-commit` file. Let's edit it and add commitlint:
+
+```sh
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"
+```
+
+Let's try our unconventional commit again:
+
+```sh
+touch test-files/test2
+git add test-files/test2
+git commit -m "this is not conventional :O"
+```
+
+![a commit that does not adhere to conventional commits and Husky stopping our commit](/media/husky-error.png "nice! It throws an error :)")
+
+Great, our commits seem to be working.
+Let's commit all the things we have now before we move on, crucially I will be using the regular git commit and providing the conventional commit syntax myself:
+
+```sh
+git commit -m "ci(git): Added conventional commits and some dependencies"
+```
+
+## Releases
+
+Now that we've successfully set up conventional commits we want to use those to release our first version and generate a changelog to boot.
+First, let's add some npm scripts again:
+
+```json
+{
+  "scripts": {
+    "release": "standard-version",
+    "release:minor": "standard-version --release-as minor",
+    "release:patch": "standard-version --release-as patch",
+    "release:major": "standard-version --release-as major",
+  }
+}
+```
+
+Now, let's add a configuration file for standard-version so that it will generate changelog entries.
+Create a file named `.versionrc.json` with the following content:
+
+```json
+{
+  "types": [
+    {
+      "type": "feat",
+      "section": "Features"
+    },
+    {
+      "type": "fix",
+      "section": "Bug Fixes"
+    },
+    {
+      "type": "content",
+      "section": "New content",
+      "hidden": true
+    },
+    {
+      "type": "chore",
+      "hidden": true
+    },
+    {
+      "type": "docs",
+      "hidden": true
+    },
+    {
+      "type": "style",
+      "hidden": true
+    },
+    {
+      "type": "refactor",
+      "hidden": true
+    },
+    {
+      "type": "perf",
+      "hidden": true
+    },
+    {
+      "type": "test",
+      "hidden": true
+    }
+  ],
+  "commitUrlFormat": "https://github.com/mastermindzh/conventional-commits-showcase/commits/{{hash}}",
+  "compareUrlFormat": "https://github.com/mastermindzh/conventional-commits-showcase/compare/{{previousTag}}...{{currentTag}}"
+}
+```
+
+The first thing we declare is an array of types, for every type we can define a "section" and whether it is hidden or not.
+All hidden types will not show up in the changelog, the others will be grouped by type and will have a header with the text specified in the "section" field.
+Let's try it:
+
+```sh
+git add .versionrc.json package.json
+git commit -m "ci(git): Set up standard-version"
+
+# and let's add a feature
+touch test-files/test3
+git add test-files/test3
+git commit -m "feat: Feature test3"
+```
+
+**note:** Where I've been using `git commit -m` you can also use `npm run commit` to get the interactive git prompt.
+Now, let's release a major version:
+
+```sh
+npm run release:major
+```
+
+![terminal output of npm run release:major](/media/first-release.png "our first release!")
+
+The output is kind enough to tell us how to push our changes to the remote so let's just do it:
+
+```sh
+git push --follow-tags origin master
+```
+
+Now let's have a look at our `git log`:
+
+![output of git log showing our own commits and a new commit of type chore with the release](./media/git-log.png "we have our own commits + a new release commit")
+
+Now, let's also look at our changelog:
+
+![the first changelog](/media/changelog-1.png "very neat!")
+
+That looks great! `standard-version` automatically added a header for our version, sub-headers for our types and even linked our commits to the remote as configured in `.versionrc.json`.
+
+## Let's play a little
+
+Now that we have a successful setup we can try a few commits and releases. Let's start with 2 bugfixes and a new feature:
+
+```sh
+# our first bugfix
+touch test-files/test4
+git add test-files/test4
+git commit -m "fix: fixed test 4 by doing fancy stuff"
+
+# our second bugfix
+touch test-files/test5
+git add test-files/test5
+git commit -m "fix: test5 was difficult, but we got it"
+
+# and finally a new feature
+touch test-files/test6
+git add test-files/test6
+git commit -m "feat: Added feature number 6! So nice"
+```
+
+Now we'll release this as a minor, because we added a new feature. Execute
+
+```sh
+npm run release:minor
+```
+
+![the changelog with different sections and their commits](/media/changelog-2.png "our updated changelog")
+
+### breaking changes
+
+All is well, but let's introduce a breaking change:
+
+```sh
+touch test-files/test7
+git add test-files/test7
+npm run commit
+```
+
+Output:
+
+```shell
+> conventional-commits-showcase@1.1.0 commit
+> git-cz
+
+cz-cli@4.2.5, @commitlint/cz-commitlint@17.2.0
+
+? Select the type of change that you're committing: feat
+? What is the scope of this change (e.g. component or file name) (press enter
+to skip): (max 96 chars)
+ (0)
+? Write a short, imperative tense description of the change: (max 96 chars)
+ (38) feature 7, with a few breaking changes
+? Provide a longer description of the change (press enter to skip):
+ We broke some stuff, woopsie
+? Are there any breaking changes?: Yes
+? Describe the breaking changes:
+ api endpoint 'test7' now returns json instead of xml
+? Does this change affect any open issues?: No
+[master e7f7b0e] feat: feature 7, with a few breaking changes
+ 1 file changed, 0 insertions(+), 0 deletions(-)
+ create mode 100644 test-files/test7
+
+```
+
+Which gives us the following changelog:
+
+![changelog with a very clear breaking changes banner](/media/changelog-3.png "everyone will see this message, no users will complain, no way!")
+
+## Conclusion
+
+Phew! That was quite a long post.
+Hopefully, you've managed to set up conventional commits and/or standard-releases to your liking and if not there's always the comment section.
+The end-result can be found on [Github](https://github.com/Mastermindzh/conventional-commits-showcase), the [Changelog](https://github.com/Mastermindzh/conventional-commits-showcase/blob/master/CHANGELOG.md) is especially pretty.

content/posts/2022/ode-to-eddy/index.md

@@ -9,11 +9,12 @@ tags:
   - "dog"
 
 description: "Today we had to give a lethal injection to my furry friend Eddy. He will be honored appropriately and this post is one of the tools to do that."
+socialImage: "./media/eddy-2011.jpg"
 ---
 
 ![headshot of Eddy in his early years, jack-russel and fox mix](./media/eddy-2011.jpg "This is Eddy, January 30, 2011")
 
-Unfortunately I've had to put my dog Eddy down today.
+Unfortunately, I've had to put my dog Eddy down today.
 Eddy was my best friend. Not just my best furry friend, but my best friend period.
 He never failed to bring me joy, he was always there when I needed him and he helped me overcome some of life's biggest obstacles just by existing.
 
@@ -30,8 +31,8 @@ I love you Eddy. Always have. Always will. Rest in peace my friend.
 ## Why Eddy had to be put down
 
 <figure class="float-right" style="width: 240px">
-	<img src="/media/eddy-ribbon.jpg" alt="Eddy with a ribbon penetrating his body so the wounds won't close">
-	<figcaption>Such a cute boy with his ribbon, July 2016</figcaption>
+ <img src="/media/eddy-ribbon.jpg" alt="Eddy with a ribbon penetrating his body so the wounds won't close">
+ <figcaption>Such a cute boy with his ribbon, July 2016</figcaption>
 </figure>
 
 Of course this isn't the first time Eddy has had some issues with his health.
@@ -58,8 +59,8 @@ Though, after some thought I realized something that I'd realized before:
 > \- from the poem `thoughts` by Rick van Lieshout
 
 <figure class="float-left" style="width: 240px">
-	<img src="/media/eddy-hat.jpg" alt="Eddy with a beige hat on">
-	<figcaption>Very professional doggy. Early 2022</figcaption>
+ <img src="/media/eddy-hat.jpg" alt="Eddy with a beige hat on">
+ <figcaption>Very professional doggy. Early 2022</figcaption>
 </figure>
 
 And though those feelings are true. I also can't help but shake the sorrow I feel.
@@ -77,8 +78,14 @@ Now that Eddy has left me completely I will just have to see where life takes me
 
 ## Farewell
 
-In the end though, I don't think anything can truly replace Eddy.
+In the end, though, I don't think anything can truly replace Eddy.
 I got Eddy an [urn](https://www.urnwinkel.nl/fotolijst-dierenurn-zwart.html) so I can have him in my life for the rest of mine.
-Sleep well friend.
+Sleep well, friend.
 
 ![Eddy lying on a blue towel at the veterinarian after receiving the lethal injection. He looks peaceful](./media/eddy-post-mortem.jpg 'Eddy peacefully "sleeping" post mortem')
+
+## The urn
+
+It took way too long for the urn to be filled with pictures but in the end, I've gotten it done and I hung Eddy's urn in my bedroom.
+
+![A black picture frame with 4 pictures of Eddy ranging from young to old](./media/eddy-urn.jpg "A lovely memory of Eddy")

content/posts/2023/starting-a-new-hobby-that-might-just-take-over-my-house/index.md

@@ -0,0 +1,97 @@
+---
+title: Uncovering a new hobby that might just take over my entire house
+date: "2023-02-14"
+template: "post"
+category: "blog"
+tags:
+  - "Lego"
+  - "house"
+description: "What started as a simple decoration piece to fill some empty space in my home quickly grew into a new hobby of which the remnants can be found throughout my house"
+---
+
+## The problem
+
+Even though my house is fully furnished, one could say it's quite light on decorations. You see, I'm not really one for many of the popular decoration pieces like candles, picture frames, animal skins, or decorative statues.
+
+The only thing I really like is stone and woodwork. This means that I have enough decorations to fill the downstairs, kind off.
+You see, some of the decorations that I also like are plants (mainly because they go in large stone pots) but I'm not great at keeping them alive.
+
+(Un)fortunately, there is more to my house than just the downstairs. There are 2 more floors that are, once again, furnished but not really decorated.
+The only room that is pretty well decorated is my office, which has various little nerdy things on little black shelves and 12 beautiful Displates.
+
+One of the main problem areas is my bedroom. I don't have any entertainment in my bedroom (by choice.. it's a place to sleep, not watch telly!) but I do have some [FJallbo](https://www.ikea.com/gb/en/p/fjaellbo-shelving-unit-black-70339291/) shelving units.
+Of course, those shelves are mostly empty... they are only adorned by some books, clothes and a few stuffed animals.
+
+## The solution, or so I thought
+
+<figure class="float-right" style="width: 240px">
+ <img src="/media/orchids.jpg" alt="Lego orchids on a wooden table">
+ <figcaption>Pretty little orchids!</figcaption>
+</figure>
+
+I don't know when exactly it happened but a few months ago I stumbled across "Lego plants" on Youtube. Plants that look quite good and don't die.
+The first plant I got was the little bonsai and the second one were the orchids.
+After that, I quickly picked up the cacti and bouquet.
+
+And as you can probably figure out by now... a new hobby was born... Lego.
+Lego allows me to fill up the empty space with whatever I want whilst keeping things interesting and giving me something to do to boot.
+
+## Christmas time's a coming
+
+After building a few smaller items I felt ready to tackle a "project", one that would allow me to play with Legos and at the same time get a few friends and family members off my back about not having Christmas decorations.
+That's right. I set out to build a Christmas village from lego.
+
+I emptied a shelf, picked up some [white base plates](https://www.lego.com/en-us/product/white-baseplate-11010), procured a string of small Christmas lights, and bought some Christmassy-looking Lego sets:
+
+- [Holiday main street](https://www.lego.com/en-us/product/holiday-main-street-10308)
+- [Santa's sleigh](https://www.lego.com/en-nl/product/santa-s-sleigh-40499)
+- [Santa's visit](https://www.lego.com/en-nl/product/santa-s-visit-10293)
+- [Winter elve's scene](https://www.lego.com/en-nl/product/winter-elves-scene-40564)
+- [Winter polar bears](https://www.lego.com/en-us/product/wintertime-polar-bears-40571)
+- [Santa's workshop](https://www.lego.com/en-nl/product/santa-s-workshop-40565?CMP=AFC-AffiliateUK-lFWN%2FyX1zOg-3425491-124738-1)
+
+The result of a few days of work and the Christmas village has been completed:
+
+!["A bookcase shelf filled with Lego Christmas builds"](/media/christmas.jpg "Happy little Christmas village")
+
+## A new room to build lego
+
+Now that the Lego virus has taken hold of me I am quickly growing tired of needing to move stuff off my dining table just to build some Legos.
+Likewise, I dislike having to move half-finished Lego builds just to use my dining table.
+It was time to upgrade my spare bedroom with a desk and some other things to build a comfortable space.
+
+I bought the following items:
+
+- [3x Alex drawers](https://www.ikea.com/gb/en/p/alex-drawer-unit-white-00473546/)
+- [2x Karlby countertop](https://www.ikea.com/gb/en/p/karlby-worktop-walnut-veneer-30335191/)
+- [1x Nissafors trolley](https://www.ikea.com/gb/en/p/nissafors-trolley-black-20399777/)
+- [1x fniss waste bucket](https://www.ikea.com/gb/en/p/fniss-waste-bin-black-60295438/)
+- [2x SKÅDIS pegboard](https://www.ikea.com/gb/en/p/skadis-pegboard-black-50534378/)
+  - [5x SKÅDIS planks](https://www.ikea.com/gb/en/p/skadis-shelf-white-00320799/)
+  - [3x SKÅDIS cup](https://www.ikea.com/gb/en/p/skadis-container-white-20320798/)
+  - [5x SKÅDIS hooks](https://www.ikea.com/gb/en/p/skadis-hook-white-20320802/)
+  - [1x SKÅDIS storage baskets](https://www.ikea.com/gb/en/p/skadis-storage-basket-set-of-3-white-50517760/)
+  - [2x SKÅDIS containers with lid](https://www.ikea.com/gb/en/p/skadis-container-with-lid-white-80335909/)
+
+Which, with some effort, got turned into the following room:
+
+![Dark walnut L-shaped corner desk with 3 white drawers holding it up](/media/room-just-built.jpg "First build of the room, no display or audio yet")
+![Black trolley with 3 shelves filled with Lego boxes](/media/trolly.jpg "A little trolley to hold the new Lego sets")
+![A monitor arm is placed on the worktop and now holds a nice 27-inch monitor.](/media/adding-a-monitor.jpg "I added a monitor so I could watch some series or listen to music.")
+![A JBL boombox placed under the monitor with the cable hidden out-of-sight](/media/cable-box-and-speaker.jpg "Sound from just the monitor won't do so I added a nice JBL speaker")
+![The finished room is in use, bags of Lego are scattered over the worktop and the Lego build itself is starting to take some form](/media/building-the-owl.jpg "the finished room in use, building the Harry Potter special edition owl")
+
+The space I've created with this Ikea build works very well for building Legos!
+The mounted desk light (which I got from Amazon) has also proven to be quite handy. I can move the light however I like, be it to shed some more light on the
+little booklet with instructions or on the build itself to illuminate some of the darker pieces at night. (brown/black)
+Turning on both lights (there's one hidden behind the monitor/speaker) ensures that there's enough light in the room that I don't have to turn on the main light
+which makes the room feel nice and cozy.
+
+## More of my creations
+
+I'd like to round off this blog post by showing some of the other builds I've since completed:
+
+![Saturn V from lego](/media/rocket.jpeg "Saturn V")
+!["Harry Potter's owl Hedwig perched on some books"](/media/owl.jpeg "Shout out to Hedwig! (and Ravenclaw)")
+!["A flower bouquet in a clear vase"](/media/bouquet.jpg "The desk felt a bit empty so I added some flowers to spice things up")
+![Two of the succulents in decorative pots with some shelves](/media/flower-pots.jpg "Two of the succulents in decorative pots with some shelves")

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "rickvanlieshout-com",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "rickvanlieshout-com",
-      "version": "1.0.0",
+      "version": "1.2.0",
       "license": "MIT",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.2.0",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rickvanlieshout-com",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "My personal blog / website",
   "keywords": [
     "gatsby",

src/components/PostHeader/PostHeader.tsx

@@ -24,7 +24,7 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
       </span>
 
       <span className="hideInPrintView">
-        <a onClick={() => navigate(-1)} style={{ lineHeight: "50px", marginRight: "10px" }}>
+        <a onClick={() => navigate("/")} style={{ lineHeight: "50px", marginRight: "10px" }}>
           ↩ Back to articles
         </a>
         <ThemeSwitcher showLabel={false} />

src/templates/PageTemplate/PageTemplate.tsx

@@ -25,7 +25,7 @@ const PageTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage}
+      socialImage={socialImage?.publicURL}
     >
       <Sidebar />
       <Page title={title}>
@@ -44,7 +44,9 @@ export const query = graphql`
         title
         date
         description
-        socialImage
+        socialImage {
+          publicURL
+        }
       }
     }
   }

src/templates/PostTemplate/PostTemplate.tsx

@@ -23,7 +23,7 @@ const PostTemplate: React.FC<Props> = ({ data }: Props) => {
     <Layout
       title={`${title} - ${siteTitle}`}
       description={metaDescription}
-      socialImage={socialImage}
+      socialImage={socialImage?.publicURL}
     >
       <Post post={data.markdownRemark} />
     </Layout>
@@ -47,7 +47,9 @@ export const query = graphql`
         description
         tags
         title
-        socialImage
+        socialImage {
+          publicURL
+        }
         disqusId
       }
     }

src/types/frontmatter.ts

@@ -5,7 +5,7 @@ interface Frontmatter {
   template: string;
   description?: string;
   tags?: Array<string>;
-  socialImage?: string;
+  socialImage?: { publicURL: string };
   disqusId?: string;
 }