[Product Homepage Design] Implementation#146
Open
yetone wants to merge 16 commits into
Open
Conversation
added 16 commits
May 12, 2026 03:42
Scaffolds the static MirDB marketing homepage and implements the quick-start section (Scenario 3 / REQ-4 / US-3): - public/index.html shell with anchors for every scenario section - src/components/code-example: dark-themed code block with .copy-btn, Memcached command sample (set/get/add/replace/delete) - src/scripts/clipboard.js + toast.js: navigator.clipboard.writeText with success/error toast notifications and aria-live region - src/styles/theme.css: design tokens including --color-code-bg - tests/unit/code-example.test.js + clipboard.test.js: 12 Jest tests covering DOM structure, dark-theme token, mocked success path, and rejection / graceful-degradation path
Scenario 1 — Hero section displays logo, product name, value proposition, and CTAs (REQ-1, REQ-2, US-1). - Add hero.html partial and hero.css styling - Upgrade the in-page hero in public/index.html with the MirDB logo, one-sentence value-proposition tagline, primary "View on GitHub" CTA (opens in new tab with rel=noopener), and secondary "Read Documentation" CTA pointing to the docs URL - Add hero.logo metadata + align hero.ctas[1].href with links.docs in content.json so the secondary CTA and the canonical docs URL stay in sync - Add hero unit tests (7 cases, all green) covering section presence, logo, h1, tagline content, and both CTA targets All 19 homepage tests pass (hero + existing code-example + clipboard).
Adds the Features section that covers every REQ-3 capability as a
seven-card grid: Memcached protocol, Rust, persistent storage, LSM
tree architecture, skip-list memtable, WAL durability, and background
compaction. Each card has an inline SVG icon, an h3 title, and a
descriptive paragraph, identified by a data-feature attribute keyed
to content.json.
- New: src/components/features/{features.html, features.css}
- New: src/assets/icons/{memcached, rust, persistence, lsm-tree,
skip-list, wal, compaction}.svg standalone icon files
- New: tests/unit/features.test.js covering all 8 scenario test cases
plus a partial-loading regression check
- Update: public/index.html inlines the features section and loads
features.css
- Update: src/data/content.json adds an `icon` field to every feature
- Update: tests/helpers/fixtures.js exports REQUIRED_FEATURE_IDS for
shared assertions
- Add navigation.html with logo, Features, Quick Start, GitHub, Docs, API links - Add navigation.css with sticky header and mobile hamburger breakpoint at 640px - Add navigation.js with smooth scroll, toggle, and Escape key handling - Update index.html to include navigation component and styles - Update main.js to initialize navigation on page load - Add unit tests for nav structure, link attributes, content.json validation - Add integration tests for smooth scroll, hamburger toggle, and keyboard dismissal
Implements Scenario 5 (REQ-6 / US-5): a #status section that renders a
CI build status badge linked to CircleCI (new tab + rel=noopener) and a
SemVer version label sourced from content.json#status.
- New homepage/src/components/status/{status.html,status.css}
- Wire the section into public/index.html and load its stylesheet
- Add tests/unit/status.test.js covering the five scenario test cases
Adds a Roadmap section that enumerates the implemented capabilities (Tokio Memcached text protocol server, LSM tree, skip-list memtable, WAL, minor + major compaction) and planned items (Raft consensus, binary protocol, pluggable compression). Each item carries a data-status="done"|"planned" attribute, an SVG status icon, and an aria-label prefixed with "Done:" / "Planned:" so the visual distinction is conveyed by shape and text — not color — satisfying WCAG 1.4.1. Content lives in src/data/content.json under the existing roadmap key; the "Background compaction" entry was split into "Minor compaction (memtable flush)" and "Major compaction (level merge)" so both phases of the engine are individually called out. Tests cover the five scenario.json test cases plus a partial-loader regression check.
…rs: CI build badge and version"
…brxx-10e711d' into feature/product-homepage-design-brxx-10e711d
…/ REQ-8) Implements the Why MirDB? section comparing MirDB against the three named alternatives in the PRD appendix (Memcached, Redis, RocksDB) and surfaces the key differentiators called out alongside: Rust memory safety, the Memcached protocol, the LSM tree storage engine, built-in compaction, and planned Raft consensus. - src/components/why-mirdb/why-mirdb.html: comparison-card markup with data-competitor attributes for memcached / redis / rocksdb plus a lede paragraph that covers the cross-cutting differentiators. - src/components/why-mirdb/why-mirdb.css: responsive grid layout that collapses to one column under 640px and reuses shared design tokens. - public/index.html: inlines the new section so the static page renders without a build step; adds the stylesheet link. - src/data/content.json: extends whyMirDB entries with richer wording so the array stays in sync with the rendered copy. - tests/unit/why-mirdb.test.js: seven jest+jsdom assertions covering the six scenario test cases plus a standalone-partial regression check.
Scenario 8 / NFR-2: responsive.css introduces three breakpoints that reflow the features grid (1 -> 2 -> 3-4 columns) and collapse the nav to a hamburger at mobile widths. Adds an integration test suite that parses @media blocks and asserts the navigation script's mobile menu toggle behavior under a stubbed matchMedia.
- Create accessibility.css with focus-visible outlines, skip-link, prefers-reduced-motion support, and screen-reader utilities - Add skip-link to index.html and link accessibility.css - Add id="main-content" to <main> for skip-link target - Add axe-core dependency for automated accessibility auditing - Create comprehensive wcag.test.js covering all 8 test cases: * axe-core audit (wcag2a, wcag2aa, wcag21aa) * Alt text validation on all images * Keyboard focusability of interactive elements * accessibility.css rule verification * Semantic landmark structure (header, nav, main, footer) * Color contrast ratio calculation (>= 4.5:1) * Heading hierarchy validation * prefers-reduced-motion media query All 19 accessibility tests and 75 total tests pass.
Captures the differentiation-section pattern from Scenario 7 — lede holds cross-cutting differentiators, one card per competitor keyed by data-competitor attribute, content.json#whyMirDB mirrors card copy, inlined into public/index.html until the build step lands.
…e: WCAG 2.1 AA via axe-core, keyboard, and semantic HTML"
…brxx-10e711d' into feature/product-homepage-design-brxx-10e711d
…budget Implements Scenario 10 — Performance & static generation: * build/build.js — deterministic static-site builder that inlines the homepage shell, concatenates all referenced CSS/JS into single bundles, rewrites references, and copies assets into dist/. * build/lighthouse-budget.json — performance budget (resource sizes, category score >= 90, FCP <= 2000 ms, TBT <= 200 ms). * tests/integration/build-output.test.js — covers artifact existence, section anchors, gzip budget, and byte-for-byte determinism. * tests/performance/lighthouse.test.js — Lighthouse-equivalent audit that scores Performance/Accessibility/Best-Practices/SEO from the built artifacts and asserts the budget thresholds.
…ine and Lighthouse performance budget"
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR implements the requirements for Product Homepage Design.
Generated by Something