whereareiam · Oct 22, 2026 · Oct 22, 2026
diff --git a/public/assets/js/readme-outline.js b/public/assets/js/readme-outline.js
@@ -0,0 +1,29 @@
+(() => {
+  // GitHub's README outline: the rendered headings, indented by level, built when the menu first opens.
+  const outline = document.querySelector("[data-readme-outline]");
+  const menu = outline?.closest("details");
+  const markup = document.querySelector("#readme .markup");
+  if (!outline || !menu || !markup) return;
+  const headings = [...markup.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]")];
+  if (!headings.length) {
+    menu.hidden = true;
+    return;
+  }
+  menu.addEventListener(
+    "toggle",
+    () => {
+      for (const heading of headings) {
+        const link = document.createElement("a");
+        link.className = "theme-dropdown-action";
+        link.href = `#${heading.id.replace(/^user-content-/, "")}`;
+        link.dataset.level = heading.tagName.slice(1);
+        link.textContent = heading.textContent.trim();
+        outline.before(link);
+      }
+    },
+    { once: true }
+  );
+  outline.addEventListener("click", event => {
+    if (event.target.closest("a")) menu.open = false;
+  });
+})();
diff --git a/styles/components/repo/file_picker.ts b/styles/components/repo/file_picker.ts
@@ -107,7 +107,8 @@ export default css`
     overflow: hidden;
     clip-path: inset(50%);
   }
-  @media (max-width: 767.98px) {
+  /* GitHub keeps Go to file down to 544px; below that it moves into the "…" menu. */
+  @media (max-width: 543.98px) {
     .repo-file-picker {
       display: none;
     }

diff --git a/styles/components/repo/repo_files.ts b/styles/components/repo/repo_files.ts
@@ -81,6 +81,13 @@ const repoFiles = css`
         }
       }
     }
