Various little tweaks

Author: vdavid

.env.example

@@ -6,5 +6,5 @@ PUBLIC_CORS_PROXY_URL=https://cors.isomorphic-git.org
 # PUBLIC_SHARED_CACHE_URL=https://your-proxy.workers.dev
 
 # Optional Umami analytics. Both are required to enable tracking.
-# PUBLIC_ANALYTICS_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
 # PUBLIC_ANALYTICS_URL=https://umami.yourdomain.com
+# PUBLIC_ANALYTICS_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

docs/deploying.md

@@ -70,7 +70,7 @@ This creates a Pages project named `git-strata`. The actual deployments happen f
 
 ## Step 5: Set up the custom domain
 
-1. In the [Cloudflare dashboard](https://dash.cloudflare.com/), go to **Workers & Pages > git-strata > Custom
+1. In the [Cloudflare dashboard](https://dash.cloudflare.com/), go to **Compute > Workers & Pages > git-strata > Custom
    domains**.
 2. Add your domain (for example, `gitstrata.yourdomain.com`).
 3. Cloudflare will auto-create the DNS record if your domain's DNS is managed by Cloudflare.

docs/stra-git-raphy.md

@@ -0,0 +1,16 @@
+The landing logo thing is a **state machine with 6 phases** managing the interactive hover behavior:
+
+1. **`initial`**: the CSS animation is playing (tig→git on page load). No hover reactions.
+2. **`showing-git`**: default state after the initial animation. Waiting for interaction. The mouse must leave and
+   re-enter to arm the hover trigger (`needsFreshEnter` flag).
+3. **`hover-pending`**: mouse is over "git", 1-sec timer running. If the mouse leaves before 1s, cancels and goes back
+   to `showing-git`.
+4. **`animating-to-tig`**: git→tig reverse animation running (2s). All hover events ignored.
+5. **`showing-tig`**: text reads "Stratigraphy". Hovering cancels the revert timer; leaving starts/restarts the 5-sec
+   revert timer.
+6. **`animating-to-git`**: tig→git forward animation running (2s). All hover events ignored. On finish, goes to
+   `showing-git` with `needsFreshEnter = true` (mouse must leave and re-enter).
+
+The subsequent animations use the **Web Animations API** (`element.animate()`) to interpolate the registered
+`@property --tig-swap`, so the same CSS `sin()`/`cos()` transforms drive the circular path in both directions.
+`prefers-reduced-motion` is respected (animations become near-instant).

knip.config.ts

@@ -4,6 +4,7 @@ const config: KnipConfig = {
 	entry: ['src/routes/**/+*.{ts,svelte}', 'src/lib/worker/analyzer.worker.ts'],
 	project: ['src/**/*.{ts,svelte}'],
 	ignore: ['src/app.d.ts'],
+	ignoreBinaries: ['wrangler'],
 	ignoreDependencies: ['@vitest/coverage-v8', 'buffer', 'tailwindcss']
 };
 

scripts/check/checks/frontend-svelte-check.go

@@ -18,7 +18,8 @@ func RunSvelteCheck(ctx *CheckContext) (CheckResult, error) {
 	}
 
 	// Check for warnings in output
-	if strings.Contains(output, " warning") && !strings.Contains(output, "0 warnings") {
+	lower := strings.ToLower(output)
+	if strings.Contains(lower, " warning") && !strings.Contains(lower, "0 warnings") {
 		return CheckResult{}, fmt.Errorf("svelte-check found warnings\n%s", indentOutput(output))
 	}
 

src/lib/components/PipelineProgress.svelte

@@ -406,6 +406,8 @@ ${statBlock}`;
 	};
 </script>
 
+<!-- Click-outside/Escape handler for dismissing info popups, not an interactive control -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <div
 	class="strata-card p-5"
 	role="region"

src/routes/+page.svelte

@@ -88,7 +88,8 @@
 		}
 	});
 
-	// Measure tig character widths after fonts load, so the swap animation is pixel-perfect
+	// Measure tig character widths after fonts load, so the swap animation is pixel-perfect.
+	// Also listens for animationend to hand off from the initial CSS animation to JS control.
 	$effect(() => {
 		if (!tigGroupEl || !tigTEl || !tigIEl || !tigGEl) return;
 		const group = tigGroupEl;
@@ -104,6 +105,110 @@
 			group.style.setProperty('--tig-dg', `${(wt + wi) / fontSize}em`);
 			group.style.setProperty('--tig-di', `${(wg - wt) / fontSize}em`);
 		});
+		group.addEventListener('animationend', handleTigAnimationEnd);
+		return () => group.removeEventListener('animationend', handleTigAnimationEnd);
+	});
+
+	// --- Tig↔git interactive hover swap ---
+	type SwapPhase =
+		| 'initial'
+		| 'showing-git'
+		| 'hover-pending'
+		| 'animating-to-tig'
+		| 'showing-tig'
+		| 'animating-to-git';
+
+	let swapPhase: SwapPhase = 'initial';
+	let swapNeedsFreshEnter = true;
+	let swapIsHovering = false;
+	let swapHoverTimer: ReturnType<typeof setTimeout> | undefined;
+	let swapRevertTimer: ReturnType<typeof setTimeout> | undefined;
+	let swapAnim: Animation | null = null;
+
+	const swapAnimate = (from: number, to: number, onDone: () => void) => {
+		swapAnim?.cancel();
+		swapAnim = null;
+		if (!tigGroupEl) return;
+		const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		tigGroupEl.style.setProperty('--tig-swap', String(from));
+		swapAnim = tigGroupEl.animate([{ '--tig-swap': String(from) }, { '--tig-swap': String(to) }], {
+			duration: reducedMotion ? 1 : 2000,
+			easing: 'linear',
+			fill: 'forwards'
+		});
+		swapAnim.addEventListener(
+			'finish',
+			() => {
+				tigGroupEl?.style.setProperty('--tig-swap', String(to));
+				swapAnim?.cancel();
+				swapAnim = null;
+				onDone();
+			},
+			{ once: true }
+		);
+	};
+
+	const swapStartRevertTimer = () => {
+		if (swapRevertTimer) clearTimeout(swapRevertTimer);
+		swapRevertTimer = setTimeout(() => {
+			swapRevertTimer = undefined;
+			swapPhase = 'animating-to-git';
+			swapAnimate(0, 1, () => {
+				swapPhase = 'showing-git';
+				swapNeedsFreshEnter = swapIsHovering;
+			});
+		}, 5000);
+	};
+
+	const handleTigAnimationEnd = (e: AnimationEvent) => {
+		if (e.animationName !== 'tig-swap-anim' || swapPhase !== 'initial') return;
+		if (!tigGroupEl) return;
+		tigGroupEl.style.animation = 'none';
+		tigGroupEl.style.setProperty('--tig-swap', '1');
+		swapPhase = 'showing-git';
+		swapNeedsFreshEnter = swapIsHovering;
+	};
+
+	const handleTigMouseEnter = () => {
+		swapIsHovering = true;
+		if (swapPhase === 'showing-git' && !swapNeedsFreshEnter) {
+			swapPhase = 'hover-pending';
+			swapHoverTimer = setTimeout(() => {
+				swapHoverTimer = undefined;
+				swapPhase = 'animating-to-tig';
+				swapAnimate(1, 0, () => {
+					swapPhase = 'showing-tig';
+					if (!swapIsHovering) swapStartRevertTimer();
+				});
+			}, 500);
+		} else if (swapPhase === 'showing-tig') {
+			if (swapRevertTimer) {
+				clearTimeout(swapRevertTimer);
+				swapRevertTimer = undefined;
+			}
+		}
+	};
+
+	const handleTigMouseLeave = () => {
+		swapIsHovering = false;
+		if (swapPhase === 'showing-git') {
+			swapNeedsFreshEnter = false;
+		} else if (swapPhase === 'hover-pending') {
+			if (swapHoverTimer) clearTimeout(swapHoverTimer);
+			swapHoverTimer = undefined;
+			swapPhase = 'showing-git';
+		} else if (swapPhase === 'showing-tig') {
+			swapStartRevertTimer();
+		}
+	};
+
+	// Cleanup swap timers/animation on unmount
+	$effect(() => {
+		return () => {
+			if (swapHoverTimer) clearTimeout(swapHoverTimer);
+			if (swapRevertTimer) clearTimeout(swapRevertTimer);
+			swapAnim?.cancel();
+		};
 	});
 
 	const startTimer = (kind: 'clone' | 'process') => {
@@ -366,11 +471,18 @@
 	<div class="relative py-4 text-center sm:py-6">
 		<div class="strata-hero-lines"></div>
 		<div class="relative">
+			<!-- Decorative tig↔git animation easter egg, not an interactive control -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			<!-- prettier-ignore -->
 			<h1
 				class="text-3xl font-bold tracking-tight text-[var(--color-text)] sm:text-4xl lg:text-5xl"
 				style="font-family: var(--font-sans); letter-spacing: -0.025em;"
-			>Stra<span class="tig-group" bind:this={tigGroupEl}><span class="tig-char tig-t text-[var(--color-accent)]" bind:this={tigTEl}>t</span><span class="tig-char tig-i text-[var(--color-accent)]" bind:this={tigIEl}>i</span><span class="tig-char tig-g text-[var(--color-accent)]" bind:this={tigGEl}>g</span></span>raphy for your code</h1>
+			>Stra<span
+				class="tig-group"
+				bind:this={tigGroupEl}
+				onmouseenter={handleTigMouseEnter}
+				onmouseleave={handleTigMouseLeave}
+			><span class="tig-char tig-t text-[var(--color-accent)]" bind:this={tigTEl}>t</span><span class="tig-char tig-i text-[var(--color-accent)]" bind:this={tigIEl}>i</span><span class="tig-char tig-g text-[var(--color-accent)]" bind:this={tigGEl}>g</span></span>raphy for your code</h1>
 			<p
 				class="mx-auto mt-4 max-w-lg text-sm leading-relaxed text-[var(--color-text-secondary)] sm:text-base"
 				style="font-family: var(--font-sans);"