blog: publish dates, harness diagram, and header theme toggle (#1613)

Author: rohitg00

blog/src/assets/blog/the-harness-is-the-backend/point-to-point-vs-shared-runtime.png

@@ -0,0 +1,86 @@
+---
+// Same behavior as website/index.html theme toggle: persists `iii_theme`,
+// swaps CSS variables + icon, updates theme-color meta, dispatches iii:theme-change.
+---
+
+<button type="button" id="theme-btn" class="theme-btn" aria-label="Toggle theme">
+  <svg id="theme-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <!-- moon when current theme is light (click → dark) -->
+    <path d="M12.5 9.5 A 5 5 0 1 1 6.5 3.5 A 4 4 0 0 0 12.5 9.5 Z"></path>
+  </svg>
+</button>
+
+<script is:inline>
+  (function () {
+    var themeBtn = document.getElementById('theme-btn')
+    var themeIcon = document.getElementById('theme-icon')
+    if (!themeBtn || !themeIcon) return
+    var THEME_KEY = 'iii_theme'
+    var isDark = (window.__iiiThemeInit && window.__iiiThemeInit.dark) || false
+    var THEME_ACCENT = { light: '#ff5a1f', dark: '#3ea8ff' }
+    function setAria() {
+      themeBtn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode')
+    }
+    function syncIcon() {
+      if (isDark) {
+        themeIcon.innerHTML =
+          '<circle cx="8" cy="8" r="3"/><path d="M8 1 L8 3 M8 13 L8 15 M1 8 L3 8 M13 8 L15 8 M3 3 L4.5 4.5 M11.5 11.5 L13 13 M3 13 L4.5 11.5 M11.5 4.5 L13 3"/>'
+      } else {
+        themeIcon.innerHTML = '<path d="M12.5 9.5 A 5 5 0 1 1 6.5 3.5 A 4 4 0 0 0 12.5 9.5 Z"/>'
+      }
+    }
+    if (isDark) syncIcon()
+    setAria()
+    themeBtn.addEventListener('click', function () {
+      isDark = !isDark
+      try {
+        localStorage.setItem(THEME_KEY, isDark ? 'dark' : 'light')
+      } catch (e) {}
+      document.documentElement.dataset.theme = isDark ? 'dark' : 'light'
+      var r = document.documentElement.style
+      if (isDark) {
+        r.setProperty('--bg', '#111110')
+        r.setProperty('--panel', '#1a1916')
+        r.setProperty('--paper', '#111110')
+        r.setProperty('--paper-2', '#222220')
+        r.setProperty('--ink', '#f2f0ed')
+        r.setProperty('--ink-2', '#e2dfd9')
+        r.setProperty('--ink-soft', '#e2dfd9')
+        r.setProperty('--ink-faint', '#9c9893')
+        r.setProperty('--ink-ghost', '#5d5a55')
+        r.setProperty('--mute', '#9c9893')
+        r.setProperty('--mute-2', '#5d5a55')
+        r.setProperty('--rule', '#2a2926')
+        r.setProperty('--rule-2', '#1f1e1c')
+        r.setProperty('--accent', THEME_ACCENT.dark)
+      } else {
+        r.setProperty('--bg', '#f5f3ee')
+        r.setProperty('--panel', '#e9e6e2')
+        r.setProperty('--paper', '#f5f3ee')
+        r.setProperty('--paper-2', '#ebe8e3')
+        r.setProperty('--ink', '#0a0a0a')
+        r.setProperty('--ink-2', '#1a1a1a')
+        r.setProperty('--ink-soft', '#1a1a1a')
+        r.setProperty('--ink-faint', '#6b6865')
+        r.setProperty('--ink-ghost', '#a3a09c')
+        r.setProperty('--mute', '#6b6865')
+        r.setProperty('--mute-2', '#a3a09c')
+        r.setProperty('--rule', '#d8d4cb')
+        r.setProperty('--rule-2', '#e6e3df')
+        r.setProperty('--accent', THEME_ACCENT.light)
+      }
+      syncIcon()
+      setAria()
+      var meta = document.querySelector('meta[name="theme-color"]')
+      if (meta) meta.content = isDark ? '#111110' : '#f5f3ee'
+      window.dispatchEvent(
+        new CustomEvent('iii:theme-change', {
+          detail: {
+            theme: isDark ? 'dark' : 'light',
+            accent: isDark ? THEME_ACCENT.dark : THEME_ACCENT.light,
+          },
+        }),
+      )
+    })
+  })()
+</script>

blog/src/components/ThemeToggle.astro

@@ -1,7 +1,7 @@
 ---
 title: 'Add a worker'
 description: 'The cloud is a bazaar, and that was okay until agents arrived and had to contend with 10,000 shops. Three primitives, one engine, and one answer to every question.'
-pubDate: 2026-05-05
+pubDate: 2026-05-07
 author: 'Mike Piccolo, Founder & CEO of iii'
 tags: ['agents', 'architecture', 'workers', 'cloudflare']
 ---

blog/src/content/blog/add-a-worker.md

@@ -2,7 +2,7 @@
 
 title: 'The Harness Is the Backend'  
 description: 'The agent harness debate takes for granted that the harness is its own world, separate from the backend. iii makes a different bet: the harness is the backend.'  
-pubDate: 2026-05-06  
+pubDate: 2026-04-28  
 author: 'Mike Piccolo, Founder & CEO of iii'  
 tags: ['agents', 'architecture', 'harness', 'backend']
 ---
@@ -40,6 +40,8 @@ another: "the backend".
 I believe that this is temporary and it's just a small step along the way to
 true adoption and acceptance of agentic infrastructure into "the backend".
 
+![Today: point-to-point integrations between workers versus one shared iii runtime, live capability discovery, and zero-integration.](../../assets/blog/the-harness-is-the-backend/point-to-point-vs-shared-runtime.png)
+
 ## How Agents Work Today
 
 Here's how most agentic architectures work. The harness is a Python process

blog/src/content/blog/the-harness-is-the-backend.md

@@ -5,6 +5,7 @@ import CookieBanner from '../components/CookieBanner.astro'
 import Footer from '../components/Footer.astro'
 import Logo from '../components/Logo.astro'
 import ThemeInit from '../components/ThemeInit.astro'
+import ThemeToggle from '../components/ThemeToggle.astro'
 
 interface Props {
   title: string
@@ -50,6 +51,7 @@ const canonical = new URL(Astro.url.pathname, Astro.site).toString()
           <a href="/blog/">all posts</a>
           <a href="/docs">docs</a>
           <a href="/blog/rss.xml" aria-label="RSS feed">rss</a>
+          <ThemeToggle />
         </div>
       </nav>
       <main>

blog/src/layouts/BaseLayout.astro

@@ -4,10 +4,21 @@ import type { APIContext } from 'astro'
 
 export async function GET(context: APIContext) {
   const posts = await getCollection('blog', ({ data }) => !data.draft)
+  // The feed lives at /blog/rss.xml with items under /blog/<slug>/.
+  // `site` becomes the channel <link>; it must be the blog home, not the
+  // apex site, or readers treat the feed as describing iii.dev instead of /blog.
+  const origin = context.site ?? new URL('https://iii.dev/')
+  const site = new URL('blog/', origin).href
+  const selfLink = new URL('rss.xml', site).href
+
   return rss({
     title: 'iii blog',
     description: 'Notes from the team building iii — three primitives, zero integration cost.',
-    site: context.site ?? 'https://iii.dev',
+    site,
+    xmlns: {
+      atom: 'http://www.w3.org/2005/Atom',
+    },
+    customData: `<atom:link href="${selfLink}" rel="self" type="application/rss+xml"/>`,
     items: posts
       .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
       .map((post) => ({

blog/src/pages/rss.xml.ts

@@ -129,6 +129,31 @@ body {
   color: var(--accent);
 }
 
+/* Theme toggle — matches website navbar control */
+.theme-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  margin: 0;
+  border: 1px solid var(--rule);
+  background: var(--bg);
+  color: var(--ink-faint);
+  cursor: pointer;
+  font: inherit;
+  transition: color 0.15s, border-color 0.15s, background 0.15s;
+}
+.theme-btn:hover {
+  color: var(--ink);
+  border-color: var(--ink);
+}
+.theme-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
 /* ============= MAIN ============= */
 main {
   max-width: 760px;

blog/src/styles/global.css

@@ -13,6 +13,7 @@ test('blog index emits at /blog/ and links to sample post', async () => {
   const html = await read('index.html')
   assert.match(html, /href="\/blog\/add-a-worker\/"/, 'index should link to /blog/add-a-worker/')
   assert.match(html, /Add a worker/i, 'index should render the sample post title')
+  assert.match(html, /id="theme-btn"/, 'index should include theme toggle (parity with iii.dev)')
 })
 
 test('sample post emits at /blog/add-a-worker/index.html', async () => {
@@ -24,6 +25,8 @@ test('sample post emits at /blog/add-a-worker/index.html', async () => {
 test('rss feed exists and references the canonical post URL', async () => {
   const xml = await read('rss.xml')
   assert.match(xml, /<rss/i)
+  assert.match(xml, /<link>https:\/\/iii\.dev\/blog\/<\/link>/, 'channel link should be blog home')
+  assert.match(xml, /atom:link[^>]*href="https:\/\/iii\.dev\/blog\/rss\.xml"/, 'feed should advertise atom:self URL')
   assert.match(xml, /https:\/\/iii\.dev\/blog\/add-a-worker\//, 'rss should use absolute /blog/ URLs')
 })