mirror of
https://github.com/jimeh/commonflow.org.git
synced 2026-02-19 05:46:40 +00:00
wip: DRY up things
This commit is contained in:
@@ -63,10 +63,14 @@ The site is built to `docs/` for GitHub Pages hosting.
|
||||
- `Hero.astro` - Landing page hero section
|
||||
- `AboutSection.astro` - About Common-Flow section
|
||||
- `FAQSection.astro` - FAQ section
|
||||
- `SpecSection.astro` - Individual spec section renderer
|
||||
- `SectionHeader.astro` - Reusable section header (title + subtitle)
|
||||
- `SpecSection.astro` - Spec section with terminology and specification
|
||||
- `SpecSidebar.astro` - Spec page table of contents sidebar
|
||||
- `TocLink.astro` - Reusable TOC link component
|
||||
- `ThemeToggle.astro` - Dark/light mode toggle
|
||||
- `VersionSelector.astro` - Spec version dropdown
|
||||
- `icons/GitHubIcon.astro` - GitHub SVG icon
|
||||
- `src/scripts/activeSectionTracker.ts` - Shared scroll-based active section tracking
|
||||
- `src/pages/index.astro` - Landing page
|
||||
- `src/pages/404.astro` - 404 error page
|
||||
- `src/pages/spec/[version].astro` - Dynamic route for spec versions
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.DzBLv9AP.css"></head> <body class="min-h-screen"> <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
|
||||
</script><link rel="stylesheet" href="/_astro/index.CmEUh9zQ.css"></head> <body class="min-h-screen"> <div class="flex flex-col items-center justify-center min-h-screen p-8"> <div class="text-center"> <h1 class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
|
||||
text-gray-300 dark:text-neutral-700">
|
||||
404
|
||||
</h1> <p class="text-xl mb-2 text-gray-600 dark:text-neutral-400">
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
import{i as o}from"./activeSectionTracker.CGlk-3e6.js";function a(){const e=document.getElementById("site-header"),d=document.getElementById("hero"),r=document.getElementById("mobile-menu-btn"),t=document.getElementById("mobile-nav");if(!e||!d)return;const i=64;function n(){e&&(window.scrollY>=i?(e.classList.remove("translate-y-[-100%]","border-transparent"),e.classList.add("border-gray-200","dark:border-neutral-800")):(e.classList.add("translate-y-[-100%]","border-transparent"),e.classList.remove("border-gray-200","dark:border-neutral-800")))}window.addEventListener("scroll",n,{passive:!0}),n(),r&&t&&(r.addEventListener("click",()=>{t.classList.toggle("hidden")}),t.querySelectorAll("a").forEach(s=>{s.addEventListener("click",()=>{t.classList.add("hidden")})})),o({linkSelector:"[data-nav-link]",defaultToFirst:!1})}a();document.addEventListener("astro:after-swap",a);
|
||||
@@ -0,0 +1 @@
|
||||
import{i as v}from"./activeSectionTracker.CGlk-3e6.js";function s(){v({linkSelector:"[data-sidebar-link]"});const t=document.getElementById("spec-toc-toggle"),e=document.getElementById("spec-toc-drawer"),r=e?.querySelector("[data-toc-backdrop]"),d=e?.querySelector("[data-toc-close]"),i=e?.querySelectorAll("[data-toc-link]");function a(){e?.classList.remove("hidden"),document.body.style.overflow="hidden"}function c(){e?.classList.add("hidden"),document.body.style.overflow=""}t?.addEventListener("click",a),r?.addEventListener("click",c),d?.addEventListener("click",c),i?.forEach(o=>{o.addEventListener("click",c)});const n=document.getElementById("spec");n&&t&&new IntersectionObserver(([l])=>{t.classList.toggle("hidden",!l.isIntersecting)},{threshold:0}).observe(n)}s();document.addEventListener("astro:after-swap",s);
|
||||
1
docs/_astro/activeSectionTracker.CGlk-3e6.js
Normal file
1
docs/_astro/activeSectionTracker.CGlk-3e6.js
Normal file
@@ -0,0 +1 @@
|
||||
function m(l){const{linkSelector:a,sectionIdAttr:o="data-section-id",headerOffset:f=100,defaultToFirst:u=!0}=l,s=document.querySelectorAll(a),i=[],r=new Set;s.forEach(n=>{const t=n.getAttribute(o);if(t&&!r.has(t)){r.add(t);const e=document.getElementById(t);e&&i.push({id:t,element:e})}});function d(){let n=u?i[0]?.id:null;for(const{id:t,element:e}of i)e.getBoundingClientRect().top<=f&&(n=t);s.forEach(t=>{const e=t.getAttribute(o);t.classList.toggle("active",e===n)})}let c=!1;window.addEventListener("scroll",()=>{c||(requestAnimationFrame(()=>{d(),c=!1}),c=!0)}),d()}export{m as i};
|
||||
1
docs/_astro/index.CmEUh9zQ.css
Normal file
1
docs/_astro/index.CmEUh9zQ.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -8,7 +8,7 @@
|
||||
document.documentElement.classList.add("dark");
|
||||
}
|
||||
})();
|
||||
</script><link rel="stylesheet" href="/_astro/index.DzBLv9AP.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
</script><link rel="stylesheet" href="/_astro/index.CmEUh9zQ.css"></head> <body class="min-h-screen"> <header id="site-header" class="fixed top-0 inset-x-0 z-50 border-b border-transparent
|
||||
translate-y-[-100%] transition-transform duration-300
|
||||
backdrop-blur-xl bg-gray-50/85 dark:bg-neutral-950/85"> <div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"> <!-- Logo / Title + Version --> <div class="flex items-center gap-3"> <a href="#hero" class="flex items-center gap-3 no-underline
|
||||
text-gray-950 dark:text-neutral-50
|
||||
@@ -29,24 +29,18 @@ v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" c
|
||||
v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
|
||||
v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
|
||||
v1.0.0-rc.1 </a> </div> </div> <script type="module">function c(){document.querySelectorAll("[data-version-selector]").forEach(e=>{if(e.dataset.initialized)return;e.dataset.initialized="true";const t=e.querySelector("[data-version-trigger]"),a=e.querySelector("[data-version-dropdown]"),n=e.querySelector("[data-arrow-icon]");if(!t||!a)return;const l=()=>{a.dataset.open="true",t.setAttribute("aria-expanded","true"),n&&(n.style.transform="rotate(180deg)")},o=()=>{delete a.dataset.open,t.setAttribute("aria-expanded","false"),n&&(n.style.transform="")};t.addEventListener("click",r=>{r.stopPropagation();const u=a.dataset.open==="true";document.querySelectorAll("[data-version-dropdown][data-open]").forEach(s=>{delete s.dataset.open;const i=s.previousElementSibling;i?.setAttribute("aria-expanded","false");const d=i?.querySelector("[data-arrow-icon]");d&&(d.style.transform="")}),u?o():l()}),document.addEventListener("click",r=>{e.contains(r.target)||o()}),document.addEventListener("keydown",r=>{r.key==="Escape"&&a.dataset.open==="true"&&(o(),t.focus())})})}c();document.addEventListener("astro:after-swap",c);</script> </div> </div> <!-- Desktop Navigation --> <nav class="hidden md:flex items-center gap-1"> <a href="#about" class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="about">
|
||||
About
|
||||
</a> <a href="#spec" class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="spec">
|
||||
Spec
|
||||
</a> <a href="#faq" class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="faq">
|
||||
FAQ
|
||||
</a> </nav> <!-- Right side: Theme, GitHub --> <div class="flex items-center gap-3"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="about"> About </a><a href="#spec" class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="spec"> Spec </a><a href="#faq" class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" data-nav-link data-section-id="faq"> FAQ </a> </nav> <!-- Right side: Theme, GitHub --> <div class="flex items-center gap-3"> <div class="relative group"> <button data-theme-toggle type="button" class="p-2 rounded-lg cursor-pointer transition-colors duration-200
|
||||
text-gray-500 dark:text-neutral-500
|
||||
hover:text-gray-950 dark:hover:text-neutral-50
|
||||
hover:bg-gray-100 dark:hover:bg-neutral-800" aria-label="Toggle theme"> <!-- Sun icon (shown when theme is light) --> <svg data-theme-icon="light" 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
|
||||
@@ -77,15 +71,9 @@ v1.0.0-rc.4 </a><a href="/spec/1.0.0-rc.3" role="option" aria-selected="false" c
|
||||
v1.0.0-rc.3 </a><a href="/spec/1.0.0-rc.2" role="option" aria-selected="false" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50">
|
||||
v1.0.0-rc.2 </a><a href="/spec/1.0.0-rc.1" role="option" aria-selected="true" class="block px-3 py-2 font-mono text-sm rounded transition-colors text-gray-600 dark:text-neutral-400 hover:bg-gray-100 dark:hover:bg-neutral-800 hover:text-gray-950 dark:hover:text-neutral-50 bg-sky-500/15 dark:bg-sky-500/20 text-sky-600 dark:text-sky-400">
|
||||
v1.0.0-rc.1 </a> </div> </div> </div> <a href="#about" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600" data-nav-link data-section-id="about">
|
||||
About
|
||||
</a> <a href="#spec" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600" data-nav-link data-section-id="spec">
|
||||
Spec
|
||||
</a> <a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600" data-nav-link data-section-id="faq">
|
||||
FAQ
|
||||
</a> </div> </nav> </header> <script type="module">function m(){const n=document.getElementById("site-header"),g=document.getElementById("hero"),d=document.getElementById("mobile-menu-btn"),s=document.getElementById("mobile-nav");if(!n||!g)return;const v=64;function o(){n&&(window.scrollY>=v?(n.classList.remove("translate-y-[-100%]","border-transparent"),n.classList.add("border-gray-200","dark:border-neutral-800")):(n.classList.add("translate-y-[-100%]","border-transparent"),n.classList.remove("border-gray-200","dark:border-neutral-800")))}window.addEventListener("scroll",o,{passive:!0}),o(),d&&s&&(d.addEventListener("click",()=>{s.classList.toggle("hidden")}),s.querySelectorAll("a").forEach(a=>{a.addEventListener("click",()=>{s.classList.add("hidden")})}));const c=document.querySelectorAll("[data-nav-link]"),l=[],u=new Set;c.forEach(a=>{const e=a.getAttribute("data-section-id");if(e&&!u.has(e)){u.add(e);const t=document.getElementById(e);t&&l.push({id:e,element:t})}});function f(){let e=null;for(const{id:t,element:r}of l)r.getBoundingClientRect().top<=100&&(e=t);c.forEach(t=>{const r=t.getAttribute("data-section-id");t.classList.toggle("active",r===e)})}let i=!1;window.addEventListener("scroll",()=>{i||(requestAnimationFrame(()=>{f(),i=!1}),i=!0)}),f()}m();document.addEventListener("astro:after-swap",m);</script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
|
||||
hover:text-sky-600" data-nav-link data-section-id="about"> About </a><a href="#spec" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600" data-nav-link data-section-id="spec"> Spec </a><a href="#faq" class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600" data-nav-link data-section-id="faq"> FAQ </a> </div> </nav> </header> <script type="module" src="/_astro/Header.astro_astro_type_script_index_0_lang.ClIJVJFM.js"></script> <main> <section id="hero" class="relative min-h-[75vh] flex flex-col items-center justify-center
|
||||
px-6 pt-16 pb-24 overflow-hidden"> <!-- Background gradient/texture --> <div class="absolute inset-0 bg-gradient-to-b
|
||||
from-gray-100 to-gray-50
|
||||
dark:from-neutral-900 dark:to-neutral-950"></div> <!-- Subtle grid pattern with fade --> <div class="absolute inset-0 opacity-[0.06] dark:opacity-[0.12]
|
||||
@@ -159,10 +147,7 @@ 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-gray-500 dark:text-neutral-500
|
||||
hover:text-sky-600 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> <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-gray-600 dark:text-neutral-400">
|
||||
A practical git workflow that combines the best of GitHub Flow with
|
||||
versioned releases
|
||||
</p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
|
||||
hover:text-sky-600 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> <section id="about" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">About Common-Flow</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> A practical git workflow that combines the best of GitHub Flow with versioned releases </p> </div> <!-- Introduction --> <div class="prose-spec mb-12"></div> <!-- Summary as feature cards --> <div class="mb-16"> <h3 class="text-xl font-display font-semibold mb-6
|
||||
text-gray-950 dark:text-neutral-50">
|
||||
Key Principles
|
||||
</h3> <div class="prose-spec"><p>Common-Flow is an attempt to gather a sensible selection of the most common
|
||||
@@ -180,9 +165,7 @@ Please <a href="https://github.com/jimeh/common-flow/issues" class="text-sky-60
|
||||
</p> </div> <div> <h4 class="text-sm font-semibold uppercase tracking-wider mb-3
|
||||
text-gray-500 dark:text-neutral-500">
|
||||
License
|
||||
</h4> <div class="text-gray-600 dark:text-neutral-400"><p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p></div> </div> </div> </div> </div> </div> </section> <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-gray-600 dark:text-neutral-400">
|
||||
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"> <aside id="spec-sidebar" class="hidden lg:block lg:sticky lg:top-24 lg:self-start
|
||||
</h4> <div class="text-gray-600 dark:text-neutral-400"><p><a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons - CC BY 3.0</a></p></div> </div> </div> </div> </div> </div> </section> <section id="spec" class="py-20 sm:py-28"> <div class="section-container"> <div class="mb-12 text-center max-w-3xl mx-auto"> <h2 class="text-3xl sm:text-4xl mb-4">The Specification</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> 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"> <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-gray-200 dark:border-neutral-800"> <nav class="space-y-1 py-2"> <div class="text-xs font-semibold uppercase tracking-wider mb-4
|
||||
text-gray-500 dark:text-neutral-500">
|
||||
@@ -197,7 +180,7 @@ Table of Contents
|
||||
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-gray-500 dark:text-neutral-500">
|
||||
Jump to Section
|
||||
</span> <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800" 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"> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link> <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link> <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-changes" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Changes</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Git Best Practices</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Bug Fixes & Rollback</span> </a><a href="#spec-maintenance-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Maintenance Releases</span> </a> </nav> </div> </div> <script type="module">function u(){const a=document.querySelectorAll("[data-sidebar-link]"),o=[];a.forEach(n=>{const e=n.getAttribute("data-section-id");if(e){const t=document.getElementById(e);t&&o.push({id:e,element:t})}});function l(){let e=o[0]?.id;for(const{id:t,element:r}of o)r.getBoundingClientRect().top<=100&&(e=t);a.forEach(t=>{const r=t.getAttribute("data-section-id");t.classList.toggle("active",r===e)})}let s=!1;window.addEventListener("scroll",()=>{s||(requestAnimationFrame(()=>{l(),s=!1}),s=!0)}),l();const d=document.getElementById("spec-toc-toggle"),c=document.getElementById("spec-toc-drawer"),g=c?.querySelector("[data-toc-backdrop]"),m=c?.querySelector("[data-toc-close]"),v=c?.querySelectorAll("[data-toc-link]");function p(){c?.classList.remove("hidden"),document.body.style.overflow="hidden"}function i(){c?.classList.add("hidden"),document.body.style.overflow=""}d?.addEventListener("click",p),g?.addEventListener("click",i),m?.addEventListener("click",i),v?.forEach(n=>{n.addEventListener("click",i)});const f=document.getElementById("spec");f&&d&&new IntersectionObserver(([e])=>{d.classList.toggle("hidden",!e.isIntersecting)},{threshold:0}).observe(f)}u();document.addEventListener("astro:after-swap",u);</script> </div> <!-- Main content --> <div class="flex-1 min-w-0"> <article class="prose-spec"> <!-- Terminology --> <section id="terminology"> <h2>Terminology</h2> <ul>
|
||||
</span> <button class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-neutral-800" 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"> <a href="#terminology" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link> <span>Terminology</span> </a><a href="#specification" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800" data-toc-link> <span>Specification</span> </a><a href="#spec-the-master-branch" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 1. </span> <span>The Master Branch</span> </a><a href="#spec-changes" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 2. </span> <span>Changes</span> </a><a href="#spec-git-best-practices" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 3. </span> <span>Git Best Practices</span> </a><a href="#spec-versioning" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 4. </span> <span>Versioning</span> </a><a href="#spec-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 5. </span> <span>Releases</span> </a><a href="#spec-bug-fixes-rollback" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 6. </span> <span>Bug Fixes & Rollback</span> </a><a href="#spec-maintenance-releases" class="sidebar-link block py-2 px-4 text-sm rounded-md transition-colors text-gray-500 hover:text-gray-950 hover:bg-gray-100 dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800 pl-6 text-[0.8125rem] flex" data-toc-link> <span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600"> 7. </span> <span>Maintenance Releases</span> </a> </nav> </div> </div> <script type="module" src="/_astro/SpecSidebar.astro_astro_type_script_index_0_lang.BQBj5HuJ.js"></script> </div> <!-- Main content --> <div class="flex-1 min-w-0"> <article class="prose-spec"> <!-- Terminology --> <section id="terminology"> <h2>Terminology</h2> <ul>
|
||||
<li><strong>Master Branch</strong> - Must always have passing tests, is considered bleeding
|
||||
edge, and must be named <code>master</code>.</li>
|
||||
<li><strong>Change Branches</strong> - Any branch that introduces changes like a new feature, a
|
||||
@@ -359,9 +342,7 @@ into the master branch, that work should have happened against the master
|
||||
branch in the first place.</li>
|
||||
</ol>
|
||||
</li>
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" 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">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400">
|
||||
Common questions about Git Common-Flow
|
||||
</p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
</ol> </section> </article> </div> </div> </div> </section> <section id="faq" class="py-20 sm:py-28"> <div class="section-container"> <div class="max-w-3xl mx-auto"> <div class="mb-12 text-center"> <h2 class="text-3xl sm:text-4xl mb-4">FAQ</h2> <p class="text-lg text-gray-600 dark:text-neutral-400"> Common questions about Git Common-Flow </p> </div> <!-- FAQ Items --> <div class="space-y-0"> </div> </div> </div> </section> <script type="module">function n(){document.querySelectorAll("[data-faq-item]").forEach(r=>{const t=r.querySelector("[data-faq-trigger]"),a=r.querySelector("[data-faq-content]"),s=r.querySelector("[data-faq-icon]");!t||!a||!s||t.addEventListener("click",()=>{const e=t.getAttribute("aria-expanded")==="true";t.setAttribute("aria-expanded",e?"false":"true"),a.classList.toggle("grid-rows-[1fr]",!e),a.classList.toggle("grid-rows-[0fr]",e),s.classList.toggle("rotate-180",!e)})})}n();document.addEventListener("astro:after-swap",n);</script> </main> <footer class="pt-12 pb-6 my-28 text-sm
|
||||
text-gray-500 dark:text-neutral-500
|
||||
border-t border-gray-200 dark:border-neutral-800"> <div class="section-container flex flex-col sm:flex-row
|
||||
sm:justify-between sm:items-center gap-2"> <p>
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import SectionHeader from "./SectionHeader.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
@@ -13,14 +14,10 @@ const { introduction, summary, 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-gray-600 dark:text-neutral-400">
|
||||
A practical git workflow that combines the best of GitHub Flow with
|
||||
versioned releases
|
||||
</p>
|
||||
</div>
|
||||
<SectionHeader
|
||||
title="About Common-Flow"
|
||||
subtitle="A practical git workflow that combines the best of GitHub Flow with versioned releases"
|
||||
/>
|
||||
|
||||
<!-- Introduction -->
|
||||
<div class="prose-spec mb-12" set:html={introduction} />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import SectionHeader from "./SectionHeader.astro";
|
||||
import type { FAQItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
@@ -11,13 +12,10 @@ const { items } = Astro.props;
|
||||
<section id="faq" 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">FAQ</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-neutral-400">
|
||||
Common questions about Git Common-Flow
|
||||
</p>
|
||||
</div>
|
||||
<SectionHeader
|
||||
title="FAQ"
|
||||
subtitle="Common questions about Git Common-Flow"
|
||||
/>
|
||||
|
||||
<!-- FAQ Items -->
|
||||
<div class="space-y-0">
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import VersionSelector from "./VersionSelector.astro";
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import GitHubIcon from "./icons/GitHubIcon.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
@@ -8,6 +9,12 @@ interface Props {
|
||||
}
|
||||
|
||||
const { version } = Astro.props;
|
||||
|
||||
const navItems = [
|
||||
{ id: "about", label: "About" },
|
||||
{ id: "spec", label: "Spec" },
|
||||
{ id: "faq", label: "FAQ" },
|
||||
];
|
||||
---
|
||||
|
||||
<header
|
||||
@@ -41,42 +48,22 @@ const { version } = Astro.props;
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<nav class="hidden md:flex items-center gap-1">
|
||||
<a
|
||||
href="#about"
|
||||
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
|
||||
data-nav-link
|
||||
data-section-id="about"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="#spec"
|
||||
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
|
||||
data-nav-link
|
||||
data-section-id="spec"
|
||||
>
|
||||
Spec
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
|
||||
data-nav-link
|
||||
data-section-id="faq"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
{
|
||||
navItems.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class="nav-link inline-flex items-center px-4 py-2 text-sm font-medium
|
||||
rounded-lg transition-colors cursor-pointer
|
||||
text-gray-600 dark:text-neutral-400
|
||||
hover:bg-gray-100 hover:text-gray-950
|
||||
dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
|
||||
data-nav-link
|
||||
data-section-id={item.id}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</nav>
|
||||
|
||||
<!-- Right side: Theme, GitHub -->
|
||||
@@ -93,12 +80,7 @@ const { version } = Astro.props;
|
||||
hover:bg-gray-100 dark:hover:bg-neutral-800"
|
||||
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>
|
||||
<GitHubIcon />
|
||||
</a>
|
||||
|
||||
<!-- Mobile menu button -->
|
||||
@@ -137,38 +119,26 @@ const { version } = Astro.props;
|
||||
versions={Array.from(config.versions)}
|
||||
/>
|
||||
</div>
|
||||
<a
|
||||
href="#about"
|
||||
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600"
|
||||
data-nav-link
|
||||
data-section-id="about"
|
||||
>
|
||||
About
|
||||
</a>
|
||||
<a
|
||||
href="#spec"
|
||||
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600"
|
||||
data-nav-link
|
||||
data-section-id="spec"
|
||||
>
|
||||
Spec
|
||||
</a>
|
||||
<a
|
||||
href="#faq"
|
||||
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600"
|
||||
data-nav-link
|
||||
data-section-id="faq"
|
||||
>
|
||||
FAQ
|
||||
</a>
|
||||
{
|
||||
navItems.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class="nav-link block py-2 text-gray-600 dark:text-neutral-400
|
||||
hover:text-sky-600"
|
||||
data-nav-link
|
||||
data-section-id={item.id}
|
||||
>
|
||||
{item.label}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<script>
|
||||
import { initActiveSectionTracker } from "../scripts/activeSectionTracker";
|
||||
|
||||
function initHeader() {
|
||||
const header = document.getElementById("site-header");
|
||||
const hero = document.getElementById("hero");
|
||||
@@ -212,51 +182,10 @@ const { version } = Astro.props;
|
||||
}
|
||||
|
||||
// Active section tracking for nav links
|
||||
const navLinks = document.querySelectorAll("[data-nav-link]");
|
||||
const sections: { id: string; element: Element }[] = [];
|
||||
|
||||
// Collect unique section IDs
|
||||
const seenIds = new Set<string>();
|
||||
navLinks.forEach((link) => {
|
||||
const id = link.getAttribute("data-section-id");
|
||||
if (id && !seenIds.has(id)) {
|
||||
seenIds.add(id);
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
sections.push({ id, element: section });
|
||||
}
|
||||
}
|
||||
initActiveSectionTracker({
|
||||
linkSelector: "[data-nav-link]",
|
||||
defaultToFirst: false,
|
||||
});
|
||||
|
||||
function updateActiveNavSection() {
|
||||
const headerOffset = 100;
|
||||
let activeId: string | null = null;
|
||||
|
||||
for (const { id, element } of sections) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.top <= headerOffset) {
|
||||
activeId = id;
|
||||
}
|
||||
}
|
||||
|
||||
navLinks.forEach((link) => {
|
||||
const linkId = link.getAttribute("data-section-id");
|
||||
link.classList.toggle("active", linkId === activeId);
|
||||
});
|
||||
}
|
||||
|
||||
let ticking = false;
|
||||
window.addEventListener("scroll", () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
updateActiveNavSection();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
updateActiveNavSection();
|
||||
}
|
||||
|
||||
// Initialize on load
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
---
|
||||
import VersionSelector from "./VersionSelector.astro";
|
||||
import ThemeToggle from "./ThemeToggle.astro";
|
||||
import GitHubIcon from "./icons/GitHubIcon.astro";
|
||||
import { config } from "../config";
|
||||
|
||||
interface Props {
|
||||
@@ -58,12 +59,7 @@ const { version, svgPath } = Astro.props;
|
||||
hover:bg-white/50 dark:hover:bg-neutral-800/50"
|
||||
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>
|
||||
<GitHubIcon />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
16
src/components/SectionHeader.astro
Normal file
16
src/components/SectionHeader.astro
Normal file
@@ -0,0 +1,16 @@
|
||||
---
|
||||
interface Props {
|
||||
title: string;
|
||||
subtitle: string;
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { title, subtitle, class: className } = Astro.props;
|
||||
---
|
||||
|
||||
<div class:list={["mb-12 text-center", className]}>
|
||||
<h2 class="text-3xl sm:text-4xl mb-4">{title}</h2>
|
||||
<p class="text-lg text-gray-600 dark:text-neutral-400">
|
||||
{subtitle}
|
||||
</p>
|
||||
</div>
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import SectionHeader from "./SectionHeader.astro";
|
||||
import SpecSidebar from "./SpecSidebar.astro";
|
||||
import type { TocItem } from "../utils/parseSpecContent";
|
||||
|
||||
@@ -14,13 +15,11 @@ const { terminology, terminologyTitle, 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-gray-600 dark:text-neutral-400">
|
||||
The complete Git Common-Flow specification
|
||||
</p>
|
||||
</div>
|
||||
<SectionHeader
|
||||
title="The Specification"
|
||||
subtitle="The complete Git Common-Flow specification"
|
||||
class="max-w-3xl mx-auto"
|
||||
/>
|
||||
|
||||
<!-- Content with sidebar -->
|
||||
<div class="lg:flex lg:gap-8">
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
import TocLink from "./TocLink.astro";
|
||||
import type { TocItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
@@ -21,30 +22,7 @@ const { items } = Astro.props;
|
||||
>
|
||||
Table of Contents
|
||||
</div>
|
||||
{
|
||||
items.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class:list={[
|
||||
"sidebar-link block py-2 px-4 text-sm rounded-md",
|
||||
"transition-colors",
|
||||
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
|
||||
"dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
|
||||
item.level === 3 && "pl-6 text-[0.8125rem]",
|
||||
item.clause && "flex",
|
||||
]}
|
||||
data-sidebar-link
|
||||
data-section-id={item.id}
|
||||
>
|
||||
{item.clause && (
|
||||
<span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
|
||||
{item.clause}
|
||||
</span>
|
||||
)}
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
{items.map((item) => <TocLink item={item} trackActive />)}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
@@ -111,83 +89,20 @@ const { items } = Astro.props;
|
||||
</div>
|
||||
|
||||
<nav class="space-y-1">
|
||||
{
|
||||
items.map((item) => (
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class:list={[
|
||||
"sidebar-link block py-2 px-4 text-sm rounded-md",
|
||||
"transition-colors",
|
||||
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
|
||||
"dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
|
||||
item.level === 3 && "pl-6 text-[0.8125rem]",
|
||||
item.clause && "flex",
|
||||
]}
|
||||
data-toc-link
|
||||
>
|
||||
{item.clause && (
|
||||
<span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
|
||||
{item.clause}
|
||||
</span>
|
||||
)}
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
))
|
||||
}
|
||||
{items.map((item) => <TocLink item={item} />)}
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { initActiveSectionTracker } from "../scripts/activeSectionTracker";
|
||||
|
||||
function initSpecSidebar() {
|
||||
// Active section tracking
|
||||
const sidebarLinks = document.querySelectorAll("[data-sidebar-link]");
|
||||
const sections: { id: string; element: Element }[] = [];
|
||||
|
||||
sidebarLinks.forEach((link) => {
|
||||
const id = link.getAttribute("data-section-id");
|
||||
if (id) {
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
sections.push({ id, element: section });
|
||||
}
|
||||
}
|
||||
// Active section tracking for sidebar links
|
||||
initActiveSectionTracker({
|
||||
linkSelector: "[data-sidebar-link]",
|
||||
});
|
||||
|
||||
// Highlight the section whose top is closest to viewport top
|
||||
function updateActiveSection() {
|
||||
const headerOffset = 100; // Account for sticky header
|
||||
let activeId = sections[0]?.id;
|
||||
|
||||
for (const { id, element } of sections) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
// Find the last section whose top has scrolled past the header
|
||||
if (rect.top <= headerOffset) {
|
||||
activeId = id;
|
||||
}
|
||||
}
|
||||
|
||||
sidebarLinks.forEach((link) => {
|
||||
const linkId = link.getAttribute("data-section-id");
|
||||
link.classList.toggle("active", linkId === activeId);
|
||||
});
|
||||
}
|
||||
|
||||
// Update on scroll with throttling
|
||||
let ticking = false;
|
||||
window.addEventListener("scroll", () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
updateActiveSection();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial update
|
||||
updateActiveSection();
|
||||
|
||||
// Mobile TOC drawer
|
||||
const toggleBtn = document.getElementById("spec-toc-toggle");
|
||||
const drawer = document.getElementById("spec-toc-drawer");
|
||||
|
||||
34
src/components/TocLink.astro
Normal file
34
src/components/TocLink.astro
Normal file
@@ -0,0 +1,34 @@
|
||||
---
|
||||
import type { TocItem } from "../utils/parseSpecContent";
|
||||
|
||||
interface Props {
|
||||
item: TocItem;
|
||||
trackActive?: boolean;
|
||||
}
|
||||
|
||||
const { item, trackActive = false } = Astro.props;
|
||||
---
|
||||
|
||||
<a
|
||||
href={`#${item.id}`}
|
||||
class:list={[
|
||||
"sidebar-link block py-2 px-4 text-sm rounded-md",
|
||||
"transition-colors",
|
||||
"text-gray-500 hover:text-gray-950 hover:bg-gray-100",
|
||||
"dark:text-neutral-500 dark:hover:text-neutral-50 dark:hover:bg-neutral-800",
|
||||
item.level === 3 && "pl-6 text-[0.8125rem]",
|
||||
item.clause && "flex",
|
||||
]}
|
||||
data-sidebar-link={trackActive ? "" : undefined}
|
||||
data-section-id={trackActive ? item.id : undefined}
|
||||
data-toc-link={!trackActive ? "" : undefined}
|
||||
>
|
||||
{
|
||||
item.clause && (
|
||||
<span class="shrink-0 w-6 text-gray-400 dark:text-neutral-600">
|
||||
{item.clause}
|
||||
</span>
|
||||
)
|
||||
}
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
14
src/components/icons/GitHubIcon.astro
Normal file
14
src/components/icons/GitHubIcon.astro
Normal file
@@ -0,0 +1,14 @@
|
||||
---
|
||||
interface Props {
|
||||
class?: string;
|
||||
}
|
||||
|
||||
const { class: className = "w-5 h-5" } = Astro.props;
|
||||
---
|
||||
|
||||
<svg class={className} 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>
|
||||
64
src/scripts/activeSectionTracker.ts
Normal file
64
src/scripts/activeSectionTracker.ts
Normal file
@@ -0,0 +1,64 @@
|
||||
export interface ActiveSectionTrackerOptions {
|
||||
linkSelector: string;
|
||||
sectionIdAttr?: string;
|
||||
headerOffset?: number;
|
||||
defaultToFirst?: boolean;
|
||||
}
|
||||
|
||||
export function initActiveSectionTracker(
|
||||
options: ActiveSectionTrackerOptions,
|
||||
): void {
|
||||
const {
|
||||
linkSelector,
|
||||
sectionIdAttr = "data-section-id",
|
||||
headerOffset = 100,
|
||||
defaultToFirst = true,
|
||||
} = options;
|
||||
|
||||
const links = document.querySelectorAll(linkSelector);
|
||||
const sections: { id: string; element: Element }[] = [];
|
||||
|
||||
// Collect unique section IDs
|
||||
const seenIds = new Set<string>();
|
||||
links.forEach((link) => {
|
||||
const id = link.getAttribute(sectionIdAttr);
|
||||
if (id && !seenIds.has(id)) {
|
||||
seenIds.add(id);
|
||||
const section = document.getElementById(id);
|
||||
if (section) {
|
||||
sections.push({ id, element: section });
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function updateActiveSection(): void {
|
||||
let activeId: string | null = defaultToFirst ? sections[0]?.id : null;
|
||||
|
||||
for (const { id, element } of sections) {
|
||||
const rect = element.getBoundingClientRect();
|
||||
if (rect.top <= headerOffset) {
|
||||
activeId = id;
|
||||
}
|
||||
}
|
||||
|
||||
links.forEach((link) => {
|
||||
const linkId = link.getAttribute(sectionIdAttr);
|
||||
link.classList.toggle("active", linkId === activeId);
|
||||
});
|
||||
}
|
||||
|
||||
// Update on scroll with throttling
|
||||
let ticking = false;
|
||||
window.addEventListener("scroll", () => {
|
||||
if (!ticking) {
|
||||
requestAnimationFrame(() => {
|
||||
updateActiveSection();
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
});
|
||||
|
||||
// Initial update
|
||||
updateActiveSection();
|
||||
}
|
||||
Reference in New Issue
Block a user