chore(deps): update browserslist to 4.28.1

chore(deps): update typescript-eslint monorepo to 8.48.1

.drone.yml

@@ -4,16 +4,16 @@ name: default
 
 steps:
   - name: install
-    image: node:19.4.0
+    image: node:19.9.0
     commands:
       - npm install
 
   - name: test
-    image: node:19.4.0
+    image: node:19.9.0
     commands:
       - npm run test:coverage
 
   - name: build
-    image: node:19.4.0
+    image: node:19.9.0
     commands:
       - npm run build

.eslintignore

@@ -1,4 +0,0 @@
-*.*
-!*.ts
-!*.tsx
-/public/

.eslintrc

@@ -1,53 +0,0 @@
-{
-  "env": {
-    "browser": true
-  },
-
-  "extends": [
-    "plugin:import/typescript",
-    "plugin:import/errors",
-    "airbnb-typescript",
-    "@mastermindzh/eslint-config",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "project": "./tsconfig.json"
-  },
-  "plugins": [
-    "react",
-    "jest",
-    "@typescript-eslint",
-    "simple-import-sort",
-    "prettier"
-  ],
-  "rules": {
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "devDependencies": [
-          "**/*.test.ts",
-          "**/*.test.tsx",
-          "**/internal/**/*.ts"
-        ]
-      }
-    ],
-    "@typescript-eslint/no-unused-vars": ["off"],
-    "@typescript-eslint/no-use-before-define": ["off"],
-    "@typescript-eslint/quotes": ["error", "double"],
-    "@typescript-eslint/naming-convention": ["error", {
-      "format": ["camelCase", "UPPER_CASE", "snake_case", "PascalCase"],
-      "leadingUnderscore": "allow",
-      "selector": "parameter"
-    }],
-    "react/static-property-placement": ["off"],
-    "react/prop-types": ["off"],
-    "no-shadow": "off",
-    "@typescript-eslint/no-shadow": ["error"]
-  },
-  "settings": {
-    "import/resolver": {
-      "typescript": {}
-    }
-  }
-}

.github/workflows/release.yml

@@ -5,6 +5,9 @@ on:
   push:
     branches:
       - master
+  pull_request:
+    branches:
+      - master
 
 jobs:
   release:
@@ -26,8 +29,3 @@ jobs:
 
       - name: Run tests
         run: npm run test
-
-      # - name: Release
-      #   env:
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      #   run: npm run semantic-release

.husky/commit-msg

@@ -1,6 +1,3 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
 npx --no-install commitlint --edit "$1"
 npm run lint:staged
 npm run test

.husky/pre-push

@@ -1,2 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.nvmrc

@@ -1 +1,2 @@
-19.8.1
+v22.12.0
+

.prettierrc.js

@@ -1,3 +1,4 @@
 module.exports = {
-  ...require("@mastermindzh/prettier-config")
+  ...require("@mastermindzh/prettier-config"),
+  trailingComma: "all",
 };

.prettierrc.json

@@ -0,0 +1,22 @@
+{
+  "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "singleQuote": false,
+  "jsxSingleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "all",
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "requirePragma": false,
+  "insertPragma": false,
+  "proseWrap": "preserve",
+  "htmlWhitespaceSensitivity": "css",
+  "endOfLine": "lf",
+  "semi": true,
+  "singleAttributePerLine": false,
+  "embeddedLanguageFormatting": "auto",
+  "vueIndentScriptAndStyle": false,
+  "experimentalTernaries": false
+}

.stylelintrc

@@ -9,13 +9,16 @@
     "font-weight-notation": "named-where-possible",
     "function-url-no-scheme-relative": true,
     "function-url-quotes": "always",
-    "max-empty-lines": 1,
     "no-descending-specificity": true,
     "no-duplicate-selectors": true,
-    "order/order": ["custom-properties", "declarations"],
+    "order/order": [
+      [
+      "custom-properties",
+      "declarations"
+      ]
+    ],
     "order/properties-alphabetical-order": true,
     "property-no-unknown": [true, { "ignoreProperties": ["/^lost-/"] }],
-    "string-quotes": "double",
     "value-keyword-case": "lower"
   }
 }

.vscode/settings.json

@@ -4,6 +4,7 @@
         "disqus",
         "fontawesome",
         "fortawesome",
+        "frontliners",
         "frontmatter",
         "gitops",
         "homelab",

content/pages/resume/index.md

@@ -18,18 +18,26 @@ template: "page"
 
 **Open-source aficionado**<br />
 _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.
+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. If you're interested in what else I do, or why, let me know and I'll share a detailed description.
 
 **CTO at Frontliners (previously INFORIT)**<br />
 _2018 - Now_<br />
-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.
+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, Supabase and React. We've delivered a few smaller pieces of software but mainly focus on building a next-gen Transport Management System called TFX.
 
-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, and hiring, a coherent team of (lead) engineers by sharing knowledge, making decisions, and empowering them to explore technologies outside of their comfort zone.
+This includes everything from platform to e2e engineering.
+During my time at Frontliners, the company has grown from 5-7 in-house developers on a single product to 35-40 technical engineers on multiple projects.
 
-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.
+The teams I manage will be listed below. Some of the core concepts they work with will also be listed.
+Apart from the last one I also play an active role in them:
 
-Most relevant technologies used: dotnetcore, React, Angular, Kafka, RabbitMQ, Mongo, PostgreSQL, Growthbook, Docker & Kubernetes
+- 4 Full-fledged (6-8 people) Scrum development teams working on the latest product.
+  - day-to-day management of people done by "Chapter leads"
+  - React, Docker, .NET 9+ (core), Mongo, Kafka, Debezium, DDD, CQRS
+- Business Integration team (Supabase, Kysely, PostgreSQL)
+- Platform team (Kubernetes, Terraform, ArgoCD, CI/CD pipelines, Vault, Keycloak, etc...)
+- Legacy team (ASP.NET, MSSQL, MongoDB, Elasticsearch)
+- Legacy team (Clarion, SQL-Sybase)
 
 **Hanflex employee**<br />
 _September 2015 - July 2018_<br />
@@ -64,6 +72,7 @@ Building an interactive and fully customizable dashboard on top of VAA's existin
 I'll list some of the training courses I've had whilst working.
 Some of these have (official) certificates, some don't, but all have brought value and knowledge.
 
