Skip to content

fix(docs): consistent hover styling for inline-code links#2213

Open
notrab wants to merge 12 commits into
mainfrom
fix/docs-inline-code-link-styling
Open

fix(docs): consistent hover styling for inline-code links#2213
notrab wants to merge 12 commits into
mainfrom
fix/docs-inline-code-link-styling

Conversation

@notrab
Copy link
Copy Markdown
Member

@notrab notrab commented May 27, 2026

Lite PR

Tip: Review docs on the ENSNode PR process

Summary


Why

  • Requested by @lightwalker-eth to improve the styling of our links and consistent hover style.

Testing

  • How this was tested.
  • If you didn't test it, say why.

Notes for Reviewer (Optional)

  • Anything non-obvious or worth a heads-up.

Pre-Review Checklist (Blocking)

  • This PR does not introduce significant changes and is low-risk to review quickly.
  • Relevant changesets are included (or are not required)

Copilot AI review requested due to automatic review settings May 27, 2026 18:32
@notrab notrab requested a review from a team as a code owner May 27, 2026 18:32
@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 27, 2026

⚠️ No Changeset found

Latest commit: c7bca38

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@vercel
Copy link
Copy Markdown
Contributor

vercel Bot commented May 27, 2026

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

Project Deployment Actions Updated (UTC)
enskit-react-example.ensnode.io Ready Ready Preview, Comment May 28, 2026 8:20am
ensnode.io Ready Ready Preview, Comment May 28, 2026 8:20am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
admin.ensnode.io Skipped Skipped May 28, 2026 8:20am
ensrainbow.io Skipped Skipped May 28, 2026 8:20am

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented May 27, 2026

Review Change Stack

Warning

Review limit reached

@notrab, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 54 minutes and 55 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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 include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1cd1ca92-d27c-4a58-af6a-3037d5b0003a

📥 Commits

Reviewing files that changed from the base of the PR and between 5ff7d12 and c7bca38.

📒 Files selected for processing (4)
  • docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro
  • docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
  • docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
  • docs/ensnode.io/src/styles/starlight.css
📝 Walkthrough

Walkthrough

This PR refines link hover and underline animation behavior across the ENSNode documentation site. Component back-navigation and hosted links simplify their hover styling by removing accent-color changes and narrowing transitions to text-underline-offset. Global Starlight CSS updates align markdown link hover colors and refine underline animation mechanics to support the component-level changes.

Changes

Link hover and underline animation refinement

Layer / File(s) Summary
Component link styling updates
docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro, docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro, docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx, docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
Four component and example files update back-navigation and hosted link styling by removing hover color classes from Icons and narrowing the underline hover transition to text-underline-offset instead of using transition-all.
Starlight CSS hover color and underline animation refinement
docs/ensnode.io/src/styles/starlight.css
Starlight CSS is updated to align markdown link hover colors to --sl-color-text-accent, refine paragraph and list link underline animations to target only text-underline-offset, add heading anchor link hover styling, and adjust comment formatting throughout the file.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

  • namehash/ensnode#2201: Adjusts the same HostedEnsNodeInstance.astro "Hosted at" link hover/underline classes by removing accent-color hover and narrowing behavior to underline-offset transitions.
  • namehash/ensnode#2170: Updates the same "Back to enskit/enssdk overview" links in example.mdx files with Icon class simplification and text-underline-offset-only transitions, plus overlapping starlight.css underline and hover rule changes.
  • namehash/ensnode#2151: Modifies docs/ensnode.io/src/styles/starlight.css to change paragraph and markdown link underline and hover transition behavior.

Suggested labels

docs

Poem

