docs: unify the site theme, publish guides and refresh product writing

README.md

@@ -9,3 +9,7 @@
 Run from your repository with npm: `npx dotdog@1.0.0 refresh --json`, or Bun: `bunx --bun dotdog@1.0.0 refresh --json`. Node.js 22.12+ or Bun 1.3+; the optional type adapter additionally requires Node and a trusted project-installed TypeScript 7.0.2 compiler.
 
 **[dogbench](https://specdog.github.io/dogbench)** — token-savings benchmark for Collar and dotdog. [GitHub](https://github.com/specdog/dogbench)
+
+## Author
+
+A specdog project by **[Justin DiClemente](https://github.com/logohere)**. [Short bio](https://specdog.github.io/about#justin-diclemente).

_layouts/default.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: 'en' }}">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>{{ page.title | default: site.title | default: 'specdog' | escape }} | specdog</title>
+<meta name="description" content="{{ page.description | default: site.description | escape }}">
+<link rel="icon" type="image/svg+xml" href="/assets/dog.svg">
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/site.js" defer></script>
+</head>
+<body>
+<a class="skip-link" href="#main">Skip to content</a>
+<header class="site-header">
+<nav>
+  <a href="/" class="brand"><img src="/assets/dog.svg" width="28" height="28" alt="">specdog</a>
+  <a href="/dotdog">dotdog</a>
+  <a href="/about">about</a>
+  <a href="/handbook">guide</a>
+  <a href="/agents">for agents</a>
+  <a href="/blog">blog</a>
+  <a href="/leash">leash</a>
+  <a href="/collar">collar</a>
+</nav>
+</header>
+<main id="main" class="page">
+{{ content }}
+</main>
+<footer>
+  <p>specdog · Feed the dog. Ship with specs.</p>
+  <p>Created by <a href="/about#justin-diclemente">Justin DiClemente</a> · <a href="https://github.com/specdog">GitHub</a></p>
+</footer>
+</body>
+</html>

about.html

@@ -5,56 +5,27 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>About specdog</title>
 <meta name="description" content="About specdog: spec-driven development tools for structured specs, agent-readable graphs, robotics harnesses, and benchmarks.">
