jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

wip: getting close

Browse Source
This commit is contained in:
Jim Myhrberg
2026-01-10 22:40:47 +00:00
parent 1828ae6353
commit b22cf35953
21 changed files with 651 additions and 670 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/AboutSection.astro
View File

@@ -16,7 +16,7 @@ const { introduction, summary, license } = Astro.props;
<!-- 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-gray-400">
<p class="text-lg text-gray-600 dark:text-slate-400">
A practical git workflow that combines the best of GitHub Flow with
versioned releases
</p>
@@ -31,7 +31,7 @@ const { introduction, summary, license } = Astro.props;
<div class="mb-16">
<h3
class="text-xl font-display font-semibold mb-6
text-gray-950 dark:text-gray-50"
text-gray-950 dark:text-slate-50"
>
Key Principles
</h3>
@@ -39,16 +39,16 @@ const { introduction, summary, license } = Astro.props;
</div>
<!-- Feedback & License -->
<div class="pt-8 border-t border-gray-200 dark:border-gray-800">
<div class="pt-8 border-t border-gray-200 dark:border-slate-800">
<div class="grid sm:grid-cols-2 gap-8">
<div>
<h4
class="text-sm font-semibold uppercase tracking-wider mb-3
text-gray-500 dark:text-gray-500"
text-gray-500 dark:text-slate-500"
>
Feedback
</h4>
<p class="text-gray-600 dark:text-gray-400">
<p class="text-gray-600 dark:text-slate-400">
Please{" "}
<a
href={`${config.repoUrl}/issues`}
@@ -61,12 +61,12 @@ const { introduction, summary, license } = Astro.props;
<div>
<h4
class="text-sm font-semibold uppercase tracking-wider mb-3
text-gray-500 dark:text-gray-500"
text-gray-500 dark:text-slate-500"
>
License
</h4>
<div
class="spec-content text-gray-600 dark:text-gray-400"
class="spec-content text-gray-600 dark:text-slate-400"
set:html={license}
/>
</div>

29
src/components/FAQSection.astro
View File