🐰 Hoppy hops through links so fine,
Underlines now animate in time,
Hover states trimmed clean and bright,
Colors dance in accent light.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning The description is largely incomplete. The Summary section lacks specific details about what changed, the Testing section is unfilled, and Notes for Reviewer is empty. Complete the Summary with 1-3 bullets describing the actual changes made to link styling, fill in the Testing section with how changes were tested, and add any relevant notes for reviewers.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately describes the main change: updating hover styling for inline-code links to be consistent across documentation.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch fix/docs-inline-code-link-styling

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.

Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Small CSS-only tweak in the docs site to make link hover styling consistent, particularly for inline-code links inside markdown paragraphs and lists, plus minor trailing-whitespace cleanups in comments.

Changes:

  • Add underline-offset hover transition for a:has(code) links in markdown paragraphs/list items.
  • Switch hover color tokens from --sl-color-accent / --sl-color-accent-high to --sl-color-text-accent, and add a heading-link hover color rule.
  • Clean up trailing whitespace in several CSS comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps Bot commented May 27, 2026

Greptile Summary

This PR standardizes hover styling across inline-code links and plain-text links in the documentation site, ensuring that only text-underline-offset animates on plain links while inline-code links (a:has(code)) additionally animate color via a dedicated CSS rule.

  • starlight.css: Adds a new a:has(code) rule with a color + text-underline-offset transition, broadens the hover color selector to apply to the <a> element itself (not just its > span child), restores explicit color: var(--sl-color-white) for heading anchor hovers, and changes TOC hover color from --sl-color-accent-high to --sl-color-text-accent.
  • Component/MDX files: Removes per-element Tailwind hover-color utilities (hover:text-[...]) and icon hover-color transitions to defer to the CSS rules, and narrows transition-all to transition-[text-underline-offset] for plain-text links.

Confidence Score: 5/5

Pure documentation-site CSS and template changes with no logic, data, or API impact — safe to merge.

All changes are scoped to styling: CSS selector additions in starlight.css and removal of redundant Tailwind hover utilities from Astro/MDX components. The cascade order is correct, the new a:has(code) rule correctly includes color in its transition so the hover color animates smoothly, and no existing selectors are broken.

No files require special attention.

Important Files Changed

Filename Overview
docs/ensnode.io/src/styles/starlight.css Core of the change — adds an a:has(code) rule with both color and text-underline-offset transitions, broadens the hover selector to the anchor itself, and restores heading/TOC link hover colors; logic is sound and cascade order is correct.
docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro Removes explicit hover:text-[var(--sl-color-accent-high)] and narrows transition to text-underline-offset only, consistent with the new CSS approach for plain-text links.
docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro Removes icon hover-color transition and simplifies link transition to text-underline-offset; straightforward cleanup.
docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx Same pattern as OmnigraphStaticExampleSet — removes icon and text hover-color Tailwind utilities; no issues.
docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx Identical to the enskit example change — removes icon and text hover-color utilities; no issues.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[Link hovered] --> B{Is link in\n.sl-markdown-content?}
    B -- No --> C[Tailwind classes only\ne.g. HostedEnsNodeInstance\ntransition-text-underline-offset]
    B -- Yes --> D{Is it a heading\nanchor link?}
    D -- Yes --> E[color: --sl-color-white\nno underline-offset transition]
    D -- No --> F{Does link contain\na code element?}
    F -- Yes --> G[a:has code rule\ncolor + text-underline-offset\nboth transition 0.2s]
    F -- No --> H[Plain link rule\ntext-underline-offset only\ntransition 0.2s]
    G --> I[Hover color set by broad\na:hover rule to --sl-color-text-accent]
    H --> I
Loading

Reviews (2): Last reviewed commit: "Merge branch 'main' into fix/docs-inline..." | Re-trigger Greptile

Comment thread docs/ensnode.io/src/styles/starlight.css
…ode-link-styling

Brings in PR #2208 component-level hover cleanups (HostedEnsNodeInstance,
OmnigraphStaticExampleSet, enskit/example.mdx, enssdk/example.mdx) and the
broader `a:hover` override in starlight.css.

