From 3b4667686fa53d72635dac3ce79d7bcf028d46d1 Mon Sep 17 00:00:00 2001
From: Hendrik Eeckhaut <hendrik@eeckhaut.org>
Date: Fri, 2 Jan 2026 19:27:20 +0100
Subject: [PATCH] Blog improvement suggestions (#35)

* Figure + callout improvements

* js -> tsx
* Scale both PNG and SVG on narrow screens

* Make sure the links opens correctly in the blog overview

* Minor improvement suggestions. Mainly more bold text and a closing statement

* Revert "Minor improvement suggestions. Mainly more bold text and a closing statement"

This reverts commit a751b3f2d884c2975c47b609987ffd8db67873f3.

---------

Co-authored-by: sinu <65924192+sinui0@users.noreply.github.com>
---
 blog/2026-01-01-do-not-pass-go/index.md        |  5 ++++-
 package.json                                   |  2 +-
 src/components/Callout/{index.js => index.tsx} |  0
 src/components/Figure/{index.js => index.tsx}  | 16 +++++-----------
 src/components/Figure/styles.module.css        |  5 +++++
 5 files changed, 15 insertions(+), 13 deletions(-)
 rename src/components/Callout/{index.js => index.tsx} (100%)
 rename src/components/Figure/{index.js => index.tsx} (76%)

diff --git a/blog/2026-01-01-do-not-pass-go/index.md b/blog/2026-01-01-do-not-pass-go/index.md
index 3ced3df..cb81d4c 100644
--- a/blog/2026-01-01-do-not-pass-go/index.md
+++ b/blog/2026-01-01-do-not-pass-go/index.md
@@ -1,5 +1,6 @@
 ---
 title: do not pass "Go"
+slug: do-not-pass-go
 authors: [sinu]
 description: "To solve problems at scale, humans design systems which both encapsulate complexity and leverage specialization to achieve efficiency and predictability. This reduces the need for interpersonal trust by replacing it with systemic trust — that is, trusting the behavior of a system and not an individual. Much of societal progress can be attributed to this process of systematization, but much can also be said about the damage that is caused when the goals of these systems become misaligned, or simply when they fail to adapt to new circumstances. The modern world is increasingly characterized by both failure modes."
 image: "./institutions.svg"
@@ -10,7 +11,9 @@ import Callout from '@site/src/components/Callout';
 
 # do not pass "Go"
 
-The following article is a bit meaty, so for those who just want the key points, feel free to skip to the [last section](#you-may-now-pass-go).
+The following article is a bit meaty, so for those who just want the key points, feel free to skip to the [last section](/blog/do-not-pass-go#you-may-now-pass-go).
+
+<!-- truncate -->
 
 ## scale
 
diff --git a/package.json b/package.json
index 90f8d3a..81c05a4 100644
--- a/package.json
+++ b/package.json
@@ -47,4 +47,4 @@
   "engines": {
     "node": ">=18.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Callout/index.js b/src/components/Callout/index.tsx
similarity index 100%
rename from src/components/Callout/index.js
rename to src/components/Callout/index.tsx
diff --git a/src/components/Figure/index.js b/src/components/Figure/index.tsx
similarity index 76%
rename from src/components/Figure/index.js
rename to src/components/Figure/index.tsx
index 4192717..4938335 100644
--- a/src/components/Figure/index.js
+++ b/src/components/Figure/index.tsx
@@ -25,18 +25,15 @@ export default function Figure({ src, caption, alt, width, children }) {
   return (
     <>
       <figure className={styles.figure}>
-        <div className={styles.imageWrapper} onClick={() => setIsOpen(true)}>
+        <div className={styles.imageWrapper} onClick={() => setIsOpen(true)} style={{ maxWidth: width }}>
           {isSvgComponent ? (
-            <SvgComponent style={{ width, height: 'auto' }} />
+            <SvgComponent style={{ width: '100%', height: 'auto', maxWidth: '100%' }} />
           ) : (
-            <img src={imgSrc} alt={alt || caption} width={width} />
+            <img src={imgSrc} alt={alt || caption} style={{ width: '100%', maxWidth: '100%' }} />
           )}
         </div>
         {(caption || children) && (
-          <figcaption
-            className={styles.caption}
-            {...(!children && caption ? { dangerouslySetInnerHTML: { __html: caption } } : {})}
-          >
+          <figcaption className={styles.caption} dangerouslySetInnerHTML={children ? undefined : { __html: caption }}>
             {children}
           </figcaption>
         )}
@@ -50,10 +47,7 @@ export default function Figure({ src, caption, alt, width, children }) {
               <img src={imgSrc} alt={alt || caption} />
             )}
             {(caption || children) && (
-              <figcaption
-                className={styles.modalCaption}
-                {...(!children && caption ? { dangerouslySetInnerHTML: { __html: caption } } : {})}
-              >
+              <figcaption className={styles.modalCaption} dangerouslySetInnerHTML={children ? undefined : { __html: caption }}>
                 {children}
               </figcaption>
             )}
diff --git a/src/components/Figure/styles.module.css b/src/components/Figure/styles.module.css
index 9286c3c..7030e43 100644
--- a/src/components/Figure/styles.module.css
+++ b/src/components/Figure/styles.module.css
@@ -1,12 +1,14 @@
 .figure {
   text-align: center;
   margin: 2rem auto;
+  max-width: 100%;
 }
 
 .imageWrapper {
   display: inline-block;
   cursor: pointer;
   transition: transform 0.2s ease;
+  max-width: 100%;
 }
 
 .imageWrapper img,
@@ -15,6 +17,9 @@
   background-color: white;
   border-radius: 4px;
   margin: 0;
+  max-width: 100%;
+  width: 100%;
+  height: auto !important;
 }
 
 .imageWrapper:hover {