feat: outline position #115

yangxiaolang · 2026-01-21T08:40:21Z

Summary by CodeRabbit

UI Improvements
- Enhanced the "Edit on GitHub" feature with improved layout and spacing.
- The edit options now use sticky positioning for better accessibility while scrolling through documentation.
- Visual alignment and padding have been optimized for a more polished appearance.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

coderabbitai · 2026-01-21T08:40:47Z

Walkthrough

A sticky "edit on GitHub" feature was added to the documentation layout. The component's DOM structure was reorganized with a new wrapper hierarchy containing a mask and content container, while CSS styling rules were introduced to position it as a sticky element above the outline with appropriate spacing and background handling.

Changes

Cohort / File(s)	Summary
Documentation Layout Styling `styles/doc-layout.css`	Removed outline container's top padding, introduced `.edit-on-github` sticky wrapper with mask and content elements, implemented sticky-positioned outline title with calculated offset, added responsive overrides with importance flags for layout spacing reset
Edit Component Structure `theme/components/EditOnGithub/index.tsx`	Refactored component DOM hierarchy: wrapped two links in a sticky container with internal mask and content block; replaced inline layout with dedicated content wrapper while preserving link functionality

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A sticky surprise takes shape so neat,
Edit links now float in perfect seat,
With masks and wrappers, padding refined—
The docs layout gets a facelift kind!
GitHub editing, sticky and sweet! ✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title check	❓ Inconclusive	The title 'feat: outline position' is partially related to the changeset but lacks specificity. While the PR modifies outline positioning with sticky behavior, the title is vague and doesn't convey the main change: adding an 'edit on GitHub' feature alongside outline positioning adjustments.	Consider using a more descriptive title like 'feat: add sticky edit-on-GitHub feature with outline positioning' to better represent the actual scope of changes.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing touches

📝 Generate docstrings

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.}

