Merge pull request #82 from Mastermindzh/snyk-upgrade-632e856fd2c1ab0ced167ec37b17f0fe

[Snyk] Upgrade disqus-react from 1.1.5 to 1.1.6

.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

.github/workflows/release.yml

@@ -19,7 +19,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16.14.0
+          node-version: 22.12.0
 
       - name: Install dependencies
         run: npm ci

.nvmrc

@@ -0,0 +1 @@
+19.8.1

.vscode/settings.json

@@ -1,12 +1,26 @@
 {
     "cSpell.words": [
+        "codepen",
+        "disqus",
+        "fontawesome",
+        "fortawesome",
         "frontmatter",
-        "slsw"
+        "Lieshoutt",
+        "Rickvan",
+        "rickvanlieshoutcom",
+        "slsw",
+        "soundcloud",
+        "todos",
+        "weibo"
     ],
     "grammarly.selectors": [
         {
             "language": "markdown",
             "scheme": "file"
         }
-    ]
+    ],
+    "sonarlint.connectedMode.project": {
+      "connectionId": "public-sonarcloud",
+      "projectKey": "Mastermindzh_rickvanlieshout.com"
+    }
 }

CHANGELOG.md

@@ -2,9 +2,90 @@
 
 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.0.0 (2022-11-05)
