-
404
-
Page not found.
-
- Go to the homepage
+
+
+ 404
+
+
+ Page not found
+
+ The page you're looking for doesn't exist.
+
+
+ Go to homepage
+
-
-
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 2c3dba6..a38e5ca 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,21 +1,106 @@
---
-import { getCollection, render } from "astro:content";
-import Default from "../layouts/Default.astro";
+import { getCollection } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+
+import SinglePage from "../layouts/SinglePage.astro";
+import Header from "../components/Header.astro";
+import Hero from "../components/Hero.astro";
+import AboutSection from "../components/AboutSection.astro";
+import SpecSection from "../components/SpecSection.astro";
+import FAQSection from "../components/FAQSection.astro";
+import { parseSpecContent } from "../utils/parseSpecContent";
import { config } from "../config";
-// Get all specs and find the current version
+// Render the current/latest version
+const version = config.currentVersion;
const specs = await getCollection("spec");
-const currentSpec = specs.find((s) => s.data.version === config.currentVersion);
+const spec = specs.find((s) => s.data.version === version);
-if (!currentSpec) {
- return Astro.redirect("/404");
+if (!spec) {
+ throw new Error(`Spec version ${version} not found`);
}
-const { Content } = await render(currentSpec);
+// Read and process the markdown file
+const filePath = path.join(
+ process.cwd(),
+ "src/content/spec",
+ `${version}.md`
+);
+const content = fs.readFileSync(filePath, "utf-8");
+
+// Remove frontmatter
+const body = content.replace(/^---[\s\S]*?---\n/, "");
+
+// Process markdown to HTML
+const result = await unified()
+ .use(remarkParse)
+ .use(remarkRehype, { allowDangerousHtml: true })
+ .use(rehypeStringify, { allowDangerousHtml: true })
+ .process(body);
+
+const html = String(result);
+
+// Parse the content into sections
+const parsed = parseSpecContent(html, version);
---
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/spec/[version].astro b/src/pages/spec/[version].astro
index 532fdb1..221d8a2 100644
--- a/src/pages/spec/[version].astro
+++ b/src/pages/spec/[version].astro
@@ -1,6 +1,20 @@
---
-import { getCollection, render } from "astro:content";
-import Default from "../../layouts/Default.astro";
+import { getCollection } from "astro:content";
+import * as fs from "node:fs";
+import * as path from "node:path";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import rehypeStringify from "rehype-stringify";
+
+import SinglePage from "../../layouts/SinglePage.astro";
+import Header from "../../components/Header.astro";
+import Hero from "../../components/Hero.astro";
+import AboutSection from "../../components/AboutSection.astro";
+import SpecSection from "../../components/SpecSection.astro";
+import FAQSection from "../../components/FAQSection.astro";
+import { parseSpecContent } from "../../utils/parseSpecContent";
+import { config } from "../../config";
export async function getStaticPaths() {
const specs = await getCollection("spec");
@@ -11,11 +25,84 @@ export async function getStaticPaths() {
}
const { spec } = Astro.props;
-const { Content } = await render(spec);
+const version = spec.data.version;
+
+// Read and process the markdown file
+const filePath = path.join(
+ process.cwd(),
+ "src/content/spec",
+ `${version}.md`
+);
+const content = fs.readFileSync(filePath, "utf-8");
+
+// Remove frontmatter
+const body = content.replace(/^---[\s\S]*?---\n/, "");
+
+// Process markdown to HTML
+const result = await unified()
+ .use(remarkParse)
+ .use(remarkRehype, { allowDangerousHtml: true })
+ .use(rehypeStringify, { allowDangerousHtml: true })
+ .process(body);
+
+const html = String(result);
+
+// Parse the content into sections
+const parsed = parseSpecContent(html, version);
---
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/global.css b/src/styles/global.css
index 8f84852..4bbd810 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -2,164 +2,545 @@
@plugin "@tailwindcss/typography";
@theme {
- /* Colors */
- --color-sidebar: #191818;
- --color-sidebar-hover: #333;
+ /* Colors - refined palette */
+ --color-sidebar: #0a0a0a;
+ --color-sidebar-hover: #1a1a1a;
--color-accent: #1f8dd6;
- --color-text-primary: #1a1a1a;
- --color-text-secondary: #777;
- --color-text-muted: #999;
- --color-bg-primary: #fdfdfd;
- --color-bg-code: #f6f8fa;
- --color-bg-code-inline: rgba(27, 31, 35, 0.05);
- --color-border: #333;
+ --color-accent-light: #4da6e8;
+ --color-accent-muted: rgba(31, 141, 214, 0.15);
+ --color-text-primary: #0a0a0a;
+ --color-text-secondary: #525252;
+ --color-text-muted: #737373;
+ --color-bg-primary: #fafafa;
+ --color-bg-secondary: #f5f5f5;
+ --color-bg-code: #f0f0f0;
+ --color-bg-code-inline: rgba(0, 0, 0, 0.06);
+ --color-border: #e5e5e5;
+ --color-border-strong: #d4d4d4;
- /* Fonts */
- --font-sans: "Open Sans", Helvetica, Arial, sans-serif;
- --font-heading: "Open Sans Condensed", Helvetica, Arial, sans-serif;
- --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
- monospace;
+ /* Dark mode colors */
+ --color-dark-text-primary: #fafafa;
+ --color-dark-text-secondary: #a3a3a3;
+ --color-dark-text-muted: #737373;
+ --color-dark-bg-primary: #0a0a0a;
+ --color-dark-bg-secondary: #141414;
+ --color-dark-bg-code: #1a1a1a;
+ --color-dark-bg-code-inline: rgba(255, 255, 255, 0.1);
+ --color-dark-border: #262626;
+ --color-dark-border-strong: #404040;
+ --color-dark-accent-muted: rgba(31, 141, 214, 0.2);
+
+ /* Fonts - distinctive choices */
+ --font-display: "Bricolage Grotesque", system-ui, sans-serif;
+ --font-sans: "DM Sans", system-ui, sans-serif;
+ --font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
/* Sizing */
- --sidebar-width: 150px;
+ --header-height: 4rem;
+ --sidebar-width: 260px;
+ --content-max-width: 800px;
+ --section-padding-y: 6rem;
+ --section-padding-x: 2rem;
+
+ /* Transitions */
+ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+ --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
+
+ /* Shadows */
+ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+ --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
+ --shadow-glow: 0 0 40px rgba(31, 141, 214, 0.15);
+}
+
+/* Smooth scroll */
+html {
+ scroll-behavior: smooth;
+}
+
+/* Scroll margin for anchor links */
+[id] {
+ scroll-margin-top: calc(var(--header-height) + 2rem);
}
/* Base styles */
@layer base {
html {
height: 100%;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
}
body {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 400;
- line-height: 1.5;
+ line-height: 1.7;
color: var(--color-text-primary);
background-color: var(--color-bg-primary);
+ overflow-x: hidden;
}
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font-family: var(--font-heading);
+ .dark body {
+ color: var(--color-dark-text-primary);
+ background-color: var(--color-dark-bg-primary);
+ }
+
+ /* Typography */
+ h1, h2, h3, h4, h5, h6 {
+ font-family: var(--font-display);
font-weight: 700;
- color: #333;
+ color: var(--color-text-primary);
+ line-height: 1.2;
+ letter-spacing: -0.02em;
+ }
+
+ .dark h1,
+ .dark h2,
+ .dark h3,
+ .dark h4,
+ .dark h5,
+ .dark h6 {
+ color: var(--color-dark-text-primary);
}
h1 {
- font-size: 2.5em;
- line-height: 1.2;
+ font-size: clamp(2.5rem, 6vw, 4.5rem);
+ font-weight: 800;
+ letter-spacing: -0.03em;
}
- /* Nested list styling */
- ol ol,
- ul ol {
- list-style-type: lower-roman;
+ h2 {
+ font-size: clamp(1.75rem, 4vw, 2.5rem);
+ margin-top: 3rem;
+ margin-bottom: 1.5rem;
}
- ul ul ol,
- ul ol ol,
- ol ul ol,
- ol ol ol {
- list-style-type: lower-alpha;
+ h3 {
+ font-size: clamp(1.25rem, 2vw, 1.5rem);
+ margin-top: 2rem;
+ margin-bottom: 1rem;
}
+ p {
+ margin-bottom: 1.25rem;
+ }
+
+ /* Links */
a {
+ color: var(--color-accent);
+ text-decoration: none;
+ transition: color var(--transition-fast);
word-break: break-word;
}
+ a:hover {
+ color: var(--color-accent-light);
+ }
+
+ /* Code */
code {
- background-color: var(--color-bg-code-inline);
- border-radius: 3px;
font-family: var(--font-mono);
- font-size: 85%;
- margin: 0;
- padding: 0.3em 0.4em 0.1em 0.4em;
+ font-size: 0.875em;
+ background-color: var(--color-bg-code-inline);
+ border-radius: 4px;
+ padding: 0.2em 0.4em;
+ }
+
+ .dark code {
+ background-color: var(--color-dark-bg-code-inline);
}
pre {
+ font-family: var(--font-mono);
background-color: var(--color-bg-code);
- border-radius: 3px;
- line-height: 1.45;
- padding: 16px;
+ border-radius: 8px;
+ padding: 1.25rem;
+ overflow-x: auto;
+ line-height: 1.6;
+ }
+
+ .dark pre {
+ background-color: var(--color-dark-bg-code);
}
pre > code {
background-color: transparent !important;
- border-radius: 0;
- font-size: 90%;
padding: 0;
+ font-size: 0.875rem;
+ }
+
+ /* Lists */
+ ul, ol {
+ margin-bottom: 1.25rem;
+ padding-left: 1.5rem;
+ }
+
+ ul {
+ list-style-type: disc;
+ }
+
+ ol {
+ list-style-type: decimal;
+ }
+
+ li {
+ margin-bottom: 0.5rem;
+ }
+
+ ol ol, ul ol {
+ list-style-type: decimal;
+ }
+
+ ul ul ol, ul ol ol, ol ul ol, ol ol ol {
+ list-style-type: decimal;
+ }
+
+ /* Blockquotes */
+ blockquote {
+ border-left: 3px solid var(--color-accent);
+ padding-left: 1.5rem;
+ margin: 1.5rem 0;
+ color: var(--color-text-secondary);
+ font-style: italic;
+ }
+
+ .dark blockquote {
+ color: var(--color-dark-text-secondary);
+ }
+
+ /* Strong text */
+ strong {
+ font-weight: 600;
+ }
+
+ /* Selection */
+ ::selection {
+ background-color: var(--color-accent-muted);
+ color: var(--color-text-primary);
+ }
+
+ .dark ::selection {
+ background-color: var(--color-dark-accent-muted);
+ color: var(--color-dark-text-primary);
+ }
+
+ /* Focus styles */
+ :focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 2px;
}
}
-/* Layout transitions */
+/* Keyframe animations - defined outside layers for proper cascade */
+@keyframes fade-in {
+ from { opacity: 0; }
+ to { opacity: 1; }
+}
+
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translateY(20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes fade-in-down {
+ from {
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-in-left {
+ from {
+ opacity: 0;
+ transform: translateX(-20px);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+@keyframes bounce-subtle {
+ 0%, 100% { transform: translateY(0); }
+ 50% { transform: translateY(-8px); }
+}
+
+/* Animation utility classes */
+.animate-fade-in {
+ opacity: 0;
+ animation: fade-in 400ms ease-out forwards;
+}
+
+.animate-fade-in-up {
+ opacity: 0;
+ animation: fade-in-up 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-fade-in-down {
+ opacity: 0;
+ animation: fade-in-down 250ms ease-out forwards;
+}
+
+.animate-slide-in-left {
+ opacity: 0;
+ animation: slide-in-left 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.animate-bounce-subtle {
+ animation: bounce-subtle 2s ease-in-out infinite;
+}
+
+/* Animation delays */
+.delay-100 { animation-delay: 100ms; }
+.delay-200 { animation-delay: 200ms; }
+.delay-300 { animation-delay: 300ms; }
+.delay-400 { animation-delay: 400ms; }
+.delay-500 { animation-delay: 500ms; }
+.delay-600 { animation-delay: 600ms; }
+.delay-700 { animation-delay: 700ms; }
+.delay-800 { animation-delay: 800ms; }
+
+/* Component styles */
+@layer components {
+ /* Glass effect for header */
+ .glass {
+ background: rgba(250, 250, 250, 0.85);
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ }
+
+ .dark .glass {
+ background: rgba(10, 10, 10, 0.85);
+ }
+
+ /* Gradient text */
+ .gradient-text {
+ background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-accent) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ .dark .gradient-text {
+ background: linear-gradient(135deg, var(--color-dark-text-primary) 0%, var(--color-accent-light) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ }
+
+ /* Section container */
+ .section-container {
+ max-width: calc(var(--content-max-width) + var(--sidebar-width) + 4rem);
+ margin: 0 auto;
+ padding: 0 var(--section-padding-x);
+ }
+
+ /* Content prose styling */
+ .prose-spec {
+ max-width: var(--content-max-width);
+ }
+
+ .prose-spec h2 {
+ padding-bottom: 0.75rem;
+ border-bottom: 1px solid var(--color-border);
+ margin-top: 4rem;
+ }
+
+ .dark .prose-spec h2 {
+ border-bottom-color: var(--color-dark-border);
+ }
+
+ .prose-spec h3 {
+ color: var(--color-text-secondary);
+ }
+
+ .dark .prose-spec h3 {
+ color: var(--color-dark-text-secondary);
+ }
+
+ .prose-spec img {
+ max-width: 100%;
+ height: auto;
+ border-radius: 8px;
+ margin: 2rem 0;
+ }
+
+ /* Subtle border */
+ .border-subtle {
+ border-color: var(--color-border);
+ }
+
+ .dark .border-subtle {
+ border-color: var(--color-dark-border);
+ }
+
+ /* Button base */
+ .btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.625rem 1.25rem;
+ font-family: var(--font-sans);
+ font-size: 0.875rem;
+ font-weight: 500;
+ border-radius: 8px;
+ transition: all var(--transition-fast);
+ cursor: pointer;
+ }
+
+ .btn-primary {
+ background-color: var(--color-accent);
+ color: white;
+ }
+
+ .btn-primary:hover {
+ background-color: var(--color-accent-light);
+ transform: translateY(-1px);
+ box-shadow: var(--shadow-md);
+ }
+
+ .btn-ghost {
+ background-color: transparent;
+ color: var(--color-text-secondary);
+ }
+
+ .btn-ghost:hover {
+ background-color: var(--color-bg-secondary);
+ color: var(--color-text-primary);
+ }
+
+ .dark .btn-ghost {
+ color: var(--color-dark-text-secondary);
+ }
+
+ .dark .btn-ghost:hover {
+ background-color: var(--color-dark-bg-secondary);
+ color: var(--color-dark-text-primary);
+ }
+
+ /* Sidebar link styles */
+ .sidebar-link {
+ display: block;
+ padding: 0.5rem 1rem;
+ font-size: 0.875rem;
+ color: var(--color-text-muted);
+ border-radius: 6px;
+ transition: all var(--transition-fast);
+ border-left: 2px solid transparent;
+ margin-left: -2px;
+ }
+
+ .sidebar-link:hover {
+ color: var(--color-text-primary);
+ background-color: var(--color-bg-secondary);
+ }
+
+ .dark .sidebar-link {
+ color: var(--color-dark-text-muted);
+ }
+
+ .dark .sidebar-link:hover {
+ color: var(--color-dark-text-primary);
+ background-color: var(--color-dark-bg-secondary);
+ }
+
+ .sidebar-link.active {
+ color: var(--color-accent);
+ border-left-color: var(--color-accent);
+ background-color: var(--color-accent-muted);
+ }
+
+ .dark .sidebar-link.active {
+ color: var(--color-accent-light);
+ background-color: var(--color-dark-accent-muted);
+ }
+
+ .sidebar-link-sub {
+ padding-left: 1.5rem;
+ font-size: 0.8125rem;
+ }
+
+ /* Version badge */
+ .version-badge {
+ display: inline-flex;
+ align-items: center;
+ padding: 0.25rem 0.75rem;
+ font-family: var(--font-mono);
+ font-size: 0.75rem;
+ font-weight: 500;
+ background-color: var(--color-bg-secondary);
+ border: 1px solid var(--color-border);
+ border-radius: 9999px;
+ color: var(--color-text-muted);
+ }
+
+ .dark .version-badge {
+ background-color: var(--color-dark-bg-secondary);
+ border-color: var(--color-dark-border);
+ color: var(--color-dark-text-muted);
+ }
+
+ /* FAQ accordion styles */
+ .faq-item {
+ border-bottom: 1px solid var(--color-border);
+ }
+
+ .dark .faq-item {
+ border-bottom-color: var(--color-dark-border);
+ }
+
+ .faq-question {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
+ padding: 1.5rem 0;
+ text-align: left;
+ font-family: var(--font-display);
+ font-size: 1.125rem;
+ font-weight: 600;
+ color: var(--color-text-primary);
+ cursor: pointer;
+ transition: color var(--transition-fast);
+ }
+
+ .dark .faq-question {
+ color: var(--color-dark-text-primary);
+ }
+
+ .faq-question:hover {
+ color: var(--color-accent);
+ }
+
+ .faq-answer {
+ padding-bottom: 1.5rem;
+ color: var(--color-text-secondary);
+ }
+
+ .dark .faq-answer {
+ color: var(--color-dark-text-secondary);
+ }
+}
+
+/* Transitions for interactive elements */
@layer components {
#layout,
#menu,
.menu-link {
- transition: all 0.2s ease-out;
- }
-
- /* Spec content styling */
- .spec-content h1 {
- margin-bottom: 0.5em;
- }
-
- .spec-content h2 {
- margin-top: 2em;
- margin-bottom: 0.75em;
- padding-bottom: 0.3em;
- border-bottom: 1px solid #eee;
- }
-
- .spec-content h3 {
- margin-top: 1.5em;
- margin-bottom: 0.5em;
- }
-
- .spec-content p {
- margin-bottom: 1em;
- }
-
- .spec-content ul,
- .spec-content ol {
- margin-bottom: 1em;
- padding-left: 2em;
- }
-
- .spec-content li {
- margin-bottom: 0.25em;
- }
-
- .spec-content a {
- color: #1f8dd6;
- text-decoration: none;
- }
-
- .spec-content a:hover {
- text-decoration: underline;
- }
-
- .spec-content img {
- max-width: 100%;
- height: auto;
- margin: 1em 0;
- }
-
- .spec-content blockquote {
- margin: 1em 0;
- padding-left: 1em;
- border-left: 4px solid #ddd;
- color: #666;
- }
-
- .spec-content hr {
- margin: 2em 0;
- border: none;
- border-top: 1px solid #eee;
+ transition: all var(--transition-base);
}
}
diff --git a/src/utils/parseSpecContent.ts b/src/utils/parseSpecContent.ts
new file mode 100644
index 0000000..e98a67a
--- /dev/null
+++ b/src/utils/parseSpecContent.ts
@@ -0,0 +1,292 @@
+/**
+ * Parses rendered spec HTML into structured sections for the single-page
+ * layout.
+ */
+
+export interface TocItem {
+ id: string;
+ title: string;
+ level: number;
+}
+
+export interface FAQItem {
+ id: string;
+ question: string;
+ answer: string;
+}
+
+export interface SpecSection {
+ id: string;
+ title: string;
+ content: string;
+}
+
+export interface ParsedSpec {
+ svgPath: string;
+ introduction: string;
+ summary: string;
+ terminology: string;
+ specification: string;
+ specSections: SpecSection[];
+ faq: FAQItem[];
+ about: string;
+ license: string;
+ tocItems: TocItem[];
+}
+
+/**
+ * Convert a heading text to a URL-friendly ID
+ */
+function slugify(text: string): string {
+ return text
+ .toLowerCase()
+ .replace(/[^\w\s-]/g, "")
+ .replace(/\s+/g, "-")
+ .trim();
+}
+
+/**
+ * Extract content between two headings or to the end of the document
+ */
+function extractSection(
+ html: string,
+ startHeading: string,
+ endHeadings: string[] = []
+): string {
+ // Find the heading (h2) - use partial match to handle additional text
+ // e.g., "Git Common-Flow Specification (Common-Flow)"
+ const headingPattern = new RegExp(
+ `
]*>[^<]*${escapeRegex(startHeading)}[^<]*`,
+ "i"
+ );
+ const match = html.match(headingPattern);
+ if (!match || match.index === undefined) return "";
+
+ const startIdx = match.index + match[0].length;
+
+ // Find the next section heading
+ let endIdx = html.length;
+ for (const endHeading of endHeadings) {
+ const endPattern = new RegExp(
+ `]*>\\s*${escapeRegex(endHeading)}\\s*`,
+ "i"
+ );
+ const endMatch = html.slice(startIdx).match(endPattern);
+ if (endMatch && endMatch.index !== undefined) {
+ const possibleEnd = startIdx + endMatch.index;
+ if (possibleEnd < endIdx) {
+ endIdx = possibleEnd;
+ }
+ }
+ }
+
+ // Also check for any h2 as a fallback
+ const anyH2 = html.slice(startIdx).match(/]*>/i);
+ if (anyH2 && anyH2.index !== undefined) {
+ const possibleEnd = startIdx + anyH2.index;
+ if (possibleEnd < endIdx) {
+ endIdx = possibleEnd;
+ }
+ }
+
+ return html.slice(startIdx, endIdx).trim();
+}
+
+function escapeRegex(str: string): string {
+ return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+/**
+ * Extract the numbered spec sections (1. TL;DR, 2. The Master Branch, etc.)
+ */
+function extractSpecSections(specContent: string): SpecSection[] {
+ const sections: SpecSection[] = [];
+
+ // The spec uses an ordered list with nested items
+ // Each top-level li starts a new section
+ const olMatch = specContent.match(/]*>([\s\S]*?)<\/ol>/i);
+ if (!olMatch) return sections;
+
+ // Split by top-level list items
+ // We need to handle nested lists carefully
+ const sectionTitles = [
+ "TL;DR",
+ "The Master Branch",
+ "Change Branches",
+ "Pull Requests",
+ "Versioning",
+ "Releases",
+ "Short-Term Release Branches",
+ "Long-term Release Branches",
+ "Bug Fixes & Rollback",
+ "Git Best Practices",
+ ];
+
+ // Find each section by looking for the title pattern
+ for (let i = 0; i < sectionTitles.length; i++) {
+ const title = sectionTitles[i];
+ const id = slugify(title);
+
+ // For the content, we'll just use the title for navigation
+ // The actual content stays in the main specification block
+ sections.push({
+ id: `spec-${id}`,
+ title,
+ content: "", // Content handled inline
+ });
+ }
+
+ return sections;
+}
+
+/**
+ * Extract FAQ items from the FAQ section HTML
+ */
+function extractFAQItems(faqContent: string): FAQItem[] {
+ const items: FAQItem[] = [];
+
+ // Split by h3 headings
+ const h3Pattern = /]*>([\s\S]*?)<\/h3>/gi;
+ let lastIndex = 0;
+ let lastQuestion = "";
+ let lastId = "";
+
+ const matches = [...faqContent.matchAll(h3Pattern)];
+
+ for (let i = 0; i < matches.length; i++) {
+ const match = matches[i];
+ const question = match[1].replace(/<[^>]+>/g, "").trim();
+ const id = slugify(question).slice(0, 50);
+
+ if (i > 0 && match.index !== undefined) {
+ // Get content between previous h3 and this one
+ const answer = faqContent.slice(lastIndex, match.index).trim();
+ items.push({
+ id: `faq-${lastId}`,
+ question: lastQuestion,
+ answer,
+ });
+ }
+
+ lastQuestion = question;
+ lastId = id;
+ lastIndex = match.index! + match[0].length;
+ }
+
+ // Don't forget the last FAQ item
+ if (lastQuestion) {
+ const answer = faqContent.slice(lastIndex).trim();
+ items.push({
+ id: `faq-${lastId}`,
+ question: lastQuestion,
+ answer,
+ });
+ }
+
+ return items;
+}
+
+/**
+ * Build table of contents from parsed sections
+ */
+function buildTocItems(parsed: Partial): TocItem[] {
+ const items: TocItem[] = [];
+
+ // Main sections
+ if (parsed.introduction) {
+ items.push({ id: "introduction", title: "Introduction", level: 2 });
+ }
+ if (parsed.summary) {
+ items.push({ id: "summary", title: "Summary", level: 2 });
+ }
+ if (parsed.terminology) {
+ items.push({ id: "terminology", title: "Terminology", level: 2 });
+ }
+ if (parsed.specification) {
+ items.push({ id: "specification", title: "Specification", level: 2 });
+
+ // Add spec subsections
+ if (parsed.specSections) {
+ for (const section of parsed.specSections) {
+ items.push({ id: section.id, title: section.title, level: 3 });
+ }
+ }
+ }
+
+ return items;
+}
+
+/**
+ * Main parsing function - takes rendered HTML and returns structured content
+ */
+export function parseSpecContent(html: string, version: string): ParsedSpec {
+ const svgPath = `/spec/${version}.svg`;
+
+ // Remove the title (h1) and SVG from the content for parsing
+ let content = html;
+
+ // Remove the h1 title
+ content = content.replace(/]*>[\s\S]*?<\/h1>/i, "");
+
+ // Remove the SVG img tag
+ content = content.replace(/]*\.svg[^>]*>/i, "");
+
+ // Extract each section
+ const introduction = extractSection(content, "Introduction", [
+ "Summary",
+ "Terminology",
+ "Git Common-Flow",
+ "FAQ",
+ "About",
+ "License",
+ ]);
+
+ const summary = extractSection(content, "Summary", [
+ "Terminology",
+ "Git Common-Flow",
+ "FAQ",
+ "About",
+ "License",
+ ]);
+
+ const terminology = extractSection(content, "Terminology", [
+ "Git Common-Flow",
+ "FAQ",
+ "About",
+ "License",
+ ]);
+
+ const specification = extractSection(
+ content,
+ "Git Common-Flow Specification",
+ ["FAQ", "About", "License"]
+ );
+
+ const faqContent = extractSection(content, "FAQ", ["About", "License"]);
+
+ const about = extractSection(content, "About", ["License"]);
+
+ const license = extractSection(content, "License", []);
+
+ // Parse subsections
+ const specSections = extractSpecSections(specification);
+ const faq = extractFAQItems(faqContent);
+
+ const parsed: ParsedSpec = {
+ svgPath,
+ introduction,
+ summary,
+ terminology,
+ specification,
+ specSections,
+ faq,
+ about,
+ license,
+ tocItems: [],
+ };
+
+ // Build TOC
+ parsed.tocItems = buildTocItems(parsed);
+
+ return parsed;
+}
-
-
-
-
-