coderabbitai

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@styles/doc-layout.css`:
- Around line 101-104: The negative margin declared on .edit-on-github is being
nullified by a later rule that sets margin-top: 0 !important; locate the
conflicting rule that targets .edit-on-github with margin-top: 0 !important and
either remove that override or confine it inside the mobile breakpoint media
query so the negative offset remains for larger viewports; if you must keep the
override, drop !important and use a scoped selector (e.g., within a mobile-only
wrapper or media query) so .edit-on-github retains its intended negative margin
outside mobile.

In `@theme/components/EditOnGithub/index.tsx`:
- Around line 55-64: Add rel="noopener noreferrer" to the external anchor
elements in the EditOnGithub component: update the anchor with href={editLink}
(containing <EditIcon> and t("edit_page")) and the anchor with href={issueLink}
(containing <GithubIcon> and t("create_issue")) to include rel="noopener
noreferrer" alongside target="_blank" to prevent tabnabbing.

🧹 Nitpick comments (1)

styles/doc-layout.css (1)
231-239: Consider replacing the hard-coded 59px sticky offset with a CSS variable.

This offset likely depends on the edit-on-github block height; a variable would avoid drift if spacing or content changes.
♻️ Example approach
:root {
+  --rp-edit-on-github-height: 59px;
}

.rp-outline__title {
-  top: calc(var(--rp-content-padding-y) + 59px);
+  top: calc(var(--rp-content-padding-y) + var(--rp-edit-on-github-height));
}

coderabbitai · 2026-01-21T08:45:16Z

styles/doc-layout.css

+.edit-on-github {
+  margin-top: calc(-1 * var(--rp-content-padding-y));
+  background: var(--rp-c-bg);
+}


⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

cat -n styles/doc-layout.css | sed -n '95,110p'

Repository: alauda/knowledge

Length of output: 479

🏁 Script executed:

cat -n styles/doc-layout.css | sed -n '215,235p'

Repository: alauda/knowledge

Length of output: 608

🏁 Script executed:

cat -n styles/doc-layout.css | sed -n '200,230p'

Repository: alauda/knowledge

Length of output: 1102

🏁 Script executed:

cat -n styles/doc-layout.css | sed -n '190,200p'

Repository: alauda/knowledge

Length of output: 313

Resolve conflicting .edit-on-github margin-top rules.

The margin-top: 0 !important at line 223-225 overrides the negative margin defined at line 102 globally. This nullifies the intended offset behavior. Clarify whether the override is needed and either remove it or scope it to the mobile breakpoint where it applies.

🤖 Prompt for AI Agents

In `@styles/doc-layout.css` around lines 101 - 104, The negative margin declared on .edit-on-github is being nullified by a later rule that sets margin-top: 0 !important; locate the conflicting rule that targets .edit-on-github with margin-top: 0 !important and either remove that override or confine it inside the mobile breakpoint media query so the negative offset remains for larger viewports; if you must keep the override, drop !important and use a scoped selector (e.g., within a mobile-only wrapper or media query) so .edit-on-github retains its intended negative margin outside mobile.

coderabbitai · 2026-01-21T08:45:16Z

theme/components/EditOnGithub/index.tsx

+          <a href={editLink} target="_blank" className="flex">
+            <EditIcon></EditIcon>
+            <span className="ml-2">{t("edit_page")}</span>
+          </a>
+        </div>
+        <div className="editLink">
+          <a href={issueLink} target="_blank" className="flex">
+            <GithubIcon></GithubIcon>
+            <span className="ml-2">{t("create_issue")}</span>
+          </a>


⚠️ Potential issue | 🟠 Major

Add rel="noopener noreferrer" to external target="_blank" links.

target="_blank" without rel enables tabnabbing. Please add the rel attribute to both anchors.

🔒 Proposed fix

- <a href={editLink} target="_blank" className="flex"> + <a href={editLink} target="_blank" rel="noopener noreferrer" className="flex"> <EditIcon></EditIcon> <span className="ml-2">{t("edit_page")}</span> </a> ... - <a href={issueLink} target="_blank" className="flex"> + <a href={issueLink} target="_blank" rel="noopener noreferrer" className="flex"> <GithubIcon></GithubIcon> <span className="ml-2">{t("create_issue")}</span> </a>

📝 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.

Suggested change

<a href={editLink} target="_blank" className="flex">

<EditIcon></EditIcon>

<span className="ml-2">{t("edit_page")}</span>

</a>

</div>

<div className="editLink">

<a href={issueLink} target="_blank" className="flex">

<GithubIcon></GithubIcon>

<span className="ml-2">{t("create_issue")}</span>

</a>

<a href={editLink} target="_blank" rel="noopener noreferrer" className="flex">

<EditIcon></EditIcon>

<span className="ml-2">{t("edit_page")}</span>

</a>

</div>

<div className="editLink">

<a href={issueLink} target="_blank" rel="noopener noreferrer" className="flex">

<GithubIcon></GithubIcon>

<span className="ml-2">{t("create_issue")}</span>

</a>

🤖 Prompt for AI Agents

In `@theme/components/EditOnGithub/index.tsx` around lines 55 - 64, Add rel="noopener noreferrer" to the external anchor elements in the EditOnGithub component: update the anchor with href={editLink} (containing <EditIcon> and t("edit_page")) and the anchor with href={issueLink} (containing <GithubIcon> and t("create_issue")) to include rel="noopener noreferrer" alongside target="_blank" to prevent tabnabbing.

feat: outline position

ef499ef

yangxiaolang temporarily deployed to translate January 21, 2026 08:40 — with GitHub Actions Inactive

coderabbitai bot reviewed Jan 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: outline position #115

feat: outline position #115

Uh oh!

yangxiaolang commented Jan 21, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Jan 21, 2026 •

edited

Loading

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Jan 21, 2026

Uh oh!

coderabbitai bot Jan 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat: outline position #115

Are you sure you want to change the base?

feat: outline position #115

Uh oh!

Conversation

yangxiaolang commented Jan 21, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Poem

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

yangxiaolang commented Jan 21, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Jan 21, 2026 •

edited

Loading