+### [1.3.1](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.3.0...v1.3.1) (2023-10-29)
 
 
+### Bug Fixes
+
+* fixed tags and categories in several blog posts ([7019f34](https://github.com/mastermindzh/rickvanlieshout.com/commits/7019f340050c04eed6065c4ddd4582d6b2d22b9b))
+* now setting og:url correctly as well as the canonical url ([e065f16](https://github.com/mastermindzh/rickvanlieshout.com/commits/e065f16fb505eb8f9e5acef6f92c5a016e276ebc))
+* set current url tags in both ssr and browser space ([1c4c9d0](https://github.com/mastermindzh/rickvanlieshout.com/commits/1c4c9d058a7382ebe52dd1b188b22ca8d7a185c3))
+* several fixes to improve ahrefs site score ([8245e1f](https://github.com/mastermindzh/rickvanlieshout.com/commits/8245e1f0d8854cd6a727a8b837ee3259ee040d48))
+* upgrade gatsby from 5.12.1 to 5.12.3 ([043d08e](https://github.com/mastermindzh/rickvanlieshout.com/commits/043d08e58f9962688bd615b8e8d535e4111e7aa2))
+* upgrade gatsby from 5.12.3 to 5.12.4 ([f13f40d](https://github.com/mastermindzh/rickvanlieshout.com/commits/f13f40df35cc0230ddcf7766a7b2e73477696439))
+
+## [1.3.0](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.2.3...v1.3.0) (2023-09-23)
+
+
+### Features
+
+* added my public keys to a keys.json file in the root of the website ([8a2f19e](https://github.com/mastermindzh/rickvanlieshout.com/commits/8a2f19e8a9abec4a3529c08cd06cf7e042e67725))
+
+
+### Bug Fixes
+
+* 404 on lego.com page of removed product ([0dc9773](https://github.com/mastermindzh/rickvanlieshout.com/commits/0dc97732e81458b39cccc6c100516e05f245697f))
+* added links to orphaned categories and tags pages ([0e9946c](https://github.com/mastermindzh/rickvanlieshout.com/commits/0e9946c92eb5022961a9f457ce82636a60e0e9ee))
+* added opengraph tags ([e6ebd5b](https://github.com/mastermindzh/rickvanlieshout.com/commits/e6ebd5b79f17ac41e4e1954857da8cd8ab50224a))
+* **opengraph:** added mandatory opengraph tags to all pages. Also fixed some other minor bugs ([98a3eb7](https://github.com/mastermindzh/rickvanlieshout.com/commits/98a3eb71f55c17da7964d6c5014e599a459329e1))
+* package.json & package-lock.json to reduce vulnerabilities ([9dc1f62](https://github.com/mastermindzh/rickvanlieshout.com/commits/9dc1f6275fdd1f6fe5fd9485f554345a1df268ec))
+* remove noindex and noindex follow tags ([d72e301](https://github.com/mastermindzh/rickvanlieshout.com/commits/d72e30196df5ca6944ae6dde7b4417c9efeb38d3))
+* removed nofollow links to my own website ([bebfe16](https://github.com/mastermindzh/rickvanlieshout.com/commits/bebfe1638e9ef1dc35b0b0fd6e8907edd344951f))
+* several pages linked to redirected urls. This replaces those links with the destination instead ([b5126bf](https://github.com/mastermindzh/rickvanlieshout.com/commits/b5126bf051dcdfe7159d24eb2cddeb3f8e1ceee8))
+* solve 404 on front-thumb image ([5344b98](https://github.com/mastermindzh/rickvanlieshout.com/commits/5344b98f8e37fb661a1ec70aaba1c5ef92cfa370))
+* updated npm packages and pinned unist-util-find to 1.0.2 to fix build errors ([5ea6e0a](https://github.com/mastermindzh/rickvanlieshout.com/commits/5ea6e0a20f9c8aff33a9ae18143e6f8fd3634127))
+* upgrade gatsby-plugin-image from 3.11.0 to 3.12.0 ([05662d2](https://github.com/mastermindzh/rickvanlieshout.com/commits/05662d2c492ae70575947b9327d64fa642a63698))
+* upgrade multiple dependencies with Snyk ([cbaca6f](https://github.com/mastermindzh/rickvanlieshout.com/commits/cbaca6f4cd9ba9ff290fcb2ede5a81d8c0e3f285))
+* upgrade multiple dependencies with Snyk ([10cbe94](https://github.com/mastermindzh/rickvanlieshout.com/commits/10cbe94397c43f80ff28cb5c81126fc3af632547))
+* upgrade multiple dependencies with Snyk ([3ef5ca5](https://github.com/mastermindzh/rickvanlieshout.com/commits/3ef5ca570b05e0cbc6c670eb9df179b1be1dba9c))
+* upgrade multiple dependencies with Snyk ([46c12f8](https://github.com/mastermindzh/rickvanlieshout.com/commits/46c12f8c98ab8beb7b6be040fa73761eb73b2dd9))
+
+
+### New content
+
+* A new blog about the LegoLeague event held at INFORIT ([4e6b042](https://github.com/mastermindzh/rickvanlieshout.com/commits/4e6b042a44d9a9f5d68dba653c1472be80d21ce9))
+* **legoleague:** fixed some writing ([92245be](https://github.com/mastermindzh/rickvanlieshout.com/commits/92245be1883f7e136dae7888a64a472cf6597180))
+
+### [1.2.3](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.2.2...v1.2.3) (2023-04-19)
+
+### Bug Fixes
+
+* dependency updates and the removal of gatsby-plugin-offline ([302c6d0](https://github.com/mastermindzh/rickvanlieshout.com/commits/302c6d00e2555475a7fec6a63b78146d1d502a8b))
+
+### [1.2.2](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.2.1...v1.2.2) (2023-04-12)
+
+### Bug Fixes
+
+* .language-text not breaking on mobile ([5fe2d8e](https://github.com/mastermindzh/rickvanlieshout.com/commits/5fe2d8e834a4d7588f04e4a3b1608618253f6d52))
+
+### New content
+
+* blogpost about flashing lsi 9211 cards ([ebca5f9](https://github.com/mastermindzh/rickvanlieshout.com/commits/ebca5f980d8e1a109494c5db15d2728bcfbc964b))
+
+### [1.2.1](https://github.com/mastermindzh/rickvanlieshout.com/compare/v1.2.0...v1.2.1) (2023-03-26)
+
+## [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)
+
 ### Features
 
 * add autolink headers support ([4d38e96](https://github.com/mastermindzh/rickvanlieshout.com/commits/4d38e9633242dbf3adbd47a77c807f990be3acd8))
@@ -16,11 +97,10 @@ All notable changes to this project will be documented in this file. See [standa
 * up version ([1c175ab](https://github.com/mastermindzh/rickvanlieshout.com/commits/1c175abff92bcf56d8809dd9caf8e16de0f4a849))
 * **workflows:** add release workflow ([25cf13a](https://github.com/mastermindzh/rickvanlieshout.com/commits/25cf13ae57084be63d8f42581b7c6b5c976930ed))
 
-
 ### Bug Fixes
 
 * [#955](https://git.mastermindzh.tech/mastermindzh/rickvanlieshout.com/issues/955) ([6686a6c](https://github.com/mastermindzh/rickvanlieshout.com/commits/6686a6c1edc109152a80e92d684c114be9a287ab))
-* add __BASE_PATH__ to jest config ([5e00151](https://github.com/mastermindzh/rickvanlieshout.com/commits/5e00151d0b153863324194a1f1a92c88b2d8937f))
+* add **BASE_PATH** to jest config ([5e00151](https://github.com/mastermindzh/rickvanlieshout.com/commits/5e00151d0b153863324194a1f1a92c88b2d8937f))
 * add flow-typed ([b9aaa81](https://github.com/mastermindzh/rickvanlieshout.com/commits/b9aaa81ec257f48f30f1984f63b6204fc2d92b5e))
 * align the headers ([01fe350](https://github.com/mastermindzh/rickvanlieshout.com/commits/01fe35095c11b94eae34a17c64ea626d4d3cf665))
 * cannot build gatsby sitemap [#199](https://git.mastermindzh.tech/mastermindzh/rickvanlieshout.com/issues/199) ([d12a922](https://github.com/mastermindzh/rickvanlieshout.com/commits/d12a9220ddd71ebbfeadcca4736d2453f9fa17ab))
@@ -452,7 +532,6 @@ All notable changes to this project will be documented in this file. See [standa
 * update yarn.lock ([5f23174](https://github.com/mastermindzh/rickvanlieshout.com/commits/5f231740a9472f2e5545b1611ce9af8eec40246d))
 * use aliase [#199](https://git.mastermindzh.tech/mastermindzh/rickvanlieshout.com/issues/199) ([46743e9](https://github.com/mastermindzh/rickvanlieshout.com/commits/46743e9e1ab569934bc04e9d0d4816b1c3de668f))
 
-
 ### New content
 
 * writing as an architect is hard ([027add7](https://github.com/mastermindzh/rickvanlieshout.com/commits/027add7be1b119dbeb2027497a18cd969e939e77))

README.md

@@ -1,9 +1,9 @@
 # Rickvanlieshout.com
 
-This is the repository for my personal blog/website [rickvanlieshout.com](https://rickvanlieshout.com).
+This is the repository for my personal blog/website [rickvanlieshout.com](https://www.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/config.json

@@ -14,31 +14,39 @@
     },
     {
       "label": "About me",
-      "path": "/pages/about"
+      "path": "/pages/about/"
     },
     {
       "label": "Resume",
-      "path": "/pages/resume"
+      "path": "/pages/resume/"
     },
     {
       "label": "Contact me",
-      "path": "/pages/contacts"
+      "path": "/pages/contacts/"
     }
   ],
   "legalMenu": [
     {
       "label": "Cookies",
-      "path": "/pages/legal/cookies"
+      "path": "/pages/legal/cookies/"
     },
     {
       "label": "Disclaimer",
-      "path": "/pages/legal/disclaimer"
+      "path": "/pages/legal/disclaimer/"
+    },
+    {
+      "label": "Categories",
+      "path": "/categories/"
+    },
+    {
+      "label": "Tags",
+      "path": "/tags/"
     }
   ],
   "author": {
     "name": "Rick van Lieshout",
-    "photo": "/me.png",
-    "bio": "I'm a passionate software architect that bifurcates his love between great software development and leading others to learn and adopt new things.",
+    "photo": "/content/me.png",
+    "bio": "I'm a passionate CTO who bifurcates his love between great software development and leading others in their continuous improvement journeys",
     "contacts": {
       "email": "info@rickvanlieshout.com",
       "github": "mastermindzh",

content/pages/legal/cookies/index.md

@@ -41,4 +41,4 @@ All well known browser offer a way for you to revoke any cookie. Explore the lin
 
 - [Deleting cookies in Chrome](https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en)
 - [Deleting cookies in Firefox](https://support.mozilla.org/en-US/kb/delete-cookies-remove-info-websites-stored)
-- [Deleting cookies in Edge](https://privacy.microsoft.com/en-us/windows-10-microsoft-edge-and-privacy)
+- [Deleting cookies in Edge](https://support.microsoft.com/en-us/windows/microsoft-edge-browsing-data-and-privacy-bb8174ba-9d73-dcf2-9b4a-c582b4e640dd)

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 />
+**CTO at Frontliners (previously 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 Frontliners 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 Frontliners 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 Frontliners, 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_
@@ -64,9 +64,10 @@ 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 & deescalation ([TIJDwinst.com](https://gesprekstechnieken.com/cursus-gesprekstechnieken/)).
-- Kubernetes
+- 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)
 - SEEBURGER b2b integration
 
 ## Projects
@@ -82,7 +83,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 +97,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
@@ -105,4 +106,4 @@ The list below is far from complete and unordered but focuses on the skills & te
 - NoSQL (Mongo, Postgre)
 - SQL (MSSQL, Postgre, sqlite, mariadb)
 - Elasticsearch & Kibana
-- Kafka
+- Kafka / RabbitMQ

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-1-shopping/index.md

@@ -2,7 +2,7 @@
 title: "Raspberry pi cluster Step 1: Shopping"
 date: "2014-09-05 23:00"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "raspberry"
   - "cluster"
@@ -19,7 +19,7 @@ A cluster is basically a group of computers that work together to run a very int
 
 ## What software are you going to use?
 
-I am going to use [raspbian](http://www.raspbian.org/) for the OS and I will be using python (and [mpi4py](http://mpi4py.scipy.org/)) to program the cluster.
+I am going to use [raspbian](https://www.raspbian.org/) for the OS and I will be using python (and [mpi4py](https://mpi4py.scipy.org/)) to program the cluster.
 
 ## What did you need and how much did it cost
 
@@ -35,9 +35,9 @@ Below you will find a list of items you would need if you were to build a 4 pi c
 
 This all adds up to ( €180.43 which is $233.76 according to [google](https://www.google.nl/search?site=&source=hp&q=180.43+euro+to+dollar&oq=180.43+euro+to+dollar&gs_l=hp.3..33i21l2.879.5191.0.5287.28.24.3.1.1.0.157.1273.22j1.23.0....0...1c.1.53.hp..9.19.917.0.jex09uDmbow))
 
-I ordered **some** of the stuff from a shop in china called "[banggood](http://banggood.com)". Since they deliver all around the world I will add the links to those items below.
+I ordered **some** of the stuff from a shop in china called "[banggood](https://banggood.com)". Since they deliver all around the world I will add the links to those items below.
 
-- The raspberry pi cases can be found [here](http://www.banggood.com/Transparent-Box-Case-Shell-For-Raspberry-Pi-512MB-Version-p-923015.html)
-- The 8gb SD cards can be found [here](http://www.banggood.com/8GB-SD-HC-SDHC-Flash-Secure-Digital-Memory-Card-Camera-p-938458.html)
-- The USB hub can be found [here](http://www.banggood.com/Wholesale-Laptop-PC-New-Black-4-Port-Tap-USB-2_0-High-Speed-Hub-ON-Or-OFF-Sharing-Switch-p-45306.html)
-- The USB power cables can be found [here](http://www.banggood.com/Retractable-Micro-USB-Data-Sync-Charger-Cable-For-Cellphones-p-90245.html)
+- The raspberry pi cases can be found [here](https://www.banggood.com/Transparent-Box-Case-Shell-For-Raspberry-Pi-512MB-Version-p-923015.html)
+- The 8gb SD cards can be found [here](https://www.banggood.com/8GB-SD-HC-SDHC-Flash-Secure-Digital-Memory-Card-Camera-p-938458.html)
+- The USB hub can be found [here](https://www.banggood.com/Wholesale-Laptop-PC-New-Black-4-Port-Tap-USB-2_0-High-Speed-Hub-ON-Or-OFF-Sharing-Switch-p-45306.html)
+- The USB power cables can be found [here](https://www.banggood.com/Retractable-Micro-USB-Data-Sync-Charger-Cable-For-Cellphones-p-90245.html)

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

@@ -2,18 +2,19 @@
 title: "Raspberry pi cluster Step 2: Assembling the hardware"
 date: "2014-09-10"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "raspberry"
   - "cluster"
   - "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:
 
-![picture of all the parts spread on the mat](./media/pi_overview_full.JPG "all the bits!")
+![picture of all the parts spread on the mat](./media/pi_overview_full.jpg "all the bits!")
 
 I began by building the Raspberry pi "tower", sadly I forgot to take a picture with the DSLR so I only have this one cell image to show you guys:
 

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

@@ -2,13 +2,14 @@
 title: "Raspberry pi cluster Step 3: Installing the OS"
 date: "2014-09-14"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "raspberry"
   - "cluster"
   - "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!
@@ -17,7 +18,7 @@ Installing an OS for a Raspberry pi is quite different from installing an OS on
 
 First off, if you want to use Windows, skip this bit by clicking [here.](#windows)
 
-First we will have to download the .img from the Raspbian website, we can do so by clicking [here](http://downloads.raspberrypi.org/raspbian_latest). After downloading the image we can use a kernel application known as "dd" to write the file to our SD card. We will first need to find out which /dev/ the SD card is currently using. To do this we can use the following command:
+First we will have to download the .img from the Raspbian website, we can do so by clicking [here](https://downloads.raspberrypi.org/raspbian_latest). After downloading the image we can use a kernel application known as "dd" to write the file to our SD card. We will first need to find out which /dev/ the SD card is currently using. To do this we can use the following command:
 
 ```bash
 lsblk
@@ -58,7 +59,7 @@ sudo kill -USR1 `pidof dd`
 
 If you ended up here you have chosen to use the much inferior Windows to get Linux on your Raspberry pi's. Don't worry though, you can still install the, much superior, Linux images to your SD cards.
 
-The very first thing we have to do is download the Raspbian image, which we can do by clicking [here](http://downloads.raspberrypi.org/raspbian_latest). After downloading the image we will have to download some software to write the image to the SD card. The tool we are going to use is called win32DiskImager, and can be downloaded free of charge [right here.](http://downloads.sourceforge.net/project/win32diskimager/Archive/Win32DiskImager-0.9.5-install.exe?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fwin32diskimager%2F&ts=1410459796&use_mirror=cznic)
+The very first thing we have to do is download the Raspbian image, which we can do by clicking [here](https://downloads.raspberrypi.org/raspbian_latest). After downloading the image we will have to download some software to write the image to the SD card. The tool we are going to use is called win32DiskImager, and can be downloaded free of charge [right here.](https://downloads.sourceforge.net/project/win32diskimager/Archive/Win32DiskImager-0.9.5-install.exe?r=http%3A%2F%2Fsourceforge.net%2Fprojects%2Fwin32diskimager%2F&ts=1410459796&use_mirror=cznic)
 
 After the tool has been downloaded (and installed) we have to start it by double clicking on the .exe file, which will leave us staring at the following tool:
 

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

@@ -2,13 +2,14 @@
 title: "Raspberry pi cluster Step 4: Setting up the master node"
 date: "2014-09-17"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "raspberry"
   - "cluster"
   - "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:
@@ -55,7 +56,7 @@ After installing some of the required software we still have to install "mpich3"
 ```bash
 mkdir /home/pi/mpich3
 cd mpich3
-wget http://www.mpich.org/static/downloads/3.0.4/mpich-3.0.4.tar.gz
+wget https://www.mpich.org/static/downloads/3.0.4/mpich-3.0.4.tar.gz
 tar xzf mpich-3.0.4.tar.gz
 sudo mkdir -p /home/rpimpi/mpich3-install
 sudo mkdir -p /home/pi/mpich_build

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

@@ -2,13 +2,14 @@
 title: "Raspberry pi cluster step 5: Expanding the cluster"
 date: "2014-09-19"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "raspberry"
   - "cluster"
   - "pi"
 description: "Today's blog post will be about expanding the cluster with more nodes."
 disqusId: "6"
+socialImage: "./media/pidark.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.
@@ -39,7 +40,7 @@ sudo nano /etc/network/interfaces
 
 After setting up all 4 pi's and plugging it all in you should see all 4 led's light up on the pi's. If this is not the case you might've forgotten to change either the ip address or the hostname. (which will lead to a conflict resulting in one of them not having internet access). Mine now looks like this (note the dramatic night picture taken at 10 past 12 am):
 
-![picture of 4 Raspberry pi's stacked on a network switch serving as a cluster](./media/pidark_full.JPG "It's not quite RGB but it's beautiful!")
+![picture of 4 Raspberry pi's stacked on a network switch serving as a cluster](./media/pidark.jpg "It's not quite RGB but it's beautiful!")
 
 ## Logging in to the nodes with 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.
@@ -75,7 +76,7 @@ sudo apt-get update && sudo apt-get upgrade
 sudo pacman -Syu
 ```
 
-If however you're using a mac you'll have to do it by hand. Since Apple hasn't yet released an update nor commented on the matter. Instructions for a mac can be found [here](http://mac-how-to.wonderhowto.com/how-to/every-mac-is-vulnerable-shellshock-bash-exploit-heres-patch-os-x-0157606/).
+If however you're using a mac you'll have to do it by hand. Since Apple hasn't yet released an update nor commented on the matter. Instructions for a mac can be found [here](https://mac-how-to.wonderhowto.com/how-to/every-mac-is-vulnerable-shellshock-bash-exploit-heres-patch-os-x-0157606/).
 
 ## In summary
 
@@ -83,7 +84,7 @@ So should you worry? Yes and no. If your computer (/server) is exposed to an out
 
 ## Documentation
 
-For those of you who like to research this "Shellshock" vulnerability some more, here are 2 entries in the NVD: [CVE-2014-6271](http://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2014-6271) & [CVE-2014-7169](http://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2014-7169).
+For those of you who like to research this "Shellshock" vulnerability some more, here are 2 entries in the NVD: [CVE-2014-6271](https://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2014-6271) & [CVE-2014-7169](https://web.nvd.nist.gov/view/vuln/detail?vulnId=CVE-2014-7169).
 
 If you want to see Shellshock in action I recommend watching the following video from Quidsup:
 

content/posts/2014/using-the-cluster-for-home-automation/index.md

@@ -2,30 +2,30 @@
 title: "The pi cluster, home automation & kickstarter monitoring"
 date: "2014-09-27"
 template: "post"
-category: "Homelab"
+category: "homelab"
 tags:
   - "python"
   - "raspberry"
   - "pi"
-  - "home automation"
+  - "home-automation"
 description: "Today's blog is about home automation."
 disqusId: "7"
 ---
 
 Some of you might be wondering "why doesn't he write more blogs about the cluster?" and I wouldn't blame you. I have a pretty good reason for not blogging about the pi cluster (even though I promised sample code). That reason is "home automation". As some of you might know I'm big into home automation, and have done quite a bit already. But it's always fun to try something different!
 
-I usually use single or double relay boards which you can control with an arduino or a Raspberry pi. This time however I ordered an 8 relay board instead of a double relay board. I got the board from China at a store called "Sainsmart", here's the link to the exact board I got: [http://www.sainsmart.com/8-channel-dc-5v-relay-module-for-arduino-pic-arm-dsp-avr-msp430-ttl-logic.html](http://www.sainsmart.com/8-channel-dc-5v-relay-module-for-arduino-pic-arm-dsp-avr-msp430-ttl-logic.html)
+I usually use single or double relay boards which you can control with an arduino or a Raspberry pi. This time however I ordered an 8 relay board instead of a double relay board. I got the board from China at a store called "Sainsmart", here's the link to the exact board I got: [https://www.sainsmart.com/products/8-channel-5v-relay-module](https://www.sainsmart.com/products/8-channel-5v-relay-module)
 
 So what does that have to do with the cluster you ask? Well, I used to have a Raspberry pi to experiment with.... But I used that in the cluster to save some money. (here I was, thinking to be smart!) So I had to "disassemble"(taking the top off) the cluster to connect the relay board. In the next blog-post I'll have a couple of pictures showing off the relay board and the pi cluster.
 
-## I donated a pi!
+## I donated a pi
 
-While talking on IRC with a friend[(Robbie Ferguson)](http://baldnerd.com) of mine I discovered that he had never used a Raspberry pi before. And to make matters worse he told me he had lost interest in them now. When I asked why he never got one he told me the following:
+While talking on IRC with a friend[(Robbie Ferguson)](https://baldnerd.com) of mine I discovered that he had never used a Raspberry pi before. And to make matters worse he told me he had lost interest in them now. When I asked why he never got one he told me the following:
 
 > When they were new I couldn't get one here in Canada, and now it's been so long that I've lost interest.
 
 While discussing the fact he jokingly told me, if you'll send me one I'll try it out. A small problem arose though, me sending a pi to Canada would cost way more than actually buying one over there. So we decided that I'd just send him the money and he would order his own. I can't wait to see what he does with it.
-If you guys are interested in seeing what he does with it too you can check out [Category5.tv](http://www.category5.tv/)
+If you guys are interested in seeing what he does with it too you can check out [Category5.tv](https://category5.tv/)
 
 What Robbie doesn't know is that I wanted to do something for the show / him anyways. I was originally planning on just donating $20, but giving him the joy that comes from owning a Raspberry pi seemed like a way better plan! Besides, he's been working really really hard on the new Studio D so he deserves some fun!
 

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".
 
@@ -42,14 +43,14 @@ Well alright then, we've got a couple of things "ready" to show others. The firs
 
 We quickly decided upon changing the hub design to a more elegant "hat" (hat being a board you can attach to the Raspberry Pi, not the fedora kind). A render of one such hats can be found below.
 
-![rendering of the raspberry pi hat](./media/Front_thumb.png "render of the raspberry pi hat")
+![rendering of the raspberry pi hat](./media/front-thumb.png "render of the raspberry pi hat")
 
 We also started working on the controllers. The final design will be compromised of a few "boxes" between which telephone wires run to connect them together. My fantastic soldering / glueing job on the inner workings of a controller and the laser cutted wooden box can be found below.
 
 ![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/new-look-new-comments-new-everything/index.md

@@ -15,13 +15,13 @@ disqusId: "11"
 
 First off, it's been a while.... I know. ☺
 
-I'm trying to separate [mi-soft.nl](http://mi-soft.nl) and myself, yet keep them together somehow. I have removed almost all personal content from [mi-soft.nl](http://mi-soft.nl) and am currently busy moving it to this "personal website". The end goal is to have them completely separate apart from the "software" tab. Software that I want to reveal to the public (more so than some scripts I use myself) will still be uploaded to [mi-soft.nl](http://mi-soft.nl) and more personal projects (like [CSVtoDatabase](https://github.com/Mastermindzh/Scripts/blob/master/java/CSVtoDatabase.java)) on my [github](https://github.com/Mastermindzh/).
+I'm trying to separate [mi-soft.nl](https://mi-soft.nl) and myself, yet keep them together somehow. I have removed almost all personal content from [mi-soft.nl](https://mi-soft.nl) and am currently busy moving it to this "personal website". The end goal is to have them completely separate apart from the "software" tab. Software that I want to reveal to the public (more so than some scripts I use myself) will still be uploaded to [mi-soft.nl](https://mi-soft.nl) and more personal projects (like [CSVtoDatabase](https://github.com/Mastermindzh/Scripts/blob/master/java/CSVtoDatabase.java)) on my [github](https://github.com/Mastermindzh/).
 
-In order to "keep the sites together" I have given this site the exact same look as [mi-soft.nl](http://mi-soft.nl) except for the colours. I have also made a little system that allows users to switch the website's language. Everything apart from the blog will be Multilingual. Doing all these upgrades however also means upgrading Disqus, which meant losing all my comments. While sad, I feel like it had to be done.
+In order to "keep the sites together" I have given this site the exact same look as [mi-soft.nl](https://mi-soft.nl) except for the colours. I have also made a little system that allows users to switch the website's language. Everything apart from the blog will be Multilingual. Doing all these upgrades however also means upgrading Disqus, which meant losing all my comments. While sad, I feel like it had to be done.
 
-## Replacing the "about me" page on [mi-soft.nl](http://mi-soft.nl)
+## Replacing the "about me" page on [mi-soft.nl](https://mi-soft.nl)
 
-I will be replacing the about me page on [mi-soft.nl](http://mi-soft.nl) with a "Linux software review" (LSR for short) section. LSR will consist of short video's (in Dutch) promoting Linux software.
+I will be replacing the about me page on [mi-soft.nl](https://mi-soft.nl) with a "Linux software review" (LSR for short) section. LSR will consist of short video's (in Dutch) promoting Linux software.
 
 ## Another maker project
 
@@ -36,7 +36,7 @@ I have only 2 days of school left this year, (and maybe a ceremony) which means
 - Clean all my servers (both soft and hardware)
 - Finish my portfolio (in both Dutch and English)
 - Get started with LSR
-- Write at least 5 new tutorials on [mi-soft.nl](http://mi-soft.nl)
+- Write at least 5 new tutorials on [mi-soft.nl](https://mi-soft.nl)
 - Write at least 2 new blogs. (not counting this one)
 
 Let's hope I can get all my planned projects done and then some.

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.
 
@@ -34,7 +35,7 @@ After deciding to use an arduino I had another big decision to make. Should I fo
 
 After that came my struggle with the drawing software. I tried creating a drawing in Coreldraw Pro.... that was... a painful experience to say the least. Then I tried drawing with a program called InkScape, while better it still didn't yield any results. Finally I decided to give up and ask for help from a friend.
 
-Luckily my friend [Ron Nabuurs](http://www.ronnabuurs.nl) is brilliant when it comes to designing a drawing which can be lasercut. So after explaining my idea to [Ron](http://www.ronnabuurs.nl) he decided to help me out. A picture of what we ended up with can be found below. The source file we used can be found on git.
+Luckily my friend [Ron Nabuurs](https://www.ronnabuurs.nl) is brilliant when it comes to designing a drawing which can be lasercut. So after explaining my idea to [Ron](https://www.ronnabuurs.nl) he decided to help me out. A picture of what we ended up with can be found below. The source file we used can be found on git.
 
 ![Designs for the laser cutter, from left to right: a circular base plate with snow characters. A foldable box cutout and a tree shape](./media/new.jpg "Designs for the laser cutter")
 

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

@@ -8,9 +8,10 @@ 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)!
+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](https://www.ronnabuurs.nl) who helped me create the sketches for the laser cutter. Thanks again [Ron](https://www.ronnabuurs.nl)!
 
 **Top tip!** You don't have to laser cut the designs. Just print the designs with a regular printer and stick it on some wood. Then just use something like a bandsaw to cut the pieces!
 

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

@@ -8,25 +8,26 @@ 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)
+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 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...)
 

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/2017/scala-day-0-what-is-scala/index.md

@@ -3,9 +3,9 @@ title: Scala Day 0 - What is Scala?
 date: "2017-03-30"
 template: "post"
 draft: false
-category: "Development"
+category: "development"
 tags:
-  - "Development"
+  - "development"
   - "slsw"
 description: "My final assignment for a school course is to learn a new language from a book (uh-oh). I picked Scala and here's why"
 disqusId: "20"
@@ -13,7 +13,7 @@ disqusId: "20"
 
 !["Logo of the scala programming language"](./scala.png)
 
-One of the final assignments for a school course called "APP" (Algorithms Programming language & Paradigms) was/is to learn a new programming language using the book "[Seven languages in Seven weeks](https://pragprog.com/book/btlang/seven-languages-in-seven-weeks)".
+One of the final assignments for a school course called "APP" (Algorithms Programming language & Paradigms) was/is to learn a new programming language using the book "[Seven languages in Seven weeks](https://pragprog.com/search/?q=seven-languages-in-seven-weeks)".
 
 The idea of this book is that you can get comfortable with a programming language in just a week. As you can probably guess from the title the book covers 7 languages in total and I will be covering at least 1 (Scala).
 

content/posts/2017/scala-day-1-the-basics/index.md

@@ -3,9 +3,9 @@ title: Scala Day 1 - The Basics
 date: "2017-04-02"
 template: "post"
 draft: false
-category: "Development"
+category: "development"
 tags:
-  - "Development"
+  - "development"
   - "slsw"
 description: "Let's take a deep dive into a programming book and Scala!"
 disqusId: "21"
@@ -21,7 +21,7 @@ While Pacman started collecting all the little dots, I took a quick look at the
 
 The next message on this page tells me about a popular build tool called `sbt` so I went ahead and installed that as well.
 
-The final step on this page recommends me to install "[The Scala IDE](http://scala-ide.org/?_ga=1.153666491.264179122.1490891096)" or use the IntelliJ plugin. Seeing as I adore the JetBrains product line I've opted to choose the latter.
+The final step on this page recommends me to install "[The Scala IDE](https://scala-ide.org/?_ga=1.153666491.264179122.1490891096)" or use the IntelliJ plugin. Seeing as I adore the JetBrains product line I've opted to choose the latter.
 
 While browsing the downloads page I noticed Pacman had beat his level. (a.k.a collected all the dots. a.k.a the install has finished) Which means it's high time for me to continue on with the assignments.
 
@@ -130,9 +130,9 @@ Day 1's theoretical questions are:
 
 My answers to these are:
 
-1. [http://www.scala-lang.org/api/current/](http://www.scala-lang.org/api/current/)
+1. [https://www.scala-lang.org/api/current/](https://www.scala-lang.org/api/current/)
 2. [https://www.toptal.com/scala/why-should-i-learn-scala](https://www.toptal.com/scala/why-should-i-learn-scala)
-3. [http://www.scala-lang.org/old/node/5367](http://www.scala-lang.org/old/node/5367)
+3. [https://www.scala-lang.org/old/node/5367](https://www.scala-lang.org/old/node/5367)
 
 Finally, we get to move on to the practical assignment for the week. For the assignment, I have to create a "Tic-tac-toe" game for 2 players.
 

content/posts/2017/scala-day-2-lets-get-functional/index.md

@@ -3,9 +3,9 @@ title: Scala Day 2 - Let's get functional
 date: "2017-04-03"
 template: "post"
 draft: false
-category: "Development"
+category: "development"
 tags:
-  - "Development"
+  - "development"
   - "slsw"
 description: "Today we'll focus on the functional aspects of Scala"
 disqusId: "22"
@@ -194,8 +194,8 @@ The theoretical questions for day 2 are:
 
 Once again these questions are trivial if you've actually paid attention while reading the book. Anyway, here are the answers:
 
-1. [http://docs.scala-lang.org/tutorials/scala-for-java-programmers.html](http://docs.scala-lang.org/tutorials/scala-for-java-programmers.html)
-2. [http://stackoverflow.com/questions/1812401/exactly-what-is-the-difference-between-a-closure-and-a-block](http://stackoverflow.com/questions/1812401/exactly-what-is-the-difference-between-a-closure-and-a-block)
+1. [https://docs.scala-lang.org/tutorials/scala-for-java-programmers.html](https://docs.scala-lang.org/tutorials/scala-for-java-programmers.html)
+2. [https://stackoverflow.com/questions/1812401/exactly-what-is-the-difference-between-a-closure-and-a-block](https://stackoverflow.com/questions/1812401/exactly-what-is-the-difference-between-a-closure-and-a-block)
 
 The results of the second day's practical assignments can found on [Github](https://github.com/Mastermindzh/Seven-Languages-in-Seven-Weeks/tree/master/Scala/Day%202/src/myApp) or below:
 

content/posts/2017/scala-day-3-concurrency-is-key/index.md

@@ -3,9 +3,9 @@ title: Scala Day 3 - Concurrency is key!
 date: "2017-04-04"
 template: "post"
 draft: false
-category: "Development"
+category: "development"
 tags:
-  - "Development"
+  - "development"
   - "slsw"
 description: "A day full of functional joy and concurrency "
 disqusId: "23"
@@ -133,7 +133,7 @@ Finally! We get to do something with concurrency, now Scala can really show me w
 
 The book starts off by telling me about Actors, which have pools of threads and queues, and message passing. When you send a message (using the ! operator) you place an object on its queue. The actor then reads the message and takes action. Usually, the actor uses a pattern matcher to detect what it has to do before it starts doing something.
 
-The book provides a sample application but that plain doesn't work. Upon investigating the issue I discovered that Scala's built-in concurrency feature is deprecated in favour of [Akka](http://akka.io/). This saddens me beyond belief. I have already worked with Akka and had expected Scala to offer me something else. This also means that the rest of the book is not going to be useful anymore.
+The book provides a sample application but that plain doesn't work. Upon investigating the issue I discovered that Scala's built-in concurrency feature is deprecated in favour of [Akka](https://akka.io/). This saddens me beyond belief. I have already worked with Akka and had expected Scala to offer me something else. This also means that the rest of the book is not going to be useful anymore.
 
 Stubborn as I am, even with a closing deadline, I decided I wasn't going to let a stupid book stop me and decided to update the code to work with Akka. All of which can be found at [Github](https://github.com/Mastermindzh/Seven-Languages-in-Seven-Weeks/tree/master/Scala/Day%203/src/Concurrency).
 

content/posts/2017/scala-day-4-a-challenge/index.md

@@ -3,9 +3,9 @@ title: Scala Day 4 - A challenge!
 date: "2017-04-05"
 template: "post"
 draft: false
-category: "Development"
+category: "development"
 tags:
-  - "Development"
+  - "development"
   - "slsw"
 description: "The last day of my journey with Scala is said to be a challenge"
 disqusId: "24"

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](https://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/` directory. Let's create a file in it called `commit-msg` 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/2022/writing-as-a-software-architect-is-hard/index.md

@@ -10,7 +10,7 @@ tags:
 description: "Good software design practices and a few perfectionistic tendencies lead to almost 5 years without any writing. This post is a deep dive into a few of the struggles of the past 5 years"
 ---
 
-I've been rebuilding the old "[rickvanlieshout.com](https://rickvanlieshout.com)" for over 5 years now...
+I've been rebuilding the old "[rickvanlieshout.com](https://www.rickvanlieshout.com)" for over 5 years now...
 But the website isn't that big. It could be done way faster and it has been done way faster.
 The thing is, I rewrote it several times, each time with a different design and updated packages.
 

content/posts/2023/flashing-lsi-9211-with-efi/index.md

@@ -0,0 +1,92 @@
+---
+title: Flashing the LSI-9211 to IT mode using an EFI shell
+date: "2023-04-12"
+template: "post"
+category: "homelab"
+tags:
+  - "lsi"
+  - "lsi9211"
+  - "raid card"
+  - "storage"
+  - "SAS2000"
+  - "it-mode"
+description: "Flashing the LSI-9211 used to be way more difficult, luckily the EFI shell makes this task a lot simpler!"
+socialImage: ./media/flash-result.jpg
+---
+
+
+I've been building a new storage-oriented server for a while now and have yet again decided to go with (3 +1 backup) LSI 9211 raid controllers.
+
+The reason I keep going for these specific raid controllers is quite simple. The card can theoretically support (8x500MB) 4GB/s in throughput divided over 8 drives (2x SFF-8087) which is near the maximum for consumer hard drives.
+
+Using 3 of these will allow me to use 24 drives in a single chassis without an expander whilst getting pretty good performance.
+The fourth card that I got, and flashed, is simply used as a backup or debug card in case of any errors.
+
+## Downloading the files
+
+Before we can start flashing we will need to download some files.
+The table below lists all the files with a brief description of what we'll use them for.
+
+| File                                                            | Description                     |
+| --------------------------------------------------------------- | ------------------------------- |
+| [EFI flashing utility](https://docs.broadcom.com/docs/12350820) | Flashing utility                |
+| [EFI ROM image](https://docs.broadcom.com/docs/12348628)        | Card ROM file                   |
+| [SAS2008 Firmware](https://docs.broadcom.com/docs/12350504)     | IR and IT firmware for the 9211 |
+
+## Prepping the flash drive
+
+Make sure that you have a flash drive that is **32GB** or smaller and that it is formatted as **FAT32**.
+Next, we'll add the following files to the **root** of the flash drive:
+
+- `Installer_P20_for_UEFI/sas2flash_efi_ebc_rel/sas2flash.efi`
+- `UEFI_BSD_P20/uefi_bsd_rel/Signed/x64sas2.efi`
+- `9210-8i_Package_P20_IR_IT_FW_BIOS_for_MSDOS_Windows/sasbios_rel/mptsas2.rom`
+- `9210-8i_Package_P20_IR_IT_FW_BIOS_for_MSDOS_Windows/Firmware/HBA_9210_8i_IT/2108it.bin`
+
+## Flashing with EFI
+
+Because we are going to flash using EFI we don't really need anything besides the built-in EFI shell from our motherboard. Simply insert the flash drive and go into the BIOS or use the "select boot device" functionality to select the EFI shell:
+
+!["picture of the monitor showing boot options"](./media/boot-selector.jpg "selecting the EFI shell boot option")
+
+After the shell has booted successfully you can use the `map` command to see all available devices. In the image below you'll see that my flash drive is listed as `fs1`:
+
+![A list of devices in the EFI shell](./media/map-devices.jpg "a list of devices note that `fs1` is my flash drive")
+
+To switch into the drive simply enter the drive name on the command line followed by a semicolon:
+
+```efi
+fs1:
+```
+
+Next, we'll determine that our adapters are available and we will simultaneously take note of their identifier, we can do so by issuing the following command:
+
+```efi
+sas2flash.efi -listall
+```
+
+!["list of adapters"](./media/list-adapters.jpg "a list of adapters, I flash them one at a time so I only have card '0' available to me")
+
+Next, we can empty the current firmware with the following command:
+
+```efi
+sas2flash.efi -o -e 6
+```
+
+![Showing the result of the erasing action](./media/empty-firmware.jpg "bye, bye firmware 😢")
+
+Now we'll simply flash the new (IT-mode) firmware on it with the following command:
+
+```efi
+sas2flash.efi -o -f 2108it.bin -b mptsas2.rom
+```
+
+![result of flashing in the EFI shell](./media/flash-result.jpg "1 card down, 3 more to go!")
+
+Wait patiently until the operations have completed. Note that it might seem like the steps repeat, just wait until it is completely done and exits back to the shell by itself.
+
+## Multiple cards and conclusion
+
+You can rerun the commands for different cards (by adding `-c x` where x is the card number from `listall`) or by simply physically switching the current one out for a different one.
+
+That's all there is too it, if you need any help feel free to hit me up!

content/posts/2023/lego-league/index.md

@@ -0,0 +1,98 @@
+---
+title: LegoLeague - Battling it out with little robots made from Lego
+date: "2023-09-18"
+template: "post"
+category: "Lego"
+tags:
+  - "lego"
+  - "spike"
+  - "programming"
+  - "team"
+  - "work"
+  - "inforit"
+description: "At INFORIT we love to play! Be it DND, board games or in this case... Legos. Read on to find out what we've been up to this past summer vacation"
+socialImage: ./media/lego-spike-set.png
+---
+
+![The 2023 LegoLeague play-mat laid out on an improvised table](./media/board.jpg "The 2023 LegoLeague battle board")
+
+A little before the start of the summer period my colleague Jan-Kees came up to me and proposed the idea of an internal LegoLeague. After a little bit of back-and-forth about what LegoLeague exactly was I agreed it would be a great idea to bring some colleagues together and have a little fun during work hours.
+Pretty much right away excitement got the better of us and we started drafting a plan... when? where? how? prizes? teams!?? A lot.
+But First...
+
+## What is LegoLeague?
+
+LegoLeague is an event where teams come together to build, program and test a [Lego Spike robot](https://www.lego.com/en-nl/product/lego-education-spike-prime-set-45678) to perform autonomous tasks. The tasks range from collecting "power cores", pushing or pulling levers, to dropping Lego blocks in a hopper to get some bonus points.
+
+All of this is accompanied by a theme, in our case energy production, which adds a layer of fun to solving these challenges.
+The video below shows a teaser of 2022-2023's "SuperPowered" event, the very thing we based our LegoLeague on:
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/okR1AMFNV3Q?si=cq4KqyVVK6sAsCpY"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen>
+</iframe>
+
+For each task a team completes successfully they will score points.
+Teams get 2 minutes and 30 seconds (2:30) to score as many points as they can.
+The video below outlines some of the challenges the teams have available to them with a little explanation of how they function and even some info on the scores. This video is especially useful for teams that don't want to peruse the entire rule book but still wanted to figure out an optimal strategy.
+
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/ILTjo0LHZQA?si=YqJvSYX3JNclPPeJ"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen>
+</iframe>
+
+To build the robot each team gets a [Lego Spike Prime set](https://www.lego.com/nl-nl/product/lego-education-spike-prime-set-45678) and nothing more!
+In the original event, teams had access to a little more Lego in various kits but for our little event at [INFORIT](https://inforit.nl), we were only able to source the basic kits in time.
+Having said that, we wouldn't have been able to get our hands on any of the kits at all if it wasn't for the ["PReT" organization in Weesp](https://www.pretweesp.nl/). Thanks guys!
+
+![A Lego spike set](./media/lego-spike-set.png "A Lego spike set laid out on display")
+
+As for the programming... Teams are free to use either "[scratch](https://scratch.mit.edu/)" or "Python" to program their robots.
+Scratch being much easier for those who don't spend all day behind their computer working on software development whilst Python allows for more flexibility in what can be achieved.
+Spoiler alert: all teams chose scratch, it's much more accessible for non-developers!
+
+## The competition at INFORIT
+
+So yeah, we now know what a LegoLeague is and we have the approval to host the competition at [INFORIT](https://inforit.nl), now what?
+Well, Jan-Kees got to work building the arena and setting it up and I set out to gather team members. Given that it was the summer break I had to hustle to get teams together but eventually we managed to create some beautiful teams.
+
+Fortunately, [INFORIT](https://inforit.nl) values employee happiness, autonomy and continuous improvement. As such I was able to offer the 2 Friday afternoons free of day-to-day work, to work on the robot whilst providing catering, music, and the like to the teams whilst they are participating!
+
+In the end, we were successful in creating 4 teams of at least 3 people who were all mixed with developers and non-developers to keep the balance fair. Meanwhile, Jan-Kees also finished building the arena which you can see in the header of this blog or the pictures in the picture section.
+
+## Pictures
+
+Of course, we've taken loads of pictures during the event but those are mostly for internal use.
+Below I've included some pictures of the event that are all cleared for social media distribution with a little description of what's happening in each picture to, hopefully, convey some of the vibes of the event itself.
+
+![One of the competing robots on display. This one seems to have a little grabby arm to perform the tasks with.](./media/robot-warrior.jpg "one of the competing robots")
+![A contestant is looking at the board figuring out where the robot needs to go](./media/lex-counting.jpg "A contestant calculating exactly where to go. Such a pathfinder!")
+![two teams continuing to test their implementations](./media/testing-coding-repeat.jpg "code -> test -> repeat. Soooo important")
+![a picture of a laptop screen with lots of scratch code blocks on it](./media/complicated.png "This team might have overcomplicated things a tad. Looks impressive though.")
+
+## Winners, losers, etc
+
+In the end, this is still a competition. People competed hard to come out on top and 1 team did so successfully.
+Congratulations guys!
+
+![a group picture of all the contestants, some wearing their medals and carrying their candy prize](./media/winners.jpg "All of our winners! (excluding myself 😢)")
+
+## Nah, we are all winners in the end
+
+Having 4 teams gave us the unique opportunity to reward them all with something nice. The 3 teams that got podium places all got their medals and their rewards and the team in fourth place got their consolation prize.
+
+Luckily though, we're all winners, even the Jury members and the organizers.
+This event has brought us all closer together and improved the connection between our colleagues.
+I, personally, had a blast and would love to do similar things in the future.
+
+That's it again, thanks for reading and see you next time!

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

@@ -0,0 +1,98 @@
+---
+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"
+socialImage: ./media/building-the-owl.jpg
+---
+
+## 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 elves scene](https://www.lego.com/en-nl/product/winter-elves-scene-40564)
+- [Winter polar bears](https://web.archive.org/web/20221106002040/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 shells")

content/posts/2025/infrastructure-as-code-uptime-monitoring/index.md

@@ -0,0 +1,130 @@
+---
+title: Infrastructure as code - Service uptime monitoring
+date: "2025-01-18"
+template: "post"
+category: "homelab"
+tags:
+  - "uptime"
+  - "kuma"
+  - "iac"
+  - "infrastructure"
+  - "code"
+  - "servers"
+description: "In this post I demonstrate how I've moved from an old and simple UptimeKuma setup to a setup with AutoKuma so I can register my monitors with 'infrastructure as code'"
+socialImage: ./media/uptimekuma.png
+---
+
+If there’s one thing I’ve always embraced, it’s the philosophy of working smarter, not harder. Infrastructure as Code (IaC) has been one of the cornerstones of my career. a perfect blend of laziness and the pursuit of predictability. From my earliest days experimenting with Docker back in 2014 to leading a platform team at my current company, IaC has proven invaluable for simplifying complexity, ensuring reproducibility, and enabling automation.
+
+Below you'll find my journey and why I think every engineer should embrace it, eventually walking you through one of the latest automations I set up at home: Automatically creating uptime monitors in UptimeKuma based on Docker labels.
+
+## The Early Days: Discovering Docker
+
+Back in 2014, I stumbled upon Docker, and it was a game-changer. At the time, I was frustrated by the manual and error-prone process of setting up environments for my code (especially on other people's machines....). Docker offered a way to reliably recreate these environments with simple, declarative configuration files. Suddenly, I could spin up a development environment in minutes and be confident it would work exactly the same on another machine.
+
+In 2017, I taught several university classes on Docker, emphasizing the importance of reproducibility. My students learned how to containerize applications and ensure their work could be shared and run anywhere, regardless of underlying infrastructure. Reproducibility wasn’t just a technical advantage; it became a mindset I encouraged in every project.
+
+And yes.. for those that know me well, I did go overboard in some of the details and even ended up explaining the entire Copy-On-Write (COW) nature of the Docker filesystem in those classes... But ah well, people learned a lot :P.
+
+## Home Servers: The Personal Lab
+
+My passion for IaC extended to my home servers. By 2017, nearly everything I ran at home was Docker-based. I created dozens of bash scripts and system services to orchestrate my personal infrastructure. Whether it was media servers, backup systems, or development environments, everything was automated and version-controlled. Even my own computers mostly became IaC based as I figured out that part of the Linux community was saving their setups (and install instructions, usually) in so called "dotfiles". To this day you can still find my setup (and its changes when I switch machine) in my [Dotfiles on Github](https://github.com/Mastermindzh/dotfiles/).
+
+All in all, my home setup became a sandbox for testing new ideas and tools, many of which eventually found their way into my professional work as well.
+
+## Scaling IaC in the Workplace
+
+At my current company, I introduced Docker about eight years ago. It was a gradual process, but within a year, we had our first Kubernetes cluster running. This transition wasn’t just about adopting new tools; it was about embedding the principles of IaC into the organization’s culture.
+
+Over time, I spearheaded the creation of a dedicated platform team. With an architect/Product Owner and four DevOps engineers, this team took IaC to the next level. They implemented robust CI/CD pipelines, infrastructure monitoring, and scalable deployment patterns. Some of these practices mirrored what I had done at home, while others were tailored to the unique needs of the business. The result was a resilient and predictable infrastructure that supports rapid development and deployment.
+
+## Setting Up Uptime Monitoring with UptimeKuma
+
+One of the most satisfying aspects of IaC is the ability to automate even the smallest tasks. Take uptime monitoring, for example. At home and at work, ensuring that services are available is critical. Recently, I’ve been using my old UptimeKuma instance, a self-hosted monitoring tool that’s as powerful as it is user-friendly, a lot more after introducing it to some friends (who started homelabbing) and at work.
+
+Setting up UptimeKuma is straightforward, you can simply use our old friend Docker:
+
+```docker run -d --name uptime-kuma -v ./data/uptimekuma:/app/data -p 3001:3001 louislam/uptime-kuma```
+
+And access the Dashboard by navigating to <http://localhost:3001> to configure your monitors.
+But that isn't automatic enough for me, I like to put my things in compose files for home usage.
+
+## Automating uptime monitors with AutoKuma
+
+[AutoKuma](https://github.com/BigBoot/AutoKuma) allows us to set labels on our Docker containers that will then automatically generate monitors in UptimeKuma.
+
+One of my containers (UptimeKuma actually) has the following labels attached:
+
+```yml
+labels:
+  kuma.monitoring.group.name: "Monitoring"
+  kuma.uptime_kuma.http.parent_name: "monitoring"
+  kuma.uptime_kuma.http.name: "Kuma status monitoring"
+  kuma.uptime_kuma.http.url: "http://${HOST_IP}:3001"
+```
+
+This actually does 2 things:
+
+- creates a group with the *key/id* `monitoring` and the name `Monitoring`
+- Adds a monitor with the *key/id* `uptime_kuma` to UptimeKuma with the type `http`, name `Kuma status monitoring`, and url `http://${HOST_IP}:3001`
+
+Adding these labels, whilst AutoKuma is running and configured to pick up labels starting with `kuma` is enough for monitors to show up (after restarting the containers).
+All in all, my `docker-compose.yml` file for both UptimeKuma and AutoKuma now looks like this:
+
+```yml
+services:
+  autokuma:
+    image: ghcr.io/bigboot/autokuma:master
+    restart: unless-stopped
+    environment:
+      AUTOKUMA__KUMA__URL: http://${HOST_IP}:3001
+      AUTOKUMA__KUMA__USERNAME: ${KUMA_USERNAME}
+      AUTOKUMA__KUMA__PASSWORD: ${KUMA_PASSWORD}
+      AUTOKUMA__TAG_NAME: AutoKuma
+      AUTOKUMA__TAG_COLOR: "#42C0FB"
+      AUTOKUMA__DEFAULT_SETTINGS: |-
+        docker.docker_container: {{container_name}}
+        http.max_redirects: 10
+        *.max_retries: 3
+      AUTOKUMA__DOCKER__LABEL_PREFIX: kuma
+      AUTOKUMA__MIGRATE: true
+    volumes:
+      - ${APP_DATA}/autokuma:/data
+      - ${DOCKER_SOCKET}:/var/run/docker.sock
+    depends_on:
+      - kuma
+
+  kuma:
+    image: louislam/uptime-kuma:1
+    volumes:
+      - ${APP_DATA}/uptimekuma:/app/data
+      - ${DOCKER_SOCKET}:/var/run/docker.sock
+    ports:
+      - 3001:3001
+    restart: unless-stopped
+    labels:
+      kuma.monitoring.group.name: "Monitoring"
+      kuma.uptime_kuma.http.parent_name: "monitoring"
+      kuma.uptime_kuma.http.name: "Kuma status monitoring"
+      kuma.uptime_kuma.http.url: "http://${HOST_IP}:3001"
+```
+
+## Problems... the compose file doesn't work :O
+
+If you'd try to run the compose file in the previous chapter, even after replacing all the variables, things likely still won't work.
+This is because AutoKuma relies on the credentials for UptimeKuma which we setup during the initial launch of UptimeKuma.
+Unfortunately, that account is the only account we can currently set up in UptimeKuma since it doesn't have user management.
+And yes, that means we **have** to use these same credentials to get AutoKuma to work, which also prohibits us from enabling MFA.
+
+Anyway, after setting up the kuma account, simply adjust both the `KUMA_USERNAME` and `KUMA_PASSWORD` variables and restart the containers.
+After doing so we should see the monitor appear in UptimeKuma:
+
+![a screenshot of the UptimeKuma monitors that were automatically created with AutoKuma](./media/uptimekuma.png "neat!")
+
+## The Future of IaC
+
+Infrastructure as Code isn’t just a technical approach; it’s a philosophy that prioritizes automation, reproducibility, and simplicity. Whether you’re managing a home lab or a global platform, IaC provides the tools and practices to build resilient systems with minimal effort.
+
+For me, IaC has been a journey of continuous learning and experimentation. From Docker to Kubernetes, from bash scripts to dedicated platform teams, the principles remain the same: automate everything, document everything, and embrace the predictability that code brings to infrastructure.
+
+If you haven’t already, give UptimeKuma and AutoKuma a try. Their combination is an excellent example of how IaC can simplify even the most mundane tasks, leaving you more time to focus on what really matters... or just to be a little lazier.

gatsby-browser.ts

@@ -1,3 +0,0 @@
-import "./src/assets/scss/main.scss";
-import "./src/assets/scss/prism/github.scss";
-import "./src/assets/scss/prism/prism-tomorrow.scss";

gatsby-browser.tsx

@@ -0,0 +1,19 @@
+import "./src/assets/scss/main.scss";
+import "./src/assets/scss/prism/github.scss";
+import "./src/assets/scss/prism/prism-tomorrow.scss";
+
+export const onRouteUpdate = ({ location }: { location: { pathname: string } }) => {
+  const elements = document.querySelectorAll("[data-url]");
+  const currentUrl = `https://www.rickvanlieshout.com${location.pathname ?? ""}`;
+
+  const setAttributeIfAvailable = (element: Element, elementIdentifier: string) => {
+    if (element.hasAttribute(elementIdentifier)) {
+      element.setAttribute(elementIdentifier, currentUrl);
+    }
+  };
+
+  elements.forEach((element) => {
+    setAttributeIfAvailable(element, "href");
+    setAttributeIfAvailable(element, "content");
+  });
+};

gatsby-config.ts

@@ -62,29 +62,27 @@ export default {
                 guid: site.siteMetadata.url + node?.fields?.slug,
                 custom_elements: [{ "content:encoded": node.html }],
               })),
-            query: `
-              {
-                allMarkdownRemark(
-                  limit: 1000,
-                  sort: { order: DESC, fields: [frontmatter___date] },
-                  filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
-                ) {
-                  edges {
-                    node {
-                      html
-                      fields {
-                        slug
-                      }
-                      frontmatter {
-                        date
-                        title
-                        description
-                      }
+            query: `{
+              allMarkdownRemark(
+                limit: 1000
+                sort: {frontmatter: {date: DESC}}
+                filter: {frontmatter: {template: {eq: "post"}, draft: {ne: true}}}
+              ) {
+                edges {
+                  node {
+                    html
+                    fields {
+                      slug
+                    }
+                    frontmatter {
+                      date
+                      title
+                      description
                     }
                   }
                 }
               }
-            `,
+            }`,
             output: "/rss.xml",
             title: config.title,
           },
@@ -110,7 +108,7 @@ export default {
           },
           {
             resolve: "gatsby-remark-images-medium-zoom",
-            options: { background: "rgb(0, 0, 0,50%)" },
+            options: { background: "rgb(0, 0, 0,70%)" },
           },
           "gatsby-remark-autolink-headers",
           "gatsby-remark-prismjs",
@@ -166,31 +164,8 @@ export default {
         start_url: "/",
       },
     },
-    {
-      resolve: "gatsby-plugin-offline",
-      options: {
-        workboxConfig: {
-          runtimeCaching: [
-            {
-              urlPattern: /(\.js$|\.css$|[^:]static\/)/,
-              handler: "CacheFirst",
-            },
-            {
-              urlPattern: /^https?:.*\/page-data\/.*\.json/,
-              handler: "StaleWhileRevalidate",
-            },
-            {
-              urlPattern: /^https?:.*\.(png|jpg|jpeg|webp|svg|gif|tiff|js|woff|woff2|json|css)$/,
-              handler: "StaleWhileRevalidate",
-            },
-            {
-              urlPattern: /^https?:\/\/fonts\.googleapis\.com\/css/,
-              handler: "StaleWhileRevalidate",
-            },
-          ],
-        },
-      },
-    },
+    // remove the old service worker if it is available.
+    "gatsby-plugin-remove-serviceworker",
     "gatsby-plugin-image",
     "gatsby-plugin-catch-links",
     "gatsby-plugin-react-helmet",

gatsby-ssr.tsx

@@ -18,7 +18,19 @@ const setColorTheme = `
   }
 })();
 `;
-export const onRenderBody = ({ setPreBodyComponents }: RenderBodyArgs) => {
+export const onRenderBody = ({
+  setPreBodyComponents,
+  setHeadComponents,
+  pathname,
+}: RenderBodyArgs) => {
+  const currentUrl = `https://www.rickvanlieshout.com${pathname}`;
+
+  setHeadComponents([
+    <meta data-url="currentUrl" key="og:url" property="og:url" content={currentUrl} />,
+    <link data-url="currentUrl" key="canonical" rel="canonical" href={currentUrl} />,
+    <meta data-url="currentUrl" property="test:rick" key="test:rick" content={currentUrl} />,
+  ]);
+
   setPreBodyComponents([
     React.createElement("script", {
       key: "theme",

internal/gatsby/queries/categories-query.ts

@@ -13,12 +13,10 @@ const categoriesQuery = async (graphql: CreatePagesArgs["graphql"]) => {
   const result = await graphql<CategoriesQueryResult>(`
     {
       allMarkdownRemark(
-        filter: {
-          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
-        }
-        sort: { order: DESC, fields: [frontmatter___date] }
+        filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
+        sort: { frontmatter: { date: DESC } }
       ) {
-        group(field: frontmatter___category) {
+        group(field: { frontmatter: { category: SELECT } }) {
           fieldValue
           totalCount
         }

internal/gatsby/queries/tags-query.ts

@@ -13,11 +13,9 @@ const tagsQuery = async (graphql: CreatePagesArgs["graphql"]) => {
   const result = await graphql<TagsQueryResult>(`
     {
       allMarkdownRemark(
-        filter: {
-          frontmatter: { template: { eq: "post" }, draft: { ne: true } }
-        }
+        filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
       ) {
-        group(field: frontmatter___tags) {
+        group(field: { frontmatter: { tags: SELECT } }) {
           fieldValue
           totalCount
         }

internal/testing/__mocks__/author.ts

@@ -1,7 +1,7 @@
 import contacts from "./contacts";
 
 export default {
-  photo: "/me.png",
+  photo: "/content/me.png",
   bio: "",
   name: "Rick van Lieshout",
   contacts,

internal/testing/__mocks__/legalMenu.ts

@@ -1,5 +1,5 @@
 export default [
   { label: "Articles", path: "/" },
-  { label: "About Me", path: "/pages/about" },
-  { label: "Contact Me", path: "/pages/contacts" },
+  { label: "About Me", path: "/pages/about/" },
+  { label: "Contact Me", path: "/pages/contacts/" },
 ];

internal/testing/__mocks__/site-metadata.ts

@@ -4,7 +4,7 @@ import menu from "./menu";
 export default {
   site: {
     siteMetadata: {
-      url: "https://rickvanlieshout.com",
+      url: "https://www.rickvanlieshout.com",
       title: "Rick van Lieshout ~ Mastermindzh",
       subtitle: "The thoughts, discoveries and murmurings of a Software enthusiast",
       copyright: "All rights reserved.",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rickvanlieshout-com",
-  "version": "1.0.0",
+  "version": "1.3.1",
   "description": "My personal blog / website",
   "keywords": [
     "gatsby",
@@ -18,8 +18,8 @@
   "author": "Rick van Lieshout <info@rickvanlieshout.com>",
   "scripts": {
     "build": "npm run clean && gatsby build",
-    "commit": "git-cz",
     "clean": "rimraf .cache public",
+    "commit": "git-cz",
     "format": "npm run format:ts && npm run format:scss",
     "format:scss": "stylelint \"src/**/*.scss\" --fix",
     "format:ts": "eslint \"src\" --ext .tsx,.ts --fix && prettier --write .",
@@ -29,9 +29,9 @@
     "lint:ts": "eslint \"src\" --ext .tsx,.ts && prettier --check .",
     "prepare": "husky install",
     "release": "standard-version",
+    "release:major": "standard-version --release-as major",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch",
-    "release:major": "standard-version --release-as major",
     "reset-snapshots": "find -type f -name '*.snap*' -delete && npm run test",
     "semantic-release": "semantic-release",
     "serve": "gatsby serve",
@@ -48,114 +48,114 @@
       "npm run format:scss"
     ]
   },
+  "config": {
+    "commitizen": {
+      "path": "@commitlint/cz-commitlint"
+    }
+  },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.2.0",
-    "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "classnames": "^2.3.2",
-    "disqus-react": "^1.1.4",
-    "gatsby": "^4.24.4",
-    "gatsby-link": "^4.24.1",
-    "gatsby-plugin-catch-links": "^4.24.0",
-    "gatsby-plugin-feed": "^4.24.0",
-    "gatsby-plugin-google-gtag": "^4.24.0",
-    "gatsby-plugin-image": "^2.24.0",
-    "gatsby-plugin-manifest": "^4.24.0",
-    "gatsby-plugin-offline": "^5.24.0",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "classnames": "^2.5.1",
+    "disqus-react": "^1.1.6",
+    "gatsby": "^5.14.1",
+    "gatsby-link": "^5.14.1",
+    "gatsby-plugin-catch-links": "^5.14.0",
+    "gatsby-plugin-feed": "^5.14.0",
+    "gatsby-plugin-google-gtag": "^5.14.0",
+    "gatsby-plugin-image": "^3.14.0",
+    "gatsby-plugin-manifest": "^5.14.0",
     "gatsby-plugin-optimize-svgs": "^1.0.5",
-    "gatsby-plugin-react-helmet": "^5.24.0",
-    "gatsby-plugin-robots-txt": "^1.7.1",
-    "gatsby-plugin-sass": "^5.24.0",
-    "gatsby-plugin-sharp": "^4.24.0",
-    "gatsby-plugin-sitemap": "^5.24.0",
-    "gatsby-remark-autolink-headers": "^5.24.0",
-    "gatsby-remark-copy-linked-files": "^5.24.0",
+    "gatsby-plugin-react-helmet": "^6.14.0",
+    "gatsby-plugin-remove-serviceworker": "^1.0.0",
+    "gatsby-plugin-robots-txt": "^1.8.0",
+    "gatsby-plugin-sass": "^6.14.0",
+    "gatsby-plugin-sharp": "^5.14.0",
+    "gatsby-plugin-sitemap": "^6.14.0",
+    "gatsby-remark-autolink-headers": "^6.14.0",
+    "gatsby-remark-copy-linked-files": "^6.14.0",
     "gatsby-remark-external-links": "0.0.4",
-    "gatsby-remark-images": "^6.24.0",
+    "gatsby-remark-images": "^7.14.0",
     "gatsby-remark-images-medium-zoom": "^1.7.0",
-    "gatsby-remark-prismjs": "^6.24.0",
-    "gatsby-remark-responsive-iframe": "^5.24.0",
-    "gatsby-remark-smartypants": "^5.24.0",
-    "gatsby-source-filesystem": "^4.24.0",
-    "gatsby-transformer-remark": "^5.24.0",
-    "gatsby-transformer-sharp": "^4.24.0",
+    "gatsby-remark-prismjs": "^7.14.0",
+    "gatsby-remark-responsive-iframe": "^6.14.0",
+    "gatsby-remark-smartypants": "^6.14.0",
+    "gatsby-source-filesystem": "^5.14.0",
+    "gatsby-transformer-remark": "^6.14.0",
+    "gatsby-transformer-sharp": "^5.14.0",
     "prismjs": "^1.29.0",
-    "react": "^18.2.0",
-    "react-cookie-consent": "^8.0.1",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-cookie-consent": "^9.0.0",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-toggle": "^4.1.3",
     "reading-time": "^1.5.0"
   },
   "devDependencies": {
-    "@commitlint/config-conventional": "^17.2.0",
-    "@commitlint/cz-commitlint": "^17.2.0",
-    "@jest/globals": "^29.1.2",
+    "@commitlint/config-conventional": "^17.8.1",
+    "@commitlint/cz-commitlint": "^19.6.1",
+    "@jest/globals": "^29.7.0",
     "@mastermindzh/eslint-config": "^1.0.2",
     "@mastermindzh/prettier-config": "^1.0.0",
     "@semantic-release/exec": "6.0.3",
     "@semantic-release/git": "10.0.1",
-    "@swc/core": "^1.3.6",
-    "@swc/jest": "^0.2.23",
-    "@types/gatsby-transformer-remark": "^2.9.1",
-    "@types/jest": "^29.1.2",
-    "@types/node": "^18.8.4",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-helmet": "^6.1.5",
-    "@types/react-test-renderer": "^18.0.0",
-    "@types/react-toggle": "^4.0.3",
-    "@types/sass": "^1.43.1",
-    "@typescript-eslint/eslint-plugin": "^5.40.0",
-    "@typescript-eslint/parser": "^5.40.0",
-    "autoprefixer": "^10.4.12",
-    "browserslist": "^4.21.4",
+    "@swc/core": "^1.10.4",
+    "@swc/jest": "^0.2.37",
+    "@types/gatsby-transformer-remark": "^2.9.4",
+    "@types/jest": "^29.5.14",
+    "@types/node": "^22.10.3",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-helmet": "^6.1.6",
+    "@types/react-test-renderer": "^18.3.1",
+    "@types/react-toggle": "^4.0.5",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.20",
+    "browserslist": "^4.24.3",
     "codecov": "^3.8.3",
-    "commitizen": "^4.2.5",
-    "commitlint": "^17.2.0",
-    "concurrently": "^7.4.0",
-    "eslint": "^8.25.0",
+    "commitizen": "^4.3.1",
+    "commitlint": "^19.6.1",
+    "concurrently": "^9.1.2",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^8.10.0",
     "eslint-config-react-app": "^7.0.1",
-    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-import-resolver-typescript": "^3.7.0",
     "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.1",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^27.9.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-simple-import-sort": "^8.0.0",
-    "husky": "8.0.1",
+    "eslint-plugin-react": "^7.37.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-simple-import-sort": "^10.0.0",
+    "husky": "^8.0.3",
     "identity-obj-proxy": "3.0.0",
-    "jest": "^29.1.2",
-    "jest-cli": "^29.1.2",
-    "jest-environment-jsdom": "^29.1.2",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-svg-transformer": "^1.0.0",
-    "lint-staged": "^13.0.3",
-    "lost": "9.0.1",
-    "markdownlint": "^0.26.2",
-    "postcss": "^8.4.17",
-    "postcss-scss": "^4.0.5",
-    "prettier": "^2.7.1",
-    "prettier-plugin-packagejson": "^2.3.0",
-    "react-test-renderer": "^18.2.0",
-    "rimraf": "3.0.2",
-    "sass": "^1.55.0",
+    "lint-staged": "^15.3.0",
+    "lost": "9.0.2",
+    "markdownlint": "^0.37.3",
+    "postcss": "^8.4.49",
+    "postcss-scss": "^4.0.9",
+    "prettier": "^2.8.8",
+    "prettier-plugin-packagejson": "^2.5.6",
+    "react-test-renderer": "^18.3.1",
+    "rimraf": "^6.0.1",
+    "sass": "^1.83.0",
     "source-map-support": "^0.5.21",
     "standard-version": "^9.5.0",
-    "stylelint": "^14.13.0",
-    "stylelint-config-recommended-scss": "^7.0.0",
-    "stylelint-order": "^5.0.0",
-    "stylelint-scss": "^4.3.0",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.8.4"
-  },
-  "config": {
-    "commitizen": {
-      "path": "@commitlint/cz-commitlint"
-    }
+    "stylelint": "^16.12.0",
+    "stylelint-config-recommended-scss": "^14.1.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.10.0",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.7.2",
+    "unist-util-find": "3.0.0"
   }
 }

src/assets/scss/_base.scss

@@ -6,6 +6,10 @@
   display: none;
 }
 
+.language-text {
+  overflow-wrap: break-word !important;
+}
+
 @media print {
   .hideInPrintView {
     display: none;

src/assets/scss/prism/github.scss

@@ -1,5 +1,5 @@
 /**
- * GHColors theme by Avi Aryan (http://aviaryan.in)
+ * GHColors theme by Avi Aryan (https://aviaryan.in)
  * Inspired by Github syntax coloring
  */
 [data-theme="light"] {

src/components/Layout/Layout.tsx

@@ -1,18 +1,27 @@
 import React from "react";
 import Helmet from "react-helmet";
 
+import { useSiteMetadata } from "@/hooks";
 import { CookieBar } from "../Cookiebar/CookieBar";
 import * as styles from "./Layout.module.scss";
-import { useSiteMetadata } from "@/hooks";
 
 interface Props {
   title: string;
   description?: string;
   socialImage?: string;
   children: React.ReactNode;
+  noIndex?: boolean;
+  slug?: string;
 }
 
-const Layout: React.FC<Props> = ({ children, title, description, socialImage = "" }: Props) => {
+const Layout: React.FC<Props> = ({
+  children,
+  title,
+  description,
+  socialImage = "",
+  noIndex = false,
+  slug,
+}: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;
   const metaImageUrl = url + metaImage;
@@ -23,12 +32,16 @@ const Layout: React.FC<Props> = ({ children, title, description, socialImage = "
         <html lang="en" />
         <title>{title}</title>
         <meta name="description" content={description} />
+        <meta property="og:description" content={description} />
         <meta property="og:site_name" content={title} />
         <meta property="og:image" content={metaImageUrl} />
+        <meta property="og:title" content={title} />
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:title" content={title} />
         <meta name="twitter:description" content={description} />
         <meta name="twitter:image" content={metaImageUrl} />
+        <meta property="twitter:site" content="@mastermindzh" />
+        {noIndex && <meta name="robots" content="noindex" />}
       </Helmet>
       {children}
       <CookieBar />

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 (
-    <div ref={pageRef} className={styles.page}>
-      <div className={styles.inner}>
-        {title && <h1 className={styles.title}>{title}</h1>}
-        <div className={styles.body}>{children}</div>
+    <>
+      <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>
-    </div>
+    </>
   );
 };
 

src/components/Post/Author/Author.tsx

@@ -9,7 +9,7 @@ const Author = () => {
     <div className={styles.author}>
       <p className={styles.bio}>
         Written by:{" "}
-        <a href="/pages/about">
+        <a href="/pages/about/">
           <strong>{author.name}</strong>
         </a>
         {typeof window !== "undefined" ? (

src/components/Post/Author/__snapshots__/Author.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`Author renders correctly 1`] = `
     Written by:
      
     <a
-      href="/pages/about"
+      href="/pages/about/"
     >
       <strong>
         Rick van Lieshout

src/components/Post/Content/__snapshots__/Content.test.tsx.snap

@@ -33,6 +33,7 @@ exports[`Content renders correctly 1`] = `
         onClick={[Function]}
         style={
           {
+            "cursor": "pointer",
             "lineHeight": "50px",
             "marginRight": "10px",
           }
@@ -111,7 +112,7 @@ exports[`Content renders correctly 1`] = `
                   xmlns="http://www.w3.org/2000/svg"
                 >
                   <path
-                    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                    d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
                     fill="currentColor"
                     style={{}}
                   />

src/components/Post/Post.tsx

@@ -1,5 +1,7 @@
 import type { Node } from "@/types";
 import React from "react";
+import { Helmet } from "react-helmet";
+import { useSiteMetadata } from "../../hooks";
 import { Author } from "./Author";
 import { Comments } from "./Comments";
 import { Content } from "./Content";
@@ -14,24 +16,34 @@ interface Props {
 const Post: React.FC<Props> = ({ post }: Props) => {
   const { html } = post;
   const { tagSlugs, slug, readingTime } = post.fields;
-  const { tags, title, date, disqusId } = post.frontmatter;
+  const { tags, title, date, disqusId, category } = post.frontmatter;
+  const { url } = useSiteMetadata();
 
   return (
-    <div className={styles.post}>
-      <div className={styles.content}>
-        <Content body={html} title={title} subTitle={readingTime?.text} />
-      </div>
+    <>
+      <Helmet>
+        <meta property="og:type" content="article" />
+        <meta property="article:publisher" content={url} />
+        <meta property="article:section" content={category} />
+        <meta property="article:tag" content={tags ? tags[0] : ""} />
+      </Helmet>
 
-      <div className={styles.footer}>
-        <Meta date={date} />
-        {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
-        <Author />
-      </div>
+      <div className={styles.post}>
+        <div className={styles.content}>
+          <Content body={html} title={title} subTitle={readingTime?.text} />
+        </div>
 
-      <div className={`${styles.comments} hideInPrintView`}>
-        <Comments disqusId={disqusId} postSlug={slug} postTitle={post.frontmatter.title} />
+        <div className={styles.footer}>
+          <Meta date={date} />
+          {tags && tagSlugs && <Tags tags={tags} tagSlugs={tagSlugs} />}
+          <Author />
+        </div>
+
+        <div className={`${styles.comments} hideInPrintView`}>
+          <Comments disqusId={disqusId} postSlug={slug} postTitle={post.frontmatter.title} />
+        </div>
       </div>
-    </div>
+    </>
   );
 };
 

src/components/Post/__snapshots__/Post.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`Post renders correctly 1`] = `
           onClick={[Function]}
           style={
             {
+              "cursor": "pointer",
               "lineHeight": "50px",
               "marginRight": "10px",
             }
@@ -112,7 +113,7 @@ exports[`Post renders correctly 1`] = `
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
+                      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"
                       fill="currentColor"
                       style={{}}
                     />
@@ -164,7 +165,7 @@ exports[`Post renders correctly 1`] = `
         Written by:
          
         <a
-          href="/pages/about"
+          href="/pages/about/"
         >
           <strong>
             Rick van Lieshout