Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 44 additions & 19 deletions src/pages/index.astro
Original file line number Diff line number Diff line change
@@ -1,17 +1,34 @@
---
/** Per-request hostname selects featured product — must not prerender to static HTML. */
export const prerender = false;

import BaseLayout from '../layouts/BaseLayout.astro';
import LayoutCurrent from '../components/LayoutCurrent.astro';
import LayoutA from '../components/LayoutA.astro';
import LayoutB from '../components/LayoutB.astro';
import LayoutC from '../components/LayoutC.astro';

const hostname = Astro.url.hostname;
const hostLower = hostname.toLowerCase();
const featuredParam = Astro.url.searchParams.get('featured');
const layoutParam = Astro.url.searchParams.get('layout');
const protoGate = Astro.url.searchParams.get('proto') === '1';

/** Dev / preview, or production opt-in via ?proto=1 — hide on canonical marketing domains otherwise */
const showProtoSwitcher =
import.meta.env.DEV ||
protoGate ||
hostLower === 'localhost' ||
hostLower.startsWith('127.') ||
hostLower.endsWith('.workers.dev') ||
hostLower.endsWith('.pages.dev');

/** On git-rain hosts, hostname already picks rain — hide Domain row when bar is open */
const showProtoDomainGroup = showProtoSwitcher && !hostLower.includes('git-rain');

const featured: 'fire' | 'rain' = featuredParam === 'rain' ? 'rain'
: featuredParam === 'fire' ? 'fire'
: hostname.includes('git-rain') ? 'rain'
: hostLower.includes('git-rain') ? 'rain'
: 'fire';

const layout: 'current' | 'a' | 'b' | 'c' = layoutParam === 'a' ? 'a'
Expand All @@ -26,10 +43,12 @@ const description = featured === 'rain'
: 'Multi-repo checkpoint with git-fire, reverse sync with git-rain, plus git-testkit and git-harness for serious Git automation and tests.';

function protoUrl(f: string, l: string): string {
const parts: string[] = [];
if (f !== 'fire') parts.push(`featured=${f}`);
if (l !== 'current') parts.push(`layout=${l}`);
return parts.length ? `?${parts.join('&')}` : '?';
const params = new URLSearchParams();
if (f !== 'fire') params.set('featured', f);
if (l !== 'current') params.set('layout', l);
if (protoGate) params.set('proto', '1');
const qs = params.toString();
return qs ? `?${qs}` : '?';
}
---

Expand All @@ -39,21 +58,27 @@ function protoUrl(f: string, l: string): string {
{layout === 'c' && <LayoutC featured={featured} />}
{layout === 'current' && <LayoutCurrent featured={featured} />}

<div class="proto-toggle" aria-label="Prototype switcher">
<div class="proto-toggle__group">
<span class="proto-toggle__label">Domain</span>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'fire' }]} href={protoUrl('fire', layout)}>fire.*</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'rain' }]} href={protoUrl('rain', layout)}>rain.*</a>
</div>
<div class="proto-toggle__sep"></div>
<div class="proto-toggle__group">
Comment thread
cursor[bot] marked this conversation as resolved.
<span class="proto-toggle__label">Layout</span>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'current' }]} href={protoUrl(featured, 'current')}>now</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'a' }]} href={protoUrl(featured, 'a')}>A</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'b' }]} href={protoUrl(featured, 'b')}>B</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'c' }]} href={protoUrl(featured, 'c')}>C</a>
{showProtoSwitcher && (
<div class="proto-toggle" aria-label="Prototype switcher">
{showProtoDomainGroup && (
<>
<div class="proto-toggle__group">
<span class="proto-toggle__label">Domain</span>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'fire' }]} href={protoUrl('fire', layout)}>fire.*</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': featured === 'rain' }]} href={protoUrl('rain', layout)}>rain.*</a>
</div>
<div class="proto-toggle__sep" aria-hidden="true"></div>
</>
)}
<div class="proto-toggle__group">
<span class="proto-toggle__label">Layout</span>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'current' }]} href={protoUrl(featured, 'current')}>now</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'a' }]} href={protoUrl(featured, 'a')}>A</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'b' }]} href={protoUrl(featured, 'b')}>B</a>
<a class:list={['proto-toggle__btn', { 'proto-toggle__btn--active': layout === 'c' }]} href={protoUrl(featured, 'c')}>C</a>
</div>
Comment thread
coderabbitai[bot] marked this conversation as resolved.
</div>
</div>
)}

<script>
import { initInstallPickers } from '../scripts/install-pickers.ts';
Expand Down
16 changes: 14 additions & 2 deletions src/styles/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -381,6 +381,19 @@ a:hover {
scroll-margin-top: 5.5rem;
}

/* Library sections — top stripe + tinted dividers (same tokens as .site-nav a[data-project]) */
#testkit.section,
#testkit.feature-row {
border-top: 3px solid var(--color-testkit);
border-bottom-color: color-mix(in srgb, var(--color-testkit) 45%, var(--color-border));
}

#harness.section,
#harness.feature-row {
border-top: 3px solid var(--color-harness);
border-bottom-color: color-mix(in srgb, var(--color-harness) 45%, var(--color-border));
}

.js [data-reveal] {
opacity: 0;
transform: translateY(14px);
Expand Down Expand Up @@ -804,9 +817,8 @@ a:hover {
.section--rich .wrap { grid-template-columns: 1fr; }
}

/* Prototype switcher — hidden in production; re-enable by removing display:none */
/* Prototype switcher — only in DOM when enabled server-side (see index.astro) */
.proto-toggle {
display: none;
position: fixed;
bottom: var(--space-lg);
left: 50%;
Expand Down
Loading