+    /* Below 544px GitHub lets the README box reach the screen edges; the file list keeps its gutter. */
+    @media (max-width: 543.98px) {
+      #readme {
+        margin-left: -16px;
+        margin-right: -16px;
+      }
+    }
     #readme {
       .file-header {
         background: ${themeVars.color.body};
@@ -90,30 +97,55 @@ const repoFiles = css`
         svg {
           color: ${themeVars.color.text.light.num1};
         }
+        /* GitHub's README box header: underline tabs for the README and the community files. */
         .file-header-left {
-          padding: 6px 8px !important;
-          line-height: 1.45;
-          /* 伪元素宽度等于按钮宽度而不是父元素宽度 */
-          position: relative;
-          &:hover {
-            background: ${themeVars.github.control.transparent.bgColor.hover};
-            border-radius: ${otherThemeVars.border.radius};
-          }
-          &:after {
-            content: "";
-            background: ${themeVars.github.underlineNav.borderColor.active};
+          padding: 0 !important;
+        }
+        .repo-readme-tabs {
+          display: flex;
+          flex-wrap: wrap;
+          gap: 8px;
+          & > a {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            position: relative;
+            height: 32px;
+            padding: 6px 8px;
             border-radius: ${otherThemeVars.border.radius};
-            bottom: -8px;
-            left: 0;
-            height: 2px;
-            position: absolute;
-            width: 100%;
-          }
-          a.muted:hover {
-            color: inherit;
-            text-decoration-line: none;
+            color: ${themeVars.color.text.self};
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 21px;
+            &:hover {
+              background: ${themeVars.github.control.transparent.bgColor.hover};
+              text-decoration-line: none;
+            }
+            &.active {
+              font-weight: 600;
+              &::after {
+                content: "";
+                position: absolute;
+                left: 0;
+                bottom: -8px;
+                width: 100%;
+                height: 2px;
+                border-radius: ${otherThemeVars.border.radius};
+                background: ${themeVars.github.underlineNav.borderColor.active};
+              }
+            }
           }
         }
+        /* The README outline indents each heading level by 16px. */
+        .theme-dropdown-action[data-level="2"] {
+          padding-left: 24px;
+        }
+        .theme-dropdown-action[data-level="3"] {
+          padding-left: 40px;
+        }
+        .theme-dropdown-action:is([data-level="4"], [data-level="5"], [data-level="6"]) {
+          padding-left: 56px;
+        }
         .file-header-right {
           .btn-octicon {
             display: inline-flex;

diff --git a/styles/templates/repo/home.ts b/styles/templates/repo/home.ts
@@ -210,11 +210,6 @@ const repositoryHome = css`
     .page-content.repository.file.list .repo-button-row > .repo-button-row-left > .js-branch-tag-selector {
       flex: 0 0 auto;
     }
-    .page-content.repository.file.list .repo-button-row .repository-summary,
-    .page-content.repository.file.list .repo-button-row .repo-find-file,
-    .page-content.repository.file.list .repo-button-row .repo-add-file {
-      display: none;
-    }
     .page-content.repository.file.list .repo-code-dropdown {
       position: static;
     }
@@ -254,6 +249,67 @@ const repositoryHome = css`
     }
   }
 
+  /*
+   * GitHub's branch row narrows in steps: Add file becomes a "+" below 1280px, the branch and tag counts go below
+   * 1080px, Go to file becomes a plain button below 1012px, and both leave for the "…" menu below 544px.
+   */
+  @media (max-width: 1279.98px) {
+    .page-content.repository.file.list .repo-button-row .repo-add-file {
+      width: 34px;
+      min-width: 0;
+      padding: 0 !important;
+      justify-content: center;
+      & > .repo-add-file-label,
+      & > .dropdown.icon {
+        display: none;
+      }
+    }
+  }
+  @media (min-width: 1280px) {
+    .page-content.repository.file.list .repo-button-row .repo-add-file > .repo-add-file-icon {
+      display: none;
+    }
+  }
+  @media (max-width: 1079.98px) {
+    .page-content.repository.file.list .repo-button-row .repository-summary {
+      display: none;
+    }
+  }
+  @media (max-width: 1011.98px) {
+    .page-content.repository.file.list .repo-button-row .repo-file-picker {
+      width: auto;
+    }
+    .page-content.repository.file.list .repo-button-row .repo-find-file {
+      width: 87px;
+      padding: 0 12px;
+      background: ${themeVars.color.button};
+      cursor: pointer;
+      & > svg,
+      & > kbd {
+        display: none;
+      }
+      & > input {
+        padding: 0;
+        text-align: center;
+        cursor: pointer;
+        &::placeholder {
+          color: ${themeVars.color.text.self};
+          font-weight: 500;
+        }
+      }
+    }
+  }
+  @media (max-width: 543.98px) {
+    .page-content.repository.file.list .repo-button-row .repo-add-file {
+      display: none;
+    }
+  }
+  @media (min-width: 544px) {
+    .page-content.repository.file.list .repo-mobile-actions {
+      display: none !important;
+    }
+  }
+
   @media (min-width: 768px) and (max-width: 984.98px) {
     .page-content.repository.file.list .repo-button-row .repo-code-dropdown > .content {
       left: 0;

diff --git a/styles/templates/repo/view_content.ts b/styles/templates/repo/view_content.ts
@@ -30,11 +30,15 @@ const repoButtonRow = css`
           display: inline-flex;
           align-items: center;
           gap: 4px;
+          /* GitHub: an invisible 1px border, 4px padding, a 500 label and a 600 count. */
+          border: 1px solid transparent;
           border-radius: ${otherThemeVars.border.radius};
           color: ${themeVars.color.text.light.num1};
           padding: 4px;
           height: 32px;
           min-height: 32px;
+          font-weight: 500;
+          line-height: 21px;
           &:hover {
             background-color: ${themeVars.github.control.transparent.bgColor.hover};
             box-shadow: inset 0 0 0 1px ${themeVars.github.control.transparent.borderColor.active};
@@ -100,6 +104,15 @@ const repoToolbarDetails = css`
       padding: 5px 12px !important;
     }
 
+    /* Beside "Add file", GitHub's Code button is just its icon and caret, 49px wide. */
+    & .repo-button-row-right:has(.repo-add-file) .repo-code-dropdown > summary.ui.primary.button {
+      gap: 2px;
+      padding: 5px 6px 5px 7px !important;
+      & > span {
+        display: none;
+      }
+    }
+
     & .repo-code-dropdown > summary.ui.primary.button:hover {
       background: ${themeVars.github.button.primary.bgColor.hover} !important;
     }

diff --git a/templates/repo/readme/outline.tmpl b/templates/repo/readme/outline.tmpl
@@ -0,0 +1,2 @@
+{{/* readme-outline.js puts the rendered README's headings here when the menu opens. */}}
+<span data-readme-outline hidden></span>
diff --git a/templates/repo/readme/tabs.tmpl b/templates/repo/readme/tabs.tmpl
@@ -0,0 +1,20 @@
+{{- /* GitHub's README box header: README first, then the repository's community files in its order. Those files are
+not rendered on this page, so their tabs open the file itself. */ -}}
+<nav class="repo-readme-tabs" aria-label="{{ctx.Locale.Tr "repo.readme"}}">
+	<a class="active" href="#readme" aria-current="true">{{svg "octicon-book" 16}}<span>{{ctx.Locale.Tr "repo.readme"}}</span></a>
+	{{if not .TreePath}}
+		{{range $kind := StringUtils.Split "CODE_OF_CONDUCT,CONTRIBUTING,LICENSE,LICENCE,SECURITY" ","}}
+			{{range $.Files}}
+				{{$name := .Entry.Name}}
+				{{if and (not .Entry.IsDir) (StringUtils.HasPrefix (StringUtils.ToUpper $name) $kind)}}
+					<a href="{{$.TreeLink}}/{{PathEscapeSegments $name}}">
+						{{if eq $kind "CODE_OF_CONDUCT"}}{{svg "octicon-code-of-conduct" 16}}<span>Code of conduct</span>
+						{{else if eq $kind "CONTRIBUTING"}}{{svg "octicon-people" 16}}<span>Contributing</span>
+						{{else if eq $kind "SECURITY"}}{{svg "octicon-law" 16}}<span>Security</span>
+						{{else}}{{svg "octicon-law" 16}}<span>{{ctx.Locale.Tr "repo.license"}}</span>{{end}}
+					</a>
+				{{end}}
+			{{end}}
+		{{end}}
+	{{end}}
+</nav>
diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl
@@ -47,7 +47,8 @@
 
 		{{if and .CanWriteCode .IsViewBranch (not .Repository.IsMirror) (not .Repository.IsArchived) (not .IsViewFile)}}
 			<button class="ui dropdown basic compact jump button repo-add-file"{{if not .Repository.CanEnableEditor}} disabled{{end}}>
-				{{ctx.Locale.Tr "file_editor.add_file"}}
+				{{svg "octicon-plus" 16 "repo-add-file-icon"}}
+				<span class="repo-add-file-label">{{ctx.Locale.Tr "file_editor.add_file"}}</span>
 				{{svg "octicon-triangle-down" 16 "dropdown icon"}}
 				<div class="menu">
 					<a class="item" href="{{.RepoLink}}/_new/{{.BranchName | PathEscapeSegments}}/{{.TreePath | PathEscapeSegments}}">
@@ -87,7 +88,7 @@
 				<summary class="ui primary compact button" aria-label="Code">
 					{{svg "octicon-code" 16}}
 					<span>{{ctx.Locale.Tr "repo.code"}}</span>
-					{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+					{{svg "octicon-triangle-down" 16 "dropdown icon"}}
 				</summary>
 				<div class="content">
 					<nav class="repo-code-navigation" aria-label="{{ctx.Locale.Tr "repo.code"}}">
@@ -196,3 +197,4 @@
 <script src="{{AssetUrlPrefix}}/js/details-menu.js" defer></script>
 
 <script src="{{AssetUrlPrefix}}/js/repo-file-picker.js" defer></script>
+<script src="{{AssetUrlPrefix}}/js/readme-outline.js" defer></script>
diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
@@ -17,8 +17,7 @@
 	<h4 class="file-header ui top attached header tw-flex tw-items-center tw-justify-between tw-flex-wrap">
 		<div class="file-header-left tw-flex tw-items-center tw-pr-4 tw-flex-wrap {{if .IsCitationFile}}tw-gap-4{{else}}tw-gap-2{{end}}">
 			{{if .ReadmeInList}}
-				{{svg "octicon-book"}}
-				<strong><a class="default-link muted" href="#readme">{{.FileName}}</a></strong>
+				{{template "repo/readme/tabs" .}}
 			{{else}}
                 {{if or .HasSourceRenderedToggle .IsRepresentableAsText}}<nav class="repo-file-view-tabs" aria-label="File view">
                     {{if .HasSourceRenderedToggle}}<a class="{{if .IsDisplayingRendered}}active{{end}}" href="{{$.Link}}">Preview</a>{{end}}
@@ -86,6 +85,9 @@
 			{{if and .ReadmeInList .CanEditReadmeFile}}
 				<a class="btn-octicon" data-tooltip-content="{{ctx.Locale.Tr "repo.editor.edit_this_file"}}" href="{{.RepoLink}}/_edit/{{PathEscapeSegments .BranchName}}/{{if .TreePath}}{{PathEscapeSegments .TreePath}}/{{end}}{{PathEscapeSegments .FileName}}">{{svg "octicon-pencil"}}</a>
 			{{end}}
+			{{if and .ReadmeInList .IsMarkup}}
+				{{template "components/common/dropdown/dropdown" dict "Kind" "actions" "Icon" "octicon-list-unordered" "IconOnly" true "Quiet" true "Small" true "Label" "Outline" "Items" "repo/readme/outline" "Data" .}}
+			{{end}}
 		</div>
 	</h4>
 	<div class="ui bottom attached table unstackable segment">
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		{{/* readme-outline.js puts the rendered README's headings here when the menu opens. */}}
		<span data-readme-outline hidden></span>