replworks · cable8mm · Jun 6, 2026 · Jun 6, 2026
diff --git a/TASKS.md b/TASKS.md
@@ -90,11 +90,7 @@ Propose TASK update
 
 ## LAYOUT SYSTEM
 
-- [ ] T106 Create Global Layout
-- [ ] T107 Create Navigation
-- [ ] T108 Create Mobile Navigation
-- [ ] T109 Create Document Layout
-- [ ] T110 Create Content Collection Routing
+- [x] T106 Create Site Shell
 
 ---
 

diff --git a/src/components/DesktopNav.astro b/src/components/DesktopNav.astro
@@ -0,0 +1,19 @@
+---
+import { navItems } from '../lib/site';
+---
+
+<nav
+  class="hidden md:flex items-center gap-6 text-sm font-medium text-slate-700"
+>
+  {
+    navItems.map((item) => (
+      <a
+        class="transition hover:text-slate-900"
+        href={item.href}
+        rel="nofollow"
+      >
+        {item.title}
+      </a>
+    ))
+  }
+</nav>
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -0,0 +1,9 @@
+---
+
+---
+
+<footer
+  class="border-t border-slate-200 bg-slate-50 py-8 text-center text-sm text-slate-600"
+>
+  <p>REPL Works documentation shell · Built with Astro and Tailwind CSS.</p>
+</footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -0,0 +1,18 @@
+---
+import DesktopNav from './DesktopNav.astro';
+import MobileNav from './MobileNav.astro';
+---
+
+<header
+  class="sticky top-0 z-40 border-b border-slate-200 bg-white/95 backdrop-blur"
+>
+  <div
+    class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-4 px-4 py-4 sm:px-6"
+  >
+    <a href="/" class="text-lg font-semibold tracking-tight text-slate-900">
+      REPL Works
+    </a>
+    <DesktopNav />
+    <MobileNav />
+  </div>
+</header>
diff --git a/src/components/MobileNav.astro b/src/components/MobileNav.astro
@@ -0,0 +1,30 @@
+---
+import { navItems } from '../lib/site';
+---
+
+<div class="md:hidden">
+  <details class="relative">
+    <summary
+      class="flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 shadow-sm transition hover:border-slate-400 hover:bg-slate-50"
+    >
+      Menu
+      <span aria-hidden="true">▾</span>
+    </summary>
+    <nav class="mt-2 rounded-lg border border-slate-200 bg-white p-4 shadow-sm">
+      <ul class="space-y-2 text-sm font-medium text-slate-700">
+        {
+          navItems.map((item) => (
+            <li>
+              <a
+                class="block rounded-lg px-3 py-2 transition hover:bg-slate-50"
+                href={item.href}
+              >
+                {item.title}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+    </nav>
+  </details>
+</div>
diff --git a/src/layouts/DocumentLayout.astro b/src/layouts/DocumentLayout.astro
@@ -0,0 +1,30 @@
+---
+import SiteLayout from './SiteLayout.astro';
+const { title = 'Document', description = 'Document content placeholder.' } =
+  Astro.props;
+---
+
+<SiteLayout title={title} description={description}>
+  <div
+    class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm sm:p-10"
+  >
+    <header class="mb-8">
+      <p
+        class="text-sm font-semibold uppercase tracking-[0.3em] text-slate-500"
+      >
+        Document
+      </p>
+      <h1
+        class="mt-3 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl"
+      >
+        {title}
+      </h1>
+      <p class="mt-4 max-w-3xl text-base leading-7 text-slate-600">
+        {description}
+      </p>
+    </header>
+    <div class="space-y-6 text-slate-700">
+      <slot />
+    </div>
+  </div>
+</SiteLayout>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -1,16 +1,21 @@
 ---
 import '../styles/global.css';
+const {
+  title = 'REPL Works',
+  description = 'A documentation shell for the REPL Works website.',
+} = Astro.props;
 ---
 
 <!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content={description} />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
-    <title>Astro Basics</title>
+    <title>{title}</title>
   </head>
   <body>
     <slot />
@@ -21,7 +26,15 @@ import '../styles/global.css';
   html,
   body {
     margin: 0;
-    width: 100%;
-    height: 100%;
+    min-height: 100%;
+    font-family:
+      ui-sans-serif,
+      system-ui,
+      -apple-system,
+      BlinkMacSystemFont,
+      'Segoe UI',
+      sans-serif;
+    background: #f8fafc;
+    color: #0f172a;
   }
 </style>
diff --git a/src/layouts/SiteLayout.astro b/src/layouts/SiteLayout.astro
@@ -0,0 +1,19 @@
+---
+import Layout from './Layout.astro';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+const {
+  title = 'REPL Works',
+  description = 'REPL Works documentation shell.',
+} = Astro.props;
+---
+
+<Layout title={title} description={description}>
+  <div class="min-h-screen bg-slate-50 text-slate-900">
+    <Header />
+    <main class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
+      <slot />
+    </main>
+    <Footer />
+  </div>
+</Layout>
diff --git a/src/lib/site.ts b/src/lib/site.ts
@@ -0,0 +1,40 @@
+export const contentCollections = [
+  'manifesto',
+  'specification',
+  'workflow',
+  'resources',
+  'showcase',
+] as const;
+
+export type ContentCollection = (typeof contentCollections)[number];
+
+export const navItems = [
+  { title: 'Home', href: '/' },
+  { title: 'Why', href: '/why' },
+  { title: 'Manifesto', href: '/manifesto' },
+  { title: 'Specification', href: '/specification' },
+  { title: 'Workflow', href: '/workflow' },
+  { title: 'Resources', href: '/resources' },
+  { title: 'Showcase', href: '/showcase' },
+] as const;
+
+export const collectionTitles: Record<ContentCollection, string> = {
+  manifesto: 'Manifesto',
+  specification: 'Specification',
+  workflow: 'Workflow',
+  resources: 'Resources',
+  showcase: 'Showcase',
+};
+
+export const collectionDescriptions: Record<ContentCollection, string> = {
+  manifesto: 'A shared manifesto for REPL Works and AI development.',
+  specification:
+    'The specification framework for the REPL Works documentation platform.',
+  workflow: 'The workflow and process guidance for using REPL Works.',
+  resources: 'Curated resources to support REPL Works adoption.',
+  showcase: 'Proof of adoption and showcase examples for REPL Works.',
+};
+
+export function isContentCollection(value: string): value is ContentCollection {
+  return contentCollections.includes(value as ContentCollection);
+}
diff --git a/src/pages/[collection]/[slug].astro b/src/pages/[collection]/[slug].astro
@@ -0,0 +1,42 @@
+---
+import type { ContentCollection } from '../../lib/site';
+import { collectionTitles, isContentCollection } from '../../lib/site';
+import { getEntry } from 'astro:content';
+import DocumentLayout from '../../layouts/DocumentLayout.astro';
+
+export async function getStaticPaths() {
+  return [] as Array<{
+    params: { collection: ContentCollection; slug: string };
+  }>;
+}
+
+const collection = Astro.params.collection;
+const slug = Astro.params.slug;
+if (!isContentCollection(collection)) {
+  throw new Error(`Unsupported collection: ${collection}`);
+}
+
+const entry = await getEntry(collection, slug);
+if (!entry) {
+  throw new Error(`Entry not found for ${collection}/${slug}`);
+}
+
+const rendered = entry.rendered ?? null;
+const metadata = entry.data ?? {};
+---
+
+<DocumentLayout
+  title={metadata.title ?? collectionTitles[collection]}
+  description={metadata.description ??
+    `${collectionTitles[collection]} document.`}
+>
+  {
+    rendered ? (
+      <article set:html={rendered.html} class="space-y-6 text-slate-700" />
+    ) : (
+      <div class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-8 text-slate-700">
+        <p>This document is available once the collection publish content.</p>
+      </div>
+    )
+  }
+</DocumentLayout>
diff --git a/src/pages/[collection]/index.astro b/src/pages/[collection]/index.astro
@@ -0,0 +1,32 @@
+---
+import {
+  collectionDescriptions,
+  collectionTitles,
+  contentCollections,
+  isContentCollection,
+} from '../../lib/site';
+import DocumentLayout from '../../layouts/DocumentLayout.astro';
+
+export async function getStaticPaths() {
+  return contentCollections.map((collection) => ({ params: { collection } }));
+}
+
+const collection = Astro.params.collection;
+if (!isContentCollection(collection)) {
+  throw new Error(`Unsupported collection: ${collection}`);
+}
+
+const collectionTitle = collectionTitles[collection];
+const collectionDescription = collectionDescriptions[collection];
+---
+
+<DocumentLayout title={collectionTitle} description={collectionDescription}>
+  <div
+    class="rounded-3xl border border-dashed border-slate-300 bg-slate-50 p-8 text-slate-700"
+  >
+    <p class="text-base">
+      No content has been added yet for {collectionTitle}. This collection route
+      is ready for future documents.
+    </p>
+  </div>
+</DocumentLayout>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,22 @@
 ---
-import Welcome from '../components/Welcome.astro';
-import Layout from '../layouts/Layout.astro';
-
-// Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
-// Don't want to use any of this? Delete everything in this file, the `assets`, `components`, and `layouts` directories, and start fresh.
+import SiteLayout from '../layouts/SiteLayout.astro';
 ---
 
-<Layout>
-  <Welcome />
-</Layout>
+<SiteLayout title="Home" description="REPL Works documentation shell.">
+  <section
+    class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm sm:p-12"
+  >
+    <p class="text-sm font-semibold uppercase tracking-[0.3em] text-slate-500">
+      Documentation shell
+    </p>
+    <h1
+      class="mt-4 text-4xl font-semibold tracking-tight text-slate-900 sm:text-5xl"
+    >
+      REPL Works
+    </h1>
+    <p class="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
+      This foundation provides shared layout, navigation, and content collection
+      routing for the REPL Works platform.
+    </p>
+  </section>
+</SiteLayout>
diff --git a/src/pages/why.astro b/src/pages/why.astro
@@ -0,0 +1,15 @@
+---
+import SiteLayout from '../layouts/SiteLayout.astro';
+---
+
+<SiteLayout title="Why" description="Explore the purpose behind REPL Works.">
+  <section
+    class="rounded-3xl border border-slate-200 bg-white p-8 shadow-sm sm:p-12"
+  >
+    <h2 class="text-2xl font-semibold text-slate-900">Why REPL Works?</h2>
+    <p class="mt-4 text-slate-600">
+      This page is a placeholder for the Why section. The shared site shell is
+      configured and ready for content.
+    </p>
+  </section>
+</SiteLayout>