Skip to content

fix: align dotdog with product pages #58

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
logohere merged 1 commit into from
Jun 26, 2026
Merged

fix: align dotdog with product pages #58

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
175 changes: 61 additions & 114 deletions dotdog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,60 +5,27 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dotdog — CLI and MCP tooling | specdog</title>
<meta name="description" content="dotdog CLI and MCP tooling for .dog specs, .dag graphs, repo mapping, and multi-repo workspaces.">
<link rel="llms-txt" href="/llms.txt">
<link rel="icon" type="image/svg+xml" href="/dotdog/assets/dog.svg">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "specdog",
"url": "https://specdog.github.io",
"sameAs": ["https://github.com/specdog", "https://www.npmjs.com/package/dotdog"]
}
</script>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
background: #ffffff; color: #1a1a2e;
min-height: 100vh; padding: 24px;
}
nav { display: flex; justify-content: center; gap: 18px; padding: 8px 0 32px; flex-wrap: wrap; }
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: 18px; padding: 0 0 32px; flex-wrap: wrap; }
nav a { color: #6b7280; text-decoration: none; font-size: .9em; font-weight: 500; }
nav a:hover { color: #d97706; }
nav a.active { color: #d97706; }
main { max-width: 520px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
svg { width: 100px; height: 100px; transition: transform .15s; }
h1 { font-size: 2.4em; font-weight: 700; margin: 12px 0 4px; }
p.tagline { color: #6b7280; font-size: 1.1em; margin-bottom: 4px; }
p.desc { color: #4b5563; font-size: 0.92em; margin-bottom: 16px; line-height: 1.6; }
.dog-widget { display: inline-block; cursor: pointer; user-select: none; margin-bottom: 8px; }
#dog-status { font-size: .75em; color: #9ca3af; min-height: 18px; margin: 4px 0; }
.actions { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.actions button { padding: 4px 12px; border-radius: 14px; border: 1px solid #e5e7eb; background: #fff; color: #4b5563; font-size: .78em; cursor: pointer; font-family: inherit; }
.actions button:hover { background: #fef3c7; border-color: #f59e0b; color: #92400e; }
.install-wrap { position: relative; margin-bottom: 20px; width: 100%; }
pre { background: #1e293b; color: #e2e8f0; border-radius: 8px; padding: 16px 20px; text-align: left; font-size: .85em; margin: 0; overflow-x: auto; position: relative; }
pre code { color: #93c5fd; }
.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; }
.btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
a.btn { display: inline-block; padding: 10px 22px; border-radius: 6px; font-size: .92em; font-weight: 600; text-decoration: none; }
a.primary { background: #f59e0b; color: #1a1a2e; }
a.primary:hover { background: #d97706; }
a.secondary { background: #f1f5f9; color: #1e293b; border: 1px solid #cbd5e1; }
a.secondary:hover { background: #e2e8f0; }
.line { transition: opacity .15s; }
.cmd { color: #93c5fd; }
.out { color: #86efac; }
.product-grid { display:grid; grid-template-columns:1fr; gap:10px; width:100%; margin:18px 0 4px; text-align:left; }
.product-card { border:1px solid #e5e7eb; border-radius:10px; padding:12px 14px; background:#fafafa; }
.product-card a { color:#d97706; font-weight:700; text-decoration:none; }
.product-card p { margin:4px 0 0; color:#4b5563; font-size:.86em; line-height:1.45; }
footer { margin-top: 24px; color: #9ca3af; font-size: .8em; }
footer a { color: #9ca3af; }
nav a:hover, nav a.active { color: #d97706; }
h1 { font-size: 2.2em; margin-bottom: 8px; }
.hero-art { display: block; width: 100px; height: 100px; margin: 0 auto 20px; }
h2 { font-size: 1.35em; margin: 36px 0 12px; border-bottom: 1px solid #e5e7eb; padding-bottom: 6px; }
pre { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; padding: 14px 18px; font-size: .85em; overflow-x: auto; margin: 8px 0; }
table { width: 100%; border-collapse: collapse; margin: 16px 0; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
th { font-size: .85em; color: #6b7280; font-weight: 600; }
td { font-size: .9em; }
.badge-row { display: flex; gap: 12px; align-items: center; margin: 16px 0; flex-wrap: wrap; }
.tagline { font-size: 1.1em; color: #4b5563; margin-bottom: 16px; }
.explain { background: #fef3c7; border-left: 3px solid #f59e0b; padding: 12px 16px; border-radius: 4px; margin: 16px 0; font-size: .92em; }
.explain strong { color: #92400e; }
footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid #e5e7eb; text-align: center; font-size: .85em; color: #9ca3af; }
a { color: #d97706; }


/* shared navigation */
Expand All @@ -72,6 +39,9 @@
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; }
Expand All @@ -91,74 +61,51 @@
<a href="/leash">leash</a>
<a href="/collar">collar</a>
</nav>
<main>
<div class="dog-widget" title="Feed the dog">
<svg id="dog-svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<ellipse cx="28" cy="28" rx="13" ry="17" fill="#d97706" transform="rotate(-15 28 28)"/>
<ellipse cx="92" cy="28" rx="13" ry="17" fill="#d97706" transform="rotate(15 92 28)"/>
<circle cx="60" cy="63" r="32" fill="#f59e0b"/>
<circle cx="46" cy="56" r="5" fill="#1a1a2e"/><circle cx="74" cy="56" r="5" fill="#1a1a2e"/>
<circle cx="48" cy="54" r="2" fill="#fff"/><circle cx="76" cy="54" r="2" fill="#fff"/>
<ellipse cx="60" cy="70" rx="7" ry="5" fill="#1a1a2e"/>
<path d="M52 78 Q60 86 68 78" fill="none" stroke="#1a1a2e" stroke-width="2" stroke-linecap="round"/>
<ellipse id="tongue" cx="60" cy="84" rx="5" ry="6" fill="#ef4444" opacity="0" style="transition:opacity .2s"/>
<g id="bone" opacity="0"><path d="M44 80 Q44 70 55 76 L65 76 Q76 70 76 80 Q76 90 65 86 L55 86 Q44 90 44 80 Z" fill="#fef3c7" stroke="#d97706" stroke-width="1.5"/></g>
</svg>
</div>
<div id="dog-status">🐕 Spec</div>
<div class="actions">
<button onclick="feed()">🦴 Feed</button>
<button onclick="pet()">✋ Pet</button>
<button onclick="fetchBall()">🎾 Fetch</button>
</div>

<h1>dotdog</h1>
<p class="tagline">CLI tool for structured software specs.</p>
<p class="desc">Write `.dog` specs, compile to `.dag` graphs, query via MCP.</p>
<img class="hero-art" src="/dotdog/assets/dog.svg" alt="specdog dog logo">

<h1>dotdog</h1>

<p class="tagline">CLI and MCP tooling for structured <code>.dog</code> specs, compiled <code>.dag</code> graphs, repo mapping, and multi-repo workspaces.</p>

<div class="badge-row">
<img src="https://img.shields.io/npm/v/dotdog?color=blue" alt="npm version">
<img src="https://img.shields.io/npm/l/dotdog?color=blue" alt="MIT license">
</div>

<div class="explain"><strong>.dog</strong> = human spec format &nbsp;·&nbsp; <strong>.dag</strong> = agent graph format &nbsp;·&nbsp; <strong>MCP</strong> = query interface</div>

<p>Dotdog turns software specs and existing repositories into deterministic graph facts. Agents can query the graph instead of scanning the whole codebase or guessing from prose.</p>

<h2>Install</h2>
<pre>npm install -g dotdog</pre>

<h2>Quick Start</h2>
<pre>dotdog init my-app
dotdog validate
dotdog compile
dotdog serve</pre>

<div class="why" style="display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0;">
<span style="background:#fef3c7;padding:4px 10px;border-radius:12px;font-size:.8em;">specs</span>
<span style="background:#dcfce7;padding:4px 10px;border-radius:12px;font-size:.8em;">graphs</span>
<span style="background:#f3e8ff;padding:4px 10px;border-radius:12px;font-size:.8em;">MCP</span>
<span style="background:#e7fcef;padding:4px 10px;border-radius:12px;font-size:.8em;">workspaces</span>
</div>
<h2>Workspace Bridge</h2>
<p>A Dotdog workspace describes a product boundary. It can contain one repo, a monorepo, or multiple related repositories.</p>
<pre>dotdog workspace init --id example-product
dotdog workspace add ../example-api --alias example-api --role api
dotdog workspace add ../example-web --alias example-web --role web
dotdog workspace validate
dotdog workspace graph --json</pre>

<div class="install-wrap">
<pre><code>npm install -g dotdog
dotdog init my-app
dotdog validate</code></pre>
<button class="copy-btn" onclick="copyInstall(this)" title="Copy">
<svg id="copy-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
</button>
</div>
<h2>Capabilities</h2>
<table>
<tr><th>Capability</th><th>Use</th></tr>
<tr><td>Specs</td><td>Write structured <code>.dog</code> files for implementation intent.</td></tr>
<tr><td>Graphs</td><td>Compile deterministic <code>.dag</code> graph facts.</td></tr>
<tr><td>Repo mapping</td><td>Map existing code into graph-ready facts.</td></tr>
<tr><td>MCP</td><td>Expose graph queries to MCP-compatible agents.</td></tr>
</table>

<div class="btns">
<a class="btn primary" href="https://www.npmjs.com/package/dotdog">Get Started</a>
<a class="btn secondary" href="https://www.npmjs.com/package/dotdog">npm</a>
<a class="btn secondary" href="https://github.com/specdog/dotdog">GitHub</a>
</div>
<h2>Links</h2>
<p><a href="https://www.npmjs.com/package/dotdog">npm</a> · <a href="https://github.com/specdog/dotdog">GitHub</a> · <a href="/handbook">guide</a></p>


<footer>dotdog@<span id="version">0.5.0</span> · <a href="https://github.com/specdog/dotdog/blob/main/LICENSE">MIT</a></footer>
</main>
<script>
const svg=document.getElementById('dog-svg'),st=document.getElementById('dog-status');
const bone=document.getElementById('bone'),tongue=document.getElementById('tongue');
function feed(){bone.setAttribute('opacity','1');st.innerHTML='🦴 Dog fed. Ship with specs!';setTimeout(()=>bone.setAttribute('opacity','0'),1500);}
function pet(){tongue.setAttribute('opacity','1');svg.style.transform='rotate(-5deg)';st.innerHTML='✋ Good dog.';setTimeout(()=>{svg.style.transform='';tongue.setAttribute('opacity','0');},800);}
function fetchBall(){svg.style.transform='translateX(20px)';st.innerHTML='🎾 Fetch!';setTimeout(()=>svg.style.transform='',400);}
svg.parentElement.addEventListener('click',pet);
document.addEventListener('keydown',e=>{if(e.target.tagName==='INPUT'||e.target.tagName==='TEXTAREA')return;if(e.key==='v')feed();if(e.key==='c')fetchBall();if(e.key==='p')pet();});
function copyInstall(btn){
const pre=btn.parentElement.querySelector('pre');
navigator.clipboard.writeText(pre.textContent).then(()=>{
btn.classList.add('copied');
btn.innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"20 6 9 17 4 12\"/></svg>';
setTimeout(()=>{btn.classList.remove('copied');btn.innerHTML='<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\" ry=\"2\"/><path d=\"M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1\"/></svg>';},2000);
});
}
async function loadVersion(){try{const r=await fetch('https://registry.npmjs.org/dotdog/latest');const d=await r.json();document.getElementById('version').textContent=d.version;}catch(e){}}
loadVersion();
</script>
<footer>dotdog · specdog tooling · <a href="https://github.com/specdog/dotdog/blob/main/LICENSE">MIT</a></footer>
</body>
</html>
Loading