@@ -8,13 +8,13 @@ interface Props {
const { items } = Astro.props;
---
<section id="faq" class="py-20 sm:py-28 bg-gray-100 dark:bg-gray-900">
<section id="faq" class="py-20 sm:py-28 bg-gray-100 dark:bg-slate-900/30">
<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-gray-400">
<p class="text-lg text-gray-600 dark:text-slate-400">
Common questions about Git Common-Flow
</p>
</div>
@@ -24,14 +24,14 @@ const { items } = Astro.props;
{
items.map((item, index) => (
<div
class="border-b border-gray-200 dark:border-gray-800"
class="border-b border-gray-200 dark:border-slate-800"
data-faq-item
>
<button
class="flex justify-between items-center w-full py-6 text-left
font-display text-lg font-semibold cursor-pointer
transition-colors
text-gray-950 dark:text-gray-50
text-gray-950 dark:text-slate-50
hover:text-sky-600"
aria-expanded="false"
data-faq-trigger
@@ -58,7 +58,7 @@ const { items } = Astro.props;
>
<div class="overflow-hidden">
<div
class="pb-6 text-gray-600 dark:text-gray-400 prose-spec spec-content"
class="pb-6 text-gray-600 dark:text-slate-400 prose-spec spec-content"
set:html={item.answer}
/>
</div>
@@ -100,22 +100,3 @@ const { items } = Astro.props;
// Re-initialize on Astro page transitions
document.addEventListener("astro:after-swap", initFAQ);
</script>
<style>
.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: #525252;
}
:global(.dark) .spec-content :global(li) {
color: #a3a3a3;
}
</style>

38
src/components/Header.astro
View File

@@ -14,7 +14,7 @@ const { version } = Astro.props;
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-gray-950/85"
backdrop-blur-xl bg-gray-50/85 dark:bg-slate-950/85"
>
<div
class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between"
@@ -24,7 +24,7 @@ const { version } = Astro.props;
<a
href="#hero"
class="flex items-center gap-3 no-underline
text-gray-950 dark:text-gray-50
text-gray-950 dark:text-slate-50
hover:text-sky-600 transition-colors"
>
<span class="font-display font-bold text-lg tracking-tight">
@@ -45,9 +45,9 @@ const { version } = Astro.props;
href="#about"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
About
</a>
@@ -55,9 +55,9 @@ const { version } = Astro.props;
href="#spec"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
Spec
</a>
@@ -65,9 +65,9 @@ const { version } = Astro.props;
href="#faq"
class="inline-flex items-center px-4 py-2 text-sm font-medium rounded-lg
transition-colors cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
FAQ
</a>
@@ -82,9 +82,9 @@ const { version } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-gray-500
hover:text-gray-950 dark:hover:text-gray-50
hover:bg-gray-100 dark:hover:bg-gray-900"
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-gray-100 dark:hover:bg-slate-800"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -99,8 +99,8 @@ const { version } = Astro.props;
<button
id="mobile-menu-btn"
class="md:hidden p-2 rounded-lg
text-gray-500 dark:text-gray-500
hover:bg-gray-100 dark:hover:bg-gray-900"
text-gray-500 dark:text-slate-500
hover:bg-gray-100 dark:hover:bg-slate-800"
aria-label="Toggle menu"
>
<svg
@@ -122,7 +122,7 @@ const { version } = Astro.props;
<!-- Mobile Navigation -->
<nav
id="mobile-nav"
class="md:hidden hidden border-t border-gray-200 dark:border-gray-800"
class="md:hidden hidden border-t border-gray-200 dark:border-slate-800"
>
<div class="px-4 py-3 space-y-1 text-center">
<div class="py-2 flex justify-center">
@@ -133,19 +133,19 @@ const { version } = Astro.props;
</div>
<a
href="#about"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
About
</a>
<a
href="#spec"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
Spec
</a>
<a
href="#faq"
class="block py-2 text-gray-600 dark:text-gray-400 hover:text-sky-600"
class="block py-2 text-gray-600 dark:text-slate-400 hover:text-sky-600"
>
FAQ
</a>
@@ -169,10 +169,10 @@ const { version } = Astro.props;
([entry]) => {
if (entry.isIntersecting) {
header.classList.add("translate-y-[-100%]");
header.classList.remove("border-gray-200", "dark:border-gray-800");
header.classList.remove("border-gray-200", "dark:border-slate-800");
} else {
header.classList.remove("translate-y-[-100%]");
header.classList.add("border-gray-200", "dark:border-gray-800");
header.classList.add("border-gray-200", "dark:border-slate-800");
}
},
{ threshold: 0, rootMargin: `-${topMargin}px 0px 0px 0px` }

30
src/components/Hero.astro
View File

@@ -20,7 +20,7 @@ const { version, svgPath } = Astro.props;
<div
class="absolute inset-0 bg-gradient-to-b
from-gray-100 to-gray-50
dark:from-gray-900 dark:to-gray-950"
dark:from-slate-900 dark:to-slate-950"
>
</div>
@@ -28,7 +28,7 @@ const { version, svgPath } = Astro.props;
<div
class="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]
bg-[linear-gradient(theme(colors.gray.950)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.950)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.gray.50)_1px,transparent_1px),linear-gradient(90deg,theme(colors.gray.50)_1px,transparent_1px)]
dark:bg-[linear-gradient(theme(colors.slate.400)_1px,transparent_1px),linear-gradient(90deg,theme(colors.slate.400)_1px,transparent_1px)]
bg-[size:60px_60px]"
>
</div>
@@ -51,9 +51,9 @@ const { version, svgPath } = Astro.props;
target="_blank"
rel="noopener noreferrer"
class="p-2 rounded-lg transition-colors
text-gray-500 dark:text-gray-500
hover:text-gray-950 dark:hover:text-gray-50
hover:bg-white/50 dark:hover:bg-white/10"
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-white/50 dark:hover:bg-slate-800/50"
aria-label="View on GitHub"
>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
@@ -71,7 +71,7 @@ const { version, svgPath } = Astro.props;
<!-- Title -->
<h1
class="animate-fade-in-up mb-4
text-gray-950 dark:text-gray-50"
text-gray-950 dark:text-slate-50"
>
Git Common-Flow
</h1>
@@ -80,7 +80,7 @@ const { version, svgPath } = Astro.props;
<p
class="animate-fade-in-up delay-100
text-lg sm:text-xl max-w-2xl mx-auto mb-8
text-gray-600 dark:text-gray-400"
text-gray-600 dark:text-slate-400"
>
A sensible git workflow for teams who ship
</p>
@@ -91,7 +91,7 @@ const { version, svgPath } = Astro.props;
class="inline-flex items-center px-3 py-1 font-mono text-xs font-medium
rounded-full border
bg-gray-100 border-gray-200 text-gray-500
dark:bg-gray-900 dark:border-gray-800"
dark:bg-slate-800/50 dark:border-slate-700 dark:text-slate-400"
>
v{version}
</span>
@@ -101,9 +101,9 @@ const { version, svgPath } = Astro.props;
<div
class="animate-fade-in-up delay-300
relative mx-auto mb-12 p-4 sm:p-8
bg-white dark:bg-gray-900
bg-white dark:bg-slate-900
rounded-2xl shadow-lg dark:shadow-none
border border-gray-200 dark:border-gray-800"
border border-gray-200 dark:border-slate-800"
>
<img
src={svgPath}
@@ -122,9 +122,9 @@ const { version, svgPath } = Astro.props;
href="#about"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
About
</a>
@@ -141,9 +141,9 @@ const { version, svgPath } = Astro.props;
href="#faq"
class="inline-flex items-center justify-center gap-2 px-5 py-2.5
text-sm font-medium rounded-lg transition-all cursor-pointer
text-gray-600 dark:text-gray-400
text-gray-600 dark:text-slate-400
hover:bg-gray-100 hover:text-gray-950
dark:hover:bg-gray-900 dark:hover:text-gray-50"
dark:hover:bg-slate-800 dark:hover:text-slate-50"
>
FAQ
</a>
@@ -155,7 +155,7 @@ const { version, svgPath } = Astro.props;
href="#about"
class="absolute bottom-8 left-1/2 -translate-x-1/2
animate-fade-in delay-700
text-gray-500 dark:text-gray-500
text-gray-500 dark:text-slate-500
hover:text-sky-600 transition-colors"
aria-label="Scroll to content"
>

14
src/components/SpecSection.astro
View File

@@ -17,7 +17,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
<!-- 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-gray-400">
<p class="text-lg text-gray-600 dark:text-slate-400">
The complete Git Common-Flow specification
</p>
</div>
@@ -67,8 +67,8 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
}
:global(.dark) .spec-content :global(h2) {
border-bottom-color: #262626;
color: #fafafa;
border-bottom-color: #1e293b;
color: #f8fafc;
}
.spec-content :global(h2:first-child) {
@@ -85,7 +85,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
}
:global(.dark) .spec-content :global(h3) {
color: #a3a3a3;
color: #94a3b8;
}
.spec-content :global(p) {
@@ -94,7 +94,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
}
:global(.dark) .spec-content :global(p) {
color: #a3a3a3;
color: #94a3b8;
}
.spec-content :global(strong) {
@@ -103,7 +103,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
}
:global(.dark) .spec-content :global(strong) {
color: #fafafa;
color: #f8fafc;
}
.spec-content :global(ul) {
@@ -144,7 +144,7 @@ const { terminology, terminologyTitle, specification, tocItems } = Astro.props;
}
:global(.dark) .spec-content :global(li) {
color: #a3a3a3;
color: #94a3b8;
}
.spec-content :global(a) {

16
src/components/SpecSidebar.astro
View File

@@ -12,12 +12,12 @@ const { items } = Astro.props;
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-gray-800"
lg:pr-8 lg:mr-8 lg:border-r border-gray-200 dark:border-slate-800"
>
<nav class="space-y-1 py-2">
<div
class="text-xs font-semibold uppercase tracking-wider mb-4
text-gray-500 dark:text-gray-500"
text-gray-500 dark:text-slate-500"
>
Table of Contents
</div>
@@ -29,7 +29,7 @@ const { items } = Astro.props;
"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:hover:text-gray-50 dark:hover:bg-gray-900",
"dark:text-slate-500 dark:hover:text-slate-50 dark:hover:bg-slate-800",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-sidebar-link
@@ -74,18 +74,18 @@ const { items } = Astro.props;
<!-- Drawer -->
<div
class="absolute bottom-0 inset-x-0 max-h-[70vh] overflow-y-auto
bg-gray-50 dark:bg-gray-950
bg-gray-50 dark:bg-slate-950
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-gray-500"
text-gray-500 dark:text-slate-500"
>
Jump to Section
</span>
<button
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900"
class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-slate-800"
data-toc-close
aria-label="Close"
>
@@ -113,7 +113,7 @@ const { items } = Astro.props;
"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:hover:text-gray-50 dark:hover:bg-gray-900",
"dark:text-slate-500 dark:hover:text-slate-50 dark:hover:bg-slate-800",
item.level === 3 && "pl-6 text-[0.8125rem]",
]}
data-toc-link
@@ -247,6 +247,6 @@ const { items } = Astro.props;
}
:global(.dark) #spec-sidebar::-webkit-scrollbar-thumb {
background-color: #262626;
background-color: #1e293b;
}
</style>

