diff --git a/public/assets/js/readme-outline.js b/public/assets/js/readme-outline.js new file mode 100644 index 00000000..73d324dc --- /dev/null +++ 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 index b5c7732e..38154b0c 100644 --- 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 index af565229..d375634a 100644 --- 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 index 218d925a..f8bc962f 100644 --- 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 index 0bd0f66a..8862850b 100644 --- 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 new file mode 100644 index 00000000..e76828d0 --- /dev/null +++ b/templates/repo/readme/outline.tmpl @@ -0,0 +1,2 @@ +{{/* readme-outline.js puts the rendered README's headings here when the menu opens. */}} + diff --git a/templates/repo/readme/tabs.tmpl b/templates/repo/readme/tabs.tmpl new file mode 100644 index 00000000..0d44e658 --- /dev/null +++ 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. */ -}} + diff --git a/templates/repo/view_content.tmpl b/templates/repo/view_content.tmpl index 58543349..aad9d0dd 100644 --- 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)}}