Skip to content

feat: outline position #115

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
yangxiaolang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: outline position #115

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion styles/doc-layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
top: calc(var(--rp-nav-height) + var(--rp-banner-height, 0px));
margin-top: var(--rp-sidebar-menu-height);
z-index: var(--rp-z-index-aside);
padding-top: var(--rp-content-padding-y);
padding-top: 0;
scrollbar-width: none;
max-height: calc(100vh - var(--rp-nav-height) - var(--rp-banner-height, 0px));
box-shadow: var(--rp-shadow-1);
Expand All @@ -97,6 +97,22 @@
overflow: hidden scroll;
}

/* beforeOutline sticky 容器 */
.edit-on-github {
margin-top: calc(-1 * var(--rp-content-padding-y));
background: var(--rp-c-bg);
}
Comment on lines +101 to +104
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

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

⚠️ 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.


.edit-on-github__mask {
height: var(--rp-content-padding-y);
background: var(--rp-c-bg);
}

.edit-on-github__content {
padding-bottom: 8px;
background: var(--rp-c-bg);
}

.rp-doc-layout__menu {
top: calc(var(--rp-nav-height) + var(--rp-banner-height, 0px));
z-index: var(--rp-z-index-sidebar-menu);
Expand Down Expand Up @@ -203,3 +219,22 @@
transform: translate3d(0, 0, 0);
}
}

.edit-on-github{
margin-top:0 !important;
}

.rp-doc-layout__outline{
padding-top:0 !important;
}

/* Outline 标题 sticky 定位 */
.rp-outline__title {
position: sticky;
top: calc(var(--rp-content-padding-y) + 59px);
background: var(--rp-c-bg);
z-index: 10;
padding-top: 8px;
padding-bottom: 8px;
margin-top: -8px;
}
29 changes: 17 additions & 12 deletions theme/components/EditOnGithub/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,18 +46,23 @@ export const EditOnGithub = () => {
const t = useI18n<typeof import("i18n")>();

return (
<div className="mb-2">
<div className="editLink">
<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>
<div className="edit-on-github sticky top-0 z-10">
{/* 48px 遮罩层，用于隐藏滚动上来的 outline 内容 */}
<div className="edit-on-github__mask"></div>
{/* 实际内容 */}
<div className="edit-on-github__content">
<div className="editLink">
<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>
Comment on lines +55 to +64
Copy link
Contributor

@coderabbitai coderabbitai bot Jan 21, 2026

Choose a reason for hiding this comment

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

⚠️ 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.

</div>
</div>
</div>
);
Expand Down