Skip to content

Commit 6d8d549

Browse files
IamCoder18IamCoder18
committed
fix(website): wrap home in BaseLayout, reconcile theme, drop reveal
Review findings on PR #6: - CRITICAL: wrap home in <BaseLayout> (canonical, favicon, OG/Twitter, JSON-LD, ViewTransitions, global.css, FOUC boot). - CRITICAL: standardize theme on 'synapse-theme' + [data-theme] so toggle survives cross-page navigation; update ThemeToggle.tsx and redesign.css @custom-variant dark. - WARNING: drop unused codeToHtml import. - SUGGESTION: lift 0.3.1 to const VERSION; nav badge, install cmd, footer all reference it. - Remove reveal-on-scroll IntersectionObserver from BaseLayout and .reveal rules from global.css. Also: promoted inline <body class> inside slot to a <div> since BaseLayout already renders <body>.
1 parent 3950bba commit 6d8d549

5 files changed

Lines changed: 33 additions & 58 deletions

File tree

‎website/src/components/layout/BaseLayout.astro‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -86,23 +86,5 @@ const ldArray = Array.isArray(jsonLd) ? jsonLd : jsonLd ? [jsonLd] : [];
8686
</head>
8787
<body>
8888
<slot />
89-
<script>
90-
// Reveal-on-scroll (CSS class toggling only; respects prefers-reduced-motion
91-
// because `.reveal` already disables the transition when reduced).
92-
const io = new IntersectionObserver(
93-
(entries) => {
94-
for (const e of entries) {
95-
if (e.isIntersecting) {
96-
e.target.classList.add('is-visible');
97-
io.unobserve(e.target);
98-
}
99-
}
100-
},
101-
{ rootMargin: '0px 0px -10% 0px', threshold: 0.05 },
102-
);
103-
const apply = () => document.querySelectorAll('.reveal').forEach((el) => io.observe(el));
104-
document.addEventListener('DOMContentLoaded', apply);
105-
document.addEventListener('astro:page-load', apply);
106-
</script>
10789
</body>
10890
</html>

‎website/src/components/redesign/ThemeToggle.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,20 @@ import { Moon, Sun } from "lucide-react"
33
import { Button } from "@/components/ui/button"
44

