Skip to content

feat: DR-7392 Add navigation menu for website/blog#7533

Open
carlagn wants to merge 11 commits intomainfrom
feat/DR-7392-website-nav
Open

feat: DR-7392 Add navigation menu for website/blog#7533
carlagn wants to merge 11 commits intomainfrom
feat/DR-7392-website-nav

Conversation

@carlagn
Copy link
Contributor

@carlagn carlagn commented Feb 19, 2026

Summary by CodeRabbit

  • New Features

    • Redesigned navigation menu with restructured sections including Products, Pricing, Resources, and Partners
    • Added mobile-responsive navigation with menu toggle functionality
    • Integrated Font Awesome icons throughout the interface
  • Style

    • Updated monospace font family for improved visual consistency
    • Enhanced button styling with new link variant
    • Expanded color and size options for UI components

@vercel
Copy link

vercel bot commented Feb 19, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
blog Ready Ready Preview, 💬 4 unresolved Feb 25, 2026 8:33pm
docs Ready Ready Preview, Comment Feb 25, 2026 8:33pm
eclipse Ready Ready Preview, Comment Feb 25, 2026 8:33pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Feb 19, 2026

Walkthrough

This PR introduces a comprehensive web navigation system by replacing the existing HomeLayout with a new WebNavigation component. It adds multiple navigation-related components and hooks, updates design tokens to switch the monospace font from Jetbrains Mono to Monaspace Neon Var, and expands component styling with new color and size variants.

Changes

Cohort / File(s) Summary
Blog Layout Restructuring
apps/blog/src/app/(blog)/layout.tsx, apps/blog/src/app/layout.tsx
Replaces HomeLayout with WebNavigation-based rendering; updates navigation data structure (Products/Pricing/Resources); removes type annotations from baseOptions; normalizes quote conventions and adds FontAwesome Script integration.
Navigation Components
packages/ui/src/components/navigation-menu.tsx, packages/ui/src/components/web-navigation.tsx
Introduces comprehensive navigation system with menu primitives (triggers, links, indicators), responsive mobile support, Logo constant, social links integration, and state management for dropdowns and mobile views.
Utility Components
packages/ui/src/components/fontawesome-web.tsx, packages/ui/src/components/star-count.tsx
Adds FontAwesomeScript component for CDN-based icon loading and StarCount component for displaying formatted GitHub star metrics with dynamic visibility.
Custom Hooks
packages/ui/src/hooks/use-scroll-threshold.ts, packages/ui/src/hooks/use-star-count.ts
Introduces useScrollThreshold for viewport scroll tracking and useStarCount for fetching/caching Prisma GitHub repository star count via API.
Component Variants
packages/eclipse/src/components/action.tsx, packages/eclipse/src/components/button.tsx
Expands action component with text-foreground colors across all variants and new nav size; refactors button base classes, adds link variant with underline styling.
Design Tokens & Styles
packages/eclipse/src/styles/globals.css, packages/eclipse/src/tokens/index.ts, packages/ui/src/styles/globals.css
Migrates monospace font from Jetbrains Mono to Monaspace Neon Var via @font-face declaration and token updates; adds breakpoint variable and transition utility class.
Dependencies
packages/ui/package.json
Adds new workspace dependency @prisma-docs/eclipse.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 5.56% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately reflects the primary change: introducing a new navigation menu component for the website/blog, as evidenced by the addition of WebNavigation, NavigationMenu, and related components across the codebase.

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


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

@github-actions
Copy link
Contributor

github-actions bot commented Feb 19, 2026

🍈 Lychee Link Check Report

3664 links: ✅ 2993 OK | 🚫 5 errors | 🔀 0 redirects | 👻 664 excluded

❌ Errors

./apps/docs/content/docs.v6/guides/permit-io-access-control.mdx

./apps/docs/content/docs.v6/orm/overview/prisma-in-your-stack/graphql.mdx

./apps/docs/content/docs.v6/orm/overview/prisma-in-your-stack/rest.mdx

./apps/docs/content/docs/guides/integrations/permit-io.mdx

