Darkmode assets

_layouts/base.html

@@ -109,7 +109,13 @@
       figure.captioned-media { counter-increment: captioned-figure; }
       figure img,
       figure > a,
-      figure > video { display: block; }
+      figure > video,
+      figure > svg.inline-svg { display: block; }
+      figure > svg.inline-svg {
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+      }
       figure.captioned-media figcaption {
         margin-top: .55em;
         padding-top: .5em;
@@ -212,6 +218,15 @@
         figure.captioned-media figcaption::before { color: #fff; }
         code { background: transparent; }
         thead { border-color: currentColor; }
+        mjx-container[jax="SVG"] rect[data-bgcolor="true"][fill="#fff3cd"] { fill: #51431c; }
+        mjx-container[jax="SVG"] rect[data-bgcolor="true"][fill="#cfe2ff"] { fill: #203b5e; }
+        mjx-container[jax="SVG"] rect[data-bgcolor="true"][fill="#e2d9f3"] { fill: #41305a; }
+        mjx-container[jax="SVG"] rect[data-bgcolor="true"][fill="#f8d7da"] { fill: #542b35; }
+        mjx-container[jax="SVG"] rect[data-bgcolor="true"][fill="#d1e7dd"] { fill: #1d453b; }
+        mjx-container[jax="SVG"] g[data-mml-node="mpadded"] > g[fill="#1c1c1a"] {
+          fill: #f5f5f5;
+          stroke: #f5f5f5;
+        }
       }
     </style>
 

_plugins/inline_svg.rb

@@ -0,0 +1,79 @@
+require "cgi"
+
+module InlineSvg
+  LOCAL_SVG_IMAGE = /<img\b(?<attributes>[^>]*\bsrc=(?<quote>["'])(?<src>[^"']+\.svg(?:[?#][^"']*)?)\k<quote>[^>]*)\/?\s*>/i
+
+  module_function
+
+  def apply(document)
+    return unless document.output
+
+    document.output = document.output.gsub(LOCAL_SVG_IMAGE) do |image|
+      source = Regexp.last_match[:src]
+      image_attributes = Regexp.last_match[:attributes]
+      path = local_svg_path(document.site, source)
+      next image unless path && File.file?(path)
+
+      inline(File.read(path), image_attributes) || image
+    end
+  end
+
+  def local_svg_path(site, source)
+    path = source.split(/[?#]/, 2).first
+    return unless path.start_with?("/")
+
+    candidate = File.expand_path(path.delete_prefix("/"), site.source)
+    return unless candidate.start_with?("#{File.expand_path(site.source)}/")
+
+    candidate
+  end
+
+  def inline(svg, image_attributes)
+    alt = image_attributes[/\balt=(['"])(.*?)\1/i, 2]
+    svg.sub(/\A\s*<svg\b(?<attributes>[^>]*)>/i) do
+      attributes = Regexp.last_match[:attributes]
+      attributes = add_class(attributes, "inline-svg")
+      attributes = add_print_size(attributes)
+      attributes = add_accessible_name(attributes, alt) if alt && !alt.empty?
+      "<svg#{attributes}>"
+    end
+  end
+
+  def add_class(attributes, class_name)
+    if attributes =~ /\bclass=(['"])(.*?)\1/i
+      attributes.sub(/\bclass=(['"])(.*?)\1/i) { %(class="#{$2} #{class_name}") }
+    else
+      %(#{attributes} class="#{class_name}")
+    end
+  end
+
+  def add_accessible_name(attributes, alt)
+    return attributes if attributes.match?(/\baria-(?:label|labelledby)=/i)
+
+    %(#{attributes} role="img" aria-label="#{CGI.escapeHTML(alt)}")
+  end
+
+  def add_print_size(attributes)
+    width = attributes[/\bwidth=(['"])([\d.]+)(?:px)?\1/i, 2]
+    height = attributes[/\bheight=(['"])([\d.]+)(?:px)?\1/i, 2]
+    view_box = attributes.match(/\bviewBox=(['"])[\d.]+\s+[\d.]+\s+([\d.]+)\s+([\d.]+)\1/i)
+    width ||= view_box && view_box[2]
+    height ||= view_box && view_box[3]
+    return attributes unless width && height
+
+    properties = "--inline-svg-print-width: #{width}px; --inline-svg-print-height: #{height}px;"
+    if attributes =~ /\bstyle=(['"])(.*?)\1/i
+      attributes.sub(/\bstyle=(['"])(.*?)\1/i) { %(style="#{$2}; #{properties}") }
+    else
+      %(#{attributes} style="#{properties}")
+    end
+  end
+end
+
+Jekyll::Hooks.register :documents, :post_render do |document|
+  InlineSvg.apply(document)
+end
+
+Jekyll::Hooks.register :pages, :post_render do |page|
+  InlineSvg.apply(page)
+end

_posts/2024-08-03-hotwire-outside-rails.md

@@ -66,7 +66,7 @@ Our approach involves implementing the **multiple publisher - multiple subscribe
 
 Here is a simple sequence diagram showing the core idea of this project:
 
-![Sequence diagram of the client-server interactions](/assets/blog/hotwire-sequence-diagram.webp)
+![Sequence diagram of the client-server interactions](/assets/blog/hotwire-sequence-diagram.svg)
 _Multiple publisher / multiple subscriber pattern over WebSockets_
 
 ### Implement the server

_posts/2026-05-27-system-prompts-for-humans.md

@@ -48,8 +48,12 @@ The difference is easiest to see as two message paths. Talking to an LLM has low
 
 ![Low social overhead communication with an LLM](/assets/communication/low_social_ov.svg)
 
+*A compressed prompt goes straight to the LLM, with little social overhead around the exchange.*
+
 ![High social overhead communication with a human](/assets/communication/high_social_ov.svg)
 
+*The same core message takes extra work to encode, send, and decode when social expectations enter the exchange.*
+
 So why not do the same for people approaching me?
 
 ## Human communication has hidden state

_posts/2026-09-05-comparing-six-and-seven-from-scratch.md

@@ -490,7 +490,7 @@ theorem le_total (x y : ℕ) : x ≤ y ∨ y ≤ x := by
 
 the indentation records the nesting, but the code still reads as one vertical sequence. the proof state branches: `induction y` creates two obligations, then `cases hd` and `cases c` split them again.
 
-![Lean proof state overview](/assets/blog/lean_state_overview.png)
+![Lean proof state overview](/assets/blog/lean_proof_state.svg)
 _the diagram puts that shape on the page and shows where each branch closes._
 
 every node in the graphviz diagram is one of the two-column states from earlier, and every edge is a tactic. three things it shows that the linear listing hides.