Conflict in starlight.css resolved by:
- Keeping #2208's broader `.sl-markdown-content a:hover` override.
- Dropping our narrower `> p a` / `li a` hover rule (redundant under #2208's selector).
- Keeping the code-link underline-offset rule from this branch.
Copilot AI review requested due to automatic review settings May 28, 2026 08:16
@vercel vercel Bot temporarily deployed to Preview – admin.ensnode.io May 28, 2026 08:16 Inactive
@vercel vercel Bot temporarily deployed to Preview – ensrainbow.io May 28, 2026 08:16 Inactive
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

Copy link
Copy Markdown
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.

Caution

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

⚠️ Outside diff range comments (1)
docs/ensnode.io/src/styles/starlight.css (1)

218-241: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Remove empty lines before declarations to satisfy stylelint.

The stylelint rule declaration-empty-line-before flags the empty lines at lines 224 and 236. Remove them for consistency with the project's CSS formatting rules.

🧹 Proposed fix
 .sl-markdown-content > p a:not(:has(code), [role="tab"]),
 .sl-markdown-content :is(ul, ol) > li a:not(:has(code), [role="tab"]),
 .starlight-aside__content a {
   text-decoration: underline;
   text-underline-offset: 4px;
-
   transition: text-underline-offset 0.2s ease-in-out;
-
   &:hover {
     text-underline-offset: 2px;
   }
 }
 
 .sl-markdown-content > p a:has(code):not([role="tab"]),
 .sl-markdown-content :is(ul, ol) > li a:has(code):not([role="tab"]) {
   text-decoration: underline;
   text-underline-offset: 4px;
-
   transition: text-underline-offset 0.2s ease-in-out;

   &:hover {
     text-underline-offset: 2px;
   }
 }
🤖 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/styles/starlight.css` around lines 218 - 241, Remove the
blank lines that precede declarations inside the rule blocks for the selectors
".sl-markdown-content > p a:not(:has(code), [role="tab"]), .sl-markdown-content
:is(ul, ol) > li a:not(:has(code), [role="tab"]), .starlight-aside__content a"
and ".sl-markdown-content > p a:has(code):not([role="tab"]),
.sl-markdown-content :is(ul, ol) > li a:has(code):not([role="tab"])" so there
are no empty lines immediately before properties like "text-decoration" and
"text-underline-offset" (remove the blank lines currently above those
declarations to satisfy the declaration-empty-line-before stylelint rule).
🤖 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.

Outside diff comments:
In `@docs/ensnode.io/src/styles/starlight.css`:
- Around line 218-241: Remove the blank lines that precede declarations inside
the rule blocks for the selectors ".sl-markdown-content > p a:not(:has(code),
[role="tab"]), .sl-markdown-content :is(ul, ol) > li a:not(:has(code),
[role="tab"]), .starlight-aside__content a" and ".sl-markdown-content > p
a:has(code):not([role="tab"]), .sl-markdown-content :is(ul, ol) > li
a:has(code):not([role="tab"])" so there are no empty lines immediately before
properties like "text-decoration" and "text-underline-offset" (remove the blank
lines currently above those declarations to satisfy the
declaration-empty-line-before stylelint rule).

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: d6d887eb-1be4-4c5f-a317-6d99d7ec7f7e

📥 Commits

Reviewing files that changed from the base of the PR and between d42e0e1 and 5ff7d12.

📒 Files selected for processing (5)
  • docs/ensnode.io/src/components/molecules/HostedEnsNodeInstance.astro
  • docs/ensnode.io/src/components/organisms/OmnigraphStaticExampleSet.astro
  • docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enskit/example.mdx
  • docs/ensnode.io/src/content/docs/docs/integrate/integration-options/enssdk/example.mdx
  • docs/ensnode.io/src/styles/starlight.css

Copilot AI review requested due to automatic review settings May 28, 2026 08:19
@vercel vercel Bot temporarily deployed to Preview – ensrainbow.io May 28, 2026 08:19 Inactive
@vercel vercel Bot temporarily deployed to Preview – admin.ensnode.io May 28, 2026 08:19 Inactive
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated no new comments.

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.

2 participants