chore(docs): new ensnode.io UI/UX refinements#2190
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
2 Skipped Deployments
|
|
|
Caution Review failedFailed to post review comments 📝 WalkthroughWalkthroughThis PR converts MDX admonitions to Starlight ChangesDocumentation content and styling updates
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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
This PR refines the ensnode.io docs UI styling and standardizes several docs callouts, while adding “unigraph plugin required” cautions to Unigraph SQL example pages.
Changes:
- Adjust docs CSS (heading/link styling, tablist alignment, and a global text color tweak).
- Add
unigraphplugin requirement callouts to Unigraph SQL example docs. - Replace Starlight
:::tip/:::cautiondirectives with the<Aside>component in walkthrough MDX files.
Reviewed changes
Copilot reviewed 12 out of 12 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| docs/ensnode.io/src/styles/starlight.css | Updates typography/link styling and adds tablist alignment styles. |
| docs/ensnode.io/src/styles/globals.css | Tweaks a global text color CSS variable. |
| docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdx | Adds a caution callout about needing the unigraph plugin. |
| docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdx | Adds a caution callout about needing the unigraph plugin. |
| docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdx | Adds a caution callout about needing the unigraph plugin. |
| docs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdx | Adds a caution callout about needing the unigraph plugin. |
| docs/ensnode.io/src/components/walkthroughs/quickstart/v1.15.0.mdx | Converts an admonition block to <Aside>. |
| docs/ensnode.io/src/components/walkthroughs/quickstart/v1.13.1.mdx | Converts an admonition block to <Aside>. |
| docs/ensnode.io/src/components/walkthroughs/enssdk/v1.15.0.mdx | Converts admonitions to <Aside> blocks. |
| docs/ensnode.io/src/components/walkthroughs/enssdk/v1.13.1.mdx | Converts admonitions to <Aside> blocks and adds the needed import. |
| docs/ensnode.io/src/components/walkthroughs/enskit/v1.15.0.mdx | Converts admonitions to <Aside> blocks and adds the needed import. |
| docs/ensnode.io/src/components/walkthroughs/enskit/v1.13.1.mdx | Converts admonitions to <Aside> blocks and adds the needed import. |
💡 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: 1
🤖 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/walkthroughs/enssdk/v1.15.0.mdx`:
- Around line 33-35: The MDX file uses the Aside component but only imports
LinkCard; update the MDX imports to include Aside so the component resolves at
build time: locate the import statement that references LinkCard (e.g., the
top-level import line importing LinkCard) and add Aside to the named imports
list so both LinkCard and Aside are imported; also apply the same import fix for
the other occurrences mentioned (lines 107-109) to prevent MDX build failures.
🪄 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: d1f0b6f8-9c64-4ada-9f76-38bc3171a883
📒 Files selected for processing (12)
docs/ensnode.io/src/components/walkthroughs/enskit/v1.13.1.mdxdocs/ensnode.io/src/components/walkthroughs/enskit/v1.15.0.mdxdocs/ensnode.io/src/components/walkthroughs/enssdk/v1.13.1.mdxdocs/ensnode.io/src/components/walkthroughs/enssdk/v1.15.0.mdxdocs/ensnode.io/src/components/walkthroughs/quickstart/v1.13.1.mdxdocs/ensnode.io/src/components/walkthroughs/quickstart/v1.15.0.mdxdocs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/account-domains.mdxdocs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/domain-by-name.mdxdocs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/index.mdxdocs/ensnode.io/src/content/docs/docs/integrate/unigraph/examples/indexing-status.mdxdocs/ensnode.io/src/styles/globals.cssdocs/ensnode.io/src/styles/starlight.css
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
docs/ensnode.io/src/components/overrides/Hero.astro (1)
36-46:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winVerify that
-translate-x-1/10is a valid Tailwind class (duplicate instance).This gradient layer also uses
-translate-x-1/10. Please ensure this class is defined in your Tailwind configuration, as it's not part of the default Tailwind translate fractions. See the previous comment on lines 26-34 for verification steps.If the class is not defined, apply the same fix here:
- class="absolute -translate-x-1/10 inset-0 -z-0 m-auto aspect-square w-[130%] max-w-[700px] rounded-full + class="absolute -translate-x-[10%] inset-0 -z-0 m-auto aspect-square w-[130%] max-w-[700px] rounded-full🤖 Prompt for 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. In `@docs/ensnode.io/src/components/overrides/Hero.astro` around lines 36 - 46, The gradient layer div uses a non-standard Tailwind class "-translate-x-1/10"; verify in your Tailwind config whether this custom translate value exists (theme.extend.translate) and if not, either add the 1/10 value there or replace "-translate-x-1/10" in the aria-hidden gradient div (and the other duplicate instance) with a valid Tailwind class (e.g., "-translate-x-1/12" or "-translate-x-1/4") so both occurrences (the aria-hidden gradient div and the earlier element) are consistent and valid.
🤖 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/overrides/Hero.astro`:
- Around line 26-34: The gradient layer uses a non-standard Tailwind class
"-translate-x-1/10" which isn’t generated by your CSS; in the Hero component
(the inner div with aria-hidden="true" that builds the radial gradient) replace
that token with a Tailwind arbitrary value such as "-translate-x-[10%]" so the
translation is applied correctly and picked up by the build. Ensure you update
the class string on the gradient layer div (the one with class starting
"absolute -translate-x-1/10 inset-0...") to use the arbitrary-percent syntax.
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 347-376: The CSS uses hardcoded colors for selected/hover sidebar
states—update to use design tokens: add new root variables (e.g.
--sl-sidebar-selected-bg, --sl-sidebar-selected-fg,
--sl-sidebar-selected-icon-bg, --sl-sidebar-hover-icon-fg) in :root and then
replace the literal color values in the selectors
a.starlight-sidebar-topics-current, `#starlight__sidebar` a[aria-current="page"],
a.starlight-sidebar-topics-current .starlight-sidebar-topics-icon,
.starlight-sidebar-topics a:hover .starlight-sidebar-topics-icon, and
.starlight-sidebar-topics-icon with var(--token-name, fallback) references;
preserve visual intent (alpha/fallbacks) and keep or remove !important only if
necessary to maintain specificity.
- Around line 409-486: The aside variants (.starlight-aside--tip,
.starlight-aside--caution, .starlight-aside--note) use hardcoded hex colors and
the font-family in .starlight-aside__content is declared incorrectly; add
design-token CSS custom properties in :root (e.g. --aside-tip-color,
--aside-caution-color, --aside-note-color) and replace the hardcoded colors in
those selectors with var(...) and use color-mix() or rgba() against the token to
recreate the translucent borders/backgrounds; also fix .starlight-aside__content
font-family to use quoted font name with fallbacks (e.g. "Inter", system-ui,
sans-serif) instead of Inter alone, and update any pre background/border rules
(inside .starlight-aside--caution) to use the tokens as well.
---
Duplicate comments:
In `@docs/ensnode.io/src/components/overrides/Hero.astro`:
- Around line 36-46: The gradient layer div uses a non-standard Tailwind class
"-translate-x-1/10"; verify in your Tailwind config whether this custom
translate value exists (theme.extend.translate) and if not, either add the 1/10
value there or replace "-translate-x-1/10" in the aria-hidden gradient div (and
the other duplicate instance) with a valid Tailwind class (e.g.,
"-translate-x-1/12" or "-translate-x-1/4") so both occurrences (the aria-hidden
gradient div and the earlier element) are consistent and valid.
🪄 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: c1eecbf7-3f9f-4554-95e7-65d8a3feb00c
⛔ Files ignored due to path filters (2)
docs/ensnode.io/src/assets/hero_bg_image.pngis excluded by!**/*.pngdocs/ensnode.io/src/assets/hero_image.pngis excluded by!**/*.png
📒 Files selected for processing (3)
docs/ensnode.io/src/components/overrides/Hero.astrodocs/ensnode.io/src/layouts/Layout.astrodocs/ensnode.io/src/styles/starlight.css
💤 Files with no reviewable changes (1)
- docs/ensnode.io/src/layouts/Layout.astro
Greptile SummaryThis PR applies UI/UX refinements to the ensnode.io documentation site: new styled aside callouts (tip/note/caution/danger), sidebar restyle with custom SVG icons, updated hero section, and a fix for
Confidence Score: 5/5Pure documentation UI/UX changes with no application logic; safe to merge. All changes are scoped to CSS, Astro component markup, and MDX content. The aside rendering fix (converting walkthrough files from shorthand No files require special attention. Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[starlight.css] --> B[Aside variants]
A --> C[Sidebar]
A --> D[Tabs fix]
B --> B1[tip - green 007c23]
B --> B2[note - blue 3b82f6]
B --> B3[caution - orange f97316]
B --> B4[danger - rose f43f5e]
C --> C1[Active state - subtle tint]
C --> C2[Topic icons via CSS mask]
C --> C3[Hover state tokens]
C2 --> C2a[integrate icon]
C2 --> C2b[services icon]
C2 --> C2c[self-host icon]
C2 --> C2d[reference icon]
C2 --> C2e[hosted-instances icon]
Reviews (5): Last reviewed commit: "Style aside--danger variant, change ip ..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| color: var(--aside-caution-color); | ||
| } | ||
|
|
||
| & a { |
There was a problem hiding this comment.
--aside-tip-color is rose, not the conventional tip green
--aside-tip-color is set to #f43f5e (rose-500), while Starlight's own default for tip is green and danger is red. Users familiar with documentation conventions may interpret a rose/red callout as a danger or error, not a tip — making the semantic meaning of the callout unclear at a glance. Was a green like #22c55e (green-500) intended, or is this a deliberate divergence from the Figma designs?
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
There was a problem hiding this comment.
Using the rose color is explicitly stated in our Figma. Following the directions from there
…ide types where necessary
lightwalker-eth
left a comment
lightwalker-eth
left a comment
There was a problem hiding this comment.
@Y3drk Thanks for all the improvements here. Great!
Lite PR → new ensnode.io UI/UX refinements
Summary
Applied the following changes:
asidestarlight componentsasideelements from files in docs/ensnode.io/src/components/walkthroughs` did not render correctlydocs/ensnode.io/src/content/docs/docs/integrate/unigraph/examplesTabscomponent from StarlightWhy
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)
Pre-Review Checklist (Blocking)