chore(docs): Further UI/UX refinements#2151
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (6)
📝 WalkthroughWalkthroughThis PR updates the ENS documentation site by introducing a reusable logo component system with four themed SVG variants, adding responsive header navigation controls, expanding the sidebar Contributing section, and refining link and button styling across multiple pages. ChangesDocumentation UI and Component Updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
There was a problem hiding this comment.
Pull request overview
Minor UI/UX refinements to the ENSnode documentation site: introduces reusable Astro logo components (replacing inline SVGs), improves link styling in markdown content, tweaks sidebar font sizing and dialog-frame button visibility, and makes the SocialIcons override opt out of mobile-adaptive collapsing.
Changes:
- Extracted ENSAdmin/ENSNode logos into shared Astro components and replaced inline SVG in
HostedEnsNodeInstancesandOmnigraphAPIExamplePanels. - Added CSS for underlined body-text links, sidebar nested item sizing, and styled the search dialog close button on mobile.
- Made
HeaderButtonsaccept amobileAdaptableflag, used by theSocialIconsoverride; expanded the Contributing sidebar group by default.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| docs/ensnode.io/src/styles/starlight.css | Adds underlined link styling and sidebar font/social-icon hover rules. |
| docs/ensnode.io/src/styles/globals.css | Styles dialog-frame close button; only hides on ≥50rem screens. |
| docs/ensnode.io/src/components/overrides/SocialIcons.astro | Passes mobileAdaptable={false} to keep icons visible on mobile. |
| docs/ensnode.io/src/components/molecules/OmnigraphAPIExamplePanels.astro | Uses new ENSAdminLogoDark next to the Run-in-ENSAdmin button. |
| docs/ensnode.io/src/components/molecules/HostedEnsNodeInstances.astro | Replaces inline SVG with ENSAdminLogoDark; adds underline classes. |
| docs/ensnode.io/src/components/molecules/HeaderButtons.tsx | Adds optional mobileAdaptable prop controlling responsive visibility. |
| docs/ensnode.io/src/components/atoms/logos/astro/shared-types.ts | New shared AstroLogoProps type. |
| docs/ensnode.io/src/components/atoms/logos/astro/ENSNodeLogoLight.astro | New logo component. |
| docs/ensnode.io/src/components/atoms/logos/astro/ENSNodeLogoDark.astro | New logo component. |
| docs/ensnode.io/src/components/atoms/logos/astro/ENSAdminLogoLight.astro | New logo component. |
| docs/ensnode.io/src/components/atoms/logos/astro/ENSAdminLogoDark.astro | New logo component (replaces inline SVGs). |
| docs/ensnode.io/config/integrations/starlight/sidebar-topics/reference.ts | Expands the Contributing sidebar section by default. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/ensnode.io/src/components/atoms/logos/astro/ENSAdminLogoDark.astro`:
- Line 4: Replace the type assertion on Astro.props with Astro's typed Props
pattern: declare a local type alias (e.g., "type Props = AstroLogoProps") and
then destructure using "const { className, ...props } = Astro.props" (no "as"
assertion). Update the ENSAdminLogoDark.astro component so AstroLogoProps is
used via the Props alias and remove the "as AstroLogoProps" assertion to restore
compile-time prop checking on Astro.props.
In `@docs/ensnode.io/src/components/molecules/HostedEnsNodeInstances.astro`:
- Line 14: Replace the invalid Tailwind class "h-6.5" on the ENSAdminLogoDark
component with a valid utility; update the className on ENSAdminLogoDark to use
either "h-7 w-auto shrink-0" (matches the SVG’s ~28px width) or the arbitrary
value "h-[26px] w-auto shrink-0" if you specifically need 26px, ensuring the
rest of the classes remain unchanged.
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 203-214: The rule for selectors .sl-markdown-content > p
a:not(:has(code)), .sl-markdown-content :is(ul, ol) > li a:not(:has(code)), and
.starlight-aside__content a currently uses transition: all 0.2s ease-in-out
which is too broad; change it to only transition the text-underline-offset (e.g.
transition: text-underline-offset 0.2s ease-in-out) so only the underline offset
is animated and avoid unnecessary style recalculations when hovering (the
&:hover block that sets text-underline-offset: 2px can remain unchanged).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: cd8f790b-d8aa-45bc-8b76-d138ab7ae79b
📒 Files selected for processing (12)
docs/ensnode.io/config/integrations/starlight/sidebar-topics/reference.tsdocs/ensnode.io/src/components/atoms/logos/astro/ENSAdminLogoDark.astrodocs/ensnode.io/src/components/atoms/logos/astro/ENSAdminLogoLight.astrodocs/ensnode.io/src/components/atoms/logos/astro/ENSNodeLogoDark.astrodocs/ensnode.io/src/components/atoms/logos/astro/ENSNodeLogoLight.astrodocs/ensnode.io/src/components/atoms/logos/astro/shared-types.tsdocs/ensnode.io/src/components/molecules/HeaderButtons.tsxdocs/ensnode.io/src/components/molecules/HostedEnsNodeInstances.astrodocs/ensnode.io/src/components/molecules/OmnigraphAPIExamplePanels.astrodocs/ensnode.io/src/components/overrides/SocialIcons.astrodocs/ensnode.io/src/styles/globals.cssdocs/ensnode.io/src/styles/starlight.css
Greptile SummaryThis PR delivers a set of incremental UI/UX refinements to the ENSNode docs site: link underline animations, sidebar font-size/transform fixes, mobile button display logic, and
Confidence Score: 5/5Safe to merge — all changes are scoped to documentation site UI and carry no risk to application logic or data. Every change is confined to CSS, Astro/TSX UI components, and a sidebar config toggle. The duplicate gradient-ID fix is correctly implemented with No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[HeaderButtons.tsx] -->|mobileAdaptable=false| B[SocialIcons.astro\nSidebar slot]
A -->|mobileAdaptable=true default| C[Standard header\nresponsive layout]
D[shared-types.ts\nAstroLogoProps] --> E[ENSAdminLogoDark.astro]
D --> F[ENSAdminLogoLight.astro]
D --> G[ENSNodeLogoDark.astro]
D --> H[ENSNodeLogoLight.astro]
E -->|crypto.randomUUID IDs| I[HostedEnsNodeInstances.astro]
E -->|crypto.randomUUID IDs| J[OmnigraphAPIExamplePanels.astro]
K[starlight.css] -->|body-text link underline transitions| L[.sl-markdown-content links]
K -->|font-size fix| M[nested sidebar items]
K -->|transform: none| N[sidebar social icons]
O[globals.css] -->|display: none always| P[.pagefind-ui__search-clear]
O -->|display: none on desktop| Q[mobile close button]
Reviews (2): Last reviewed commit: "Merge branch 'main' into y3drk/chore/fur..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@Y3drk Nice improvements here, thanks 👍
Lite PR → Further UI/UX refinements
Summary
Why
Testing
typecheck,lint, andtestcommands locally to ensure that the migration didn't break anything, and later confirmed that in our CI workflowNotes for Reviewer (Optional)
Back to Examplesbutton already links to/integrate/omnigraph/exampleswhere all of the examples are listed. Did you have any other location in mind?Pre-Review Checklist (Blocking)