./apps/docs/content/docs/orm/core-concepts/api-patterns.mdx


Full Statistics Table
Status Count
✅ Successful 2993
🔀 Redirected 0
👻 Excluded 664
🚫 Errors 5
⛔ Unsupported 2
⏳ Timeouts 0
❓ Unknown 0

Add hooks for GH stargazer and scroll threshold
Update button
Update blog layout with navbar
Update blog layout for mobile
@argos-ci
Copy link

argos-ci bot commented Feb 25, 2026

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) ⚠️ Changes detected (Review) 1 changed Feb 25, 2026, 4:54 PM

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 17

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
packages/eclipse/src/components/button.tsx (1)

15-17: ⚠️ Potential issue | 🟡 Minor

Fix malformed Tailwind utility in error variant (backΩground typo breaks hover styling).

Line 16 contains an invalid character (Ω) in the class name hover:bg-backΩground-error-reverse-strong, preventing the hover state from applying. The corrected utility bg-background-error-reverse-strong is properly defined in your globals.css.

🐛 Proposed patch
       error:
-        "bg-background-error-reverse text-foreground-error-reverse hover:bg-backΩground-error-reverse-strong focus-visible:ring-stroke-error",
+        "bg-background-error-reverse text-foreground-error-reverse hover:bg-background-error-reverse-strong focus-visible:ring-stroke-error",
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/components/button.tsx` around lines 15 - 17, In the
Button component's variant map update the malformed Tailwind class for the
"error" variant: replace the invalid "hover:bg-backΩground-error-reverse-strong"
token with the correct "hover:bg-background-error-reverse-strong" so the hover
state applies; locate the `error` entry in the variants object (in
packages/eclipse/src/components/button.tsx) and fix that class name in the
string of classes.
🧹 Nitpick comments (8)
packages/eclipse/src/components/action.tsx (1)

31-31: Consider aligning the nav size name with the existing scale-based convention.

All other size keys (lg, 2xl, 4xl, 5xl) follow a scale/magnitude naming scheme, while nav is semantic and context-tied. This is workable today, but it sets a precedent where the size map becomes a mix of two incompatible naming systems — the next engineer adding a size has to decide which convention to follow.

If the design system has a scale name that maps to h-10 w-10 (e.g. 3xl), that would be the more internally consistent choice.

♻️ Suggested rename to keep the scale pattern intact
-        nav: "h-10 w-10 p-2.5",
+        "3xl": "h-10 w-10 p-2.5",

Call sites would then use size="3xl" instead of size="nav".

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/components/action.tsx` at line 31, The size map entry
named "nav" should be renamed to a scale-based key (e.g., "3xl") to keep the
sizing convention consistent; update the size map entry (currently `nav: "h-10
w-10"`) to `3xl: "h-10 w-10"` and then replace any uses of size="nav" in the
Action component and its consumers (look for the Action component, its `size`
prop, and any call sites in this package) to use size="3xl" instead so the map
stays scale-based and consistent.
packages/ui/src/components/star-count.tsx (1)

4-4: Replace the any prop type with an explicit interface.

Using any for props defeats TypeScript's type safety, hides the component's public API contract from consumers, and suppresses useful autocomplete.

