Skip to content

Commit c81835d

Browse files
committed
fix(landing): left-align terminal mockup text, update PRD to v1.4
Terminal content inherited text-center from hero parent; add text-left. PRD updated: ScrollObserver replaced with inline script (FR-023), copy buttons on landing install section (FR-006/FR-014), asset cleanup.
1 parent 9122c59 commit c81835d

2 files changed

Lines changed: 21 additions & 10 deletions

File tree

PRD.md

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
66

77
# CommitBee Web — Product Requirements Document
88

9-
**Version**: 1.3
9+
**Version**: 1.4
1010
**Date**: 2026-03-13
1111
**Status**: Phase 1 Implemented
1212
**Author**: [Sephyi](https://github.com/Sephyi) + [Claude Opus 4.6](https://www.anthropic.com/news/claude-opus-4-6)
@@ -18,6 +18,7 @@ SPDX-License-Identifier: PolyForm-Noncommercial-1.0.0
1818

1919
| Version | Date | Summary |
2020
| --- | --- | --- |
21+
| 1.4 | 2026-03-13 | Replace ScrollObserver island with inline script in app.rs shell (FR-023 rewrite), copy buttons on landing page install section (FR-006/FR-014), remove nonexistent asset links from HTML shell, architecture file tree update |
2122
| 1.3 | 2026-03-13 | Tailwind v4 CSS-first migration, ScrollObserver island (FR-023 complete), CSS hash resolution, architecture updates |
2223
| 1.2 | 2026-03-13 | Fix stale wget reference in FR-030 (now Rust prerender binary), document bin-target requirement in FR-031, add CLAUDE.md |
2324
| 1.1 | 2026-03-13 | Phase 1 implemented — all FRs built, Leptos 0.8 (was 0.7+), cross-platform Rust prerender binary, web-sys non-optional for island compatibility |
@@ -95,7 +96,7 @@ commitbee-web/
9596
│ ├── bin/
9697
│ │ └── prerender.rs # Cross-platform static HTML pre-renderer
9798
│ ├── lib.rs # Leptos app root + hydrate entry
98-
│ ├── app.rs # Router + HTML shell
99+
│ ├── app.rs # Router + HTML shell (includes inline scroll-reveal script)
99100
│ ├── pages/
100101
│ │ ├── landing.rs # Hero + all landing sections
101102
│ │ ├── docs.rs # Doc page renderer
@@ -109,8 +110,7 @@ commitbee-web/
109110
│ │ ├── doc_search.rs # Fuzzy search island
110111
│ │ ├── doc_sidebar.rs # Docs sidebar navigation
111112
│ │ ├── doc_toc.rs # Right-side table of contents
112-
│ │ ├── scroll_reveal.rs # Scroll animation wrapper (SSR)
113-
│ │ └── scroll_observer.rs # IntersectionObserver island (adds .visible)
113+
│ │ └── scroll_reveal.rs # Scroll animation wrapper (SSR)
114114
│ └── content/
115115
│ └── loader.rs # Build-time markdown loader + frontmatter
116116
├── content/
@@ -164,7 +164,7 @@ CI pre-render (cross-platform Rust binary, zero shell deps):
164164
| `syntect` | Syntax highlighting |
165165
| `serde` + `serde_yaml` | Frontmatter parsing |
166166
| `tower-http` | Static file serving, compression |
167-
| `wasm-bindgen` + `web-sys` | Browser API access (localStorage, IntersectionObserver, Clipboard) — non-optional because `#[island]` macro does not cfg-gate the body |
167+
| `wasm-bindgen` + `web-sys` | Browser API access (localStorage, Clipboard) — non-optional because `#[island]` macro does not cfg-gate the body. IntersectionObserver is now handled by inline script, not WASM. |
168168

169169
## 4. Feature Requirements
170170

@@ -208,7 +208,7 @@ Stylized comparison of commitbee vs. the field on key features. Layered card des
208208

209209
#### FR-006: Install and Quick Start
210210

211-
Terminal-style code blocks with copy-to-clipboard buttons. Shows `cargo install commitbee`, `brew install sephyi/tap/commitbee`, and the zero-config first-run experience. Animated terminal showing the first-run flow.
211+
Terminal-style code blocks with copy-to-clipboard buttons. Shows `cargo install commitbee`, `brew install sephyi/tap/commitbee`, and the zero-config first-run experience. Animated terminal showing the first-run flow. Copy buttons implemented on all install section terminal blocks using `.copy-btn` pattern with `data-code` attributes, activated by a `CodeBlockActivator` island on the landing page.
212212

213213
#### FR-007: Docs Transition Gateway
214214

@@ -255,7 +255,7 @@ Client-side fuzzy search over pre-built search index. `Cmd+K` / `Ctrl+K` keyboar
255255

256256
#### FR-014: Code Blocks
257257

258-
Syntax-highlighted code blocks via `syntect` (rendered at build time). Copy-to-clipboard button on each block. Language label displayed. Bee-themed syntax color scheme for both light and dark modes.
258+
Syntax-highlighted code blocks via `syntect` (rendered at build time). Copy-to-clipboard button on each block. Language label displayed. Bee-themed syntax color scheme for both light and dark modes. Copy-to-clipboard implemented on both docs pages and landing page install section terminal blocks using `.copy-btn` with `data-code` attributes.
259259

260260
#### FR-015: Table of Contents
261261

@@ -281,7 +281,18 @@ Inter for headings and body text. JetBrains Mono for code. Self-hosted fonts in
281281

282282
#### FR-023: Scroll Animations
283283

284-
`IntersectionObserver` via `ScrollObserver` `#[island]` as the baseline implementation (works in all browsers). A single island instance observes all `.reveal` / `.reveal-left` / `.reveal-right` / `.reveal-scale` elements and adds `.visible` on intersection. CSS `animation-timeline: scroll()` as progressive enhancement for Chromium browsers. Motion style: fade-up and slide-in, smooth and organic. Respects `prefers-reduced-motion` — all animations disabled when set.
284+
Scroll reveal is handled by an inline `<script>` in the HTML shell (`src/app.rs`), not a WASM island. The previous `ScrollObserver` `#[island]` approach was replaced because it blocked SSR content — all `.reveal` elements remained invisible until WASM hydrated, defeating the purpose of pre-rendering.
285+
286+
The inline script implementation:
287+
288+
- **Above-fold elements** are revealed synchronously via `getBoundingClientRect()` viewport check (no transition delay, content visible on first paint)
289+
- **Below-fold elements** are animated via `IntersectionObserver` as they scroll into view
290+
- **SPA route changes** are handled by a `MutationObserver` that re-scans for new `.reveal` elements
291+
- **No-JS fallback**: a `<noscript><style>` block makes all `.reveal` content visible without JavaScript
292+
293+
Supports `.reveal`, `.reveal-left`, `.reveal-right`, `.reveal-scale` classes, adding `.visible` on intersection. CSS `animation-timeline: scroll()` remains as progressive enhancement for Chromium browsers. Motion style: fade-up and slide-in, smooth and organic. Respects `prefers-reduced-motion` — all animations disabled when set.
294+
295+
`src/components/scroll_observer.rs` has been deleted. The file tree no longer includes it.
285296

286297
#### FR-024: Hexagonal Motifs
287298

@@ -319,7 +330,7 @@ No API keys, credentials, or secrets in the codebase. The site is entirely stati
319330

320331
### SR-002: Content Security
321332

322-
Self-hosted fonts and assets only. No external script dependencies. No third-party analytics or tracking by default. Content-Security-Policy headers via `<meta>` tag in HTML shell.
333+
Self-hosted fonts and assets only. No external script dependencies. No third-party analytics or tracking by default. Content-Security-Policy headers via `<meta>` tag in HTML shell. Only `favicon.svg` is referenced (no `apple-touch-icon` or `favicon.ico` links — those files do not exist in `public/images/`).
323334

324335
### SR-003: Dependency Auditing
325336

src/pages/landing.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ fn HeroSection() -> impl IntoView {
7676
<div class="w-3 h-3 rounded-full bg-green-400/60"/>
7777
<span class="ml-2 text-xs text-comb">"~/project"</span>
7878
</div>
79-
<div class="p-4 font-mono text-sm text-bark">
79+
<div class="p-4 font-mono text-sm text-bark text-left">
8080
<div class="text-comb">"$ commitbee"</div>
8181
<div class="mt-2 text-comb">"Analyzing 3 staged files..."</div>
8282
<div class="text-comb">"Extracting symbols (tree-sitter)..."</div>

0 commit comments

Comments
 (0)