Style the new templates Still ugly but viewable, at least.

Changes

12 changed files (+716/-198)

• static/colors.css (new)
  • @@ -0,0 +1,185 @@
    + /**! uchū by NetOperator Wibby <https://github.com/NeverCease/uchu> + * Even though the code is Unlicense (public domain), I'm listing the creator as a copyright holder + * for programmatic access such as reuse-tool. + * I modified the code by removing code comments. + * + * Copyright NetOperator Wibby + * SPDX-License-Identifier: Unlicense + */ + + :root { + --uchu-gray-1-raw: 95.57% 0.003 286.35; + --uchu-gray-1: oklch(var(--uchu-gray-1-raw)); + --uchu-gray-2-raw: 92.04% 0.002 197.12; + --uchu-gray-2: oklch(var(--uchu-gray-2-raw)); + --uchu-gray-3-raw: 88.28% 0.003 286.34; + --uchu-gray-3: oklch(var(--uchu-gray-3-raw)); + --uchu-gray-4-raw: 84.68% 0.002 197.12; + --uchu-gray-4: oklch(var(--uchu-gray-4-raw)); + --uchu-gray-5-raw: 80.73% 0.002 247.84; + --uchu-gray-5: oklch(var(--uchu-gray-5-raw)); + --uchu-gray-6-raw: 75.03% 0.002 247.85; + --uchu-gray-6: oklch(var(--uchu-gray-6-raw)); + --uchu-gray-7-raw: 69.01% 0.003 286.32; + --uchu-gray-7: oklch(var(--uchu-gray-7-raw)); + --uchu-gray-8-raw: 63.12% 0.004 219.55; + --uchu-gray-8: oklch(var(--uchu-gray-8-raw)); + --uchu-gray-9-raw: 56.82% 0.004 247.89; + --uchu-gray-9: oklch(var(--uchu-gray-9-raw)); + + --uchu-red-1-raw: 88.98% 0.052 3.28; + --uchu-red-1: oklch(var(--uchu-red-1-raw)); + --uchu-red-2-raw: 78.78% 0.109 4.54; + --uchu-red-2: oklch(var(--uchu-red-2-raw)); + --uchu-red-3-raw: 69.86% 0.162 7.82; + --uchu-red-3: oklch(var(--uchu-red-3-raw)); + --uchu-red-4-raw: 62.73% 0.209 12.37; + --uchu-red-4: oklch(var(--uchu-red-4-raw)); + --uchu-red-5-raw: 58.63% 0.231 19.6; + --uchu-red-5: oklch(var(--uchu-red-5-raw)); + --uchu-red-6-raw: 54.41% 0.214 19.06; + --uchu-red-6: oklch(var(--uchu-red-6-raw)); + --uchu-red-7-raw: 49.95% 0.195 18.34; + --uchu-red-7: oklch(var(--uchu-red-7-raw)); + --uchu-red-8-raw: 45.8% 0.177 17.7; + --uchu-red-8: oklch(var(--uchu-red-8-raw)); + --uchu-red-9-raw: 41.17% 0.157 16.58; + --uchu-red-9: oklch(var(--uchu-red-9-raw)); + + --uchu-pink-1-raw: 95.8% 0.023 354.27; + --uchu-pink-1: oklch(var(--uchu-pink-1-raw)); + --uchu-pink-2-raw: 92.14% 0.046 352.31; + --uchu-pink-2: oklch(var(--uchu-pink-2-raw)); + --uchu-pink-3-raw: 88.9% 0.066 354.39; + --uchu-pink-3: oklch(var(--uchu-pink-3-raw)); + --uchu-pink-4-raw: 85.43% 0.09 354.1; + --uchu-pink-4: oklch(var(--uchu-pink-4-raw)); + --uchu-pink-5-raw: 82.23% 0.112 355.33; + --uchu-pink-5: oklch(var(--uchu-pink-5-raw)); + --uchu-pink-6-raw: 76.37% 0.101 355.37; + --uchu-pink-6: oklch(var(--uchu-pink-6-raw)); + --uchu-pink-7-raw: 70.23% 0.092 354.96; + --uchu-pink-7: oklch(var(--uchu-pink-7-raw)); + --uchu-pink-8-raw: 64.11% 0.084 353.91; + --uchu-pink-8: oklch(var(--uchu-pink-8-raw)); + --uchu-pink-9-raw: 57.68% 0.074 353.14; + --uchu-pink-9: oklch(var(--uchu-pink-9-raw)); + + --uchu-purple-1-raw: 89.1% 0.046 305.24; + --uchu-purple-1: oklch(var(--uchu-purple-1-raw)); + --uchu-purple-2-raw: 78.68% 0.091 305; + --uchu-purple-2: oklch(var(--uchu-purple-2-raw)); + --uchu-purple-3-raw: 68.5% 0.136 303.78; + --uchu-purple-3: oklch(var(--uchu-purple-3-raw)); + --uchu-purple-4-raw: 58.47% 0.181 302.06; + --uchu-purple-4: oklch(var(--uchu-purple-4-raw)); + --uchu-purple-5-raw: 49.39% 0.215 298.31; + --uchu-purple-5: oklch(var(--uchu-purple-5-raw)); + --uchu-purple-6-raw: 46.11% 0.198 298.4; + --uchu-purple-6: oklch(var(--uchu-purple-6-raw)); + --uchu-purple-7-raw: 42.77% 0.181 298.49; + --uchu-purple-7: oklch(var(--uchu-purple-7-raw)); + --uchu-purple-8-raw: 39.46% 0.164 298.29; + --uchu-purple-8: oklch(var(--uchu-purple-8-raw)); + --uchu-purple-9-raw: 36.01% 0.145 298.35; + --uchu-purple-9: oklch(var(--uchu-purple-9-raw)); + + --uchu-blue-1-raw: 89.66% 0.046 260.67; + --uchu-blue-1: oklch(var(--uchu-blue-1-raw)); + --uchu-blue-2-raw: 80.17% 0.091 258.88; + --uchu-blue-2: oklch(var(--uchu-blue-2-raw)); + --uchu-blue-3-raw: 70.94% 0.136 258.06; + --uchu-blue-3: oklch(var(--uchu-blue-3-raw)); + --uchu-blue-4-raw: 62.39% 0.181 258.33; + --uchu-blue-4: oklch(var(--uchu-blue-4-raw)); + --uchu-blue-5-raw: 54.87% 0.222 260.33; + --uchu-blue-5: oklch(var(--uchu-blue-5-raw)); + --uchu-blue-6-raw: 51.15% 0.204 260.17; + --uchu-blue-6: oklch(var(--uchu-blue-6-raw)); + --uchu-blue-7-raw: 47.36% 0.185 259.89; + --uchu-blue-7: oklch(var(--uchu-blue-7-raw)); + --uchu-blue-8-raw: 43.48% 0.17 260.2; + --uchu-blue-8: oklch(var(--uchu-blue-8-raw)); + --uchu-blue-9-raw: 39.53% 0.15 259.87; + --uchu-blue-9: oklch(var(--uchu-blue-9-raw)); + + --uchu-green-1-raw: 93.96% 0.05 148.74; + --uchu-green-1: oklch(var(--uchu-green-1-raw)); + --uchu-green-2-raw: 88.77% 0.096 147.71; + --uchu-green-2: oklch(var(--uchu-green-2-raw)); + --uchu-green-3-raw: 83.74% 0.139 146.57; + --uchu-green-3: oklch(var(--uchu-green-3-raw)); + --uchu-green-4-raw: 79.33% 0.179 145.62; + --uchu-green-4: oklch(var(--uchu-green-4-raw)); + --uchu-green-5-raw: 75.23% 0.209 144.64; + --uchu-green-5: oklch(var(--uchu-green-5-raw)); + --uchu-green-6-raw: 70.03% 0.194 144.71; + --uchu-green-6: oklch(var(--uchu-green-6-raw)); + --uchu-green-7-raw: 64.24% 0.175 144.92; + --uchu-green-7: oklch(var(--uchu-green-7-raw)); + --uchu-green-8-raw: 58.83% 0.158 145.05; + --uchu-green-8: oklch(var(--uchu-green-8-raw)); + --uchu-green-9-raw: 52.77% 0.138 145.41; + --uchu-green-9: oklch(var(--uchu-green-9-raw)); + + --uchu-yellow-1-raw: 97.05% 0.039 91.2; + --uchu-yellow-1: oklch(var(--uchu-yellow-1-raw)); + --uchu-yellow-2-raw: 95% 0.07 92.39; + --uchu-yellow-2: oklch(var(--uchu-yellow-2-raw)); + --uchu-yellow-3-raw: 92.76% 0.098 92.58; + --uchu-yellow-3: oklch(var(--uchu-yellow-3-raw)); + --uchu-yellow-4-raw: 90.92% 0.125 92.56; + --uchu-yellow-4: oklch(var(--uchu-yellow-4-raw)); + --uchu-yellow-5-raw: 89% 0.146 91.5; + --uchu-yellow-5: oklch(var(--uchu-yellow-5-raw)); + --uchu-yellow-6-raw: 82.39% 0.133 91.5; + --uchu-yellow-6: oklch(var(--uchu-yellow-6-raw)); + --uchu-yellow-7-raw: 75.84% 0.122 92.21; + --uchu-yellow-7: oklch(var(--uchu-yellow-7-raw)); + --uchu-yellow-8-raw: 69.14% 0.109 91.04; + --uchu-yellow-8: oklch(var(--uchu-yellow-8-raw)); + --uchu-yellow-9-raw: 62.29% 0.097 91.9; + --uchu-yellow-9: oklch(var(--uchu-yellow-9-raw)); + + --uchu-orange-1-raw: 93.83% 0.037 56.93; + --uchu-orange-1: oklch(var(--uchu-orange-1-raw)); + --uchu-orange-2-raw: 88.37% 0.07258208750520016 55.80328658240742; + --uchu-orange-2: oklch(var(--uchu-orange-2-raw)); + --uchu-orange-3-raw: 83.56% 0.10753627570574478 56.492594564236946; + --uchu-orange-3: oklch(var(--uchu-orange-3-raw)); + --uchu-orange-4-raw: 78.75% 0.14163582809066333 54.32911089172009; + --uchu-orange-4: oklch(var(--uchu-orange-4-raw)); + --uchu-orange-5-raw: 74.61% 0.171 51.56; + --uchu-orange-5: oklch(var(--uchu-orange-5-raw)); + --uchu-orange-6-raw: 69.33% 0.157 52.18; + --uchu-orange-6: oklch(var(--uchu-orange-6-raw)); + --uchu-orange-7-raw: 63.8% 0.142 52.1; + --uchu-orange-7: oklch(var(--uchu-orange-7-raw)); + --uchu-orange-8-raw: 58.28% 0.128 52.2; + --uchu-orange-8: oklch(var(--uchu-orange-8-raw)); + --uchu-orange-9-raw: 52.49% 0.113 51.98; + --uchu-orange-9: oklch(var(--uchu-orange-9-raw)); + + --uchu-yin-1-raw: 91.87% 0.003 264.54; + --uchu-yin-1: oklch(var(--uchu-yin-1-raw)); + --uchu-yin-2-raw: 84.61% 0.004 286.31; + --uchu-yin-2: oklch(var(--uchu-yin-2-raw)); + --uchu-yin-3-raw: 76.89% 0.004 247.87; + --uchu-yin-3: oklch(var(--uchu-yin-3-raw)); + --uchu-yin-4-raw: 69.17% 0.004 247.88; + --uchu-yin-4: oklch(var(--uchu-yin-4-raw)); + --uchu-yin-5-raw: 61.01% 0.005 271.34; + --uchu-yin-5: oklch(var(--uchu-yin-5-raw)); + --uchu-yin-6-raw: 52.79% 0.005 271.32; + --uchu-yin-6: oklch(var(--uchu-yin-6-raw)); + --uchu-yin-7-raw: 43.87% 0.005 271.3; + --uchu-yin-7: oklch(var(--uchu-yin-7-raw)); + --uchu-yin-8-raw: 35.02% 0.005 236.66; + --uchu-yin-8: oklch(var(--uchu-yin-8-raw)); + --uchu-yin-9-raw: 25.11% 0.006 258.36; + --uchu-yin-9: oklch(var(--uchu-yin-9-raw)); + --uchu-yin-raw: 14.38% 0.007 256.88; + --uchu-yin: oklch(var(--uchu-yin-raw)); + --uchu-yang-raw: 99.4% 0 0; + --uchu-yang: oklch(var(--uchu-yang-raw)); + }
• static/global.css (new)
  • @@ -0,0 +1,317 @@
    + /* Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: MIT + */ + + :root { + --font-sans: ui-rounded, ui-sans-serif, system-ui, sans-serif; + --font-mono: ui-monospace, monospace; + + --font-md: 1rem; + --font-sm: calc(var(--font-md) * 0.9); + --font-xs: calc(var(--font-md) * 0.7); + --font-lg: calc(var(--font-md) * 1.2); + --font-xl: calc(var(--font-md) * 1.5); + + --font-regular: 400; + --font-thick: 600; + --font-chonk: 800; + --font-thin: 300; + + --color-bg: var(--uchu-yang); + --color-bg-hover: var(--uchu-yin-2); + --color-fg: var(--uchu-yin-9); + --color-fg-weak: var(--uchu-yin-7); + --color-fg-subtle: var(--uchu-yin-5); + --color-link: var(--uchu-blue-8); + --color-shadow: oklch(var(--uchu-yin-raw) / 5%); + --color-border-subtle: oklch(var(--uchu-yin-3-raw) / 20%); + --color-border-normal: oklch(var(--uchu-yin-3-raw) / 50%); + --color-border-strong: oklch(var(--uchu-yin-3-raw) / 80%); + + /* Plastic ratio */ + --space-scale: 1.324717957; + --space-md: 8px; + --space-sm: calc(var(--space-md) / var(--space-scale)); + --space-xs: calc(var(--space-sm) / var(--space-scale)); + --space-xxs: calc(var(--space-xs) / var(--space-scale)); + --space-lg: calc(var(--space-md) * var(--space-scale)); + --space-xl: calc(var(--space-lg) * var(--space-scale)); + --space-xxl: calc(var(--space-xl) * var(--space-scale)); + + --radii-sm: 3px; + --radii-md: 6px; + } + + @media (prefers-contrast: more) { + :root { + --color-fg: var(--uchu-yin); + --color-fg-weak: var(--uchu-yin-9); + --color-fg-subtle: var(--uchu-yin-8); + --color-link: var(--uchu-blue-9); + } + } + + @media (prefers-color-scheme: dark) { + :root { + --color-bg: var(--uchu-yin-9); + --color-bg-hover: var(--uchu-yin-8); + --color-fg: var(--uchu-yang); + --color-fg-weak: var(--uchu-yin-1); + --color-fg-subtle: var(--uchu-yin-3); + --color-link: var(--uchu-blue-2); + } + } + + @media (prefers-color-scheme: dark) and (prefers-contrast: more) { + :root { + --color-bg: var(--uchu-yin); + --color-fg-subtle: var(--uchu-yin-2); + --color-link: var(--uchu-blue-1); + } + } + + *, *::before, *::after { + box-sizing: border-box; + } + + body { + font-family: var(--font-sans); + font-size: var(--font-md); + font-weight: var(--font-regular); + display: grid; + grid-template-columns: 100%; + grid-template-areas: + "header" + "main" + "aside"; + align-content: start; + padding: 0; + margin: 0; + width: 100vw; + min-height: 100dvh; + + background-color: var(--color-bg); + color: var(--color-fg); + overflow-x: hidden; + overflow-y: auto; + } + + :where(a) { + color: var(--color-link); + } + + .passthru { + display: contents; + } + + .header { + grid-area: header; + align-self: start; + display: flex; + flex-direction: column; + gap: var(--space-md); + padding: var(--space-lg) var(--space-lg); + } + + @media (min-height: 30rem) { + .header { + gap: var(--space-lg); + } + } + + .main { + grid-area: main; + width: 100%; + max-width: 60rem; + margin: 0 auto; + padding: var(--space-lg); + font-size: var(--font-md); + + overflow-x: auto; + } + + .aside { + grid-area: aside; + font-size: var(--font-sm); + width: 100%; + max-width: 60rem; + margin: 0 auto; + + overflow-x: auto; + } + + .breadcrumbs { + list-style: none; + display: flex; + flex-wrap: wrap; + gap: 0.5ch; + padding: 0; + margin: 0; + font-size: var(--font-sm); + } + .breadcrumbs > li { + display: inline-flex; + } + .breadcrumbs > li + li::before { + content: "/"; + margin-inline-end: 0.5ch; + } + .breadcrumbs a { + color: var(--color-link); + text-decoration: none; + } + .breadcrumbs a:hover { + text-decoration: underline; + } + .breadcrumbs a[aria-current="page"] { + color: var(--color-fg); + } + + .header-title { + display: flex; + flex-direction: column; + gap: var(--space-xs) var(--space-md); + } + .header-title--name { + font-weight: var(--font-thick); + font-size: var(--font-md); + } + .header-title--description { + font-weight: var(--font-regular); + font-size: var(--font-sm); + margin: 0; + + color: var(--color-fg-weak); + } + + @media (min-width: 40rem) { + .header-title { + flex-direction: row; + align-items: center; + } + + .header-title--description::before { + content: "—"; + margin-inline-end: var(--space-md); + + color: var(--color-fg-subtle); + } + } + + .repo-nav { + display: flex; + flex-wrap: wrap; + gap: var(--space-xs); + align-items: center; + margin: calc(-1 * var(--space-lg)); + margin-block-start: 0; + border-block-start: 1px solid var(--color-border-subtle); + } + .repo-nav > a { + display: inline-flex; + padding: var(--space-md) var(--space-lg); + line-height: 1; + font-size: var(--font-sm); + + color: var(--color-fg-weak); + text-decoration: none; + } + + @media (pointer: fine) { + .repo-nav > a { + padding: var(--space-sm) var(--space-lg); + } + } + + @media (any-hover: hover) { + .repo-nav > a:hover { + background-color: var(--color-bg-hover); + } + } + + /* Sticky header and aside */ + @media (min-height: 50rem) { + .header { + position: sticky; + top: 0; + + background-color: var(--color-bg); + box-shadow: 0 0 3px var(--color-shadow); + border-block-end: 1px solid var(--color-border-subtle); + z-index: 10; + } + + .aside { + --_top: 8rem; + } + } + + /* 2-column layout */ + @media (min-width: 80rem) { + body { + grid-template-columns: 60rem minmax(0, 1fr); + grid-template-areas: + "header header" + "main aside"; + } + + body:where(:not(:has(.aside))) { + grid-template-areas: + "header header" + "main main"; + } + + .aside { + overflow-x: hidden; + } + + .aside { + position: sticky; + top: var(--_top, var(--space-lg)); + align-self: start; + } + } + + /* 3-column layout */ + @media (min-width: 100rem) { + body { + --_side-start-y: min(40vh, 15rem); + + grid-template-columns: minmax(0, 40rem) minmax(60rem, 1fr) minmax(0, 40rem); + grid-template-areas: "header main aside"; + gap: var(--space-xxl); + } + + .header { + position: sticky; + top: var(--_side-start-y); + border-block-end: none; + + box-shadow: none; + } + + .breadcrumbs { + justify-content: end; + } + + .header-title { + flex-direction: column; + align-items: end; + } + .header-title--description::before { + display: none; + } + + .repo-nav { + padding-block-start: var(--space-xs); + justify-content: end; + } + .repo-nav > a { + border-radius: var(--radii-sm); + } + + .aside { + margin-top: var(--_side-start-y); + top: 0; + } + }
• templates/head.html.tmpl
  • @@ -13,4 +13,6 @@ {{- define "head" -}}
    <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" href="/favicon.png" type="image/png" /> + <link rel="stylesheet" href="/static/colors.css" /> + <link rel="stylesheet" href="/static/global.css" /> {{- end }}
• templates/repo-blob-ref.html.tmpl
  • @@ -19,8 +19,8 @@ </title>
    <meta name="description" content='{{ $path }} in {{ .Meta.DisplayName }}' /> </head> <body> - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li>
  • @@ -40,21 +40,18 @@ {{- if le $j $i }}
    {{- $trail = printf "%s/%s" $trail $seg -}} {{- end -}} {{- end -}} - {{- $type := "tree" -}} {{- if eq $segment $name -}} - {{- $type = "blob" -}} + <a href="/{{ $meta.DisplayName }}/blob/{{ $meta.Ref }}{{ $trail }}" aria-current="page">{{ $segment }}</a> + {{- else -}} + <a href="/{{ $meta.DisplayName }}/tree/{{ $meta.Ref }}{{ $trail }}">{{ $segment }}</a> {{- end -}} - <a href="/{{ $meta.DisplayName }}/{{ $type }}/{{ $meta.Ref }}{{ $trail }}">{{ $segment }}</a> </li> {{- end }} </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> + <main class="main"> <div style="display:grid;grid-template-columns:max-content minmax(0,1fr);gap:1px 1ch;font-family:monospace;line-height:1.3;"> <ol style="list-style:none;padding:0;"> {{- range .LineNumbers -}}
• templates/repo-commit.html.tmpl
  • @@ -14,8 +14,8 @@ </title>
    <meta name="description" content='{{ $shorthash }} in {{ .Meta.DisplayName }}' /> </head> <body> - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li>
  • @@ -23,111 +23,114 @@ <li>
    <a href="/{{ .Meta.DisplayName }}">{{ .Meta.DisplayName }}</a> </li> <li> - <a href="/{{ .Meta.DisplayName }}/commit/{{ .Meta.Ref }}">{{ $shorthash }}</a> + <a href="/{{ .Meta.DisplayName }}/commit/{{ .Meta.Ref }}" aria-current="page"> + {{- $shorthash -}} + </a> </li> </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> - <h1>{{ $shorthash }}</h1> - <pre> - {{- .Commit.Message -}} - </pre> - <h2>Metadata</h2> - <dl> - <dt>Author</dt> - <dd> - <a href="mailto:{{ .Commit.Author.Email }}"> - {{- .Commit.Author.Name -}} - </a> - authored at - <time datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}'> - {{ .Commit.Author.When.Format "2006-01-02 15:04:05 -0700" }} - </time> - </dd> - <dt>Committer</dt> - <dd> - <a href="mailto:{{ .Commit.Committer.Email }}"> - {{- .Commit.Committer.Name -}} - </a> - commited at - <time datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}'> - {{ .Commit.Committer.When.Format "2006-01-02 15:04:05 -0700" }} - </time> - </dd> - {{- if .Commit.PGPSignature }} - <dt>Signature</dt> - <dd> - <details> - <summary>View</summary> - <pre><code>{{ .Commit.PGPSignature }}</code></pre> - </details> - </dd> - {{ end -}} - {{- if not .Parent.Hash.IsZero }} - <dt>Parent</dt> - <dd> - <a href="/{{ .Meta.DisplayName }}/commit/{{ .Parent.Hash.String }}"> - {{- slice .Parent.Hash.String 0 8 -}} - </a> - </dd> - {{ end -}} - </dl> - <h2>Changes</h2> - <p> - {{ .Diff.Stat.FilesChanged }} changed files - (+{{ .Diff.Stat.Insertions }}/-{{ .Diff.Stat.Deletions }}) - </p> - <ul> - {{ $meta := .Meta }} - {{ $root := . }} - {{- range .Diff.Files }} - <li> - <div> - {{- if or .IsRename .IsDelete }} - <a href="/{{ $meta.DisplayName }}/blob/{{ $root.Parent.Hash.String }}/{{ .OldName }}">{{ .OldName }}</a> - {{- if .IsRename }} - &gt; - {{- else }} - (deleted) - {{- end }} - {{- end}} - <a href="/{{ $meta.DisplayName }}/blob/{{ $root.Commit.Hash.String }}/{{ .NewName }}">{{ .NewName }}</a> - {{- if not .OldName }} - <span>(new)</span> - {{ end -}} - </div> - <div> - {{ if .IsBinary -}} - <p>Diff for binary file is unavailable.</p> - {{- else -}} - <ul> - {{- range .TextFragments }} - <li> - <span>{{ .Header }}</span> - <pre> - {{- range .Lines -}} - {{- $op := "" -}} - {{- if eq .Op.String "+" -}} - {{- $op = "add" -}} - {{- else if eq .Op.String "-" -}} - {{- $op = "delete" -}} - {{- end -}} - <span data-op="{{ $op }}">{{ .String }}</span> - {{- end -}} - </pre> - </li> + <main class="passthru"> + <div class="main"> + <h1>{{ $shorthash }}</h1> + <pre> + {{- .Commit.Message -}} + </pre> + <h2>Changes</h2> + <p> + {{ .Diff.Stat.FilesChanged }} changed files + (+{{ .Diff.Stat.Insertions }}/-{{ .Diff.Stat.Deletions }}) + </p> + <ul> + {{ $meta := .Meta }} + {{ $root := . }} + {{- range .Diff.Files }} + <li> + <div> + {{- if or .IsRename .IsDelete }} + <a href="/{{ $meta.DisplayName }}/blob/{{ $root.Parent.Hash.String }}/{{ .OldName }}">{{ .OldName }}</a> + {{- if .IsRename }} + &gt; + {{- else }} + (deleted) + {{- end }} + {{- end}} + <a href="/{{ $meta.DisplayName }}/blob/{{ $root.Commit.Hash.String }}/{{ .NewName }}">{{ .NewName }}</a> + {{- if not .OldName }} + <span>(new)</span> {{ end -}} - </ul> - {{- end }} - </div> - </li> - {{ end -}} - </ul> + </div> + <div> + {{ if .IsBinary -}} + <p>Diff for binary file is unavailable.</p> + {{- else -}} + <ul> + {{- range .TextFragments }} + <li> + <span>{{ .Header }}</span> + <pre> + {{- range .Lines -}} + {{- $op := "" -}} + {{- if eq .Op.String "+" -}} + {{- $op = "add" -}} + {{- else if eq .Op.String "-" -}} + {{- $op = "delete" -}} + {{- end -}} + <span data-op="{{ $op }}">{{ .String }}</span> + {{- end -}} + </pre> + </li> + {{ end -}} + </ul> + {{- end }} + </div> + </li> + {{ end -}} + </ul> + </div> + <div class="aside"> + <h2>Metadata</h2> + <dl> + <dt>Author</dt> + <dd> + <a href="mailto:{{ .Commit.Author.Email }}"> + {{- .Commit.Author.Name -}} + </a> + authored at + <time datetime='{{ .Commit.Author.When.Format "2006-01-02T15:04:05-0700" }}'> + {{ .Commit.Author.When.Format "2006-01-02 15:04:05 -0700" }} + </time> + </dd> + <dt>Committer</dt> + <dd> + <a href="mailto:{{ .Commit.Committer.Email }}"> + {{- .Commit.Committer.Name -}} + </a> + commited at + <time datetime='{{ .Commit.Committer.When.Format "2006-01-02T15:04:05-0700" }}'> + {{ .Commit.Committer.When.Format "2006-01-02 15:04:05 -0700" }} + </time> + </dd> + {{- if .Commit.PGPSignature }} + <dt>Signature</dt> + <dd> + <details> + <summary>View</summary> + <pre><code>{{ .Commit.PGPSignature }}</code></pre> + </details> + </dd> + {{ end -}} + {{- if not .Parent.Hash.IsZero }} + <dt>Parent</dt> + <dd> + <a href="/{{ .Meta.DisplayName }}/commit/{{ .Parent.Hash.String }}"> + {{- slice .Parent.Hash.String 0 8 -}} + </a> + </dd> + {{ end -}} + </dl> + </div> </main> </body> </html>
• templates/repo-header.html.tmpl (new)
  • @@ -0,0 +1,21 @@
    + <!-- + Share UI for pages specific to a repository. This template requires "Meta repositoryMeta" + to be defined at the top of data structure (pipeline). + + <body> + <header> + {{ template "repo-header" . }} + </header> + </body> + + Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + SPDX-License-Identifier: MIT + --> + {{ define "repo-header" -}} + <div class="header-title"> + <span class="header-title--name">{{ .Meta.DisplayName }}</span> + {{ if .Meta.Description -}} + <p class="header-title--description">{{ .Meta.Description }}</p> + {{- end -}} + </div> + {{- end -}}
• templates/repo-list.html.tmpl
  • @@ -13,16 +13,13 @@ <meta name="description" content="{{ .Config.Meta.Description }}" />
    {{- end }} </head> <body> - <header> - <ol> - <li> - <a href="/">Top</a> - </li> - </ol> - <h1>{{ .Config.Meta.Title }}</h1> + <header class="header"> + <div class="header-title"> + <h1 class="header-title--name">{{ .Config.Meta.Title }}</h1> + <p class="header-title--description">{{ .Config.Meta.Description }}</p> + </div> </header> - <main> - <p>{{ .Config.Meta.Description }}</p> + <main class="main"> <ul> {{- range .Repositories }} <li>
• templates/repo-log-ref.html.tmpl
  • @@ -13,8 +13,8 @@ </title>
    <meta name="description" content='Commit history on {{ .Meta.DisplayName }} at {{ .Meta.Ref }}' /> </head> <body> - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li>
  • @@ -22,16 +22,15 @@ <li>
    <a href="/{{ .Meta.DisplayName }}">{{ .Meta.DisplayName }}</a> </li> <li> - <a href="/{{ .Meta.DisplayName }}/log/{{ .Meta.Ref }}">Commits</a> + <a href="/{{ .Meta.DisplayName }}/log/{{ .Meta.Ref }}" aria-current="page"> + Commits + </a> </li> </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> + <main class="main"> <h1>Commits at {{ .Meta.Ref }}</h1> <ol> {{- $meta := .Meta -}}
• templates/repo-nav.html.tmpl
  • @@ -12,7 +12,7 @@ Copyright 2025 Shota FUJI <pockawoooh@gmail.com>
    SPDX-License-Identifier: MIT --> {{ define "repo-nav" -}} - <nav> + <nav class="repo-nav"> <a href="/{{ .Meta.DisplayName }}">Summary</a> <a href="/{{ .Meta.DisplayName }}/refs">Refs</a> <a href="/{{ .Meta.DisplayName }}/log/{{ .Meta.Ref }}">Commits</a>
• templates/repo-refs.html.tmpl
  • @@ -11,8 +11,8 @@ <title>Refs - {{ .Meta.DisplayName }}</title>
    <meta name="description" content="Git refs of {{ .Meta.DisplayName }}" /> </head> <body> - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li>
  • @@ -20,16 +20,13 @@ <li>
    <a href="/{{ .Meta.DisplayName }}">{{ .Meta.DisplayName }}</a> </li> <li> - <a href="/{{ .Meta.DisplayName }}/refs">Refs</a> + <a href="/{{ .Meta.DisplayName }}/refs" aria-current="page">Refs</a> </li> </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> + <main class="main"> {{- $meta := .Meta -}} <h2>Branches</h2> <ul>
• templates/repo-top.html.tmpl
  • @@ -19,62 +19,61 @@ />
    {{- end }} </head> <body> - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li> <li> - <a href="/{{ .Meta.DisplayName }}">{{ .Meta.DisplayName }}</a> + <a aria-current="page" href="/{{ .Meta.DisplayName }}">{{ .Meta.DisplayName }}</a> </li> </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> + <main class="main"> {{- .Readme -}} </main> - <aside> - <dl> - <dt>Default branch</dt> - <dd>{{ .DefaultBranch }}</dd> - <dt>Clone URL</dt> - <dd><code>https://{{ .Config.Server.Name }}/{{ .Meta.DirName }}</code></dd> - {{- if and .IsGoModule .Config.Server.Name -}} - <dt>Go Module</dt> - <dd>{{ .Config.Server.Name }}/{{ .Meta.DisplayName }}</dd> - {{- end -}} - </dl> - </aside> - <aside> - <h2>Recent commits</h2> - <ol> - {{ $meta := .Meta }} - {{- range .RecentCommits }} - <li> - <div> - <a href="/{{ $meta.DisplayName }}/commit/{{ .Hash.String }}"> - {{- slice .Hash.String 0 8 -}} - </a> - - - <a href="mailto:{{ .Committer.Email }}"> - {{- .Committer.Name -}} - </a> - comitted at - <time datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'> - {{ .Committer.When.Format "2006-01-02 15:04:05 -0700" }} - </time> - </div> - <pre> - {{- .Message -}} - </pre> - </li> - {{- end -}} - </ol> - </aside> + <div class="aside"> + <aside> + <dl> + <dt>Default branch</dt> + <dd>{{ .DefaultBranch }}</dd> + <dt>Clone URL</dt> + <dd><code>https://{{ .Config.Server.Name }}/{{ .Meta.DirName }}</code></dd> + {{- if and .IsGoModule .Config.Server.Name -}} + <dt>Go Module</dt> + <dd>{{ .Config.Server.Name }}/{{ .Meta.DisplayName }}</dd> + {{- end -}} + </dl> + </aside> + <aside> + <h2>Recent commits</h2> + <ol> + {{ $meta := .Meta }} + {{- range .RecentCommits }} + <li> + <div> + <a href="/{{ $meta.DisplayName }}/commit/{{ .Hash.String }}"> + {{- slice .Hash.String 0 8 -}} + </a> + - + <a href="mailto:{{ .Committer.Email }}"> + {{- .Committer.Name -}} + </a> + comitted at + <time datetime='{{ .Committer.When.Format "2006-01-02T15:04:05-0700" }}'> + {{ .Committer.When.Format "2006-01-02 15:04:05 -0700" }} + </time> + </div> + <pre> + {{- .Message -}} + </pre> + </li> + {{- end -}} + </ol> + </aside> + </div> </body> </html> {{- end }}
• templates/repo-tree-ref.html.tmpl
  • @@ -19,8 +19,8 @@ <meta name="description" content='{{ or $path "List of files" }} in {{ .Meta.DisplayName }}' />
    </head> <body> {{- $meta := .Meta -}} - <header> - <ol> + <header class="header"> + <ol class="breadcrumbs"> <li> <a href="/">Top</a> </li>
  • @@ -39,17 +39,18 @@ {{- if le $j $i }}
    {{- $trail = printf "%s/%s" $trail $seg -}} {{- end -}} {{- end -}} - <a href="/{{ $meta.DisplayName }}/tree/{{ $meta.Ref }}{{ $trail }}">{{ $segment }}</a> + {{- $aria_current := "false" -}} + {{- if eq $trail $path -}} + {{- $aria_current = "page" -}} + {{- end -}} + <a href="/{{ $meta.DisplayName }}/tree/{{ $meta.Ref }}{{ $trail }}" aria-current="{{ $aria_current }}">{{ $segment }}</a> </li> {{- end }} </ol> - <span>{{ .Meta.DisplayName }}</span> - {{ if .Meta.Description -}} - <p>{{ .Meta.Description }}</p> - {{- end -}} + {{ template "repo-header" . }} + {{ template "repo-nav" . }} </header> - {{ template "repo-nav" . }} - <main> + <main class="main"> {{- $prefix := $path -}} {{- if $prefix -}} {{- $prefix = printf "%s/" $prefix -}}