+- Domain Driven Design [Vijfhart](./DDD-vijfhart.pdf)
 - Young Executive Program (YEP) - [De Baak](https://debaak.nl/trainingen/young-executives-program)
 - Hiring & interview training ([icm.nl](https://www.icm.nl/opleidingen-en-trainingen/hrm/selectiegesprekken-voeren/))
 - Conversation techniques & de-escalation ([TIJDwinst.com](https://gesprekstechnieken.com/cursus-gesprekstechnieken/)](<https://gesprekstechnieken.com/cursus-gesprekstechnieken/>)).

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

@@ -102,7 +102,7 @@ First, let's add a script to the `package.json` that will do our commit for us:
 ```json
 {
   "scripts": {
-    "commit": "git-cz",
+    "commit": "git-cz"
   }
 }
 ```
@@ -138,14 +138,7 @@ module.exports = {
     "subject-full-stop": [2, "never", "."],
     "type-case": [2, "always", "lower-case"],
     "type-empty": [2, "never"],
-    "type-enum": [
-      2,
-      "always",
-      [
-        "first type",
-        "second type",
-      ],
-    ],
+    "type-enum": [2, "always", ["first type", "second type"]],
   },
   prompt: {
     questions: {
@@ -155,7 +148,6 @@ module.exports = {
     },
   },
 };
-
 ```
 
 As you can see we have configured a whole bunch of things, but there are 2 things that matter for now:
@@ -234,8 +226,7 @@ module.exports = {
             emoji: "💎",
           },
           refactor: {
-            description:
-              "A code change that neither fixes a bug nor adds a feature",
+            description: "A code change that neither fixes a bug nor adds a feature",
             title: "Code Refactoring",
             emoji: "📦",
           },
@@ -274,12 +265,10 @@ module.exports = {
         },
       },
       scope: {
-        description:
-          "What is the scope of this change (e.g. component or file name)",
+        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",
+        description: "Write a short, imperative tense description of the change",
       },
       body: {
         description: "Provide a longer description of the change",
@@ -377,7 +366,7 @@ First, let's add some npm scripts again:
     "release": "standard-version",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch",
-    "release:major": "standard-version --release-as major",
+    "release:major": "standard-version --release-as major"
   }
 }
 ```

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

@@ -14,7 +14,6 @@ description: "Flashing the LSI-9211 used to be way more difficult, luckily the E
 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.

content/posts/2025/a-hidden-life-of-pain-sorrow-misery-and-rampant-emotions/index.md

@@ -31,7 +31,7 @@ But then there's another kind.
 
 The kind that settles into your bones. The kind that haunts you during the quiet hours. The kind that never finds a conclusion.
 
-That kind is not absence. It's ***gone***. Irrevocable, final, cruel. A door slammed shut that you still find yourself knocking on, long after you’ve forgotten why you started.
+That kind is not absence. It's **_gone_**. Irrevocable, final, cruel. A door slammed shut that you still find yourself knocking on, long after you’ve forgotten why you started.
 
 It never opens. And still, you try the handle every now and then.
 
@@ -39,13 +39,13 @@ It never opens. And still, you try the handle every now and then.
 
 Losing a loved one doesn’t stay in one room of your house though, it isn't one door that is locked. It leaks under doors and through cracks. You find it in the most unexpected places.
 
-You're sipping coffee with someone, and they mention a trip they took. Suddenly, you're remembering the trip *you* never took. The one you'd planned. The one that cancer took from you.
+You're sipping coffee with someone, and they mention a trip they took. Suddenly, you're remembering the trip _you_ never took. The one you'd planned. The one that cancer took from you.
 
 They talk about a shared playlist. You remember the song you danced to in the rain, soaking wet but laughing anyway. The same song you now skip every time it comes on because it hurts too much
 
 Someone laughs about chipped mugs. You think of the one she cracked and called "vintage," and how it's still at the back of your cabinet. Untouched. Sacred.
 
-It’s like walking through a museum where only *you* know what’s behind the glass.
+It’s like walking through a museum where only _you_ know what’s behind the glass.
 
 > They talk, they laugh, the world goes on,<br />
 > Yet I sit with shadows, from dusk to dawn. <br />
@@ -56,9 +56,9 @@ It’s like walking through a museum where only *you* know what’s behind the g
  <img src="/media/the-flashback-no-one-sees.png" alt="A foggy bathroom mirror with a red lipstick kiss at the center, surrounded by a shadowy, intimate atmosphere.">
 </figure>
 
-These are what I call *mind pops*. Short for Involuntary Autobiographical Memory Chains. I wrote a journal-like book once, and later a smaller one. I wanted to share them. I tried. But I was never brave enough to.
+These are what I call _mind pops_. Short for Involuntary Autobiographical Memory Chains. I wrote a journal-like book once, and later a smaller one. I wanted to share them. I tried. But I was never brave enough to.
 
-Mind pops come uninvited. And they come *hard*.
+Mind pops come uninvited. And they come _hard_.
 Here are some examples from my book:
 
 - The eyeliner she never quite got even.
@@ -77,7 +77,7 @@ They’re not just memories. They’re grenades. Quiet ones. You never know when
 
 ## Unfair doesn’t even begin to cover it
 
-We grow up believing that the world has some kind of order to it. That bad things happen, sure—but not *this* bad. Not *this* unfair.
+We grow up believing that the world has some kind of order to it. That bad things happen, sure—but not _this_ bad. Not _this_ unfair.
 You lose someone who made life feel infinite. You watch them disappear into the haze of hospital lights and soft-spoken specialists.
 
 Cancer doesn’t care if you’re young. Or kind.<br />
@@ -99,11 +99,11 @@ For a long time, no one knew. Most don't, still.
 
 People see the version of you they expect: Smiling. Joking. Coping. Existing.<br />
 But behind the eyes, you’re unraveling. Constantly. Because grief doesn’t pause.<br />
-Not ***really***.
+Not **_really_**.
 
 Sharing this is hard. Not because I don’t want to, but because it makes you so vulnerable. Because as you're writing or speaking, memories pop up uninvited. They derail your words. They choke your sentences. They just pop in... bastards...
 
-And even when you manage to share, others often don’t understand. They compare. They say things like “I lost someone too,” but it’s different. This kind of grief? This kind of loss? It’s heavier. It cuts deeper. And hearing it treated like it’s the same as all the rest—*that* makes you angry.
+And even when you manage to share, others often don’t understand. They compare. They say things like “I lost someone too,” but it’s different. This kind of grief? This kind of loss? It’s heavier. It cuts deeper. And hearing it treated like it’s the same as all the rest—_that_ makes you angry.
 
 Here’s something I once wrote, when I thought no one would ever read it:
 
@@ -135,19 +135,19 @@ If I eat alone, at a restaurant, I order what she would’ve. (who do I kid, I s
 And I wrote a song. It’s unfinished though—like she was.
 
 **🎵 (Refrain)**<br />
-*A strand of blonde hair, as delicate as sun,*<br />
-*A mystery found, in silence it's spun.*<br />
-*But memory, like a fleeting breeze,*<br />
-*Fades away as a haze, in the time we seize.*<br /><br />
+_A strand of blonde hair, as delicate as sun,_<br />
+_A mystery found, in silence it's spun._<br />
+_But memory, like a fleeting breeze,_<br />
+_Fades away as a haze, in the time we seize._<br /><br />
 
 **🎶(Verse)**<br />
-*Days pass like rustling leaves,*<br />
-*Stories fade, like quiet thieves.*<br />
-*How swiftly memory slips away,*<br />
-*Like an old melody, lost in the fray.*<br />
+_Days pass like rustling leaves,_<br />
+_Stories fade, like quiet thieves._<br />
+_How swiftly memory slips away,_<br />
+_Like an old melody, lost in the fray._<br />
 
-*A mysterious gate, in the labyrinth of the mind,*<br />
-*Locked and hidden, what secrets behind?*
+_A mysterious gate, in the labyrinth of the mind,_<br />
+_Locked and hidden, what secrets behind?_
 
 As I'm writing this blog however, I have a sudden urge to add sound to the lyrics, it'll still be unfinished, but a little farther along.
 I used both a piano and a viola to give it a more interesting sound than just the piano.
@@ -175,7 +175,7 @@ She once told me something that still echoes today:
 > "You have to grieve me, for a while... and then you move on. <br />
 > You find someone else to love. Someone who makes you feel something again. <br /> You deserve that."
 
-I shook my head. *"I can’t. I **won’t**. Not because I don’t want to feel again. But because abstinence, to me, feels like remembering you as you are. Eternal."* <br />
+I shook my head. _"I can’t. I **won’t**. Not because I don’t want to feel again. But because abstinence, to me, feels like remembering you as you are. Eternal."_ <br />
 We both cried after that. For different reasons, I think.
 
 ### My words weren't true though
@@ -192,7 +192,7 @@ I know grief isn’t rational. It doesn’t follow clean lines.<br />
 And maybe that’s what hurts most of all—knowing I tried, and still came back to the same place. <br />
 Alone, but full of someone who isn’t here.
 
-One day... *maybe*.
+One day... _maybe_.
 
 ## Why I’m finally speaking
 
@@ -227,12 +227,12 @@ I’ve met people over the years who’ve carried this same grief. And some of t
 On the edge.
 
 Wondering if there’s peace on the other side of absence.<br />
-Let me say this clearly: I have never thought of taking that road for myself. If anything, I would *ask* for eternal life. Even with the grief.<br />
+Let me say this clearly: I have never thought of taking that road for myself. If anything, I would _ask_ for eternal life. Even with the grief.<br />
 But if you are someone who has stood on that edge:
 
 **Don’t. Please.**
 
-The pain is real. The grief is heavy. But life—*even broken life*—has light in it still. And sometimes, all you need is one person willing to sit with you in the dark.
+The pain is real. The grief is heavy. But life—_even broken life_—has light in it still. And sometimes, all you need is one person willing to sit with you in the dark.
 
 Let me be that person for a moment. Just long enough to remind you: the door might be closed, but the room isn’t empty.
 
@@ -241,7 +241,7 @@ Whatever you do, don't pass on the pain.
 
 ## What help looks like
 
-Over the past two years, I’ve slowly—*achingly*—learned to live with it.
+Over the past two years, I’ve slowly—_achingly_—learned to live with it.
 And honestly, I'm happier now than I've ever been since.
 
 I’ve had friends. Real ones. Some with the training to guide me through the murk. Others who simply sat there while I unraveled, trying their best.
@@ -252,7 +252,7 @@ They had always been there, I just didn't allow them to be there for me before.
 I’ve learned that grief isn’t a wall to climb or a puzzle to solve. It’s a landscape.
 
 You don’t conquer it.<br />
-You *walk it*. One aching step at a time.<br />
+You _walk it_. One aching step at a time.<br />
 And if you're lucky... you don’t walk it alone.
 
 ### To those who held me together
@@ -287,7 +287,7 @@ Still holding her memory, but not drowning in it.
 ## Before I finally sign off
 
 This entire blog was something I never thought I could write.
-And what comes next,this next part, is something I swore I *never* would share.
+And what comes next,this next part, is something I swore I _never_ would share.
 
 But here we are.
 
@@ -353,4 +353,4 @@ A happy one">
 If you’ve read this far—thank you.
 That alone means more than you know.
 
-*- Rick, mastermindzh, lycan, xxxroosjexxx, and other alias' you might know me from.*
+_- Rick, mastermindzh, lycan, xxxroosjexxx, and other alias' you might know me from._

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

@@ -44,7 +44,7 @@ One of the most satisfying aspects of IaC is the ability to automate even the sm
 
 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```
+`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.
@@ -65,8 +65,8 @@ labels:
 
 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`
+- 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:

content/posts/2025/what-is-software-architecture-really/index.md

@@ -0,0 +1,138 @@
+---
+title: What is Software Architecture (Really)?
+date: "2025-10-14"
+template: "post"
+category: "software-architecture"
+tags:
+
+- "software architecture"
+- "software development"
+- "engineering culture"
+- "team dynamics"
+- "people management"
+- "team maturity"
+- "frontliners"
+- "adaptability"
+description: "Software architecture isn’t a fixed design or a set of diagrams, it’s the evolving set of decisions that guide how a system behaves and grows with its team."
+socialImage: ./media/compass.png
+---
+
+## A new category on rickvanlieshout.com: Software Architecture
+
+This new category is about the *real* side of software architecture.
+Not buzzwords, not picture-perfect diagrams, but the messy, human part of designing systems that actually work.
+
+I’ve spent many years working with different kinds of architectures, from tightly coupled monoliths to sprawling microservice landscapes. Along the way, I’ve learned that architecture isn’t about doing things the “right” way, it’s about understanding *why* you’re doing them in the first place, and how they fit into your team and product’s reality.
+
+Note that this applies both to enterprise systems as well as open-source initiatives.
+
+## What software architecture actually is
+
+Software architecture is the set of decisions that define how a system behaves, evolves, and is understood over time.
+It’s not the framework, not the diagram, and not the shiny technology you picked. It’s the *reasoning* behind those things, and how they hold up when the system changes.
+
+If software design is about the details, like how classes interact, how APIs are structured, and how code is organized, architecture is about direction.
+It’s the compass that helps the team navigate change without losing its bearings.
+
+Good architecture provides just enough structure for a team to move fast, without locking them into a corner. It’s the scaffolding around the code, the **shared mental model** that keeps complexity in check.
+
+But architecture doesn’t exist in isolation. The same design that works beautifully in one place can fail completely in another, which brings us to the one factor most people overlook: **context.**
+
+## Why context always matters
+
+There’s no single best architecture, only architectures that make sense in a specific context.
+A perfect design on paper might fail completely when you drop it into the wrong environment. The right architecture depends on your product stage, your constraints, and, most importantly, your team.
+
+At Frontliners, we’ve seen this up close.
+We took on the task of replacing a monolith that had been in production for more than 25 years. It was deeply intertwined with the business, used everywhere, and full of edge cases that only existed because of decades of real-world use.
+To make matters worse, these edge cases are often only known to some users, others just "follow what they've been taught".
+
+We didn’t have a large or deeply experienced team at the time, but we did have a strong sense of purpose.
+We knew we wanted to modernize, to move toward something distributed and scalable, but we also knew we couldn’t do it all at once. That meant making tough decisions, again and again, weighing what we could achieve now against what would still make sense later. This is especially true from a technical perspective as during this tumultuous time we've switched both CPO and CEO multiple times. They all offered new and shiny things, and tech was left trying to realize them within increasingly shorter timelines.
+
+We focused on the people we had, their strengths, their limits, their growth potential, and built an architecture that could *grow* with them.
+It wasn’t perfect, but it gave us some momentum, and that momentum led us to something sustainable.
+
+Still, even with the best intentions, it’s easy to lose perspective once you’ve found a path that seems to work. The next challenge we faced wasn’t technical at all, it was cultural.
+
+## When good principles turn into dogma
+
+During our early microservices phase, we fell into a trap many teams do.
+We started creating “rules” that sounded right, but didn’t always fit reality.
+Things like *“you can only do X”* or *“you can NEVER depend on another service”*.
+And whilst I, as the architect or CTO, never called these "rules" (rather: guidelines), when they were communicated between layers of old <> new developers they often turned into "rules".
+Rules like that can be comforting because they feel like control, but they’re often just fear in disguise.
+Take something like route calculation. When you have hundreds of parameters and thousands of routes, you can’t pre-compute every possible scenario. Sometimes you need to depend on another service, and that’s fine. Architecture should adapt to problems, not deny their existence.
+
+The problem wasn’t the technology, it mostly never is, it was the mindset.
+Without a clear product goal, people cling to certainty. Those “rules” gave us a sense of safety, but they also made change harder. We eventually had to tear those walls down and rebuild our way of thinking, together.
+
+That rebuilding forced us to look inward and ask hard questions about who we were as a team. Because architecture isn’t just about systems, it’s about people.
+
+## Architecture and team maturity: balancing trade-offs
+
+Every architecture exists in the shadow of the team that builds it.
+A highly mature, cross-functional team can handle complexity. A newer or smaller team cannot, no matter how good the intentions are.
+
+If your architecture outpaces your team’s ability to understand or maintain it, it’s not a good architecture for you.
+Progress sometimes means taking two steps forward and one step back. You might accept a short-term compromise, a “bad” thing, to enable the next leap forward.
+
+And that’s okay.
+Because architecture isn’t a competition, it’s a conversation. The best systems evolve through collaboration, not commandments.
+Let the team make mistakes, learn, and recover. If you enforce every decision from above, you’ll gain consistency, but lose creativity and ownership.
+
+Every engineer should be part of that conversation. They don’t have to think about architecture every day, but they should *care* about it. Curiosity and challenge keep architecture alive.
+
+Yet even with a healthy mindset, time changes everything. The longer a team works in the same system, the easier it becomes to stop questioning it.
+
+## Choice blindness and the value of fresh eyes
+
+As teams settle into a certain way of working, patterns start to feel “normal.”
+Pain points fade into the background, awkward workarounds become invisible (even desired!). Over time, everyone forgets that things could be different. I call this *choice blindness*, when familiarity blinds you to your own design decisions.
+
+That’s why new hires are so valuable.
+They don’t carry the same assumptions. They look at your system and ask the uncomfortable questions:
+“Why does this work like that?”
+“Is that rule still needed?”
+“Has the context changed since we made that decision?”
+
+Sometimes those questions sting. But they’re essential, because context *does* change.
+Teams evolve, products evolve, constraints evolve, and what once was a good choice might be holding you back now.
+
+Helping teams see those patterns and guide that evolution is what good architects do best.
+
+## The role of the architect
+
+An architect’s job therefore isn’t to dictate (though they are often given that power), it’s to clarify.
+They connect the big picture to the team’s day-to-day, make trade-offs explicit, and keep people aligned. The most valuable skill an architect has isn’t technical, it’s adaptability.
+
+A good architecture isn’t static. It bends with the product, the people, and the business.
+And that adaptability only exists when the team is part of the conversation.
+Architecture that’s understood by everyone lasts longer, because it belongs to everyone.
+
+And that shared ownership matters, because architecture isn’t something you finish, it’s something you *continually* shape.
+
+## Architecture is ongoing, not final
+
+Architecture is never done. It’s a living process that shifts with each decision, sprint, and release.
+That constant evolution can look chaotic from the outside. To stakeholders or customers, it might even seem like we’re changing direction all the time.
+
+But that’s exactly what makes a system resilient, it changes with its context.
+You can’t plan your way to perfection, you can only *evolve* your way there.
+
+The key is communication. When we explain *why* we’re making architectural changes, and how they serve the product long-term, that “technical mess” starts to look like healthy adaptation.
+A system that never changes is a dead one.
+
+That’s something we learned first-hand. At Frontliners, we saw how both people and systems evolve, and how one without the other simply doesn’t work.
+
+## Wrapping up
+
+At Frontliners, we started with a thirty-year-old monolith and a small, still-growing team.
+We worked through complexity, limitations, and doubt. We made decisions that weren’t perfect, but they kept us moving.
+
+Now, we have the right people and the right balance.
+We’re building something sustainable and great. What helped us wasn’t just the technical architecture, but its *ability to change with its context*.
+
+That, to me, is what software architecture really is.
+
+In the next article, we’ll look at how these ideas translate into structure, comparing **monoliths, distributed monoliths, and microservices**, and when each one actually makes sense in the real world.

eslint.config.js

@@ -0,0 +1,65 @@
+const mastermindzhConfig = require("@mastermindzh/eslint-config");
+const typescriptEslint = require("@typescript-eslint/eslint-plugin");
+const typescriptParser = require("@typescript-eslint/parser");
+const importPlugin = require("eslint-plugin-import");
+const reactPlugin = require("eslint-plugin-react");
+
+module.exports = [
+  // Global ignores (replaces .eslintignore)
+  {
+    ignores: [
+      "dist/**",
+      "build/**",
+      "public/**",
+      ".cache/**",
+      "node_modules/**",
+      "*.config.js",
+      "*.config.ts",
+    ],
+  },
+  ...mastermindzhConfig,
+  {
+    // Only lint TypeScript files (matching your .eslintignore pattern)
+    files: ["**/*.ts", "**/*.tsx"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+      import: importPlugin,
+      react: reactPlugin,
+    },
+    // Your project-specific rules
+    rules: {
+      // Import rules
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: ["**/*.test.ts", "**/*.test.tsx", "**/internal/**/*.ts"],
+        },
+      ],
+      // TypeScript rules
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      // Use the correct rule name for quotes
+      quotes: ["error", "double"],
+      "@typescript-eslint/naming-convention": [
+        "error",
+        {
+          format: ["camelCase", "UPPER_CASE", "snake_case", "PascalCase"],
+          leadingUnderscore: "allow",
+          selector: "parameter",
+        },
+      ],
+      // React rules
+      "react/static-property-placement": "off",
+      "react/prop-types": "off",
+      // Shadow rules
+      "no-shadow": "off",
+      "@typescript-eslint/no-shadow": "error",
+    },
+  },
+];

internal/gatsby/constants/templates.ts

@@ -1,18 +1,10 @@
 import path from "path";
 
 const templates = Object.freeze({
-  indexTemplate: path.resolve(
-    "./src/templates/IndexTemplate/IndexTemplate.tsx",
-  ),
-  notFoundTemplate: path.resolve(
-    "./src/templates/NotFoundTemplate/NotFoundTemplate.tsx",
-  ),
-  categoryTemplate: path.resolve(
-    "./src/templates/CategoryTemplate/CategoryTemplate.tsx",
-  ),
-  categoriesTemplate: path.resolve(
-    "./src/templates/CategoriesTemplate/CategoriesTemplate.tsx",
-  ),
+  indexTemplate: path.resolve("./src/templates/IndexTemplate/IndexTemplate.tsx"),
+  notFoundTemplate: path.resolve("./src/templates/NotFoundTemplate/NotFoundTemplate.tsx"),
+  categoryTemplate: path.resolve("./src/templates/CategoryTemplate/CategoryTemplate.tsx"),
+  categoriesTemplate: path.resolve("./src/templates/CategoriesTemplate/CategoriesTemplate.tsx"),
   tagTemplate: path.resolve("./src/templates/TagTemplate/TagTemplate.tsx"),
   tagsTemplate: path.resolve("./src/templates/TagsTemplate/TagsTemplate.tsx"),
   pageTemplate: path.resolve("./src/templates/PageTemplate/PageTemplate.tsx"),

internal/gatsby/create-pages.ts

@@ -99,7 +99,7 @@ const createPages: GatsbyNode["createPages"] = async ({ graphql, actions }) => {
     const path = utils.concat(
       constants.routes.categoryRoute,
       "/",
-      utils.toKebabCase(category.fieldValue)
+      utils.toKebabCase(category.fieldValue),
     );
 
     for (let page = 0; page < total; page += 1) {

internal/gatsby/on-create-node.ts

@@ -28,7 +28,7 @@ const onCreateNode: GatsbyNode["onCreateNode"] = ({ node, actions, getNode }) =>
 
     if (tags) {
       const value = tags.map((tag) =>
-        utils.concat(constants.routes.tagRoute, "/", utils.toKebabCase(tag), "/")
+        utils.concat(constants.routes.tagRoute, "/", utils.toKebabCase(tag), "/"),
       );
 
       createNodeField({ node, name: "tagSlugs", value });
@@ -39,7 +39,7 @@ const onCreateNode: GatsbyNode["onCreateNode"] = ({ node, actions, getNode }) =>
         constants.routes.categoryRoute,
         "/",
         utils.toKebabCase(category),
-        "/"
+        "/",
       );
 
       createNodeField({ node, name: "categorySlug", value });

internal/gatsby/on-create-webpack-config.ts

@@ -7,7 +7,8 @@ import { compilerOptions } from "../../tsconfig.json";
 
 const onCreateWebpackConfig = (
   (options: Pick<CompilerOptions, "paths">) =>
-  ({ actions }: CreateWebpackConfigArgs) => {
+  ({ actions, getConfig }: CreateWebpackConfigArgs) => {
+    // Keep existing TS path aliases in webpack
     actions.setWebpackConfig({
       resolve: {
         alias: Object.entries(options.paths || []).reduce(
@@ -19,6 +20,28 @@ const onCreateWebpackConfig = (
         ),
       },
     });
+
+    // Workaround: Gatsby's webpack ESLint plugin is incompatible with ESLint v9+ options
+    // on some environments. Remove the plugin from the webpack pipeline during development
+    // to prevent build failures like "Invalid Options: Unknown options: extensions, useEslintrc".
+    // We still keep linting via npm scripts.
+    try {
+      const config = getConfig();
+      if (config?.plugins?.length) {
+        const beforeCount = config.plugins.length;
+        config.plugins = config.plugins.filter((plugin: any) => {
+          const name = plugin?.constructor?.name;
+          return name !== "ESLintWebpackPlugin" && name !== "ESLintPlugin";
+        });
+        const afterCount = config.plugins.length;
+        // Only replace when we've actually modified the plugins array
+        if (afterCount !== beforeCount) {
+          actions.replaceWebpackConfig(config);
+        }
+      }
+    } catch {
+      // noop – if Gatsby changes internals, don't crash the build
+    }
   }
 )(compilerOptions);
 

internal/testing/__mocks__/gatsby.ts

@@ -5,19 +5,7 @@ const gatsby = jest.requireActual("gatsby");
 export default {
   ...gatsby,
   graphql: jest.fn(),
-  Link: jest
-    .fn()
-    .mockImplementation(
-      ({
-        activeClassName,
-        activeStyle,
-        getProps,
-        innerRef,
-        ref,
-        replace,
-        to,
-        ...rest
-      }) =>
+  Link: jest.fn().mockImplementation(({ to, ...rest }) =>
     React.createElement("a", {
       ...rest,
       href: to,

internal/testing/jest-config.ts

@@ -22,10 +22,7 @@ const jestConfig: Config.InitialOptions = {
       "identity-obj-proxy",
     "^gatsby-page-utils/(.*)$": "gatsby-page-utils/$1",
     "^gatsby-core-utils/(.*)$": "gatsby-core-utils/dist/$1",
-    "^gatsby-plugin-utils/(.*)$": [
-      "gatsby-plugin-utils/dist/$1",
-      "gatsby-plugin-utils/$1",
-    ],
+    "^gatsby-plugin-utils/(.*)$": ["gatsby-plugin-utils/dist/$1", "gatsby-plugin-utils/$1"],
   },
   transform: { "^.+\\.[jt]sx?$": ["@swc/jest", swc] },
   setupFiles: ["<rootDir>/internal/testing/jest-setup.ts"],

package.json

@@ -22,11 +22,12 @@
     "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 .",
+    "format:ts": "eslint \"src/**/*.{ts,tsx}\" --fix && prettier --write .",
+    "install:legacy": "npm install --legacy-peer-deps",
     "lint": "npm run lint:ts && npm run lint:scss",
     "lint:scss": "stylelint \"src/**/*.scss\"",
     "lint:staged": "lint-staged",
-    "lint:ts": "eslint \"src\" --ext .tsx,.ts && prettier --check .",
+    "lint:ts": "eslint \"src/**/*.{ts,tsx}\" && prettier --check .",
     "prepare": "husky install",
     "release": "standard-version",
     "release:major": "standard-version --release-as major",
@@ -54,12 +55,12 @@
     }
   },
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.7.2",
-    "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@fortawesome/fontawesome-svg-core": "^7.0.0",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^3.0.0",
     "classnames": "^2.5.1",
-    "disqus-react": "^1.1.6",
-    "gatsby": "^5.14.4",
+    "disqus-react": "^1.1.7",
+    "gatsby": "^5.14.5",
     "gatsby-link": "^5.14.1",
     "gatsby-plugin-catch-links": "^5.14.0",
     "gatsby-plugin-feed": "^5.14.0",
@@ -84,7 +85,7 @@
     "gatsby-source-filesystem": "^5.14.0",
     "gatsby-transformer-remark": "^6.14.0",
     "gatsby-transformer-sharp": "^5.14.0",
-    "prismjs": "^1.29.0",
+    "prismjs": "^1.30.0",
     "react": "^18.3.1",
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^18.3.1",
@@ -93,69 +94,68 @@
     "reading-time": "^1.5.0"
   },
   "devDependencies": {
-    "@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.10.4",
-    "@swc/jest": "^0.2.37",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@commitlint/cz-commitlint": "^20.0.0",
+    "@eslint/compat": "^2.0.0",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.31.0",
+    "@jest/globals": "^30.0.4",
+    "@mastermindzh/eslint-config": "^3.1.0",
+    "@mastermindzh/prettier-config": "^1.1.0",
+    "@swc/core": "^1.12.14",
+    "@swc/jest": "^0.2.39",
     "@types/gatsby-transformer-remark": "^2.9.4",
-    "@types/jest": "^29.5.14",
-    "@types/node": "^22.10.3",
+    "@types/jest": "^30.0.0",
+    "@types/node": "^24.0.14",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
-    "@types/react-helmet": "^6.1.6",
+    "@types/react-helmet": "^6.1.11",
     "@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",
+    "@typescript-eslint/eslint-plugin": "^8.37.0",
+    "@typescript-eslint/parser": "^8.37.0",
+    "autoprefixer": "^10.4.21",
+    "browserslist": "^4.25.1",
     "codecov": "^3.8.3",
     "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.1.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-import-resolver-typescript": "^3.7.0",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jest": "^27.9.0",
+    "commitlint": "^20.0.0",
+    "concurrently": "^9.2.0",
+    "eslint": "^9.31.0",
+    "eslint-config-prettier": "^10.1.5",
+    "eslint-import-resolver-typescript": "^4.4.4",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "^4.2.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",
+    "eslint-plugin-prettier": "^5.5.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.0",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^16.3.0",
+    "husky": "^9.0.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "^29.7.0",
-    "jest-cli": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^30.0.4",
+    "jest-cli": "^30.0.4",
+    "jest-environment-jsdom": "^30.0.4",
     "jest-svg-transformer": "^1.0.0",
-    "lint-staged": "^15.3.0",
+    "lint-staged": "^16.1.2",
     "lost": "9.0.2",
-    "markdownlint": "^0.37.3",
-    "postcss": "^8.4.49",
+    "markdownlint": "^0.39.0",
+    "postcss": "^8.5.6",
     "postcss-scss": "^4.0.9",
-    "prettier": "^2.8.8",
-    "prettier-plugin-packagejson": "^2.5.6",
+    "prettier": "^3.6.2",
+    "prettier-plugin-packagejson": "^2.5.18",
     "react-test-renderer": "^18.3.1",
     "rimraf": "^6.0.1",
-    "sass": "^1.83.0",
+    "sass": "^1.89.2",
+    "sass-embedded": "^1.93.2",
     "source-map-support": "^0.5.21",
     "standard-version": "^9.5.0",
-    "stylelint": "^16.12.0",
-    "stylelint-config-recommended-scss": "^14.1.0",
-    "stylelint-order": "^6.0.4",
-    "stylelint-scss": "^6.10.0",
+    "stylelint": "^16.21.1",
+    "stylelint-config-recommended-scss": "^16.0.0",
+    "stylelint-order": "^7.0.0",
+    "stylelint-scss": "^6.12.1",
     "ts-node": "^10.9.2",
-    "typescript": "^5.7.2",
+    "typescript": "^5.8.3",
     "unist-util-find": "3.0.0"
   }
 }

renovate.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "ignoreDeps": [
+    "react",
+    "react-dom",
+    "@types/react",
+    "@types/react-dom",
+    "@types/react-test-renderer",
+    "react-test-renderer"
+  ]
+}

src/assets/scss/_base.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "base/generic";
+@use "base/generic";
 
 .showInPrintView {
   display: none;

src/assets/scss/_mixins.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@import "mixins/breakpoints";
-@import "mixins/line-height";
-@import "mixins/padding";
-@import "mixins/margin";
+@forward "mixins/breakpoints";
+@forward "mixins/line-height";
+@forward "mixins/padding";
+@forward "mixins/margin";

src/assets/scss/base/_generic.scss

@@ -1,5 +1,5 @@
-@import "../variables";
-@import "../mixins";
+@use "../variables" as *;
+@use "../mixins" as *;
 
 html {
   font-size: $typographic-root-font-size;

src/assets/scss/main.scss

@@ -1,5 +1,5 @@
 @charset "UTF-8";
 
-@import "variables";
-@import "mixins";
-@import "base";
+@use "variables";
+@use "mixins";
+@use "base";

src/assets/scss/mixins/_breakpoints.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin breakpoint-xs {
   @content;

src/assets/scss/mixins/_line-height.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin line-height($number) {
   line-height: #{$number * $typographic-leading + "px"};

src/assets/scss/mixins/_margin.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin margin-auto($number: 0) {
   margin: #{$number * $typographic-leading + "px"} auto;

src/assets/scss/mixins/_padding.scss

@@ -1,4 +1,4 @@
-@import "../variables";
+@use "../variables" as *;
 
 @mixin padding-left($number) {
   padding-left: #{$number * $typographic-leading + "px"};

src/components/Cookiebar/CookieBar.module.scss

@@ -1,4 +1,4 @@
-@import "../../assets/scss/variables";
+@use "../../assets/scss/variables" as *;
 
 $shadow: 0px -1px 5px rgba(50, 50, 50, 0.75);
 

src/components/Feed/Feed.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .feed {
   .item {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Feed renders correctly 1`] = `
 <div>

src/components/Icon/Icon.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import * as styles from "./Icon.module.scss";
 import { ICONS } from "@/constants";
 
-
 interface Props {
   name: keyof typeof ICONS;
   icon: {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Icon renders correctly 1`] = `
 <svg

src/components/Image/Image.tsx

@@ -1,11 +1,7 @@
 import React, { FC } from "react";
 
 import { graphql, StaticQuery } from "gatsby";
-import {
-  GatsbyImage,
-  GatsbyImageProps,
-  IGatsbyImageData,
-} from "gatsby-plugin-image";
+import { GatsbyImage, GatsbyImageProps, IGatsbyImageData } from "gatsby-plugin-image";
 import { FileSystemNode } from "gatsby-source-filesystem";
 
 interface Props extends Omit<GatsbyImageProps, "image"> {
@@ -28,9 +24,7 @@ const Image: FC<Props> = ({ path, ...rest }: Props) => (
   <StaticQuery
     query={graphql`
       query {
-        images: allFile(
-          filter: { ext: { regex: "/png|jpg|jpeg|webp|tif|tiff/" } }
-        ) {
+        images: allFile(filter: { ext: { regex: "/png|jpg|jpeg|webp|tif|tiff/" } }) {
           edges {
             node {
               absolutePath

src/components/Layout/Layout.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .layout {
   lost-center: $layout-width;

src/components/Layout/Layout.tsx

@@ -1,9 +1,9 @@
 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;
@@ -20,7 +20,6 @@ const Layout: React.FC<Props> = ({
   description,
   socialImage = "",
   noIndex = false,
-  slug,
 }: Props) => {
   const { author, url } = useSiteMetadata();
   const metaImage = socialImage || author.photo;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Layout renders correctly 1`] = `
 <div>

src/components/Page/Page.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .page {
   @include margin-bottom(2);

src/components/Page/Page.test.tsx

@@ -11,9 +11,7 @@ describe("Page", () => {
       title: mocks.markdownRemark.frontmatter.title,
     };
 
-    const tree = renderer
-      .create(<Page {...props}>{props.children}</Page>)
-      .toJSON();
+    const tree = renderer.create(<Page {...props}>{props.children}</Page>).toJSON();
     expect(tree).toMatchSnapshot();
   });
 });

src/components/Page/Page.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from "react";
 
-import type { Nullable } from "@/types";
 import { Helmet } from "react-helmet";
 import * as styles from "./Page.module.scss";
+import type { Nullable } from "@/types";
 
 interface Props {
   title?: string;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Page renders correctly 1`] = `
 <div>

src/components/Pagination/Pagination.module.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .pagination {
   display: flex;

src/components/Pagination/Pagination.tsx

@@ -1,8 +1,8 @@
-import { PAGINATION } from "@/constants";
 import classNames from "classnames";
 import { Link } from "gatsby";
 import React from "react";
 import * as styles from "./Pagination.module.scss";
+import { PAGINATION } from "@/constants";
 
 type Props = {
   prevPagePath: string;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Pagination renders correctly 1`] = `
 <div

src/components/Post/Author/Author.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   border-top: 1px solid $color-gray-border;

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

@@ -11,9 +11,7 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("Author", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
 
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });

src/components/Post/Author/Author.tsx

@@ -1,6 +1,6 @@
-import { useSiteMetadata } from "@/hooks";
 import React from "react";
 import * as styles from "./Author.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 const Author = () => {
   const { author } = useSiteMetadata();
@@ -13,6 +13,7 @@ const Author = () => {
           <strong>{author.name}</strong>
         </a>
         {typeof window !== "undefined" ? (
+          // eslint-disable-next-line no-undef
           <span className="showInPrintView"> {window ? `@ ${window.location}` : ""}</span>
         ) : (
           ""

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Author renders correctly 1`] = `
 <div>

src/components/Post/Comments/Comments.test.tsx

@@ -11,9 +11,7 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("Comments", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
 
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });

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

@@ -1,3 +1,3 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Comments renders correctly 1`] = `null`;

src/components/Post/Content/Content.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .content {
   @include margin-auto();

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

@@ -1,8 +1,8 @@
-import { Content } from "@/components/Post/Content";
-import * as mocks from "@/mocks";
 import { StaticQuery, useStaticQuery } from "gatsby";
 import React from "react";
 import renderer from "react-test-renderer";
+import * as mocks from "@/mocks";
+import { Content } from "@/components/Post/Content";
 
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Content renders correctly 1`] = `
 [
@@ -72,16 +72,12 @@ exports[`Content renders correctly 1`] = `
                   className="svg-inline--fa fa-moon"
                   data-icon="moon"
                   data-prefix="fas"
-                  focusable="false"
                   role="img"
-                  style={{}}
-                  viewBox="0 0 384 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
                 >
                   <path
-                    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                    d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                     fill="currentColor"
-                    style={{}}
                   />
                 </svg>
               </div>
@@ -105,16 +101,12 @@ exports[`Content renders correctly 1`] = `
                   className="svg-inline--fa fa-sun"
                   data-icon="sun"
                   data-prefix="fas"
-                  focusable="false"
                   role="img"
-                  style={{}}
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 576 512"
                 >
                   <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.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"
+                    d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                     fill="currentColor"
-                    style={{}}
                   />
                 </svg>
               </div>

src/components/Post/Meta/Meta.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .meta {
   .date {

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Meta renders correctly 1`] = `
 <div>

src/components/Post/Post.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .post {
 

src/components/Post/Post.test.tsx

@@ -11,9 +11,7 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("Post", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/components/Post/Post.tsx

@@ -1,4 +1,3 @@
-import type { Node } from "@/types";
 import React from "react";
 import { Helmet } from "react-helmet";
 import { useSiteMetadata } from "../../hooks";
@@ -8,6 +7,7 @@ import { Content } from "./Content";
 import { Meta } from "./Meta";
 import * as styles from "./Post.module.scss";
 import { Tags } from "./Tags";
+import type { Node } from "@/types";
 
 interface Props {
   post: Node;

src/components/Post/Tags/Tags.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .tags {
   @include margin-bottom(0.5);

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Tags renders correctly 1`] = `
 <div

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Post renders correctly 1`] = `
 <div>
@@ -73,16 +73,12 @@ exports[`Post renders correctly 1`] = `
                     className="svg-inline--fa fa-moon"
                     data-icon="moon"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 384 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
                   >
                     <path
-                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>
@@ -106,16 +102,12 @@ exports[`Post renders correctly 1`] = `
                     className="svg-inline--fa fa-sun"
                     data-icon="sun"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 576 512"
                   >
                     <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.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"
+                      d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>

src/components/PostHeader/PostHeader.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .header {
   align-items: baseline;

src/components/PostHeader/PostHeader.tsx

@@ -1,8 +1,8 @@
-import { Image } from "@/components/Image";
 import { Link, navigate } from "gatsby";
 import React, { FunctionComponent } from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 import * as styles from "./PostHeader.module.scss";
+import { Image } from "@/components/Image";
 
 type Props = { author: { name: string; photo: string } };
 

src/components/Sidebar/Author/Author.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .author {
   .photo {

src/components/Sidebar/Author/Author.tsx

@@ -5,7 +5,6 @@ import { Link } from "gatsby";
 import * as styles from "./Author.module.scss";
 import { Image } from "@/components/Image";
 
-
 type Props = {
   author: {
     name: string;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Author renders correctly 1`] = `
 <div>

src/components/Sidebar/Contacts/Contacts.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .contacts {
   @include margin-bottom(1);

src/components/Sidebar/Contacts/Contacts.tsx

@@ -25,7 +25,7 @@ const Contacts: React.FC<Props> = ({ contacts }: Props) => (
               <Icon name={name} icon={getIcon(name)} />
             </a>
           </li>
-        ) : null
+        ) : null,
       )}
       <li className={styles.item} key="keys">
         <a className={styles.link} href="/keys.json" rel="noopener noreferrer" target="_blank">

src/components/Sidebar/Contacts/__snapshots__/Contacts.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Contacts renders correctly 1`] = `
 <div>

src/components/Sidebar/Copyright/Copyright.module.scss

@@ -1,7 +1,7 @@
 @use "sass:color";
 
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .copyright {
   color: $color-gray;

src/components/Sidebar/Copyright/Copyright.tsx

@@ -6,8 +6,6 @@ type Props = {
   copyright: string;
 };
 
-const Copyright = ({ copyright }: Props) => (
-  <div className={styles.copyright}>{copyright}</div>
-);
+const Copyright = ({ copyright }: Props) => <div className={styles.copyright}>{copyright}</div>;
 
 export default Copyright;

src/components/Sidebar/Copyright/__snapshots__/Copyright.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Copyright renders correctly 1`] = `
 <div>

src/components/Sidebar/Menu/Menu.module.scss

@@ -1,5 +1,5 @@
-@import "../../../assets/scss/variables";
-@import "../../../assets/scss/mixins";
+@use "../../../assets/scss/variables" as *;
+@use "../../../assets/scss/mixins" as *;
 
 .menu {
   .list {

src/components/Sidebar/Menu/__snapshots__/Menu.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Menu renders correctly 1`] = `
 <nav

src/components/Sidebar/Sidebar.module.scss

@@ -1,5 +1,5 @@
-@import "../../assets/scss/variables";
-@import "../../assets/scss/mixins";
+@use "../../assets/scss/variables" as *;
+@use "../../assets/scss/mixins" as *;
 
 .sidebar {
   width: 100%;

src/components/Sidebar/Sidebar.test.tsx

@@ -11,9 +11,7 @@ const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("Sidebar", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/components/Sidebar/Sidebar.tsx

@@ -1,4 +1,3 @@
-import { useSiteMetadata } from "@/hooks";
 import React from "react";
 import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
 import { Author } from "./Author";
@@ -6,6 +5,7 @@ import { Contacts } from "./Contacts";
 import { Copyright } from "./Copyright";
 import { Menu } from "./Menu";
 import * as styles from "./Sidebar.module.scss";
+import { useSiteMetadata } from "@/hooks";
 
 type Props = {
   isIndex?: boolean;

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Sidebar renders correctly 1`] = `
 <div>
@@ -199,16 +199,12 @@ exports[`Sidebar renders correctly 1`] = `
                   className="svg-inline--fa fa-moon"
                   data-icon="moon"
                   data-prefix="fas"
-                  focusable="false"
                   role="img"
-                  style={{}}
-                  viewBox="0 0 384 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 512 512"
                 >
                   <path
-                    d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                    d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                     fill="currentColor"
-                    style={{}}
                   />
                 </svg>
               </div>
@@ -232,16 +228,12 @@ exports[`Sidebar renders correctly 1`] = `
                   className="svg-inline--fa fa-sun"
                   data-icon="sun"
                   data-prefix="fas"
-                  focusable="false"
                   role="img"
-                  style={{}}
-                  viewBox="0 0 512 512"
-                  xmlns="http://www.w3.org/2000/svg"
+                  viewBox="0 0 576 512"
                 >
                   <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.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"
+                    d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                     fill="currentColor"
-                    style={{}}
                   />
                 </svg>
               </div>

src/constants/icons.ts

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 const ICONS = {
   twitter: {
     path: "M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z",

src/hooks/use-categories-list.ts

@@ -10,8 +10,7 @@ interface CategoriesQueryResult {
 }
 
 const useCategoriesList = () => {
-  const { allMarkdownRemark } = useStaticQuery<CategoriesQueryResult>(
-    graphql`
+  const { allMarkdownRemark } = useStaticQuery<CategoriesQueryResult>(graphql`
     query CategoriesListQuery {
       allMarkdownRemark(
         filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
@@ -22,8 +21,7 @@ const useCategoriesList = () => {
         }
       }
     }
-    `
-  );
+  `);
 
   return allMarkdownRemark.group ?? [];
 };

src/hooks/use-site-metadata.ts

@@ -1,8 +1,7 @@
 import { graphql, useStaticQuery } from "gatsby";
 
 const useSiteMetadata = () => {
-  const { site } = useStaticQuery(
-    graphql`
+  const { site } = useStaticQuery(graphql`
     query SiteMetaData {
       site {
         siteMetadata {
@@ -45,8 +44,7 @@ const useSiteMetadata = () => {
         }
       }
     }
-    `
-  );
+  `);
 
   return site.siteMetadata;
 };

src/hooks/use-tags-list.ts

@@ -10,8 +10,7 @@ interface TagsQueryResult {
 }
 
 const useTagsList = () => {
-  const { allMarkdownRemark } = useStaticQuery<TagsQueryResult>(
-    graphql`
+  const { allMarkdownRemark } = useStaticQuery<TagsQueryResult>(graphql`
     query TagsListQuery {
       allMarkdownRemark(
         filter: { frontmatter: { template: { eq: "post" }, draft: { ne: true } } }
@@ -22,8 +21,7 @@ const useTagsList = () => {
         }
       }
     }
-    `
-  );
+  `);
 
   return allMarkdownRemark.group || [];
 };

src/templates/CategoriesTemplate/CategoriesTemplate.test.tsx

@@ -6,7 +6,6 @@ import { StaticQuery, useStaticQuery } from "gatsby";
 import CategoriesTemplate from "./CategoriesTemplate";
 import * as mocks from "@/mocks";
 
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 

src/templates/CategoriesTemplate/__snapshots__/CategoriesTemplate.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CategoriesTemplate renders correctly 1`] = `
 <div>
@@ -200,16 +200,12 @@ exports[`CategoriesTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-moon"
                     data-icon="moon"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 384 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
                   >
                     <path
-                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>
@@ -233,16 +229,12 @@ exports[`CategoriesTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-sun"
                     data-icon="sun"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 576 512"
                   >
                     <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.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"
+                      d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>

src/templates/CategoryTemplate/CategoryTemplate.test.tsx

@@ -6,15 +6,12 @@ import { StaticQuery, useStaticQuery } from "gatsby";
 import CategoryTemplate from "./CategoryTemplate";
 import * as mocks from "@/mocks";
 
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("CategoryTemplate", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/templates/CategoryTemplate/__snapshots__/CategoryTemplate.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`CategoryTemplate renders correctly 1`] = `
 <div>
@@ -200,16 +200,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-moon"
                     data-icon="moon"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 384 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
                   >
                     <path
-                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>
@@ -233,16 +229,12 @@ exports[`CategoryTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-sun"
                     data-icon="sun"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 576 512"
                   >
                     <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.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"
+                      d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>

src/templates/IndexTemplate/IndexTemplate.test.tsx

@@ -6,15 +6,12 @@ import { StaticQuery, useStaticQuery } from "gatsby";
 import IndexTemplate from "./IndexTemplate";
 import * as mocks from "@/mocks";
 
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("IndexTemplate", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });
 

src/templates/IndexTemplate/__snapshots__/IndexTemplate.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`IndexTemplate renders correctly 1`] = `
 <div>
@@ -200,16 +200,12 @@ exports[`IndexTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-moon"
                     data-icon="moon"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 384 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 512 512"
                   >
                     <path
-                      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
+                      d="M256 0C114.6 0 0 114.6 0 256S114.6 512 256 512c68.8 0 131.3-27.2 177.3-71.4 7.3-7 9.4-17.9 5.3-27.1s-13.7-14.9-23.8-14.1c-4.9 .4-9.8 .6-14.8 .6-101.6 0-184-82.4-184-184 0-72.1 41.5-134.6 102.1-164.8 9.1-4.5 14.3-14.3 13.1-24.4S322.6 8.5 312.7 6.3C294.4 2.2 275.4 0 256 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>
@@ -233,16 +229,12 @@ exports[`IndexTemplate renders correctly 1`] = `
                     className="svg-inline--fa fa-sun"
                     data-icon="sun"
                     data-prefix="fas"
-                    focusable="false"
                     role="img"
-                    style={{}}
-                    viewBox="0 0 512 512"
-                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 576 512"
                   >
                     <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.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"
+                      d="M178.2-10.1c7.4-3.1 15.8-2.2 22.5 2.2l87.8 58.2 87.8-58.2c6.7-4.4 15.1-5.2 22.5-2.2S411.4-.5 413 7.3l20.9 103.2 103.2 20.9c7.8 1.6 14.4 7 17.4 14.3s2.2 15.8-2.2 22.5l-58.2 87.8 58.2 87.8c4.4 6.7 5.2 15.1 2.2 22.5s-9.6 12.8-17.4 14.3L433.8 401.4 413 504.7c-1.6 7.8-7 14.4-14.3 17.4s-15.8 2.2-22.5-2.2l-87.8-58.2-87.8 58.2c-6.7 4.4-15.1 5.2-22.5 2.2s-12.8-9.6-14.3-17.4L143 401.4 39.7 380.5c-7.8-1.6-14.4-7-17.4-14.3s-2.2-15.8 2.2-22.5L82.7 256 24.5 168.2c-4.4-6.7-5.2-15.1-2.2-22.5s9.6-12.8 17.4-14.3L143 110.6 163.9 7.3c1.6-7.8 7-14.4 14.3-17.4zM207.6 256a80.4 80.4 0 1 1 160.8 0 80.4 80.4 0 1 1 -160.8 0zm208.8 0a128.4 128.4 0 1 0 -256.8 0 128.4 128.4 0 1 0 256.8 0z"
                       fill="currentColor"
-                      style={{}}
                     />
                   </svg>
                 </div>

src/templates/NotFoundTemplate/NotFoundTemplate.test.tsx

@@ -6,15 +6,12 @@ import NotFoundTemplate from "./NotFoundTemplate";
 
 import * as mocks from "@/mocks";
 
-
 const mockedStaticQuery = StaticQuery as jest.Mock;
 const mockedUseStaticQuery = useStaticQuery as jest.Mock;
 
 describe("NotFoundTemplate", () => {
   beforeEach(() => {
-    mockedStaticQuery.mockImplementationOnce(({ render }) =>
-      render(mocks.siteMetadata),
-    );
+    mockedStaticQuery.mockImplementationOnce(({ render }) => render(mocks.siteMetadata));
     mockedUseStaticQuery.mockReturnValue(mocks.siteMetadata);
   });