tree.templ RawHistoryFolder
1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3package web
4
5// Tree is a directory: the file finder, the entries with their last commit, the
6// notes on what is left out, and the README of the directory below.
7templ Tree(l Layout, p TreePage) {
8 @Shell(l, nil) {
9 <div class="filter">
10 <label for="finder-q" class="sr">find a file</label>
11 <input
12 id="finder-q"
13 type="search"
14 data-filter
15 role="combobox"
16 aria-autocomplete="list"
17 aria-controls="finder-list"
18 aria-expanded="false"
19 placeholder="Find a file…"
20 autocomplete="off"
21 spellcheck="false"
22 hx-on:focus="ermiteFinder.load()"
23 hx-on:input="ermiteFinder.input(this)"
24 hx-on:keydown="ermiteFinder.key(this, event)"
25 />
26 </div>
27 <div id="finder" hidden>
28 <p id="finder-status" class="dim" aria-live="polite"></p>
29 <ul id="finder-list" class="cmd-list" role="listbox" aria-label="Files"></ul>
30 </div>
31 <div id="tree-view">
32 <table class="list tree" aria-label="Entries">
33 <thead>
34 <tr><th class="cur"></th><th class="c-kind"></th><th class="c-name">name</th><th class="c-size">size</th><th class="c-sub">last commit</th><th class="c-who">author</th><th class="c-when">date</th></tr>
35 </thead>
36 <tbody id="tree-rows" data-rows hx-on:click="ermiteTree.click(event)">
37 @TreeRows(p)
38 </tbody>
39 </table>
40 if len(p.Rows) == 0 {
41 <p class="lede dim">this directory is empty.</p>
42 }
43 for _, n := range p.Notes {
44 <p class="note">{ n }</p>
45 }
46 if p.Readme != nil {
47 @ReadmeCard(*p.Readme)
48 }
49 </div>
50 }
51}
52
53// TreeRows is the rows of a directory alone: what files.js inserts under a
54// directory it opens in place. When the directory has more entries than are
55// listed, the last row links to its page.
56templ TreeRows(p TreePage) {
57 for _, r := range p.Rows {
58 @TreeRowView(r)
59 }
60 if p.More != "" {
61 <tr class="tree-more"><td colspan="7"><a href={ templ.SafeURL(p.More) }>more entries: open the directory</a></td></tr>
62 }
63}
64
65// TreeRowView is one entry of a directory. Glyph: ▸ directory (▾ once opened
66// in place), @ symbolic link, + submodule, · file. A directory link carries
67// data-expand, the URL of its rows.
68templ TreeRowView(r TreeRow) {
69 <tr data-cursor?={ r.Cursor }>
70 <td class="cur" aria-hidden="true"></td>
71 <td class="c-kind" aria-hidden="true">{ r.Glyph }</td>
72 <td class="c-name">
73 if r.Href != "" {
74 <a
75 href={ templ.SafeURL(r.Href) }
76 if r.Expand != "" {
77 data-expand={ r.Expand }
78 aria-expanded="false"
79 }
80 >{ r.Name }</a>
81 } else {
82 { r.Name }
83 }
84 </td>
85 <td class="c-size num dim">{ r.Size }</td>
86 <td class="c-sub dim">
87 if r.CHref != "" {
88 <a href={ templ.SafeURL(r.CHref) }>{ r.Subject }</a>
89 }
90 </td>
91 <td class="c-who dim">{ r.Author }</td>
92 <td class="c-when nowrap dim">
93 if r.WhenAt != "" {
94 <time datetime={ r.WhenAt } title={ r.WhenAt }>{ r.When }</time>
95 }
96 </td>
97 </tr>
98}