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 {