mirror of
https://github.com/jimeh/commonflow.org.git
synced 2026-02-19 05:46:40 +00:00
feat(design): complete redesign of website
Redesign the website with a more modern look.
This commit is contained in:
96
src/components/AboutSection.astro
Normal file
96
src/components/AboutSection.astro
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
interface Props {
|
||||
introduction: string;
|
||||
summary: string;
|
||||
about: string;
|
||||
license: string;
|
||||
}
|
||||
|
||||
const { introduction, summary, about, license } = Astro.props;
|
||||
---
|
||||
|
||||
<section id="about" class="py-20 sm:py-28">
|
||||
<div class="section-container">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Section header -->
|
||||
<div class="mb-12 text-center">
|
||||
<h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2>
|
||||
<p
|
||||
class="text-lg text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
A practical git workflow that combines the best of GitHub Flow with
|
||||
versioned releases
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Introduction -->
|
||||
<div class="prose-spec mb-12">
|
||||
<div class="spec-content" set:html={introduction} />
|
||||
</div>
|
||||
|
||||
<!-- Summary as feature cards -->
|
||||
<div class="mb-16">
|
||||
<h3
|
||||
class="text-xl font-display font-semibold mb-6
|
||||
text-[var(--color-text-primary)]
|
||||
dark:text-[var(--color-dark-text-primary)]"
|
||||
>
|
||||
Key Principles
|
||||
</h3>
|
||||
<div class="spec-content prose-spec" set:html={summary} />
|
||||
</div>
|
||||
|
||||
<!-- Author & License -->
|
||||
<div
|
||||
class="pt-8 border-t border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<div class="grid sm:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4
|
||||
class="text-sm font-semibold uppercase tracking-wider mb-3
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]"
|
||||
>
|
||||
Author
|
||||
</h4>
|
||||
<div
|
||||
class="spec-content text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
set:html={about}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h4
|
||||
class="text-sm font-semibold uppercase tracking-wider mb-3
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]"
|
||||
>
|
||||
License
|
||||
</h4>
|
||||
<div
|
||||
class="spec-content text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
set:html={license}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.spec-content :global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.spec-content :global(a) {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.spec-content :global(a:hover) {
|
||||
color: var(--color-accent-light);
|
||||
}
|
||||
</style>
|
||||
139
src/components/FAQSection.astro
Normal file
139
src/components/FAQSection.astro
Normal file
@@ -0,0 +1,139 @@
|
||||
---
|
||||
import type { FAQItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
items: FAQItem[];
|
||||
}
|
||||
|
||||
const { items } = Astro.props;
|
||||
---
|
||||
|
||||
<section id="faq" class="faq-section py-20 sm:py-28">
|
||||
<div class="section-container">
|
||||
<div class="max-w-3xl mx-auto">
|
||||
<!-- Section header -->
|
||||
<div class="mb-12 text-center">
|
||||
<h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2>
|
||||
<p
|
||||
class="text-lg text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
Common questions about Git Common-Flow
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- FAQ Items -->
|
||||
<div class="space-y-0">
|
||||
{
|
||||
items.map((item, index) => (
|
||||
<div class="faq-item" data-faq-item>
|
||||
<button
|
||||
class="faq-question"
|
||||
aria-expanded="false"
|
||||
data-faq-trigger
|
||||
>
|
||||
<span class="pr-4">{item.question}</span>
|
||||
<svg
|
||||
class="w-5 h-5 flex-shrink-0 transition-transform duration-200"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
data-faq-icon
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<div
|
||||
class="faq-answer hidden prose-spec spec-content"
|
||||
data-faq-content
|
||||
set:html={item.answer}
|
||||
/>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
function initFAQ() {
|
||||
const items = document.querySelectorAll("[data-faq-item]");
|
||||
|
||||
items.forEach((item) => {
|
||||
const trigger = item.querySelector("[data-faq-trigger]");
|
||||
const content = item.querySelector("[data-faq-content]");
|
||||
const icon = item.querySelector("[data-faq-icon]");
|
||||
|
||||
if (!trigger || !content || !icon) return;
|
||||
|
||||
trigger.addEventListener("click", () => {
|
||||
const isExpanded = trigger.getAttribute("aria-expanded") === "true";
|
||||
|
||||
// Close all other items
|
||||
items.forEach((otherItem) => {
|
||||
if (otherItem !== item) {
|
||||
const otherTrigger = otherItem.querySelector("[data-faq-trigger]");
|
||||
const otherContent = otherItem.querySelector("[data-faq-content]");
|
||||
const otherIcon = otherItem.querySelector("[data-faq-icon]");
|
||||
|
||||
otherTrigger?.setAttribute("aria-expanded", "false");
|
||||
otherContent?.classList.add("hidden");
|
||||
otherIcon?.classList.remove("rotate-180");
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current item
|
||||
trigger.setAttribute("aria-expanded", isExpanded ? "false" : "true");
|
||||
content.classList.toggle("hidden", isExpanded);
|
||||
icon.classList.toggle("rotate-180", !isExpanded);
|
||||
});
|
||||
});
|
||||
|
||||
// Open first item by default
|
||||
const firstTrigger = items[0]?.querySelector(
|
||||
"[data-faq-trigger]"
|
||||
) as HTMLButtonElement;
|
||||
if (firstTrigger) {
|
||||
firstTrigger.click();
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
initFAQ();
|
||||
|
||||
// Re-initialize on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initFAQ);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.faq-section {
|
||||
background-color: var(--color-bg-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .faq-section {
|
||||
background-color: var(--color-dark-bg-secondary);
|
||||
}
|
||||
|
||||
.spec-content :global(p:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.spec-content :global(ul),
|
||||
.spec-content :global(ol) {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.spec-content :global(li) {
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(li) {
|
||||
color: var(--color-dark-text-secondary);
|
||||
}
|
||||
</style>
|
||||
186
src/components/Header.astro
Normal file
186
src/components/Header.astro
Normal file
@@ -0,0 +1,186 @@
|
||||
---
|
||||
import VersionSelector from "./VersionSelector.astro";
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
version: string;
|
||||
}
|
||||
|
||||
const { version } = Astro.props;
|
||||
---
|
||||
|
||||
<header
|
||||
id="site-header"
|
||||
class="fixed top-0 inset-x-0 z-50 glass border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300"
|
||||
>
|
||||
<div
|
||||
class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
|
||||
>
|
||||
<!-- Logo / Title -->
|
||||
<a
|
||||
href="#hero"
|
||||
class="header-title flex items-center gap-3 no-underline
|
||||
hover:text-[var(--color-accent)] transition-colors"
|
||||
>
|
||||
<span class="font-display font-bold text-lg tracking-tight">
|
||||
Git Common-Flow
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center gap-1">
|
||||
<a href="#about" class="btn btn-ghost text-sm">About</a>
|
||||
<a href="#spec" class="btn btn-ghost text-sm">Spec</a>
|
||||
<a href="#faq" class="btn btn-ghost text-sm">FAQ</a>
|
||||
</nav>
|
||||
|
||||
<!-- Right side: Version, Theme, GitHub -->
|
||||
<div class="flex items-center gap-3">
|
||||
<VersionSelector
|
||||
currentVersion={version}
|
||||
versions={Array.from(config.versions)}
|
||||
/>
|
||||
|
||||
<ThemeToggle />
|
||||
|
||||
<a
|
||||
href={config.repoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="p-2 rounded-lg text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-text-primary)]
|
||||
dark:hover:text-[var(--color-dark-text-primary)]
|
||||
hover:bg-[var(--color-bg-secondary)]
|
||||
dark:hover:bg-[var(--color-dark-bg-secondary)]
|
||||
transition-colors"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
<button
|
||||
id="mobile-menu-btn"
|
||||
class="md:hidden p-2 rounded-lg text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:bg-[var(--color-bg-secondary)]
|
||||
dark:hover:bg-[var(--color-dark-bg-secondary)]"
|
||||
aria-label="Toggle menu"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h16"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<nav
|
||||
id="mobile-nav"
|
||||
class="md:hidden hidden border-t border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<div class="px-4 py-3 space-y-1">
|
||||
<a
|
||||
href="#about"
|
||||
class="block py-2 text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]
|
||||
hover:text-[var(--color-accent)]"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="#spec"
|
||||
class="block py-2 text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]
|
||||
hover:text-[var(--color-accent)]"
|
||||
>
|
||||
Spec
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
class="block py-2 text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]
|
||||
hover:text-[var(--color-accent)]"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
function initHeader() {
|
||||
const header = document.getElementById("site-header");
|
||||
const hero = document.getElementById("hero");
|
||||
const mobileMenuBtn = document.getElementById("mobile-menu-btn");
|
||||
const mobileNav = document.getElementById("mobile-nav");
|
||||
|
||||
if (!header || !hero) return;
|
||||
|
||||
// Show/hide header based on scroll past hero
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
header.classList.add("translate-y-[-100%]");
|
||||
header.classList.remove("border-[var(--color-border)]");
|
||||
header.classList.remove("dark:border-[var(--color-dark-border)]");
|
||||
} else {
|
||||
header.classList.remove("translate-y-[-100%]");
|
||||
header.classList.add("border-[var(--color-border)]");
|
||||
header.classList.add("dark:border-[var(--color-dark-border)]");
|
||||
}
|
||||
},
|
||||
{ threshold: 0, rootMargin: "-64px 0px 0px 0px" }
|
||||
);
|
||||
|
||||
observer.observe(hero);
|
||||
|
||||
// Mobile menu toggle
|
||||
if (mobileMenuBtn && mobileNav) {
|
||||
mobileMenuBtn.addEventListener("click", () => {
|
||||
mobileNav.classList.toggle("hidden");
|
||||
});
|
||||
|
||||
// Close menu when clicking a link
|
||||
mobileNav.querySelectorAll("a").forEach((link) => {
|
||||
link.addEventListener("click", () => {
|
||||
mobileNav.classList.add("hidden");
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
initHeader();
|
||||
|
||||
// Re-initialize on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initHeader);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-title {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
:global(.dark) .header-title {
|
||||
color: var(--color-dark-text-primary);
|
||||
}
|
||||
</style>
|
||||
149
src/components/Hero.astro
Normal file
149
src/components/Hero.astro
Normal file
@@ -0,0 +1,149 @@
|
||||
---
|
||||
import VersionSelector from "./VersionSelector.astro";
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
version: string;
|
||||
svgPath: string;
|
||||
}
|
||||
|
||||
const { version, svgPath } = Astro.props;
|
||||
---
|
||||
|
||||
<section
|
||||
id="hero"
|
||||
class="relative min-h-[75vh] flex flex-col items-center justify-center
|
||||
px-6 py-16 overflow-hidden"
|
||||
>
|
||||
<!-- Background gradient/texture -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-[var(--color-bg-secondary)]
|
||||
to-[var(--color-bg-primary)]
|
||||
dark:from-[var(--color-dark-bg-secondary)]
|
||||
dark:to-[var(--color-dark-bg-primary)]"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Subtle grid pattern -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]"
|
||||
style="background-image: linear-gradient(var(--color-text-primary) 1px, transparent 1px),
|
||||
linear-gradient(90deg, var(--color-text-primary) 1px, transparent 1px);
|
||||
background-size: 60px 60px;"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Top bar with version & theme -->
|
||||
<div
|
||||
class="absolute top-0 inset-x-0 flex items-center justify-between
|
||||
px-6 py-4 animate-fade-in-down"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<VersionSelector
|
||||
currentVersion={version}
|
||||
versions={Array.from(config.versions)}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<ThemeToggle />
|
||||
<a
|
||||
href={config.repoUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="p-2 rounded-lg text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-text-primary)]
|
||||
dark:hover:text-[var(--color-dark-text-primary)]
|
||||
hover:bg-white/50 dark:hover:bg-white/10
|
||||
transition-colors"
|
||||
aria-label="View on GitHub"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="relative z-10 w-full max-w-4xl mx-auto text-center">
|
||||
<!-- Title -->
|
||||
<h1
|
||||
class="animate-fade-in-up mb-4
|
||||
text-[var(--color-text-primary)]
|
||||
dark:text-[var(--color-dark-text-primary)]"
|
||||
>
|
||||
Git Common-Flow
|
||||
</h1>
|
||||
|
||||
<!-- Tagline -->
|
||||
<p
|
||||
class="animate-fade-in-up delay-100
|
||||
text-lg sm:text-xl max-w-2xl mx-auto mb-8
|
||||
text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
A sensible git workflow for teams who ship
|
||||
</p>
|
||||
|
||||
<!-- Version badge -->
|
||||
<div class="animate-fade-in-up delay-200 mb-10">
|
||||
<span class="version-badge">v{version}</span>
|
||||
</div>
|
||||
|
||||
<!-- SVG Diagram -->
|
||||
<div
|
||||
class="animate-fade-in-up delay-300
|
||||
relative mx-auto mb-12 p-4 sm:p-8
|
||||
bg-white dark:bg-[var(--color-dark-bg-secondary)]
|
||||
rounded-2xl shadow-lg dark:shadow-none
|
||||
border border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<img
|
||||
src={svgPath}
|
||||
alt="Git Common-Flow diagram"
|
||||
class="w-full h-auto max-w-3xl mx-auto
|
||||
dark:invert dark:hue-rotate-180 dark:contrast-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Navigation links -->
|
||||
<nav
|
||||
class="animate-fade-in-up delay-400
|
||||
flex flex-wrap items-center justify-center gap-4"
|
||||
>
|
||||
<a href="#about" class="btn btn-ghost">About</a>
|
||||
<a href="#spec" class="btn btn-primary">Read the Spec</a>
|
||||
<a href="#faq" class="btn btn-ghost">FAQ</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Scroll indicator -->
|
||||
<a
|
||||
href="#about"
|
||||
class="absolute bottom-8 left-1/2 -translate-x-1/2
|
||||
animate-fade-in delay-700
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-accent)] transition-colors"
|
||||
aria-label="Scroll to content"
|
||||
>
|
||||
<svg
|
||||
class="w-6 h-6 animate-bounce-subtle"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 14l-7 7m0 0l-7-7m7 7V3"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</section>
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
// Mobile hamburger menu toggle button
|
||||
---
|
||||
|
||||
<a href="#menu" id="menuLink" class="menu-link">
|
||||
<span></span>
|
||||
</a>
|
||||
|
||||
<style>
|
||||
.menu-link {
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
font-size: 10px;
|
||||
z-index: 10;
|
||||
width: 2em;
|
||||
height: auto;
|
||||
padding: 2.1em 1.6em;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.menu-link:hover,
|
||||
.menu-link:focus {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.menu-link span {
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-link span,
|
||||
.menu-link span:before,
|
||||
.menu-link span:after {
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
height: 0.2em;
|
||||
}
|
||||
|
||||
.menu-link span:before,
|
||||
.menu-link span:after {
|
||||
position: absolute;
|
||||
margin-top: -0.6em;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
.menu-link span:after {
|
||||
margin-top: 0.6em;
|
||||
}
|
||||
|
||||
/* Desktop: hide toggle and position at sidebar edge */
|
||||
@media (min-width: 48em) {
|
||||
.menu-link {
|
||||
left: 150px;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* When menu is active, move toggle */
|
||||
:global(#layout.active) .menu-link {
|
||||
left: 150px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function initMenuToggle() {
|
||||
const layout = document.getElementById("layout");
|
||||
const menu = document.getElementById("menu");
|
||||
const menuLink = document.getElementById("menuLink");
|
||||
const main = document.getElementById("main");
|
||||
|
||||
function toggleMenu(e: Event) {
|
||||
e.preventDefault();
|
||||
layout?.classList.toggle("active");
|
||||
menu?.classList.toggle("active");
|
||||
menuLink?.classList.toggle("active");
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
layout?.classList.remove("active");
|
||||
menu?.classList.remove("active");
|
||||
menuLink?.classList.remove("active");
|
||||
}
|
||||
|
||||
menuLink?.addEventListener("click", toggleMenu);
|
||||
main?.addEventListener("click", () => {
|
||||
if (layout?.classList.contains("active")) {
|
||||
closeMenu();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run on initial load
|
||||
initMenuToggle();
|
||||
|
||||
// Re-run on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initMenuToggle);
|
||||
</script>
|
||||
@@ -1,161 +0,0 @@
|
||||
---
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
currentVersion?: string;
|
||||
}
|
||||
|
||||
const { currentVersion } = Astro.props;
|
||||
---
|
||||
|
||||
<div id="menu">
|
||||
<div class="menu-inner">
|
||||
<ul class="menu-list">
|
||||
<li class="menu-label">Versions:</li>
|
||||
{
|
||||
config.versions.map((version) => (
|
||||
<li
|
||||
class:list={[
|
||||
"menu-item",
|
||||
{ selected: version === currentVersion },
|
||||
]}
|
||||
>
|
||||
<a href={`/spec/${version}`} class="menu-link-item">
|
||||
{version}
|
||||
</a>
|
||||
</li>
|
||||
))
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<div class="links">
|
||||
<a
|
||||
href={config.repoUrl}
|
||||
aria-label="View on GitHub"
|
||||
class="github-link"
|
||||
>
|
||||
<svg
|
||||
class="w-12 h-12"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839
|
||||
9.504.5.092.682-.217.682-.483
|
||||
0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608
|
||||
1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088
|
||||
2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951
|
||||
0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65
|
||||
0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004
|
||||
1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546
|
||||
1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028
|
||||
2.688 0 3.848-2.339 4.695-4.566
|
||||
4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012
|
||||
2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22
|
||||
6.484 17.522 2 12 2z"
|
||||
clip-rule="evenodd"></path>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#menu {
|
||||
margin-left: -150px;
|
||||
width: 150px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
background: #191818;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
transition: all 0.2s ease-out;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.menu-inner {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.menu-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-top: 1px solid #333;
|
||||
}
|
||||
|
||||
.menu-label {
|
||||
color: #999;
|
||||
border: none;
|
||||
padding: 0.6em 0 0.6em 0.6em;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.menu-link-item {
|
||||
display: block;
|
||||
color: #999;
|
||||
border: none;
|
||||
padding: 0.6em 0 0.6em 0.6em;
|
||||
text-decoration: none;
|
||||
transition: background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.menu-link-item:hover,
|
||||
.menu-link-item:focus {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.menu-item.selected {
|
||||
background: #1f8dd6;
|
||||
}
|
||||
|
||||
.menu-item.selected .menu-link-item {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.links {
|
||||
font-size: 50px;
|
||||
padding: 10px 0;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.github-link {
|
||||
color: #555;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.github-link:hover {
|
||||
color: #777;
|
||||
}
|
||||
|
||||
/* Desktop: show menu */
|
||||
@media (min-width: 48em) {
|
||||
#menu {
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
/* When menu is active (mobile) */
|
||||
:global(#layout.active) #menu {
|
||||
left: 150px;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
179
src/components/SpecSection.astro
Normal file
179
src/components/SpecSection.astro
Normal file
@@ -0,0 +1,179 @@
|
||||
---
|
||||
import SpecSidebar from "./SpecSidebar.astro";
|
||||
import type { TocItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
terminology: string;
|
||||
specification: string;
|
||||
tocItems: TocItem[];
|
||||
}
|
||||
|
||||
const { terminology, specification, tocItems } = Astro.props;
|
||||
---
|
||||
|
||||
<section id="spec" class="py-20 sm:py-28">
|
||||
<div class="section-container">
|
||||
<!-- Section header -->
|
||||
<div class="max-w-3xl mx-auto mb-12 text-center">
|
||||
<h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2>
|
||||
<p
|
||||
class="text-lg text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
The complete Git Common-Flow specification
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content with sidebar -->
|
||||
<div class="lg:flex lg:gap-8">
|
||||
<!-- Sidebar -->
|
||||
<div class="lg:w-64 lg:flex-shrink-0">
|
||||
<SpecSidebar items={tocItems} />
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<article class="prose-spec spec-content">
|
||||
<!-- Terminology -->
|
||||
<section id="terminology">
|
||||
<h2>Terminology</h2>
|
||||
<Fragment set:html={terminology} />
|
||||
</section>
|
||||
|
||||
<!-- Main specification -->
|
||||
<section id="specification">
|
||||
<h2>Git Common-Flow Specification</h2>
|
||||
<Fragment set:html={specification} />
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.spec-content {
|
||||
max-width: var(--content-max-width);
|
||||
}
|
||||
|
||||
.spec-content :global(h2) {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
margin-top: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 0.75rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-primary);
|
||||
scroll-margin-top: calc(var(--header-height) + 2rem);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(h2) {
|
||||
border-bottom-color: var(--color-dark-border);
|
||||
color: var(--color-dark-text-primary);
|
||||
}
|
||||
|
||||
.spec-content :global(h2:first-child) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.spec-content :global(h3) {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(h3) {
|
||||
color: var(--color-dark-text-secondary);
|
||||
}
|
||||
|
||||
.spec-content :global(p) {
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(p) {
|
||||
color: var(--color-dark-text-secondary);
|
||||
}
|
||||
|
||||
.spec-content :global(strong) {
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(strong) {
|
||||
color: var(--color-dark-text-primary);
|
||||
}
|
||||
|
||||
.spec-content :global(ul) {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-left: 1.5rem;
|
||||
}
|
||||
|
||||
.spec-content :global(ol) {
|
||||
margin-bottom: 1.25rem;
|
||||
padding-left: 2.5rem;
|
||||
counter-reset: item;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.spec-content :global(ol > li) {
|
||||
counter-increment: item;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.spec-content :global(ol > li::before) {
|
||||
content: counters(item, ".") ".";
|
||||
position: absolute;
|
||||
left: -2.5rem;
|
||||
width: 2rem;
|
||||
text-align: right;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(ol > li::before) {
|
||||
color: var(--color-dark-text-muted);
|
||||
}
|
||||
|
||||
.spec-content :global(li) {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(li) {
|
||||
color: var(--color-dark-text-secondary);
|
||||
}
|
||||
|
||||
.spec-content :global(a) {
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
transition: color 150ms ease;
|
||||
}
|
||||
|
||||
.spec-content :global(a:hover) {
|
||||
color: var(--color-accent-light);
|
||||
}
|
||||
|
||||
.spec-content :global(blockquote) {
|
||||
border-left: 3px solid var(--color-accent);
|
||||
padding-left: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
:global(.dark) .spec-content :global(blockquote) {
|
||||
color: var(--color-dark-text-muted);
|
||||
}
|
||||
|
||||
.spec-content :global(img) {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: 8px;
|
||||
margin: 2rem 0;
|
||||
}
|
||||
</style>
|
||||
219
src/components/SpecSidebar.astro
Normal file
219
src/components/SpecSidebar.astro
Normal file
@@ -0,0 +1,219 @@
|
||||
---
|
||||
import type { TocItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
items: TocItem[];
|
||||
}
|
||||
|
||||
const { items } = Astro.props;
|
||||
---
|
||||
|
||||
<aside
|
||||
id="spec-sidebar"
|
||||
class="hidden lg:block lg:sticky lg:top-24 lg:self-start
|
||||
lg:max-h-[calc(100vh-8rem)] lg:overflow-y-auto
|
||||
lg:pr-8 lg:mr-8 lg:border-r border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<nav class="space-y-1 py-2">
|
||||
<div
|
||||
class="text-xs font-semibold uppercase tracking-wider mb-4
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]"
|
||||
>
|
||||
On This Page
|
||||
</div>
|
||||
{
|
||||
items.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
|
||||
data-sidebar-link
|
||||
data-section-id={item.id}
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Mobile floating button -->
|
||||
<button
|
||||
id="spec-toc-toggle"
|
||||
class="lg:hidden fixed bottom-6 right-6 z-40
|
||||
w-12 h-12 rounded-full shadow-lg
|
||||
bg-[var(--color-accent)] text-white
|
||||
flex items-center justify-center
|
||||
hover:bg-[var(--color-accent-light)]
|
||||
transition-all duration-200"
|
||||
aria-label="Jump to section"
|
||||
>
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M4 6h16M4 12h16M4 18h7"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<!-- Mobile TOC drawer -->
|
||||
<div
|
||||
id="spec-toc-drawer"
|
||||
class="lg:hidden fixed inset-0 z-50 hidden"
|
||||
data-toc-drawer
|
||||
>
|
||||
<!-- Backdrop -->
|
||||
<div class="absolute inset-0 bg-black/50" data-toc-backdrop></div>
|
||||
|
||||
<!-- Drawer -->
|
||||
<div
|
||||
class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
|
||||
bg-[var(--color-bg-primary)] dark:bg-[var(--color-dark-bg-primary)]
|
||||
rounded-t-2xl shadow-xl p-6"
|
||||
>
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<span
|
||||
class="text-sm font-semibold uppercase tracking-wider
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]"
|
||||
>
|
||||
Jump to Section
|
||||
</span>
|
||||
<button
|
||||
class="p-2 rounded-lg hover:bg-[var(--color-bg-secondary)]
|
||||
dark:hover:bg-[var(--color-dark-bg-secondary)]"
|
||||
data-toc-close
|
||||
aria-label="Close"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
{
|
||||
items.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class={`sidebar-link ${item.level === 3 ? "sidebar-link-sub" : ""}`}
|
||||
data-toc-link
|
||||
>
|
||||
{item.title}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initSpecSidebar() {
|
||||
// Active section tracking
|
||||
const sidebarLinks = document.querySelectorAll("[data-sidebar-link]");
|
||||
const sections = new Map<string, Element>();
|
||||
|
||||
sidebarLinks.forEach((link) => {
|
||||
const id = link.getAttribute("data-section-id");
|
||||
if (id) {
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
sections.set(id, section);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Intersection Observer for active state
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
const id = entry.target.getAttribute("id");
|
||||
sidebarLinks.forEach((link) => {
|
||||
const linkId = link.getAttribute("data-section-id");
|
||||
link.classList.toggle("active", linkId === id);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
{
|
||||
rootMargin: "-20% 0% -60% 0%",
|
||||
threshold: 0,
|
||||
}
|
||||
);
|
||||
|
||||
sections.forEach((section) => observer.observe(section));
|
||||
|
||||
// Mobile TOC drawer
|
||||
const toggleBtn = document.getElementById("spec-toc-toggle");
|
||||
const drawer = document.getElementById("spec-toc-drawer");
|
||||
const backdrop = drawer?.querySelector("[data-toc-backdrop]");
|
||||
const closeBtn = drawer?.querySelector("[data-toc-close]");
|
||||
const tocLinks = drawer?.querySelectorAll("[data-toc-link]");
|
||||
|
||||
function openDrawer() {
|
||||
drawer?.classList.remove("hidden");
|
||||
document.body.style.overflow = "hidden";
|
||||
}
|
||||
|
||||
function closeDrawer() {
|
||||
drawer?.classList.add("hidden");
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
|
||||
toggleBtn?.addEventListener("click", openDrawer);
|
||||
backdrop?.addEventListener("click", closeDrawer);
|
||||
closeBtn?.addEventListener("click", closeDrawer);
|
||||
tocLinks?.forEach((link) => {
|
||||
link.addEventListener("click", closeDrawer);
|
||||
});
|
||||
|
||||
// Show/hide mobile toggle based on spec section visibility
|
||||
const specSection = document.getElementById("spec");
|
||||
if (specSection && toggleBtn) {
|
||||
const specObserver = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
toggleBtn.classList.toggle("hidden", !entry.isIntersecting);
|
||||
},
|
||||
{ threshold: 0 }
|
||||
);
|
||||
specObserver.observe(specSection);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
initSpecSidebar();
|
||||
|
||||
// Re-initialize on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initSpecSidebar);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#spec-sidebar::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
#spec-sidebar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#spec-sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
:global(.dark) #spec-sidebar::-webkit-scrollbar-thumb {
|
||||
background: var(--color-dark-border);
|
||||
}
|
||||
</style>
|
||||
113
src/components/ThemeToggle.astro
Normal file
113
src/components/ThemeToggle.astro
Normal file
@@ -0,0 +1,113 @@
|
||||
---
|
||||
// Theme toggle component - sun/moon icon to switch between light and dark mode
|
||||
---
|
||||
|
||||
<button
|
||||
data-theme-toggle
|
||||
type="button"
|
||||
class="p-2 rounded-lg text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
hover:text-[var(--color-text-primary)]
|
||||
dark:hover:text-[var(--color-dark-text-primary)]
|
||||
hover:bg-[var(--color-bg-secondary)]
|
||||
dark:hover:bg-[var(--color-dark-bg-secondary)]
|
||||
transition-colors duration-200"
|
||||
aria-label="Toggle dark mode"
|
||||
>
|
||||
<!-- Sun icon (shown in dark mode) -->
|
||||
<svg
|
||||
data-sun-icon
|
||||
class="hidden w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343
|
||||
6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16
|
||||
12a4 4 0 11-8 0 4 4 0 018 0z"></path>
|
||||
</svg>
|
||||
<!-- Moon icon (shown in light mode) -->
|
||||
<svg
|
||||
data-moon-icon
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003
|
||||
9.003 0 008.354-5.646z"></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
function initTheme() {
|
||||
const toggles = document.querySelectorAll(
|
||||
"[data-theme-toggle]"
|
||||
) as NodeListOf<HTMLButtonElement>;
|
||||
|
||||
function getTheme(): "dark" | "light" {
|
||||
const stored = localStorage.getItem("theme");
|
||||
if (stored === "dark" || stored === "light") {
|
||||
return stored;
|
||||
}
|
||||
return window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
? "dark"
|
||||
: "light";
|
||||
}
|
||||
|
||||
function updateAllIcons(isDark: boolean) {
|
||||
// Update all sun/moon icons on the page
|
||||
document.querySelectorAll("[data-sun-icon]").forEach((icon) => {
|
||||
icon.classList.toggle("hidden", !isDark);
|
||||
});
|
||||
document.querySelectorAll("[data-moon-icon]").forEach((icon) => {
|
||||
icon.classList.toggle("hidden", isDark);
|
||||
});
|
||||
}
|
||||
|
||||
function setTheme(theme: "dark" | "light") {
|
||||
localStorage.setItem("theme", theme);
|
||||
document.documentElement.classList.toggle("dark", theme === "dark");
|
||||
updateAllIcons(theme === "dark");
|
||||
}
|
||||
|
||||
// Initialize theme
|
||||
const currentTheme = getTheme();
|
||||
setTheme(currentTheme);
|
||||
|
||||
// Attach click handlers to all toggle buttons
|
||||
toggles.forEach((toggle) => {
|
||||
// Avoid adding duplicate listeners
|
||||
if (toggle.dataset.initialized) return;
|
||||
toggle.dataset.initialized = "true";
|
||||
|
||||
toggle.addEventListener("click", () => {
|
||||
const isDark = document.documentElement.classList.contains("dark");
|
||||
setTheme(isDark ? "light" : "dark");
|
||||
});
|
||||
});
|
||||
|
||||
// Listen for system preference changes
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (!localStorage.getItem("theme")) {
|
||||
setTheme(e.matches ? "dark" : "light");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Run on initial load
|
||||
initTheme();
|
||||
|
||||
// Re-run on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initTheme);
|
||||
</script>
|
||||
82
src/components/VersionSelector.astro
Normal file
82
src/components/VersionSelector.astro
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
interface Props {
|
||||
currentVersion: string;
|
||||
versions: string[];
|
||||
}
|
||||
|
||||
const { currentVersion, versions } = Astro.props;
|
||||
---
|
||||
|
||||
<div class="version-selector relative">
|
||||
<select
|
||||
data-version-select
|
||||
class="appearance-none bg-transparent border border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)] rounded-lg px-3 py-1.5
|
||||
pr-8 text-sm font-mono cursor-pointer
|
||||
text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]
|
||||
hover:border-[var(--color-accent)]
|
||||
focus:border-[var(--color-accent)]
|
||||
focus:outline-none transition-colors"
|
||||
>
|
||||
{
|
||||
versions.map((v) => (
|
||||
<option value={v} selected={v === currentVersion}>
|
||||
v{v}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<!-- Dropdown arrow -->
|
||||
<svg
|
||||
class="absolute right-2 top-1/2 -translate-y-1/2 w-4 h-4 pointer-events-none
|
||||
text-[var(--color-text-muted)] dark:text-[var(--color-dark-text-muted)]"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M19 9l-7 7-7-7"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function initVersionSelectors() {
|
||||
const selects = document.querySelectorAll(
|
||||
"[data-version-select]"
|
||||
) as NodeListOf<HTMLSelectElement>;
|
||||
|
||||
selects.forEach((select) => {
|
||||
// Avoid adding duplicate listeners
|
||||
if (select.dataset.initialized) return;
|
||||
select.dataset.initialized = "true";
|
||||
|
||||
select.addEventListener("change", (e) => {
|
||||
const target = e.target as HTMLSelectElement;
|
||||
const version = target.value;
|
||||
window.location.href = `/spec/${version}`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
initVersionSelectors();
|
||||
|
||||
// Re-initialize on Astro page transitions
|
||||
document.addEventListener("astro:after-swap", initVersionSelectors);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
select option {
|
||||
background-color: var(--color-bg-primary);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
:global(.dark) select option {
|
||||
background-color: var(--color-dark-bg-primary);
|
||||
color: var(--color-dark-text-primary);
|
||||
}
|
||||
</style>
|
||||
@@ -1,16 +1,13 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
import { config } from "../config";
|
||||
import Sidebar from "../components/Sidebar.astro";
|
||||
import MenuToggle from "../components/MenuToggle.astro";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
version?: string;
|
||||
}
|
||||
|
||||
const { title, description = config.description, version } = Astro.props;
|
||||
const { title, description = config.description } = Astro.props;
|
||||
const fullTitle = title === config.title ? title : `${title} | ${config.title}`;
|
||||
---
|
||||
|
||||
@@ -25,79 +22,29 @@ const fullTitle = title === config.title ? title : `${title} | ${config.title}`;
|
||||
<meta name="description" content={description} />
|
||||
<meta name="author" content={config.author} />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content={fullTitle} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={Astro.url} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content={fullTitle} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
|
||||
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Prevent flash of wrong theme -->
|
||||
<script is:inline>
|
||||
(function () {
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (
|
||||
theme === "dark" ||
|
||||
(!theme &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="layout">
|
||||
<MenuToggle />
|
||||
<Sidebar currentVersion={version} />
|
||||
|
||||
<div id="main">
|
||||
<div class="content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<body class="min-h-screen flex flex-col items-center justify-center p-8">
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<style>
|
||||
#layout {
|
||||
position: relative;
|
||||
left: 0;
|
||||
padding-left: 0;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
#main {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 0 auto;
|
||||
padding: 0 2em;
|
||||
max-width: 800px;
|
||||
margin-bottom: 50px;
|
||||
line-height: 1.6em;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
/* Desktop layout */
|
||||
@media (min-width: 48em) {
|
||||
#layout {
|
||||
padding-left: 150px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile: when menu is active */
|
||||
@media (max-width: 48em) {
|
||||
:global(#layout.active) {
|
||||
position: relative;
|
||||
left: 150px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
87
src/layouts/SinglePage.astro
Normal file
87
src/layouts/SinglePage.astro
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
import "../styles/global.css";
|
||||
|
||||
interface Props {
|
||||
title: string;
|
||||
description?: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
const { title, description, version } = Astro.props;
|
||||
|
||||
const defaultDescription =
|
||||
"An attempt to gather a sensible selection of the most common usage " +
|
||||
"patterns of git into a single and concise specification.";
|
||||
---
|
||||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="description" content={description || defaultDescription} />
|
||||
<meta name="author" content="Jim Myhrberg" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content={title} />
|
||||
<meta
|
||||
property="og:description"
|
||||
content={description || defaultDescription}
|
||||
/>
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content={`https://commonflow.org/${version}`} />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta
|
||||
name="twitter:description"
|
||||
content={description || defaultDescription}
|
||||
/>
|
||||
|
||||
<title>{title}</title>
|
||||
|
||||
<!-- Fonts - distinctive choices -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
|
||||
<!-- Theme initialization - prevent flash -->
|
||||
<script is:inline>
|
||||
(function () {
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (
|
||||
theme === "dark" ||
|
||||
(!theme && window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
<slot />
|
||||
|
||||
<!-- Re-init theme on Astro page transitions -->
|
||||
<script>
|
||||
document.addEventListener("astro:after-swap", () => {
|
||||
const theme = localStorage.getItem("theme");
|
||||
if (
|
||||
theme === "dark" ||
|
||||
(!theme &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
) {
|
||||
document.documentElement.classList.add("dark");
|
||||
} else {
|
||||
document.documentElement.classList.remove("dark");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -3,46 +3,28 @@ import Default from "../layouts/Default.astro";
|
||||
---
|
||||
|
||||
<Default title="Page Not Found">
|
||||
<div class="not-found">
|
||||
<h1>404</h1>
|
||||
<p>Page not found.</p>
|
||||
<p>
|
||||
<a href="/">Go to the homepage</a>
|
||||
<div class="text-center">
|
||||
<h1
|
||||
class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
|
||||
text-[var(--color-border-strong)]
|
||||
dark:text-[var(--color-dark-border-strong)]"
|
||||
>
|
||||
404
|
||||
</h1>
|
||||
<p
|
||||
class="text-xl mb-2 text-[var(--color-text-secondary)]
|
||||
dark:text-[var(--color-dark-text-secondary)]"
|
||||
>
|
||||
Page not found
|
||||
</p>
|
||||
<p class="text-[var(--color-text-muted)] dark:text-[var(--color-dark-text-muted)]">
|
||||
The page you're looking for doesn't exist.
|
||||
</p>
|
||||
<a
|
||||
href="/"
|
||||
class="inline-block mt-8 btn btn-primary"
|
||||
>
|
||||
Go to homepage
|
||||
</a>
|
||||
</div>
|
||||
</Default>
|
||||
|
||||
<style>
|
||||
.not-found {
|
||||
text-align: center;
|
||||
padding-top: 4rem;
|
||||
}
|
||||
|
||||
.not-found h1 {
|
||||
font-size: 6rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.dark .not-found h1 {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.not-found p {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.not-found a {
|
||||
color: #1f8dd6;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.not-found a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.dark .not-found a {
|
||||
color: #4da6e8;
|
||||
}
|
||||
</style>
|
||||
@@ -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);
|
||||
---
|
||||
|
||||
<Default title={currentSpec.data.title} version={currentSpec.data.version}>
|
||||
<article class="spec-content">
|
||||
<Content />
|
||||
</article>
|
||||
</Default>
|
||||
<SinglePage title={spec.data.title} version={version}>
|
||||
<Header version={version} />
|
||||
|
||||
<main>
|
||||
<Hero version={version} svgPath={parsed.svgPath} />
|
||||
|
||||
<AboutSection
|
||||
introduction={parsed.introduction}
|
||||
summary={parsed.summary}
|
||||
about={parsed.about}
|
||||
license={parsed.license}
|
||||
/>
|
||||
|
||||
<SpecSection
|
||||
terminology={parsed.terminology}
|
||||
specification={parsed.specification}
|
||||
tocItems={parsed.tocItems}
|
||||
/>
|
||||
|
||||
<FAQSection items={parsed.faq} />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer
|
||||
class="py-8 text-center text-sm
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
border-t border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<div class="section-container">
|
||||
<p>
|
||||
Git Common-Flow is authored by
|
||||
<a
|
||||
href="https://jimeh.me/"
|
||||
class="hover:text-[var(--color-accent)]"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Jim Myhrberg
|
||||
</a>
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<a
|
||||
href="https://creativecommons.org/licenses/by/4.0/"
|
||||
class="hover:text-[var(--color-accent)]"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
CC BY 4.0
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</SinglePage>
|
||||
|
||||
@@ -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);
|
||||
---
|
||||
|
||||
<Default title={spec.data.title} version={spec.data.version}>
|
||||
<article class="spec-content">
|
||||
<Content />
|
||||
</article>
|
||||
</Default>
|
||||
<SinglePage title={spec.data.title} version={version}>
|
||||
<Header version={version} />
|
||||
|
||||
<main>
|
||||
<Hero version={version} svgPath={parsed.svgPath} />
|
||||
|
||||
<AboutSection
|
||||
introduction={parsed.introduction}
|
||||
summary={parsed.summary}
|
||||
about={parsed.about}
|
||||
license={parsed.license}
|
||||
/>
|
||||
|
||||
<SpecSection
|
||||
terminology={parsed.terminology}
|
||||
specification={parsed.specification}
|
||||
tocItems={parsed.tocItems}
|
||||
/>
|
||||
|
||||
<FAQSection items={parsed.faq} />
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer
|
||||
class="py-8 text-center text-sm
|
||||
text-[var(--color-text-muted)]
|
||||
dark:text-[var(--color-dark-text-muted)]
|
||||
border-t border-[var(--color-border)]
|
||||
dark:border-[var(--color-dark-border)]"
|
||||
>
|
||||
<div class="section-container">
|
||||
<p>
|
||||
Git Common-Flow is authored by
|
||||
<a
|
||||
href="https://jimeh.me/"
|
||||
class="hover:text-[var(--color-accent)]"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Jim Myhrberg
|
||||
</a>
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
<a
|
||||
href="https://creativecommons.org/licenses/by/4.0/"
|
||||
class="hover:text-[var(--color-accent)]"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
CC BY 4.0
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</SinglePage>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
292
src/utils/parseSpecContent.ts
Normal file
292
src/utils/parseSpecContent.ts
Normal file
@@ -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(
|
||||
`<h2[^>]*>[^<]*${escapeRegex(startHeading)}[^<]*</h2>`,
|
||||
"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(
|
||||
`<h2[^>]*>\\s*${escapeRegex(endHeading)}\\s*</h2>`,
|
||||
"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(/<h2[^>]*>/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(/<ol[^>]*>([\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 = /<h3[^>]*>([\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<ParsedSpec>): 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(/<h1[^>]*>[\s\S]*?<\/h1>/i, "");
|
||||
|
||||
// Remove the SVG img tag
|
||||
content = content.replace(/<img[^>]*\.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;
|
||||
}
|
||||
Reference in New Issue
Block a user