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 a751b3f2d8.

---------

Co-authored-by: sinu <65924192+sinui0@users.noreply.github.com>

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
 

package.json

@@ -47,4 +47,4 @@
   "engines": {
     "node": ">=18.0"
   }
-}
+}

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>
             )}

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 {