-<link rel="icon" type="image/svg+xml" href="/dotdog/assets/dog.svg">
-<style>
-  body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;max-width:840px;margin:0 auto;padding:32px 24px;line-height:1.7;color:#111827;background:#fff}
-  nav{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
-  nav a{color:#6b7280;text-decoration:none;font-weight:600}
-  nav a.active{color:#d97706}
-  h1{font-size:2.2rem;margin:0 0 8px}
-  h2{font-size:1.25rem;margin:30px 0 10px;border-bottom:1px solid #e5e7eb;padding-bottom:6px}
-  p{color:#374151;margin:0 0 12px}
-  a{color:#d97706}
-  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:16px 0}
-  .card{border:1px solid #e5e7eb;border-radius:12px;padding:14px 16px;background:#fafafa}
-  .card a{font-weight:700;text-decoration:none}
-  .card p{font-size:.92rem;margin-top:4px}
+<link rel="icon" type="image/svg+xml" href="/assets/dog.svg">
 
-
-  /* shared navigation */
-  body { padding-top: 24px; margin-top: 0; }
-  nav {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 18px;
-    flex-wrap: wrap;
-    width: min(calc(100vw - 48px), 960px);
-    margin: 0 auto 32px;
-    padding: 8px 0 0;
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  nav a { color: #6b7280; text-decoration: none; font-size: .9em; font-weight: 500; line-height: 1.4; }
-  nav a:hover, nav a.active { color: #d97706; }
-  /* end shared navigation */
-</style>
 <link rel="canonical" href="https://specdog.github.io/about">
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/site.js" defer></script>
 </head>
 <body>
+<a class="skip-link" href="#main">Skip to content</a>
+<header class="site-header">
 <nav>
-  <a href="/">specdog</a>
+  <a href="/" class="brand"><img src="/assets/dog.svg" width="28" height="28" alt="">specdog</a>
   <a href="/dotdog">dotdog</a>
-  <a href="/about" class="active">about</a>
+  <a href="/about" class="active" aria-current="page">about</a>
   <a href="/handbook">guide</a>
   <a href="/agents">for agents</a>
-  <a href="/dogfood">dogfood</a>
   <a href="/blog">blog</a>
   <a href="/leash">leash</a>
   <a href="/collar">collar</a>
 </nav>
-<main>
+</header>
+<main id="main" class="page">
 <h1>About specdog</h1>
 <p>specdog is a toolkit for making software specs easier for both humans and AI agents to read. The goal is simple: keep intent, implementation rules, and agent instructions in structured files that can be validated and queried.</p>
 <p>The project focuses on spec-driven development, agent discovery, and small runtime surfaces that reduce guesswork when an agent enters a codebase.</p>
@@ -67,11 +38,19 @@ <h2>What we build</h2>
   <div class="card"><a href="/leash">leash</a><p>A robotics-oriented harness for simulation-first agent control and capability gating.</p></div>
 </div>
 
+<h2 id="justin-diclemente">About Justin DiClemente</h2>
+<p>Justin DiClemente builds open-source tools for software development and agent workflows. His specdog projects explore structured specifications, graph-based code context, type-driven design, and Rust-based robotics tooling.</p>
+<p>He is the creator of specdog, including Dotdog, Collar, Leash and Dogbench. <a href="https://github.com/logohere">Find Justin on GitHub</a>.</p>
 <h2>Why it exists</h2>
 <p>AI agents work better when they can find exact names, relationships, states, and constraints without scanning long prose. specdog tools make that structure explicit while still keeping the source material readable.</p>
 
 <h2>Where to start</h2>
 <p>Start with <a href="/handbook">the guide</a> for the workflow, <a href="/agents">for agents</a> for runtime instructions, or <a href="/blog">the blog</a> for background writing.</p>
 </main>
+<footer>
+  <p>specdog · Feed the dog. Ship with specs.</p>
+  <p>Created by <a href="/about#justin-diclemente">Justin DiClemente</a> · <a href="https://github.com/specdog">GitHub</a></p>
+</footer>
+
 </body>
 </html>

about/index.html

@@ -5,8 +5,32 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>About specdog</title>
 <meta name="description" content="About specdog: dotdog, collar, dogbench, leash, and agent-discovery tooling.">
-<link rel="icon" type="image/svg+xml" href="/dotdog/assets/dog.svg">
+<link rel="icon" type="image/svg+xml" href="/assets/dog.svg">
 <link rel="canonical" href="https://specdog.github.io/about">
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/site.js" defer></script>
 </head>
-<body><script>location.replace('/about.html');</script></body>
+<body>
+<a class="skip-link" href="#main">Skip to content</a>
+<header class="site-header">
+<nav>
+  <a href="/" class="brand"><img src="/assets/dog.svg" width="28" height="28" alt="">specdog</a>
+  <a href="/dotdog">dotdog</a>
+  <a href="/about" class="active" aria-current="page">about</a>
+  <a href="/handbook">guide</a>
+  <a href="/agents">for agents</a>
+  <a href="/blog">blog</a>
+  <a href="/leash">leash</a>
+  <a href="/collar">collar</a>
+</nav>
+</header>
+<main id="main" class="page">
+
+</main>
+<footer>
+  <p>specdog · Feed the dog. Ship with specs.</p>
+  <p>Created by <a href="/about#justin-diclemente">Justin DiClemente</a> · <a href="https://github.com/specdog">GitHub</a></p>
+</footer>
+<script>location.replace('/about.html');</script>
+</body>
 </html>

agents.html

@@ -5,71 +5,27 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>For AI Agents | specdog</title>
 <meta name="description" content="Instructions for AI coding agents working with dotdog spec-driven projects.">
-<link rel="icon" type="image/svg+xml" href="/dotdog/assets/dog.svg">
-<style>
-  * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fff; color: #1a1a2e; max-width: 720px; margin: 0 auto; padding: 40px 24px; line-height: 1.75; }
-  nav { display: flex; justify-content: center; gap: 24px; padding: 0 0 32px; }
-  nav a { color: #6b7280; text-decoration: none; font-size: .9em; font-weight: 500; }
-  nav a:hover { color: #d97706; }
-  nav a.active { color: #d97706; }
-  h1 { font-size: 2.2em; margin-bottom: 8px; }
-  h2 { font-size: 1.35em; margin: 36px 0 12px; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
-  h3 { font-size: 1.08em; margin: 24px 0 8px; }
-  p { margin-bottom: 12px; color: #374151; }
-  pre { background: #1e293b; color: #e2e8f0; padding: 14px 18px; border-radius: 8px; font-size: .85em; overflow-x: auto; margin-bottom: 16px; position: relative; }
-  code { background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: .9em; }
-  pre code { background: none; padding: 0; color: #e2e8f0; }
-  a { color: #d97706; text-decoration: none; }
-  a:hover { text-decoration: underline; }
-  ol, ul { margin: 0 0 16px 26px; color: #374151; }
-  li { margin-bottom: 6px; }
-  .code-wrap { position: relative; }
-  .copy-btn { position: absolute; top: 8px; right: 8px; background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px 6px; border-radius: 4px; line-height: 1; }
-  .copy-btn:hover { color: #e2e8f0; background: rgba(255,255,255,0.08); }
-  .copy-btn.copied { color: #4ade80; }
-  .copy-btn svg { width: 16px; height: 16px; }
-  table { width: 100%; border-collapse: collapse; margin: 16px 0; }
-  th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; font-size: .9em; overflow-wrap: anywhere; }
-  th { font-weight: 600; color: #1a1a2e; }
-  td { color: #374151; }
-  footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid #e5e7eb; color: #9ca3af; font-size: .8em; }
+<link rel="icon" type="image/svg+xml" href="/assets/dog.svg">
 
-
-  /* shared navigation */
-  body { padding-top: 24px; margin-top: 0; }
-  nav {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 18px;
-    flex-wrap: wrap;
-    width: min(calc(100vw - 48px), 960px);
-    margin: 0 auto 32px;
-    padding: 8px 0 0;
-    position: relative;
-    left: 50%;
-    transform: translateX(-50%);
-  }
-  nav a { color: #6b7280; text-decoration: none; font-size: .9em; font-weight: 500; line-height: 1.4; }
-  nav a:hover, nav a.active { color: #d97706; }
-  /* end shared navigation */
-</style>
 <link rel="canonical" href="https://specdog.github.io/agents">
+<link rel="stylesheet" href="/assets/site.css">
+<script src="/assets/site.js" defer></script>
 </head>
 <body>
+<a class="skip-link" href="#main">Skip to content</a>
+<header class="site-header">
 <nav>
-  <a href="/">specdog</a>
+  <a href="/" class="brand"><img src="/assets/dog.svg" width="28" height="28" alt="">specdog</a>
   <a href="/dotdog">dotdog</a>
   <a href="/about">about</a>
   <a href="/handbook">guide</a>
-  <a href="/agents" class="active">for agents</a>
-  <a href="/dogfood">dogfood</a>
+  <a href="/agents" class="active" aria-current="page">for agents</a>
   <a href="/blog">blog</a>
   <a href="/leash">leash</a>
   <a href="/collar">collar</a>
 </nav>
-
+</header>
+<main id="main" class="page">
 <h1>For AI Agents</h1>
 <p>If you are an AI coding agent reading this page: follow these rules and you will not hallucinate on dotdog projects.</p>
 
@@ -132,6 +88,7 @@ <h2>Type-driven design</h2>
 <p>Use the <a href="/handbook#type-driven-design">type-driven design workflow</a> when implementing modeled entities and lifecycles. Define domain types, state-specific data, and operation signatures before function bodies. Use explicit failure types and exhaustive handling where the language supports them.</p>
 <p>Parse external data into checked domain values; do not treat a type assertion as validation. Run the project's type checker, compile-failure checks for forbidden usage, and runtime tests. Spec completeness and graph compilation do not prove application type safety or runtime correctness.</p>
 
+<div class="reading-links"><a href="/guides/type-driven-development/">Type-driven development guide</a><a href="/guides/rea-graphs/">REA/Ghidra guide</a></div>
 <h2>Commands reference</h2>
 <table>
 <tr><th>Command</th><th>When to use</th></tr>
@@ -160,12 +117,12 @@ <h2>How to detect agent-ready projects</h2>
 <li>Optional removable hooks, with independent pinned CLI checks in CI</li>
 <li>Application-specific compiler, runtime and integration tests</li>
 </ul>
-
-<footer>dotdog@<span id="version">1.0.0</span> . <a href="https://github.com/specdog/dotdog/blob/main/LICENSE">MIT</a></footer>
+</main>
+<footer>
+  <p>specdog · Feed the dog. Ship with specs.</p>
+  <p>Created by <a href="/about#justin-diclemente">Justin DiClemente</a> · <a href="https://github.com/specdog">GitHub</a></p>
+</footer>
 <script>
-async function loadVersion(){try{const r=await fetch('https://registry.npmjs.org/dotdog/latest');if(!r.ok)return;const d=await r.json();if(typeof d.version==='string')document.getElementById('version').textContent=d.version;}catch{}}
-loadVersion();
-async function copyBlock(btn){try{await navigator.clipboard.writeText(btn.previousElementSibling.textContent);btn.title='Copied';setTimeout(()=>{btn.title='Copy';},2000);}catch{btn.title='Clipboard unavailable';}}
 </script>
 </body>
 </html>