Style repo tree (files) page

Changes

4 changed files (+153/-7)

• static/global.css
  • @@ -23,6 +23,7 @@ --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-decoration: var(--uchu-blue-6); --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%);
  • @@ -59,6 +60,7 @@ --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); + --color-decoration: var(--uchu-blue-4); } }
• static/repo-tree-ref.css (new)
  • @@ -0,0 +1,69 @@
    + /* Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + * SPDX-License-Identifier: MIT + */ + + .tree-list { + display: flex; + flex-direction: column; + list-style: none; + padding: 0; + margin: 0; + } + + .tree-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr) max-content max-content; + grid-template-areas: + "icon name name name" + ". . mode size"; + align-items: center; + gap: var(--space-sm); + padding: var(--space-sm) 0; + border-block-end: 1px solid var(--color-border-subtle); + } + + @media (any-hover: hover) { + .tree-row:hover { + text-decoration: none; + } + .tree-row:hover > .tree-row--name { + text-decoration: underline; + } + } + + .tree-row--dir-icon, .tree-row--file-icon { + grid-area: icon; + width: auto; + height: 1em; + } + + .tree-row--dir-icon { + color: var(--color-decoration); + } + + .tree-row--file-icon { + color: var(--color-fg-subtle); + } + + .tree-row--name { + grid-area: name; + line-height: 1.3; + + color: var(--color-fg); + } + + .tree-row--mode { + grid-area: mode; + font-size: var(--font-sm); + line-height: 1.1; + + color: var(--color-fg-subtle); + } + + .tree-row--size { + grid-area: size; + font-size: var(--font-sm); + line-height: 1.1; + + color: var(--color-fg-weak); + }
• templates/icons.html.tmpl (new)
  • @@ -0,0 +1,65 @@
    + <!-- + Icon templates. Include this template then you can use icons with `<use>` element: + + <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> + <use href="#icon_dir" /> + </svg> + + Replace `icon_dir` with an ID of your desired icon listed here. Make sure to set + `0 0 24 24` to `viewBox` attribute, as this is the only requirement. + + Copyright 2025 Shota FUJI <pockawoooh@gmail.com> + SPDX-License-Identifier: MIT + + This file contains modified icons from Lucide project, copyright and license below: + === + + ISC License + + Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022. + + Permission to use, copy, modify, and/or distribute this software for any + purpose with or without fee is hereby granted, provided that the above + copyright notice and this permission notice appear in all copies. + + THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES + WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF + MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR + ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES + WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN + ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF + OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. + --> + {{ define "icons" -}} + <div aria-hidden="true" style="position:fixed;top:0;left:0;visibility:hidden;pointer-events:none;"> + <svg + id="icon_dir" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" /> + </svg> + <svg + id="icon_file" + xmlns="http://www.w3.org/2000/svg" + width="24" + height="24" + viewBox="0 0 24 24" + fill="none" + stroke="currentColor" + stroke-width="2" + stroke-linecap="round" + stroke-linejoin="round" + > + <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" /> + <path d="M14 2v4a2 2 0 0 0 2 2h4" /> + </svg> + </div> + {{- end }}
• templates/repo-tree-ref.html.tmpl
  • @@ -7,6 +7,7 @@ <!DOCTYPE html>
    <html lang="en"> <head> {{ template "head" }} + <link rel="stylesheet" href="/static/repo-tree-ref.css" /> {{- $path := "" -}} {{- range .Path -}} {{- $path = printf "%s/%s" $path . -}}
  • @@ -19,6 +20,7 @@ <meta name="description" content='{{ or $path "List of files" }} in {{ .Meta.DisplayName }}' />
    </head> <body> {{- $meta := .Meta -}} + {{- template "icons" -}} <header class="header"> <ol class="breadcrumbs"> <li>
  • @@ -55,20 +57,28 @@ {{- $prefix := $path -}}
    {{- if $prefix -}} {{- $prefix = printf "%s/" $prefix -}} {{- end -}} - <ul> + <ul class="tree-list"> {{ range .Files -}} <li> {{ if not .IsFile -}} - <a href="/{{ $meta.DisplayName }}/tree/{{ $meta.Ref }}/{{ $prefix }}{{ .Name }}"> - {{ .Name }}/ + <a class="tree-row" href="/{{ $meta.DisplayName }}/tree/{{ $meta.Ref }}/{{ $prefix }}{{ .Name }}"> + <svg class="tree-row--icon tree-row--dir-icon" viewBox="0 0 24 24"> + <use href="#icon_dir" /> + </svg> + <span class="tree-row--name">{{ .Name }}/</span> + <span class="tree-row--mode">{{ .Mode }}</span> + <span class="tree-row--size">{{ .Size }} bytes</span> </a> {{- else -}} - <a href="/{{ $meta.DisplayName }}/blob/{{ $meta.Ref }}/{{ $prefix }}{{ .Name }}"> - {{ .Name }} + <a class="tree-row" href="/{{ $meta.DisplayName }}/blob/{{ $meta.Ref }}/{{ $prefix }}{{ .Name }}"> + <svg class="tree-row--icon tree-row--file-icon" viewBox="0 0 24 24"> + <use href="#icon_file" /> + </svg> + <span class="tree-row--name">{{ .Name }}</span> + <span class="tree-row--mode">{{ .Mode }}</span> + <span class="tree-row--size">{{ .Size }} bytes</span> </a> {{- end }} - <span>{{ .Mode }}</span> - <span>{{ .Size }} bytes</span> </li> {{- end }} </ul>