Lindenii Project Forge
Add repo tab navigation to all pages
/* * SPDX-License-Identifier: AGPL-3.0-only * SPDX-FileContributor: Runxi Yu <https://runxiyu.org> * SPDX-FileContributor: luk3yx <https://luk3yx.github.io> */ /* Base styles and variables */ html { font-family: sans-serif; background-color: var(--background-color); color: var(--text-color); --background-color: hsl(0, 0%, 100%); --text-color: hsl(0, 0%, 0%); --link-color: hsl(320, 50%, 36%); --light-text-color: hsl(0, 0%, 45%); --darker-border-color: hsl(0, 0%, 72%); --lighter-border-color: hsl(0, 0%, 85%); --text-decoration-color: hsl(0, 0%, 72%); --darker-box-background-color: hsl(0, 0%, 92%); --lighter-box-background-color: hsl(0, 0%, 95%); --primary-color: hsl(320, 50%, 36%); --primary-color-contrast: hsl(320, 0%, 100%); --danger-color: #ff0000; --danger-color-contrast: #ffffff; } /* Dark mode overrides */ @media (prefers-color-scheme: dark) { html { --background-color: hsl(0, 0%, 0%); --text-color: hsl(0, 0%, 100%); --link-color: hsl(320, 50%, 76%); --light-text-color: hsl(0, 0%, 78%); --darker-border-color: hsl(0, 0%, 35%); --lighter-border-color: hsl(0, 0%, 25%); --text-decoration-color: hsl(0, 0%, 30%); --darker-box-background-color: hsl(0, 0%, 20%); --lighter-box-background-color: hsl(0, 0%, 15%); } } /* Global layout */ body { margin: 0; } html, code, pre { font-size: 0.96rem; /* TODO: Not always correct */ } /* Toggle table controls */ .toggle-table-off, .toggle-table-on { opacity: 0; position: absolute; } .toggle-table-off:focus-visible + table > thead > tr > th > label, .toggle-table-on:focus-visible + table > thead > tr > th > label { outline: 1.5px var(--primary-color) solid; } .toggle-table-off + table > thead > tr > th, .toggle-table-on + table > thead > tr > th { padding: 0; } .toggle-table-off + table > thead > tr > th > label, .toggle-table-on + table > thead > tr > th > label { width: 100%; display: inline-block; padding: 3px 0; cursor: pointer; } .toggle-table-off:checked + table > tbody { display: none; } .toggle-table-on + table > tbody { display: none; } .toggle-table-on:checked + table > tbody { display: table-row-group; } /* Footer styles */ footer { margin-top: 1rem; margin-left: auto; margin-right: auto; display: block; padding: 0 5px; width: fit-content; text-align: center; color: var(--light-text-color); } footer a:link, footer a:visited { color: inherit; } /* Padding containers */ .padding-wrapper { margin: 1rem auto; max-width: 60rem; padding: 0 5px; } .padding { padding: 0 5px; } /* Link styles */ a:link, a:visited { text-decoration-color: var(--text-decoration-color); color: var(--link-color); } /* Readme inline code styling */ #readme code:not(pre > code) { background-color: var(--lighter-box-background-color); border-radius: 2px; padding: 2px; } /* Readme word breaks to avoid overfull hboxes */ #readme { word-break: break-word; } /* Table styles */ table { border: var(--lighter-border-color) solid 1px; border-spacing: 0px; border-collapse: collapse; } table.wide { width: 100%; } td, th { padding: 3px 5px; border: var(--lighter-border-color) solid 1px; } .pad { padding: 3px 5px; } th, thead, tfoot { background-color: var(--lighter-box-background-color); } th[scope=row] { text-align: left; } th { font-weight: normal; } tr.title-row > th, th.title-row, .title-row { background-color: var(--lighter-box-background-color); font-weight: bold; } td > pre { margin: 0; } #readme > *:last-child { margin-bottom: 0; } #readme > *:first-child { margin-top: 0; } /* Table misc and scrolling */ .commit-id { font-family: monospace; word-break: break-word; } .scroll { overflow-x: auto; } /* Diff/chunk styles */ .chunk-unchanged { color: grey; } .chunk-addition { color: green; } @media (prefers-color-scheme: dark) { .chunk-addition { color: lime; } } .chunk-deletion { color: red; } .chunk-unknown { color: yellow; } pre.chunk { margin-top: 0; margin-bottom: 0; } .centering { text-align: center; } /* Toggle content sections */ .toggle-off-wrapper, .toggle-on-wrapper { border: var(--lighter-border-color) solid 1px; } .toggle-off-toggle, .toggle-on-toggle { opacity: 0; position: absolute; } .toggle-off-header, .toggle-on-header { font-weight: bold; cursor: pointer; display: block; width: 100%; background-color: var(--lighter-box-background-color); } .toggle-off-header > div, .toggle-on-header > div { padding: 3px 5px; display: block; } .toggle-on-content { display: none; } .toggle-on-toggle:focus-visible + .toggle-on-header, .toggle-off-toggle:focus-visible + .toggle-off-header { outline: 1.5px var(--primary-color) solid; } .toggle-on-toggle:checked + .toggle-on-header + .toggle-on-content { display: block; } .toggle-off-content { display: block; } .toggle-off-toggle:checked + .toggle-off-header + .toggle-off-content { display: none; } *:focus-visible { outline: 1.5px var(--primary-color) solid; } /* File display styles */ .file-patch + .file-patch { margin-top: 0.5rem; } .file-content { padding: 3px 5px; } .file-header { font-family: monospace; display: flex; flex-direction: row; align-items: center; } .file-header::after { content: "\25b6"; font-family: sans-serif; margin-left: auto; line-height: 100%; margin-right: 0.25em; } .file-toggle:checked + .file-header::after { content: "\25bc"; } /* Form elements */ textarea { box-sizing: border-box; background-color: var(--lighter-box-background-color); resize: vertical; } textarea, input[type=text], input[type=password] { font-family: sans-serif; font-size: smaller; background-color: var(--lighter-box-background-color); color: var(--text-color); border: none; padding: 0.3rem; width: 100%; box-sizing: border-box; } td.tdinput, th.tdinput { padding: 0; position: relative; } td.tdinput textarea, td.tdinput input[type=text], td.tdinput input[type=password], th.tdinput textarea, th.tdinput input[type=text], th.tdinput input[type=password] { background-color: transparent; } td.tdinput select { position: absolute; background-color: var(--background-color); border: none; /* width: 100%; height: 100%; */ box-sizing: border-box; top: 0; left: 0; right: 0; bottom: 0; } select:active { outline: 1.5px var(--primary-color) solid; } /* Button styles */ .btn-primary, a.btn-primary { background: var(--primary-color); color: var(--primary-color-contrast); border: var(--lighter-border-color) 1px solid; font-weight: bold; } .btn-danger, a.btn-danger { background: var(--danger-color); color: var(--danger-color-contrast); border: var(--lighter-border-color) 1px solid; font-weight: bold; } .btn-white, a.btn-white { background: var(--primary-color-contrast); color: var(--primary-color); border: var(--lighter-border-color) 1px solid; } .btn-normal, a.btn-normal, input[type=file]::file-selector-button { background: var(--lighter-box-background-color); border: var(--lighter-border-color) 1px solid !important; color: var(--text-color); } .btn, .btn-white, .btn-danger, .btn-normal, .btn-primary, input[type=submit], input[type=file]::file-selector-button { display: inline-block; width: auto; min-width: fit-content; padding: .1rem .75rem; font-size: 0.9rem; transition: background .1s linear; cursor: pointer; } a.btn, a.btn-white, a.btn-danger, a.btn-normal, a.btn-primary { text-decoration: none; } /* Header layout */ header#main-header { /* background-color: var(--lighter-box-background-color); */ display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 0.625rem 1rem; gap: 0.5rem; } #main-header a, #main-header a:link, main-header a:visited { text-decoration: none; color: inherit; } #main-header-forge-title { white-space: nowrap; } #breadcrumb-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; overflow-x: auto; font-size: 0.9rem; gap: 0.25rem; white-space: nowrap; } .breadcrumb-separator { margin: 0 0.25rem; } #main-header-user { display: flex; align-items: center; white-space: nowrap; font-size: 0.95rem; } @media (max-width: 37.5rem) { header#main-header { flex-direction: column; align-items: flex-start; } #breadcrumb-nav { width: 100%; overflow-x: auto; } } /* Uncategorized */ table + table { margin-top: 1rem; } td > ul { padding-left: 1.5rem; margin-top: 0; margin-bottom: 0; } .complete-error-page { font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif; } .complete-error-page hr { border: 0; border-bottom: 1px dashed; } .key-val-grid { display: grid; grid-template-columns: auto 1fr; gap: 0; border: var(--lighter-border-color) 1px solid; overflow: auto; font-size: 0.96rem; } .key-val-grid > .title-row { grid-column: 1 / -1; background-color: var(--lighter-box-background-color); font-weight: bold; padding: 3px 5px; border-bottom: var(--lighter-border-color) 1px solid; } .key-val-grid > .row-label { background-color: var(--lighter-box-background-color); padding: 3px 5px; border-bottom: var(--lighter-border-color) 1px solid; border-right: var(--lighter-border-color) 1px solid; text-align: left; font-weight: normal; } .key-val-grid > .row-value { padding: 3px 5px; border-bottom: var(--lighter-border-color) 1px solid; word-break: break-word; } .key-val-grid code { font-family: monospace; } .key-val-grid ul { margin: 0; padding-left: 1.5rem; } .key-val-grid > .row-label:nth-last-of-type(2), .key-val-grid > .row-value:last-of-type { border-bottom: none; } @media (max-width: 37.5rem) { .key-val-grid { grid-template-columns: 1fr; } .key-val-grid > .row-label { border-right: none; } } .key-val-grid > .title-row { grid-column: 1 / -1; background-color: var(--lighter-box-background-color); font-weight: bold; padding: 3px 5px; border-bottom: var(--lighter-border-color) 1px solid; font-size: 1rem; margin: 0; text-align: center; } .key-val-grid-wrapper { max-width: 100%; width: fit-content; }
/* Tab navigation */
.nav-tabs-standalone { border: none; list-style: none; margin: 0; flex-grow: 1; display: inline-flex; flex-wrap: nowrap; padding: 0; border-bottom: 0.25rem var(--darker-box-background-color) solid; } .nav-tabs-standalone li { align-self: flex-end; padding: 0 1rem; } .nav-item.active { font-weigt: bold; background-color: var(--darker-box-background-color); } .nav-item a, .nav-item a:link, .nav-item a:visited { text-decoration: none; color: inherit; }
{{/* SPDX-License-Identifier: AGPL-3.0-only SPDX-FileContributor: Runxi Yu <https://runxiyu.org> */}} {{- define "repo_log" -}}
{{- $root := . -}}
<!DOCTYPE html> <html lang="en"> <head> {{- template "head_common" . -}} <title>Log – {{ .repo_name }} – {{ template "group_path_plain" .group_path }} – {{ .global.forge_title -}}</title> </head> <body class="repo-log"> {{- template "header" . -}}
<ul class="nav-tabs-standalone"> <li class="nav-item"> <a class="nav-link" href="../{{- template "ref_query" $root -}}">Summary</a> </li> <li class="nav-item"> <a class="nav-link" href="../tree/{{- template "ref_query" $root -}}">Tree</a> </li> <li class="nav-item active"> <a class="nav-link" href="../log/{{- template "ref_query" $root -}}">Log</a> </li> <li class="nav-item"> <a class="nav-link" href="../branches/">Branches</a> </li> <li class="nav-item"> <a class="nav-link" href="../tags/">Tags</a> </li> <li class="nav-item"> <a class="nav-link" href="../settings/">Settings</a> </li> </ul>
<div class="scroll"> <table id="commits" class="wide"> <thead> <tr class="title-row"> <th colspan="4">Commits {{ if .ref_name }} on {{ .ref_name }}{{ end -}}</th> </tr> <tr> <th scope="col">ID</th> <th scope="col">Title</th> <th scope="col">Author</th> <th scope="col">Time</th> </tr> </thead> <tbody> {{- range .commits -}} <tr> <td class="commit-id"><a href="../commit/{{- .Hash -}}">{{- .Hash -}}</a></td> <td class="commit-title">{{- .Message | first_line -}}</td> <td class="commit-author"> <a class="email-name" href="mailto:{{- .Author.Email -}}">{{- .Author.Name -}}</a> </td> <td class="commit-time"> {{- .Author.When.Format "2006-01-02 15:04:05 -0700" -}} </td> </tr> {{- end -}} {{- if dereference_error .commits_err -}} Error while obtaining commit log: {{ .commits_err }} {{- end -}} </tbody> </table> </div> <footer> {{- template "footer" . -}} </footer> </body> </html> {{- end -}}
{{/* SPDX-License-Identifier: AGPL-3.0-only SPDX-FileContributor: Runxi Yu <https://runxiyu.org> */}} {{- define "repo_raw_dir" -}} {{- $root := . -}} <!DOCTYPE html> <html lang="en"> <head> {{- template "head_common" . -}} <title>/{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} – {{ .repo_name }} – {{ template "group_path_plain" .group_path }} – {{ .global.forge_title -}}</title> </head> <body class="repo-raw-dir"> {{- template "header" . -}} <div class="padding-wrapper scroll">
<ul class="nav-tabs-standalone"> <li class="nav-item"> <a class="nav-link" href="../{{- template "ref_query" $root -}}">Summary</a> </li> <li class="nav-item"> <a class="nav-link" href="../tree/{{- template "ref_query" $root -}}">Tree</a> </li> <li class="nav-item"> <a class="nav-link" href="../log/{{- template "ref_query" $root -}}">Log</a> </li> <li class="nav-item"> <a class="nav-link" href="../branches/">Branches</a> </li> <li class="nav-item"> <a class="nav-link" href="../tags/">Tags</a> </li> <li class="nav-item"> <a class="nav-link" href="../settings/">Settings</a> </li> </ul>
<table id="file-tree" class="wide"> <thead> <tr class="title-row"> <th colspan="3"> (Raw) /{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }}{{ if .ref_name }} on {{ .ref_name }}{{ end -}} </th> </tr> <tr> <th scope="col">Mode</th> <th scope="col">Filename</th> <th scope="col">Size</th> </tr> </thead> <tbody> {{- $path_spec := .path_spec -}} {{- range .files -}} <tr> <td class="file-mode">{{- .Mode -}}</td> <td class="file-name"><a href="{{- .Name -}}{{- if not .IsFile -}}/{{- end -}}{{- template "ref_query" $root -}}">{{- .Name -}}</a>{{- if not .IsFile -}}/{{- end -}}</td> <td class="file-size">{{- .Size -}}</td> </tr> {{- end -}} </tbody> </table> </div> <div class="padding-wrapper"> <div id="refs"> </div> </div> <footer> {{- template "footer" . -}} </footer> </body> </html> {{- end -}}
{{/* SPDX-License-Identifier: AGPL-3.0-only SPDX-FileContributor: Runxi Yu <https://runxiyu.org> */}} {{- define "repo_tree_dir" -}}
{{ $root := . }}
{{- $root := . -}}
<!DOCTYPE html> <html lang="en"> <head> {{- template "head_common" . -}} <title>/{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }} – {{ .repo_name }} – {{ template "group_path_plain" .group_path }} – {{ .global.forge_title -}}</title> </head> <body class="repo-tree-dir"> {{- template "header" . -}} <div class="padding-wrapper scroll">
<ul class="nav-tabs-standalone"> <li class="nav-item"> <a class="nav-link" href="../{{- template "ref_query" $root -}}">Summary</a> </li> <li class="nav-item active"> <a class="nav-link" href="../tree/{{- template "ref_query" $root -}}">Tree</a> </li> <li class="nav-item"> <a class="nav-link" href="../log/{{- template "ref_query" $root -}}">Log</a> </li> <li class="nav-item"> <a class="nav-link" href="../branches/">Branches</a> </li> <li class="nav-item"> <a class="nav-link" href="../tags/">Tags</a> </li> <li class="nav-item"> <a class="nav-link" href="../settings/">Settings</a> </li> </ul>
<table id="file-tree" class="wide"> <thead> <tr class="title-row"> <th colspan="3"> /{{ .path_spec }}{{ if ne .path_spec "" }}/{{ end }}{{ if .ref_name }} on {{ .ref_name }}{{ end -}} </th> <tr> <th scope="col">Mode</th> <th scope="col">Filename</th> <th scope="col">Size</th> </tr> </tr> </thead> <tbody> {{- $path_spec := .path_spec -}} {{- range .files -}} <tr> <td class="file-mode">{{- .Mode -}}</td> <td class="file-name"><a href="{{- .Name -}}{{- if not .IsFile -}}/{{- end -}}{{- template "ref_query" $root -}}">{{- .Name -}}</a>{{- if not .IsFile -}}/{{- end -}}</td> <td class="file-size">{{- .Size -}}</td> </tr> {{- end -}} </tbody> </table> </div> <div class="padding-wrapper"> <div id="refs"> </div> </div> {{- if .readme -}} <div class="padding-wrapper" id="readme"> {{- .readme -}} </div> {{- end -}} <footer> {{- template "footer" . -}} </footer> </body> </html> {{- end -}}
{{/* SPDX-License-Identifier: AGPL-3.0-only SPDX-FileContributor: Runxi Yu <https://runxiyu.org> */}} {{- define "repo_tree_file" -}} {{- $root := . -}} <!DOCTYPE html> <html lang="en"> <head> {{- template "head_common" . -}} <link rel="stylesheet" href="/:/static/chroma.css" /> <title>/{{ .path_spec }} – {{ .repo_name }} – {{ template "group_path_plain" .group_path }} – {{ .global.forge_title -}}</title> </head> <body class="repo-tree-file"> {{- template "header" . -}} <div class="padding">
<ul class="nav-tabs-standalone"> <li class="nav-item"> <a class="nav-link" href="../{{- template "ref_query" $root -}}">Summary</a> </li> <li class="nav-item active"> <a class="nav-link" href="../tree/{{- template "ref_query" $root -}}">Tree</a> </li> <li class="nav-item"> <a class="nav-link" href="../log/{{- template "ref_query" $root -}}">Log</a> </li> <li class="nav-item"> <a class="nav-link" href="../branches/">Branches</a> </li> <li class="nav-item"> <a class="nav-link" href="../tags/">Tags</a> </li> <li class="nav-item"> <a class="nav-link" href="../settings/">Settings</a> </li> </ul>
<p> /{{ .path_spec }} (<a href="/{{ template "group_path_plain" .group_path }}/:/repos/{{ .repo_name }}/raw/{{ .path_spec }}{{- template "ref_query" $root -}}">raw</a>) </p> {{- .file_contents -}} </div> <footer> {{- template "footer" . -}} </footer> </body> </html> {{- end -}}