Merge pull request #33 from jimeh/dependabot/npm_and_yarn/tar-7.5.9

Bump tar from 7.5.3 to 7.5.9

.github/dependabot.yml

@@ -0,0 +1,24 @@
+---
+version: 2
+updates:
+  - package-ecosystem: github-actions
+    directory: /
+    schedule:
+      interval: monthly
+  - package-ecosystem: npm
+    directory: /
+    schedule:
+      interval: monthly
+    groups:
+      npm-development:
+        dependency-type: development
+        update-types:
+          - major
+          - minor
+          - patch
+      npm-production:
+        dependency-type: production
+        update-types:
+          - major
+          - minor
+          - patch

.github/workflows/update-specs.yml

@@ -0,0 +1,47 @@
+name: Update Specs
+
+on:
+  workflow_dispatch:
+
+jobs:
+  update-specs:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Generate GitHub App Token
+        id: app-token
+        uses: actions/create-github-app-token@29824e69f54612133e76f7eaac726eef6c875baf # v2.2.1
+        with:
+          app-id: ${{ secrets.BOT_APP_ID }}
+          private-key: ${{ secrets.BOT_PRIVATE_KEY }}
+
+      - name: Checkout
+        uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+
+      - name: Setup Node.js
+        uses: actions/setup-node@6044e13b5dc448c55e2357c09f80417699197238 # v6.2.0
+        with:
+          node-version-file: ".node-version"
+          cache: "npm"
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Update specs
+        run: npm run update-specs
+
+      - name: Create Pull Request
+        uses: peter-evans/create-pull-request@98357b18bf14b5342f975ff684046ec3b2a07725 # v8.0.0
+        with:
+          token: ${{ steps.app-token.outputs.token }}
+          commit-message: "chore: update spec versions"
+          title: "chore: update spec versions"
+          body: |
+            Automated update of spec versions from upstream repository.
+
+            This PR was created by the update-specs workflow.
+          branch: update-specs
+          delete-branch: true
+          add-paths: |
+            src/content/spec/*

CLAUDE.md

@@ -47,7 +47,7 @@ The site is built to `dist/` and deployed to Cloudflare Workers.
 
 - **Astro 5.x** static site generator
 - **Tailwind CSS 4.x** for styling with dark mode support
-- **astro-icon** with Heroicons and Simple Icons for icons
+- **astro-icon** with Heroicons, Simple Icons, and custom local SVGs (`src/icons/`)
 - **Content Collections** for spec markdown files
 - **TypeScript** throughout
 - **Node.js** as JavaScript runtime (managed via mise)

astro.config.mjs

@@ -1,4 +1,4 @@
-import { defineConfig } from "astro/config";
+import { defineConfig, fontProviders } from "astro/config";
 import tailwindcss from "@tailwindcss/vite";
 import sitemap from "@astrojs/sitemap";
 import icon from "astro-icon";
@@ -10,4 +10,29 @@ export default defineConfig({
   vite: {
     plugins: [tailwindcss()],
   },
+  experimental: {
+    fonts: [
+      {
+        provider: fontProviders.fontsource(),
+        name: "Bricolage Grotesque",
+        cssVariable: "--font-bricolage",
+        weights: ["200 800"],
+        fallbacks: ["system-ui", "sans-serif"],
+      },
+      {
+        provider: fontProviders.fontsource(),
+        name: "DM Sans",
+        cssVariable: "--font-dm-sans",
+        weights: ["100 1000"],
+        fallbacks: ["system-ui", "sans-serif"],
+      },
+      {
+        provider: fontProviders.fontsource(),
+        name: "JetBrains Mono",
+        cssVariable: "--font-jetbrains",
+        weights: ["100 800"],
+        fallbacks: ["SF Mono", "Consolas", "monospace"],
+      },
+    ],
+  },
 });

package.json

@@ -14,13 +14,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/sitemap": "^3.6.1",
-    "@fontsource-variable/bricolage-grotesque": "^5.2.10",
-    "@fontsource-variable/dm-sans": "^5.2.8",
-    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@astrojs/sitemap": "^3.7.0",
     "@iconify-json/heroicons": "^1.2.3",
-    "@iconify-json/simple-icons": "^1.2.65",
-    "astro": "^5.16.8",
+    "@iconify-json/simple-icons": "^1.2.69",
+    "astro": "^5.17.1",
     "astro-icon": "^1.1.5",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
@@ -32,18 +29,18 @@
   },
   "devDependencies": {
     "@astrojs/check": "^0.9.6",
-    "@eslint/js": "^9.39.2",
+    "@eslint/js": "^10.0.1",
     "@tailwindcss/typography": "^0.5.19",
-    "@tailwindcss/vite": "^4.1.18",
+    "@tailwindcss/vite": "^4.2.0",
     "@types/semver": "^7.7.1",
-    "eslint": "^9.39.2",
-    "eslint-plugin-astro": "^1.5.0",
-    "prettier": "^3.7.4",
+    "eslint": "^10.0.0",
+    "eslint-plugin-astro": "^1.6.0",
+    "prettier": "^3.8.1",
     "prettier-plugin-astro": "^0.14.1",
     "svgo": "^4.0.0",
     "tailwindcss": "^4.1.18",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3",
-    "typescript-eslint": "^8.52.0"
+    "typescript-eslint": "^8.56.0"
   }
 }

src/components/Hero.astro

@@ -13,9 +13,9 @@ interface Props {
 const { version, versions, svgContent } = Astro.props;
 
 const navItems = [
-  { id: "about", label: "About" },
+  { id: "about", label: "About", align: "end" },
   { id: "spec", label: "Read the Spec", primary: true },
-  { id: "faq", label: "FAQ" },
+  { id: "faq", label: "FAQ", align: "start" },
 ];
 
 const baseClasses = `inline-flex items-center justify-center gap-2
@@ -29,6 +29,7 @@ const primaryClasses = `bg-sky-600 text-white
 const secondaryClasses = `text-gray-600 dark:text-neutral-400
   hover:bg-gray-100 hover:text-gray-950
   dark:hover:bg-neutral-800 dark:hover:text-neutral-50`;
+
 ---
 
 <section
@@ -133,7 +134,7 @@ const secondaryClasses = `text-gray-600 dark:text-neutral-400
     <!-- Navigation links -->
     <nav
       class="animate-fade-in-up delay-400
-             flex flex-nowrap items-center justify-center gap-2 sm:gap-4"
+             grid grid-cols-[1fr_auto_1fr] items-center gap-2 sm:gap-4"
     >
       {
         navItems.map((item) => (
@@ -142,6 +143,8 @@ const secondaryClasses = `text-gray-600 dark:text-neutral-400
             class:list={[
               baseClasses,
               item.primary ? primaryClasses : secondaryClasses,
+              item.align === "end" && "justify-self-end",
+              item.align === "start" && "justify-self-start",
             ]}
           >
             {item.label}

src/components/ThemeToggle.astro

@@ -14,11 +14,7 @@ import { Icon } from "astro-icon/components";
   >
     <Icon name="heroicons:sun" data-theme-icon="light" class="hidden w-5 h-5" />
     <Icon name="heroicons:moon" data-theme-icon="dark" class="hidden w-5 h-5" />
-    <Icon
-      name="heroicons:computer-desktop"
-      data-theme-icon="auto"
-      class="hidden w-5 h-5"
-    />
+    <Icon name="sun-moon" data-theme-icon="auto" class="hidden w-5 h-5" />
   </button>
   <!-- Tooltip -->
   <div

src/icons/sun-moon.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <!-- Circle outline -->
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"/>
+  <!-- Right half filled (dark/moon side) -->
+  <path fill="currentColor" d="M12 8.25a3.75 3.75 0 0 1 0 7.5z"/>
+  <!-- Left-side sun rays (top, top-left, left, bottom-left, bottom) -->
+  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 3v2.25M7.227 7.227 5.636 5.636M5.25 12H3M7.227 16.773l-1.591 1.591M12 18.75V21"/>
+</svg>

src/layouts/BaseLayout.astro

@@ -1,7 +1,5 @@
 ---
-import "@fontsource-variable/bricolage-grotesque";
-import "@fontsource-variable/dm-sans";
-import "@fontsource-variable/jetbrains-mono";
+import { Font } from "astro:assets";
 import "../styles/global.css";
 import { config } from "../config";
 
@@ -11,7 +9,9 @@ interface Props {
 }
 
 const { title, description = config.description } = Astro.props;
-const fullTitle = title.includes(config.title) ? title : `${title} | ${config.title}`;
+const fullTitle = title.includes(config.title)
+  ? title
+  : `${title} | ${config.title}`;
 const canonicalUrl = Astro.url.href;
 ---
 
@@ -42,12 +42,23 @@ const canonicalUrl = Astro.url.href;
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
 
+    <!-- Fonts -->
+    <Font
+      cssVariable="--font-bricolage"
+      preload={[{ weight: "700" }, { weight: "800" }]}
+    />
+    <Font cssVariable="--font-dm-sans" preload={[{ weight: "400" }]} />
+    <Font cssVariable="--font-jetbrains" preload={[{ weight: "400" }]} />
+
+    <!-- Slot for page-specific head content -->
+    <slot name="head" />
+
     <!-- Prevent flash of wrong theme -->
     <script is:inline>
       (function () {
         const mode = localStorage.getItem("theme");
         const prefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
+          "(prefers-color-scheme: dark)"
         ).matches;
         if (mode === "dark" || (mode !== "light" && prefersDark)) {
           document.documentElement.classList.add("dark");
@@ -63,7 +74,7 @@ const canonicalUrl = Astro.url.href;
       document.addEventListener("astro:after-swap", () => {
         const mode = localStorage.getItem("theme");
         const prefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)",
+          "(prefers-color-scheme: dark)"
         ).matches;
         if (mode === "dark" || (mode !== "light" && prefersDark)) {
           document.documentElement.classList.add("dark");

src/layouts/SpecLayout.astro

@@ -31,7 +31,11 @@ const markdown = content.replace(/^---[\s\S]*?---\n/, "");
 const parsed = await parseSpecContent(markdown);
 
 // Read SVG content for inline embedding
-const svgFilePath = path.join(process.cwd(), "src/content/spec", `${version}.svg`);
+const svgFilePath = path.join(
+  process.cwd(),
+  "src/content/spec",
+  `${version}.svg`
+);
 let svgContent: string | null = null;
 if (fs.existsSync(svgFilePath)) {
   svgContent = fs.readFileSync(svgFilePath, "utf-8");
@@ -39,14 +43,19 @@ if (fs.existsSync(svgFilePath)) {
 ---
 
 <BaseLayout title={spec.data.title}>
+  <Fragment slot="head">
+    <link
+      rel="alternate"
+      type="text/markdown"
+      href={`/spec/git-common-flow-v${version}.md`}
+      title="Raw Markdown"
+    />
+  </Fragment>
+
   <Header version={version} versions={versions} />
 
   <main>
-    <Hero
-      version={version}
-      versions={versions}
-      svgContent={svgContent}
-    />
+    <Hero version={version} versions={versions} svgContent={svgContent} />
 
     <AboutSection
       introduction={parsed.introduction}

src/pages/llms.txt.ts

@@ -0,0 +1,25 @@
+import type { APIRoute } from "astro";
+import { getVersionInfo } from "../utils/versions";
+
+export const GET: APIRoute = async () => {
+  const { currentVersion } = await getVersionInfo();
+
+  const content = `# Common-Flow
+
+> A Git workflow specification combining GitHub Flow with versioned releases.
+
+Common-Flow is a sensible git workflow based on GitHub Flow, with the addition
+of versioned releases, optional release branches, and without the requirement
+to deploy to production all the time.
+
+## Docs
+
+- [Git Common-Flow Specification](/spec/git-common-flow-v${currentVersion}.md): The complete Git Common-Flow v${currentVersion} specification in Markdown format
+`;
+
+  return new Response(content, {
+    headers: {
+      "Content-Type": "text/plain; charset=utf-8",
+    },
+  });
+};

src/pages/spec/[version]/md.astro

@@ -116,6 +116,15 @@ const previewHtml = await unified()
 ---
 
 <BaseLayout title={`${spec.data.title} - Markdown`}>
+  <Fragment slot="head">
+    <link
+      rel="alternate"
+      type="text/markdown"
+      href={`/spec/git-common-flow-v${version}.md`}
+      title="Raw Markdown"
+    />
+  </Fragment>
+
   <!-- Header -->
   <header
     class="sticky top-0 z-50 border-b
@@ -201,31 +210,31 @@ const previewHtml = await unified()
           <!-- Copy and Download buttons -->
           <div class="flex items-center gap-3 order-1 sm:order-3">
             <!-- Copy button -->
-            <div class="relative">
-              <button
-                id="copy-btn"
-                type="button"
-                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm
-                       font-medium rounded-lg transition-colors cursor-pointer
-                       text-gray-600 dark:text-neutral-400
-                       hover:bg-gray-100 hover:text-gray-950
-                       dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
-              >
-                <Icon name="heroicons:clipboard-document" class="w-4 h-4" />
-                <span data-copy-text>Copy</span>
-              </button>
-              <!-- Mobile tooltip -->
-              <div
-                id="copy-tooltip"
-                class="sm:hidden absolute left-1/2 -translate-x-1/2 top-full
-                       mt-2 px-2 py-1 text-xs font-medium whitespace-nowrap
-                       rounded-md shadow-sm bg-gray-900 text-white
-                       dark:bg-white dark:text-gray-900 opacity-0
-                       pointer-events-none transition-opacity duration-200"
-              >
-                Copied!
-              </div>
-            </div>
+            <button
+              id="copy-btn"
+              type="button"
+              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm
+                     font-medium rounded-lg transition-colors cursor-pointer
+                     text-gray-600 dark:text-neutral-400
+                     hover:bg-gray-100 hover:text-gray-950
+                     dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
+            >
+              <Icon name="heroicons:clipboard-document" class="w-4 h-4" />
+              <span data-copy-text>Copy</span>
+            </button>
+
+            <!-- Raw button -->
+            <a
+              href={`/spec/git-common-flow-v${version}.md`}
+              class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm
+                     font-medium rounded-lg transition-colors
+                     text-gray-600 dark:text-neutral-400
+                     hover:bg-gray-100 hover:text-gray-950
+                     dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
+            >
+              <Icon name="heroicons:document-text" class="w-4 h-4" />
+              <span>Raw</span>
+            </a>
 
             <!-- Download button -->
             <button
@@ -368,7 +377,6 @@ const previewHtml = await unified()
     const downloadBtn = document.getElementById("download-btn");
     const rawContent = document.getElementById("markdown-raw");
     const copyText = copyBtn?.querySelector("[data-copy-text]");
-    const copyTooltip = document.getElementById("copy-tooltip");
 
     const toggleContainer = document.getElementById("toggle-container");
     const toggleCode = document.getElementById("toggle-code");
@@ -446,9 +454,24 @@ const previewHtml = await unified()
       }
     }
 
-    // Initialize indicator position on load
-    if (togglePreview) {
-      updateIndicator(togglePreview);
+    // Initialize indicator position after layout is complete
+    // Use double requestAnimationFrame to ensure layout/paint is finished,
+    // which fixes sizing issues on iOS Safari initial page load
+    function initializeIndicator() {
+      if (togglePreview) {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            updateIndicator(togglePreview);
+          });
+        });
+      }
+    }
+
+    // Wait for fonts to load before measuring, then initialize
+    if (document.fonts && document.fonts.ready) {
+      document.fonts.ready.then(initializeIndicator);
+    } else {
+      initializeIndicator();
     }
 
     // Toggle event listeners
@@ -456,22 +479,12 @@ const previewHtml = await unified()
     togglePreview?.addEventListener("click", () => setActiveToggle(false));
 
     function showCopiedFeedback() {
-      // Desktop: change button text
       if (copyText) {
         copyText.textContent = "Copied!";
         setTimeout(() => {
           copyText.textContent = "Copy";
         }, 2000);
       }
-      // Mobile: show tooltip
-      if (copyTooltip) {
-        copyTooltip.classList.remove("opacity-0");
-        copyTooltip.classList.add("opacity-100");
-        setTimeout(() => {
-          copyTooltip.classList.remove("opacity-100");
-          copyTooltip.classList.add("opacity-0");
-        }, 2000);
-      }
     }
 
     // Copy button

src/pages/spec/git-common-flow-v[version].md.ts

@@ -0,0 +1,30 @@
+import type { APIRoute, GetStaticPaths } from "astro";
+import { getCollection } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const specs = await getCollection("spec");
+  return specs.map((spec) => ({
+    params: { version: spec.data.version },
+  }));
+};
+
+export const GET: APIRoute = ({ params }) => {
+  const version = params.version;
+  const filePath = path.join(
+    process.cwd(),
+    "src/content/spec",
+    `${version}.md`
+  );
+  const content = fs.readFileSync(filePath, "utf-8");
+  const markdown = content.replace(/^---[\s\S]*?---\n/, "");
+  const filename = `git-common-flow-v${version}.md`;
+
+  return new Response(markdown, {
+    headers: {
+      "Content-Type": "text/markdown; charset=utf-8",
+      "Content-Disposition": `inline; filename="${filename}"`,
+    },
+  });
+};

src/styles/global.css

@@ -8,10 +8,10 @@
   --color-accent: theme(colors.sky.500);
   --color-accent-light: theme(colors.sky.400);
 
-  /* Fonts - self-hosted via fontsource */
-  --font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
-  --font-sans: "DM Sans Variable", system-ui, sans-serif;
-  --font-mono: "JetBrains Mono Variable", "SF Mono", Consolas, monospace;
+  /* Fonts - via Astro experimental font API (fontsource provider) */
+  --font-display: var(--font-bricolage);
+  --font-sans: var(--font-dm-sans);
+  --font-mono: var(--font-jetbrains);
 
   /* Sizing */
   --header-height: 4rem;