6
src/components/ThemeToggle.astro
View File

@@ -6,9 +6,9 @@
data-theme-toggle
type="button"
class="p-2 rounded-lg transition-colors duration-200
text-gray-500 dark:text-gray-500
hover:text-gray-950 dark:hover:text-gray-50
hover:bg-gray-100 dark:hover:bg-gray-900"
text-gray-500 dark:text-slate-500
hover:text-gray-950 dark:hover:text-slate-50
hover:bg-gray-100 dark:hover:bg-slate-800"
aria-label="Toggle dark mode"
>
<!-- Sun icon (shown in dark mode) -->

16
src/components/VersionSelector.astro
View File

@@ -15,10 +15,10 @@ const { currentVersion, versions } = Astro.props;
aria-haspopup="listbox"
aria-expanded="false"
class="flex items-center gap-1.5 px-2.5 py-1.5 text-sm font-mono
border border-gray-200 dark:border-gray-800
border border-gray-200 dark:border-slate-700
rounded-md bg-transparent cursor-pointer transition-colors
text-gray-600 dark:text-gray-400
hover:border-sky-600 hover:text-gray-950 dark:hover:text-gray-50"
text-gray-600 dark:text-slate-400
hover:border-sky-600 hover:text-gray-950 dark:hover:text-slate-50"
>
<span>v{currentVersion}</span>
<svg
@@ -42,8 +42,8 @@ const { currentVersion, versions } = Astro.props;
role="listbox"
aria-label="Select version"
class="absolute top-full left-0 mt-2 min-w-full p-1.5 z-50
bg-gray-50 dark:bg-gray-900
border border-gray-200 dark:border-gray-800
bg-gray-50 dark:bg-slate-900
border border-gray-200 dark:border-slate-700
rounded-lg shadow-lg
opacity-0 invisible -translate-y-1 transition-all duration-150
data-[open]:opacity-100 data-[open]:visible data-[open]:translate-y-0"
@@ -56,9 +56,9 @@ const { currentVersion, versions } = Astro.props;
aria-selected={v === currentVersion}
class:list={[
"block px-3 py-2 font-mono text-sm rounded transition-colors",
"text-gray-600 dark:text-gray-400",
"hover:bg-gray-100 dark:hover:bg-gray-800",
"hover:text-gray-950 dark:hover:text-gray-50",
"text-gray-600 dark:text-slate-400",
"hover:bg-gray-100 dark:hover:bg-slate-800",
"hover:text-gray-950 dark:hover:text-slate-50",
v === currentVersion && [
"bg-sky-500/15 dark:bg-sky-500/20",
"text-sky-600 dark:text-sky-400",

6
src/pages/404.astro
View File

@@ -6,14 +6,14 @@ import Default from "../layouts/Default.astro";
<div class="text-center">
<h1
class="text-[8rem] sm:text-[12rem] font-display font-bold leading-none
text-gray-300 dark:text-gray-700"
text-gray-300 dark:text-slate-700"
>
404
</h1>
<p class="text-xl mb-2 text-gray-600 dark:text-gray-400">
<p class="text-xl mb-2 text-gray-600 dark:text-slate-400">
Page not found
</p>
<p class="text-gray-500 dark:text-gray-500">
<p class="text-gray-500 dark:text-slate-500">
The page you're looking for doesn't exist.
</p>
<a

4
src/pages/index.astro
View File

@@ -57,8 +57,8 @@ const parsed = await parseSpecContent(markdown, version);
<!-- Footer -->
<footer
class="py-8 text-center text-sm
text-gray-500 dark:text-gray-500
border-t border-gray-200 dark:border-gray-800"
text-gray-500 dark:text-slate-500
border-t border-gray-200 dark:border-slate-800"
>
<div class="section-container">
<p>

4
src/pages/spec/[version].astro
View File

@@ -59,8 +59,8 @@ const parsed = await parseSpecContent(markdown, version);
<!-- Footer -->
<footer
class="py-8 text-center text-sm
text-gray-500 dark:text-gray-500
border-t border-gray-200 dark:border-gray-800"
text-gray-500 dark:text-slate-500
border-t border-gray-200 dark:border-slate-800"
>
<div class="section-container">
<p>

18
src/styles/global.css
View File

@@ -62,8 +62,8 @@ html {
}
.dark body {
background-color: #0a0a0a;
color: #fafafa;
background-color: #020617;
color: #f8fafc;
}
/* Typography */
@@ -86,7 +86,7 @@ html {
.dark h4,
.dark h5,
.dark h6 {
color: #fafafa;
color: #f8fafc;
}
h1 {
@@ -133,7 +133,7 @@ html {
}
.dark code {
background-color: rgba(255, 255, 255, 0.1);
background-color: rgba(148, 163, 184, 0.15);
}
pre {
@@ -146,7 +146,7 @@ html {
}
.dark pre {
background-color: #262626;
background-color: #0f172a;
}
pre>code {
@@ -196,7 +196,7 @@ html {
}
.dark blockquote {
color: #a3a3a3;
color: #94a3b8;
}
/* Strong text */
@@ -211,7 +211,7 @@ html {
}
.dark ::selection {
color: #fafafa;
color: #f8fafc;
}
/* Focus styles */
@@ -359,7 +359,7 @@ html {
}
.dark .prose-spec h2 {
border-bottom-color: #262626;
border-bottom-color: #1e293b;
}
.prose-spec h3 {
@@ -367,7 +367,7 @@ html {
}
.dark .prose-spec h3 {
color: #a3a3a3;
color: #94a3b8;
}
.prose-spec img {