♻️ Proposed fix
-export const StarCount = ({ className }: any) => {
+interface StarCountProps {
+  className?: string;
+}
+
+export const StarCount = ({ className }: StarCountProps) => {
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/star-count.tsx` at line 4, Replace the use of the
any prop type for the StarCount component with an explicit interface (e.g.,
define StarCountProps with a className?: string) and annotate the component
signature to use that interface (either via React.FC<StarCountProps> or ({
className }: StarCountProps) => ...). Update the export line for the StarCount
component to reference the new StarCountProps interface so callers get proper
typing and autocomplete.
packages/ui/src/hooks/use-scroll-threshold.ts (1)

15-16: Use a passive scroll listener for smoother scrolling.

On Line 15, this handler is read-only, so passive mode is a better default to reduce main-thread scroll blocking risk.

Suggested refactor
-    window.addEventListener("scroll", scrollListener);
-    return () => window.removeEventListener("scroll", scrollListener);
+    const listenerOptions = { passive: true };
+    window.addEventListener("scroll", scrollListener, listenerOptions);
+    return () => window.removeEventListener("scroll", scrollListener, listenerOptions);
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/hooks/use-scroll-threshold.ts` around lines 15 - 16, The
scroll listener is added without passive options causing possible main-thread
scroll blocking; update the window.addEventListener call that registers
scrollListener in use-scroll-threshold.ts to use a passive option (e.g., {
passive: true }) and ensure the corresponding window.removeEventListener uses
the same options or a stored options object so the removal matches; reference
the scrollListener registration/cleanup where window.addEventListener("scroll",
scrollListener) and its return cleanup removeEventListener are defined.
packages/eclipse/src/tokens/index.ts (1)

238-238: Add fallback fonts to monospace token for consistency and resilience.

The monospace token at line 238 is the only font-family value in this token set without a fallback stack. In globals.css, all other typography variables include system fallbacks (--font-family-sans-display: Inter, sans-serif; etc.), but --font-family-mono lacks them. Without fallbacks, typography gracefully degrades if Monaspace Neon Var is unavailable.

♻️ Proposed patch
-    monospace: "Monaspace Neon Var",
+    monospace: "Monaspace Neon Var", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace,
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/tokens/index.ts` at line 238, The monospace token value
"Monaspace Neon Var" has no fallback stack; update the monospace entry in the
tokens export (the monospace token in packages/eclipse/src/tokens/index.ts) to
include a sensible fallback stack (e.g., system/engine monospace names and final
generic monospace) so it matches the other typography tokens and degrades
gracefully when the variable font is unavailable; ensure the string includes
proper comma-separated font names and the final generic "monospace" token and
verify any corresponding CSS variable like --font-family-mono will now receive
the fallback stack.
packages/eclipse/src/styles/globals.css (1)

6-11: Add font-display: swap to optimize font loading and prevent invisible text.

The @font-face rule (lines 6–11) correctly defines the custom font, but lacks the font-display property. Without it, browsers may display invisible text while the custom font loads—a poor user experience. Adding font-display: swap tells the browser to show a fallback font immediately and swap in the custom font once loaded, which is the recommended approach for web fonts.

While making this change, consider reordering the source URLs to prioritize the modern, more efficient woff2 format first.

Suggested refactor
 `@font-face` {
     font-family: "Monaspace Neon Var";
+    font-display: swap;
     src:
-        url("../static/fonts/monaspace_neon_var.woff") format("woff"),
-        url("../static/fonts/monaspace_neon_var.woff2") format("woff2");
+        url("../static/fonts/monaspace_neon_var.woff2") format("woff2"),
+        url("../static/fonts/monaspace_neon_var.woff") format("woff");
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/eclipse/src/styles/globals.css` around lines 6 - 11, Update the
`@font-face` rule for "Monaspace Neon Var" to include font-display: swap and
reorder the src entries to list the modern woff2 file first; specifically modify
the `@font-face` block that defines font-family "Monaspace Neon Var" (and its src
URLs) to add font-display: swap and place
url("../static/fonts/monaspace_neon_var.woff2") before the woff entry so
browsers use the more efficient format first and show fallback text while the
custom font loads.
packages/ui/src/components/navigation-menu.tsx (2)

58-78: Confusing children pattern in NavigationWrapper.

children isn't destructured from props, so {...props} (Line 73) includes children in the spread on the <div>, and then {props.children} is also rendered explicitly on Line 75. This works in React (explicit JSX children win), but it reads as if children are being passed twice. Destructure children for clarity:

♻️ Suggested cleanup
 function NavigationWrapper({
   className,
   mobileOpen,
+  children,
   ...props
 }: React.ComponentPropsWithRef<"div"> & { mobileOpen?: boolean }) {
   const scroll = useScrollThreshold(64);
 
   return (
     <div
       className={cn(
         "transition-navbar max-w-7xl w-full mx-auto py-3 px-6 shadow-drop-high bg-background-neutral-weaker rounded-high flex justify-between align-center",
         mobileOpen && "py-7 px-10 rounded-none md:py-3! md:px-6!",
         className,
         scroll && "max-w-235",
       )}
       {...props}
     >
-      {props.children}
+      {children}
     </div>
   );
 }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/navigation-menu.tsx` around lines 58 - 78, The
NavigationWrapper component is spreading props (which includes children) onto
the <div> and also rendering props.children explicitly, which is confusing;
update NavigationWrapper to destructure children from the props signature (e.g.,
function NavigationWrapper({ className, mobileOpen, children, ...props }...) )
and then remove the duplicated props.children in the JSX so only {children} is
rendered while still spreading ...props onto the div; ensure references to
useScrollThreshold and cn remain unchanged.

322-322: Mobile menu overlay has double space in className.

Line 328: "px-6 py-4 h-auto!" has an extraneous space. Very minor, but since we're here:

-  className="px-6 py-4  h-auto! hover:bg-background-neutral-weak border-b border-stroke-neutral"
+  className="px-6 py-4 h-auto! hover:bg-background-neutral-weak border-b border-stroke-neutral"
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/components/navigation-menu.tsx` at line 322, In the mobile
menu overlay in navigation-menu.tsx (NavigationMenu component), fix the
className string that currently contains a double space: locate the class value
containing "px-6 py-4  h-auto!" and remove the extra space so it reads "px-6
py-4 h-auto!"; update that className usage accordingly.
packages/ui/src/styles/globals.css (1)

129-131: Use Tailwind v4's @utility directive instead of a bare class.

Defining .transition-navbar outside any @layer gives it higher cascade priority than all of Tailwind's layered utilities, making it impossible for Tailwind utilities to override it. Using the @utility directive is the idiomatic way to add a custom utility in Tailwind v4, and it is automatically inserted into the utilities layer alongside all built-in utilities.

♻️ Proposed refactor
-
-.transition-navbar {
-    transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
-}
+
+@utility transition-navbar {
+    transition: max-width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/ui/src/styles/globals.css` around lines 129 - 131, The custom rule
.transition-navbar is defined as a bare class which places it outside Tailwind's
layers and gives it higher specificity; replace it with a Tailwind v4 custom
utility using the `@utility` directive so it is emitted into the utilities layer
(e.g., create a utility named transition-navbar that sets transition: max-width
0.5s cubic-bezier(0.075, 0.82, 0.165, 1)); update the CSS to use `@utility` and
remove the standalone .transition-navbar rule so Tailwind utilities can override
it as intended.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/blog/src/app/`(blog)/layout.tsx:
- Around line 17-22: Update the navigation item's description where text ===
"ORM" in the layout.tsx nav array: replace the incorrect copy-pasted desc
"Managed Postgres for global workloads" with an appropriate ORM description
(e.g., "Lightweight, type-safe ORM for streamlined database access") so the
"ORM" menu entry shows the correct user-facing text.

In `@apps/blog/src/app/layout.tsx`:
- Line 17: The Layout component uses the generic type LayoutProps in the
signature of function Layout({ children }: LayoutProps<"/">) but LayoutProps is
not imported or defined; add an appropriate type import (e.g., import {
LayoutProps } from 'fumadocs-ui') or define a local interface matching the
expected children prop (similar to BaseLayoutProps used elsewhere) and update
the component signature to use that type so TypeScript strict mode compiles
successfully.
- Around line 24-29: The <Script> usage in apps/blog/src/app/layout.tsx is
incorrectly placed inside the <head>; move the next/script <Script> out of the
head and into the layout component body (e.g., alongside or above the rendered
children) so it uses a body placement compatible with its default strategy, or
explicitly set strategy="beforeInteractive" if you must keep it in head; also
remove the duplicate Font Awesome kit by reconciling with the kit injected by
WebNavigation/FontAwesomeScript (choose one kit ID — either 6916e9db27 or
ad485975d2 — and load it only once via the chosen component).

In `@packages/eclipse/src/styles/globals.css`:
- Line 85: The CSS variable --font-family-mono currently uses an unquoted
multi-word font name without a generic fallback; update the declaration for
--font-family-mono to quote the font family name ("Monaspace Neon Var") and
append a generic fallback (monospace) so it matches other --font-family-*
variables and satisfies stylelint rules font-family-name-quotes and
font-family-no-missing-generic-family-keyword.

In `@packages/ui/src/components/fontawesome-web.tsx`:
- Around line 4-8: In the fontawesome-web.tsx component, replace the invalid JSX
prop name "cross-origin" on the script element with the correct camelCase prop
"crossOrigin" so the attribute is rendered; also verify the kit ID value
(ad485975d2) against the other usage (6916e9db27) and correct it if both should
use the same FontAwesome kit ID to avoid mismatched kits. Ensure you only update
the script element in fontawesome-web.tsx and, if needed, update the other file
so both use the intended kit ID consistently.

In `@packages/ui/src/components/navigation-menu.tsx`:
- Line 295: Replace the pervasive any usage in the mobile navigation components
by importing/locating the existing Link interface from web-navigation.tsx and
using it in component props and map callbacks: change the
MobileMenuItemWithSubmenu signature to accept link: Link, change
NavigationMobileMenu to accept { links }: { links: Link[] }, and type the .map
callbacks and sub-item variables as Link (or Link[]) so fields like icon and
desc are compile-time checked; update any auxiliary local types to use Link
where appropriate.
- Around line 118-131: The data-slot attribute on
NavigationMenuPrimitive.Trigger incorrectly contains a Tailwind class
("text-foreground-neutral"); move that utility into the element's className so
data-slot is a single identifier (e.g., "navigation-menu-trigger") and ensure
the className includes cn(navigationMenuTriggerStyle(), "group",
"text-foreground-neutral", className) so the styling is applied; update the JSX
in the NavigationMenuPrimitive.Trigger usage accordingly.

In `@packages/ui/src/components/star-count.tsx`:
- Line 5: The component currently destructures only starCount from useStarCount
and ignores isLoading and error; update the component to also extract isLoading
and error from useStarCount and handle both: when isLoading is true keep the
existing hidden placeholder but make it explicit (e.g., render the "0K" span
with aria-hidden and a data-loading attribute or early return), and when error
is non-null log the error (console.error or the app logger) and render a
sensible fallback or aria-label indicating unavailable instead of silently
showing zero; reference useStarCount, starCount, isLoading, and error when
making these changes.

In `@packages/ui/src/components/web-navigation.tsx`:
- Around line 38-41: The effect that toggles document.body.classList based on
mobileView (useEffect in web-navigation.tsx) lacks a cleanup, so if the
component unmounts while the mobile menu is open the "overflow-hidden" class
persists; update the useEffect to return a cleanup function that always removes
"overflow-hidden" from document.body on unmount and ensure the effect also
removes the class before applying it (or simply remove it in cleanup) so
document scrolling is restored when the component is torn down.
- Around line 20-29: The Link interface is missing the optional icon field used
by MenuNavigationItem and NavigationMobileMenu; update the Link type (and the
nested sub item type) to include icon?: React.ReactNode (or another appropriate
JSX/Component type used in your codebase) so TypeScript can validate data from
apps/blog layout through MenuNavigationItem and NavigationMobileMenu end-to-end.
- Around line 93-98: The mobile menu toggle currently renders an <i> inside
NavigationMenuItem with only an onClick (NavigationMenuItem, setMobileView,
mobileView); replace that with a semantic <button> element inside
NavigationMenuItem so it is focusable and keyboard-activatable, move the
existing onClick to the button, add an accessible label via aria-label (e.g.,
"Toggle navigation menu") and appropriate classes (e.g., the "flex md:hidden"
styling) on the button, and remove reliance on click-only behavior so screen
readers and keyboard users can operate the toggle.

In `@packages/ui/src/hooks/use-scroll-threshold.ts`:
- Around line 6-17: The hook initializes isScrolled false but never checks the
current scroll position on mount; update useEffect (the scrollListener closure)
to run once on mount to set the initial state based on window.scrollY >=
threshold (e.g., call scrollListener() immediately after adding the event
listener or invoke the same logic before adding it) so setIsScrolled reflects
the current position without waiting for the next scroll; ensure cleanup still
removes the same scrollListener and keep threshold in the dependency array.

In `@packages/ui/src/hooks/use-star-count.ts`:
- Line 3: The hook currently fetches GitHub stars directly from GITHUB_API_URL
which will hit unauthenticated rate limits; change useStarCount to call a
server-side endpoint (or Next.js route handler) that adds Authorization: `token
${process.env.GITHUB_TOKEN}` or implements edge caching with revalidate so the
GitHub REST call is made sparingly; specifically, remove direct client fetch to
GITHUB_API_URL in the use-star-count hook and instead fetch from an internal API
route (e.g., /api/github-stars) or a cached route handler that performs the
GitHub request with the GITHUB_TOKEN and returns the star count to the client.
- Around line 28-29: In the catch block inside the useStarCount hook (the
use-star-count.ts function), avoid casting the thrown value to Error and instead
normalize the error to a string before calling setError; update the catch to
derive a safe message (e.g., use typeof err === 'string' ? err : (err && (err as
any).message) || String(err) or a default like 'Unknown error') and pass that
string to setError so setError never receives undefined.
- Around line 15-36: The effect's fetchStarCount can update state after unmount;
fix by creating an AbortController inside useEffect, pass controller.signal into
fetch(GITHUB_API_URL, { signal }), and in the cleanup return call
controller.abort(); inside fetchStarCount handle aborts by ignoring DOMException
with name "AbortError" (or check signal.aborted before calling
setStarCount/setIsLoading/setError) so setStarCount, setIsLoading and setError
are not invoked after unmount.

In `@packages/ui/src/styles/globals.css`:
- Around line 129-131: The .transition-navbar rule applies a width transition
without respecting users' motion preferences; wrap or augment it with a
prefers-reduced-motion media query so that when (prefers-reduced-motion: reduce)
is matched the transition is disabled (set transition: none or remove max-width
transition for .transition-navbar, using !important if necessary to override) to
honor accessibility settings.
- Line 7: The global CSS defines --breakpoint-md in px which changes all md:
utilities and mixes units; change --breakpoint-md to rem (e.g., convert 874px to
rem using the project root font-size) so it matches Tailwind v4 breakpoint units
and avoids build-time sorting issues, and confirm this global change won't break
layouts that expect the original 768px threshold; additionally, replace the
plain .transition-navbar class with a Tailwind v4 `@utility` named
transition-navbar inside the appropriate layer so it supports variants (hover:,
lg:, etc.), and wrap the width transition in a prefers-reduced-motion guard to
disable/limit the animation for users who prefer reduced motion.

---

Outside diff comments:
In `@packages/eclipse/src/components/button.tsx`:
- Around line 15-17: In the Button component's variant map update the malformed
Tailwind class for the "error" variant: replace the invalid
"hover:bg-backΩground-error-reverse-strong" token with the correct
"hover:bg-background-error-reverse-strong" so the hover state applies; locate
the `error` entry in the variants object (in
packages/eclipse/src/components/button.tsx) and fix that class name in the
string of classes.

---

Nitpick comments:
In `@packages/eclipse/src/components/action.tsx`:
- Line 31: The size map entry named "nav" should be renamed to a scale-based key
(e.g., "3xl") to keep the sizing convention consistent; update the size map
entry (currently `nav: "h-10 w-10"`) to `3xl: "h-10 w-10"` and then replace any
uses of size="nav" in the Action component and its consumers (look for the
Action component, its `size` prop, and any call sites in this package) to use
size="3xl" instead so the map stays scale-based and consistent.

In `@packages/eclipse/src/styles/globals.css`:
- Around line 6-11: Update the `@font-face` rule for "Monaspace Neon Var" to
include font-display: swap and reorder the src entries to list the modern woff2
file first; specifically modify the `@font-face` block that defines font-family
"Monaspace Neon Var" (and its src URLs) to add font-display: swap and place
url("../static/fonts/monaspace_neon_var.woff2") before the woff entry so
browsers use the more efficient format first and show fallback text while the
custom font loads.

In `@packages/eclipse/src/tokens/index.ts`:
- Line 238: The monospace token value "Monaspace Neon Var" has no fallback
stack; update the monospace entry in the tokens export (the monospace token in
packages/eclipse/src/tokens/index.ts) to include a sensible fallback stack
(e.g., system/engine monospace names and final generic monospace) so it matches
the other typography tokens and degrades gracefully when the variable font is
unavailable; ensure the string includes proper comma-separated font names and
the final generic "monospace" token and verify any corresponding CSS variable
like --font-family-mono will now receive the fallback stack.

In `@packages/ui/src/components/navigation-menu.tsx`:
- Around line 58-78: The NavigationWrapper component is spreading props (which
includes children) onto the <div> and also rendering props.children explicitly,
which is confusing; update NavigationWrapper to destructure children from the
props signature (e.g., function NavigationWrapper({ className, mobileOpen,
children, ...props }...) ) and then remove the duplicated props.children in the
JSX so only {children} is rendered while still spreading ...props onto the div;
ensure references to useScrollThreshold and cn remain unchanged.
- Line 322: In the mobile menu overlay in navigation-menu.tsx (NavigationMenu
component), fix the className string that currently contains a double space:
locate the class value containing "px-6 py-4  h-auto!" and remove the extra
space so it reads "px-6 py-4 h-auto!"; update that className usage accordingly.

In `@packages/ui/src/components/star-count.tsx`:
- Line 4: Replace the use of the any prop type for the StarCount component with
an explicit interface (e.g., define StarCountProps with a className?: string)
and annotate the component signature to use that interface (either via
React.FC<StarCountProps> or ({ className }: StarCountProps) => ...). Update the
export line for the StarCount component to reference the new StarCountProps
interface so callers get proper typing and autocomplete.

In `@packages/ui/src/hooks/use-scroll-threshold.ts`:
- Around line 15-16: The scroll listener is added without passive options
causing possible main-thread scroll blocking; update the window.addEventListener
call that registers scrollListener in use-scroll-threshold.ts to use a passive
option (e.g., { passive: true }) and ensure the corresponding
window.removeEventListener uses the same options or a stored options object so
the removal matches; reference the scrollListener registration/cleanup where
window.addEventListener("scroll", scrollListener) and its return cleanup
removeEventListener are defined.

In `@packages/ui/src/styles/globals.css`:
- Around line 129-131: The custom rule .transition-navbar is defined as a bare
class which places it outside Tailwind's layers and gives it higher specificity;
replace it with a Tailwind v4 custom utility using the `@utility` directive so it
is emitted into the utilities layer (e.g., create a utility named
transition-navbar that sets transition: max-width 0.5s cubic-bezier(0.075, 0.82,
0.165, 1)); update the CSS to use `@utility` and remove the standalone
.transition-navbar rule so Tailwind utilities can override it as intended.

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 87366be and 1e3211a.

⛔ Files ignored due to path filters (3)
  • packages/eclipse/src/static/fonts/monaspace_neon_var.woff is excluded by !**/*.woff
  • packages/eclipse/src/static/fonts/monaspace_neon_var.woff2 is excluded by !**/*.woff2
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (14)
  • apps/blog/src/app/(blog)/layout.tsx
  • apps/blog/src/app/layout.tsx
  • packages/eclipse/src/components/action.tsx
  • packages/eclipse/src/components/button.tsx
  • packages/eclipse/src/styles/globals.css
  • packages/eclipse/src/tokens/index.ts
  • packages/ui/package.json
  • packages/ui/src/components/fontawesome-web.tsx
  • packages/ui/src/components/navigation-menu.tsx
  • packages/ui/src/components/star-count.tsx
  • packages/ui/src/components/web-navigation.tsx
  • packages/ui/src/hooks/use-scroll-threshold.ts
  • packages/ui/src/hooks/use-star-count.ts
  • packages/ui/src/styles/globals.css

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant