docs: align docs site with nexu design system by zoeforfun · Pull Request #418 · nexu-io/nexu

zoeforfun · 2026-03-23T09:12:35Z

Summary

Remap all VitePress CSS tokens (brand, surface, text colors) from the old warm-brown theme to nexu teal (#3DB9CE) design system
Replace favicon-based logos with combined brand SVGs (clover icon + "nexu" text, 16px gap) supporting light/dark mode
Update font stack to Manrope / Inter matching the product UI
Restyle .VPFeature cards (border-radius 16px, subtle shadow, hover lift)
Add GitHubStars.vue — live star count badge in nav bar via GitHub API with sessionStorage cache
Hide default VPSocialLinks icon in favor of the unified GitHub + star badge

Changed files

docs/.vitepress/config.ts — theme-color meta, logo paths, siteTitle: false
docs/.vitepress/theme/custom.css — full CSS variable + component restyling
docs/.vitepress/theme/index.ts — Layout slot injection for GitHubStars
docs/.vitepress/theme/GitHubStars.vue — new component
docs/public/favicon/nexu-logo-light.svg — combined brand logo (dark text)
docs/public/favicon/nexu-logo-dark.svg — combined brand logo (white text)

Test plan

Visit docs site in light mode — verify teal brand colors, Manrope font, card hover effects
Switch to dark mode — verify dark surfaces and text contrast
Check nav bar logo renders correctly (clover + "nexu" text with spacing)
Verify GitHub star badge appears with correct count after page load
Confirm no duplicate GitHub icon in nav bar

Made with Cursor

Summary by CodeRabbit

New Features
- Added GitHub star badge, language switcher, and theme toggle to the docs navbar.
- Preloads JetBrains Mono font and Google Fonts connections; hides the site title.
Style
- Switched docs palette to teal/neutral, updated logo assets and theme color.
- Updated typography, shadows, feature card visuals, pager styling, and hid extra navbar controls.

- Remap VitePress theme tokens (brand colors, surfaces, text) from warm brown to nexu teal (#3DB9CE) - Replace default favicon logos with combined brand SVG (icon + text, 16px gap) for light/dark modes - Update font stack to Manrope/Inter (matching product UI) - Restyle .VPFeature cards to match nexu .card spec (border-radius 16px, subtle shadow, hover lift) - Add GitHubStars.vue: nav bar badge showing live star count via GitHub API with sessionStorage cache - Hide default VPSocialLinks in favor of the integrated badge Made-with: Cursor

coderabbitai · 2026-03-23T09:12:49Z

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Updated the VitePress site theme: changed brand color and logos, added webfont preloads, disabled site title, introduced three navbar controls (LanguageSwitcher, ThemeToggle, GitHubStars), added components for language/theme/stars, and overhauled theme CSS (colors, typography, shadows, feature card and footer styling).

Changes

Cohort / File(s)	Summary
Config `docs/.vitepress/config.ts`	Changed `theme-color` meta to `#3DB9CE`, added Google Fonts preconnect and JetBrains Mono stylesheet, changed logo asset paths to `nexu-logo-*`, and set `themeConfig.siteTitle: false`.
Theme entry & slots `docs/.vitepress/theme/index.ts`	Added `Layout()` wrapper that injects `LanguageSwitcher`, `ThemeToggle`, and `GitHubStars` into the `nav-bar-content-after` slot; retains existing `enhanceApp` behavior.
New Navbar components `docs/.vitepress/theme/GitHubStars.vue`, `docs/.vitepress/theme/LanguageSwitcher.vue`, `docs/.vitepress/theme/ThemeToggle.vue`	Added three Vue SFCs: GitHubStars (fetch + sessionStorage caching + formatted count, silent error handling), LanguageSwitcher (dropdown generation of locale-specific links, focus/hover/keyboard handling), ThemeToggle (toggle appearance via injected `toggle-appearance`, accessible switch attributes).
Styling & tokens `docs/.vitepress/theme/custom.css`	Large CSS overhaul: new teal/neutral color tokens (light/dark), added shadow tokens, updated hero gradients and radial backgrounds, switched to `Manrope/Inter` stack, added font-smoothing and JetBrains Mono preload usage, restyled `.VPFeature` cards (flat backgrounds, border-radius, shadows, hover lift), hid `.VPSocialLinks`, `.VPNavBarAppearance`, `.VPNavBarTranslations`, and updated `.VPDocFooter .pager-link` styles.

Sequence Diagram

sequenceDiagram
    participant GitHubStars as GitHubStars<br/>Component
    participant Session as SessionStorage
    participant GitHubAPI as GitHub REST<br/>API
    participant Nav as Navbar<br/>Badge

    GitHubStars->>Session: check `nexu-gh-stars`
    alt cache hit
        Session-->>GitHubStars: return formatted count
    else cache miss
        GitHubStars->>GitHubAPI: fetch /repos/nexu-io/nexu
        GitHubAPI-->>GitHubStars: return JSON with stargazers_count
        GitHubStars->>GitHubStars: format count (e.g., 1.2k)
        GitHubStars->>Session: store formatted count
    end
    GitHubStars->>Nav: render badge (icon + count)
    Nav-->>GitHubStars: displayed

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 Teal tides and fonts in queue,
Three little widgets join the view,
Stars cached snug, languages near,
Toggle the theme, the docs appear,
A hopping change — refreshed and new! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The PR description includes a clear summary of changes, explains the motivation (design system alignment), lists all affected files, provides a test plan, but does not follow the required template structure with 'What', 'Why', 'How', 'Affected areas', and 'Checklist' sections.	Restructure the description to match the repository template with 'What', 'Why', 'How', 'Affected areas' checkboxes, and completion checklist sections.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'docs: align docs site with nexu design system' clearly and concisely summarizes the main objective of the PR, which is updating the documentation site's visual design and branding to align with the nexu design system.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch docs/design-system-alignment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

cloudflare-workers-and-pages · 2026-03-23T09:12:58Z

Deploying nexu-docs with Cloudflare Pages

Latest commit:	`b590dc0`
Status:	✅ Deploy successful!
Preview URL:	https://393df0b7.nexu-docs.pages.dev
Branch Preview URL:	https://docs-design-system-alignment.nexu-docs.pages.dev

View logs

coderabbitai

Actionable comments posted: 2

🧹 Nitpick comments (1)

docs/.vitepress/theme/custom.css (1)

109-111: Avoid hiding the entire social-links container.

This selector removes all social links, not just GitHub. Prefer targeting only the GitHub item (or removing GitHub from themeConfig.socialLinks directly).

Example CSS narrowing

-.VPSocialLinks {
+.VPSocialLinks a[href*="github.com/nexu-io/nexu"] {
   display: none !important;
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@docs/.vitepress/theme/custom.css` around lines 109 - 111, The CSS rule
currently hides the entire .VPSocialLinks container which removes all social
icons; instead narrow the change to only the GitHub item by either removing
GitHub from themeConfig.socialLinks or replacing the blanket selector
.VPSocialLinks with a selector that targets only the GitHub social item (e.g.,
the specific class/attribute used for the GitHub link within the social links
list) so other social icons remain visible; update the CSS or themeConfig
accordingly and keep .VPSocialLinks untouched.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@docs/.vitepress/theme/custom.css`:
- Around line 61-71: The font-family declarations incorrectly quote generic
single-word family names; update both occurrences so Manrope and Inter are
unquoted (replace 'Manrope' and 'Inter' with Manrope and Inter) while leaving
multi-word families like 'PingFang SC' quoted; change the top declaration and
the block for .VPNavBarTitle .title, .VPHomeHero .name, .vp-doc h1, .vp-doc h2,
.vp-doc h3 to use unquoted Manrope and Inter for consistency with CSS
conventions.

In `@docs/.vitepress/theme/GitHubStars.vue`:
- Around line 35-40: The link with class "gh-badge" in GitHubStars.vue has no
accessible name when the stars prop/computed value is not yet loaded (visible
content is aria-hidden SVGs); add an explicit accessible name by binding an
aria-label (e.g. aria-label using the same expression as the :title: stars ?
`${stars} stars on GitHub` : 'GitHub') or render a visually-hidden text node
inside the anchor when stars is falsy so screen readers always have a readable
label for the link.

---

Nitpick comments:
In `@docs/.vitepress/theme/custom.css`:
- Around line 109-111: The CSS rule currently hides the entire .VPSocialLinks
container which removes all social icons; instead narrow the change to only the
GitHub item by either removing GitHub from themeConfig.socialLinks or replacing
the blanket selector .VPSocialLinks with a selector that targets only the GitHub
social item (e.g., the specific class/attribute used for the GitHub link within
the social links list) so other social icons remain visible; update the CSS or
themeConfig accordingly and keep .VPSocialLinks untouched.

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 5e2a0cdd-8b15-418b-adbf-51f8817ba070

📥 Commits

Reviewing files that changed from the base of the PR and between 458c3dc and 1ab9934.

⛔ Files ignored due to path filters (2)

docs/public/favicon/nexu-logo-dark.svg is excluded by !**/*.svg
docs/public/favicon/nexu-logo-light.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

docs/.vitepress/config.ts
docs/.vitepress/theme/GitHubStars.vue
docs/.vitepress/theme/custom.css
docs/.vitepress/theme/index.ts

- Add custom LanguageSwitcher with fixed order and check-mark indicator - Replace appearance toggle slider with compact ThemeToggle icon button - Hide default VPNavBarTranslations and VPNavBarAppearance - Load JetBrains Mono for star count, reduce font size to 11px - Override VitePress shadow tokens (1–5) for lighter, more translucent feel - Soften VPFeature card shadows and hover effects - Restyle prev/next page links: smaller padding, arrow indicators, subdued text - Add aria-label to GitHubStars for accessibility - Unquote single-word font family names per CSS conventions Made-with: Cursor

coderabbitai Bot reviewed Mar 23, 2026

View reviewed changes

Comment thread docs/.vitepress/theme/custom.css Outdated

Comment thread docs/.vitepress/theme/GitHubStars.vue

zoeforfun requested a review from qiongyu1999 March 23, 2026 10:57

qiongyu1999 approved these changes Mar 23, 2026

View reviewed changes

zoeforfun merged commit 04b63db into main Mar 23, 2026
2 of 3 checks passed

This was referenced Mar 23, 2026

Add workspace and runtime analytics events #411

Merged

docs: add usage & rewards page and fix navbar duplicates #601

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs: align docs site with nexu design system#418

docs: align docs site with nexu design system#418
zoeforfun merged 2 commits intomainfrom
docs/design-system-alignment

zoeforfun commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 23, 2026 •

edited

Loading

Uh oh!

coderabbitai Bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

zoeforfun commented Mar 23, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changed files

Test plan

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Poem

❌ Failed checks (1 inconclusive)

Uh oh!

cloudflare-workers-and-pages Bot commented Mar 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Deploying nexu-docs with Cloudflare Pages

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

zoeforfun commented Mar 23, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented Mar 23, 2026 •

edited

Loading

cloudflare-workers-and-pages Bot commented Mar 23, 2026 •

edited

Loading