55
export function ThemeToggle() {
6-
const [dark, setDark] = useState(false)
6+
const [dark, setDark] = useState(true)
77

88
useEffect(() => {
9-
setDark(document.documentElement.classList.contains("dark"))
9+
const current = document.documentElement.getAttribute("data-theme") ?? "dark"
10+
setDark(current !== "light")
1011
}, [])
1112

1213
function toggle() {
1314
const next = !dark
1415
setDark(next)
15-
document.documentElement.classList.toggle("dark", next)
16+
const theme = next ? "dark" : "light"
17+
document.documentElement.setAttribute("data-theme", theme)
1618
try {
17-
localStorage.setItem("syn-theme", next ? "dark" : "light")
19+
localStorage.setItem("synapse-theme", theme)
1820
} catch {}
1921
}
2022

‎website/src/pages/index.astro‎

Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
import '@/styles/redesign.css';
3-
import { codeToHtml } from 'shiki';
3+
import BaseLayout from '~/components/layout/BaseLayout.astro';
44
55
import { highlightJava } from '@/lib/highlight';
66
import { QUICKSTART_CODE, PUBSUB_CODE, HARDWARE_CODE } from '@/lib/code-samples';
@@ -104,6 +104,24 @@ const pools = [
104104
105105
const REPO = 'https://github.com/IamCoder18/synapse';
106106
107+
const VERSION = '0.3.1';
108+
const DESCRIPTION =
109+
'A tiny, annotation-driven pub/sub bus for FTC robot code. 40 KB. Zero dependencies. One hardware thread.';
110+
111+
const ld = [
112+
{ '@context': 'https://schema.org', '@type': 'WebSite', name: 'Synapse', url: '/' },
113+
{
114+
'@context': 'https://schema.org',
115+
'@type': 'SoftwareSourceCode',
116+
name: 'Synapse',
117+
description: 'A tiny, annotation-driven pub/sub bus for FIRST Tech Challenge robot code.',
118+
codeRepository: REPO,
119+
programmingLanguage: 'Java',
120+
license: `${REPO}/blob/main/LICENSE`,
121+
author: { '@type': 'Person', name: 'IamCoder18', url: 'https://github.com/IamCoder18' },
122+
},
123+
];
124+
107125
const footerCols = [
108126
{
109127
heading: 'Product',
@@ -135,23 +153,8 @@ const footerCols = [
135153
];
136154
---
137155

138-
<html lang="en">
139-
<head>
140-
<meta charset="utf-8" />
141-
<meta name="viewport" content="width=device-width, initial-scale=1" />
142-
<title>Synapse — Robot code that thinks in signals</title>
143-
<meta
144-
name="description"
145-
content="A tiny, annotation-driven pub/sub bus for FTC robot code. 40 KB. Zero dependencies. One hardware thread."
146-
/>
147-
<script is:inline>
148-
try {
149-
if (localStorage.getItem('syn-theme') === 'dark')
150-
document.documentElement.classList.add('dark');
151-
} catch {}
152-
</script>
153-
</head>
154-
<body class="min-h-dvh overflow-x-hidden">
156+
<BaseLayout title="Synapse" description={DESCRIPTION} jsonLd={ld}>
157+
<div class="min-h-dvh overflow-x-hidden">
155158
<!-- ================= NAV ================= -->
156159
<header
157160
class="sticky top-0 z-50 w-full border-b border-border/60 bg-background/70 backdrop-blur-xl"
@@ -166,7 +169,7 @@ const footerCols = [
166169
<span
167170
class="ml-1 rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary shadow-[0_0_14px_-2px_var(--glow-soft)]"
168171
>
169-
v0.3.1
172+
v{VERSION}
170173
</span>
171174
</a>
172175
<nav class="hidden items-center gap-1 md:flex">
@@ -448,7 +451,7 @@ const footerCols = [
448451
competition table.
449452
</p>
450453
<div id="install" class="w-full max-w-lg scroll-mt-24">
451-
<CopyInstall client:visible cmd='implementation "com.aaravlabs:synapse:0.3.1"' />
454+
<CopyInstall client:visible cmd={`implementation "com.aaravlabs:synapse:${VERSION}"`} />
452455
</div>
453456
<a
454457
href={`${REPO}#readme`}
@@ -482,7 +485,7 @@ const footerCols = [
482485
<div class="flex flex-wrap items-center gap-2">
483486
<span class="rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary">MIT</span>
484487
<span class="rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary">40 KB</span>
485-
<span class="rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary">v0.3.1</span>
488+
<span class="rounded-full border border-primary/40 bg-primary/10 px-2.5 py-0.5 font-mono text-[10px] font-medium text-primary">v{VERSION}</span>
486489
</div>
487490
</div>
488491
{footerCols.map((col) => (
@@ -523,5 +526,5 @@ const footerCols = [
523526
</div>
524527
</div>
525528
</footer>
526-
</body>
527-
</html>
529+
</div>
530+
</BaseLayout>

‎website/src/styles/global.css‎

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -65,19 +65,7 @@ code, pre, kbd {
6565
color: var(--signal-bright);
6666
}
6767

68-
.reveal {
69-
opacity: 0;
70-
transform: translateY(16px);
71-
transition: opacity 600ms ease, transform 600ms ease;
72-
will-change: opacity, transform;
73-
}
74-
.reveal.is-visible {
75-
opacity: 1;
76-
transform: none;
77-
}
78-
7968
@media (prefers-reduced-motion: reduce) {
80-
.reveal { transition: none; transform: none; opacity: 1; }
8169
*, *::before, *::after {
8270
animation-duration: 0.001ms !important;
8371
animation-iteration-count: 1 !important;

‎website/src/styles/redesign.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
@import '@fontsource-variable/geist';
66
@import '@fontsource-variable/jetbrains-mono';
77

8-
@custom-variant dark (&:is(.dark *));
8+
@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
99

1010
@theme {
1111
--font-display: 'Sora Variable', system-ui, sans-serif;

0 commit comments

Comments
 (0)