shell.templ RawHistoryFolder
1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3package web
4
5// Shell is the page: head, the header, the work area (content and rail), the
6// footer, the hint badge, the overlays and the key map. The content is the
7// children.
8templ Shell(l Layout, rail templ.Component) {
9 <!DOCTYPE html>
10 <html lang="en">
11 <head>
12 <meta charset="utf-8"/>
13 <meta name="viewport" content="width=device-width, initial-scale=1"/>
14 <meta name="color-scheme" content="light dark"/>
15 <title>{ l.Title }</title>
16 <link rel="icon" type="image/svg+xml" href={ templ.SafeURL(l.Assets.Icon) }/>
17 <link rel="preload" href={ templ.SafeURL(l.Assets.Font) } as="font" type="font/woff2" crossorigin/>
18 <link rel="stylesheet" href={ templ.SafeURL(l.Assets.CSS) }/>
19 <script src={ l.Assets.HTMX } defer></script>
20 <script src={ l.Assets.Live } defer></script>
21 <script src={ l.Assets.SSE } defer></script>
22 <script src={ l.Assets.App } defer></script>
23 <script src={ l.Assets.Files } defer></script>
24 </head>
25 <body
26 data-ref={ l.RefPath }
27 data-sha={ l.SHA }
28 data-sel=""
29 data-nav=""
30 if l.PathsURL != "" {
31 data-paths={ l.PathsURL }
32 data-blob={ l.BlobBase }
33 }
34 >
35 <a class="skip" href="#main">skip to content</a>
36 @Header(l)
37 <div class={ "work", templ.KV("has-rail", l.HasRail && rail != nil) }>
38 if l.Lede != "" {
39 <section class="work-lede" aria-label="Description"><p class="lede">{ l.Lede }</p></section>
40 }
41 <main id="main" tabindex="-1">
42 { children... }
43 </main>
44 if l.HasRail && rail != nil {
45 <aside class="rail" aria-label="Context">
46 @rail
47 </aside>
48 }
49 </div>
50 @Footer(l)
51 @Hint(l)
52 @OverlayHelp()
53 @OverlayRefs(l)
54 @OverlayCmd(l.Cmd)
55 @Keys()
56 </body>
57 </html>
58}
59
60// Header is the page header: the instance, the path, the ref switcher, the
61// "go to" palette and the owner; inside a repository, the tabs below.
62templ Header(l Layout) {
63 <header class="hdr">
64 <div class="hdr-top">
65 <a class="brand" href="/" data-g="h" title="home (g h)">
66 <span class="brand-mark" aria-hidden="true"></span>
67 <span class="brand-name">{ l.Instance }</span>
68 </a>
69 if len(l.Crumbs) > 0 {
70 <nav class="crumbs" aria-label="Path">
71 <ol>
72 for _, c := range l.Crumbs {
73 <li>
74 if c.Href != "" {
75 <a
76 href={ templ.SafeURL(c.Href) }
77 if c.Current {
78 aria-current="page"
79 }
80 >{ c.Label }</a>
81 } else {
82 <span
83 if c.Current {
84 aria-current="page"
85 }
86 >{ c.Label }</span>
87 }
88 </li>
89 }
90 </ol>
91 </nav>
92 }
93 <div class="hdr-acts">
94 if l.Ref != "" {
95 <button
96 type="button"
97 class="btn ref"
98 aria-haspopup="dialog"
99 aria-controls="panel-refs"
100 aria-keyshortcuts="b"
101 title="switch branch or tag (b)"
102 hx-on:click="document.body.dispatchEvent(new CustomEvent('k-refs'))"
103 >
104 <span class="ico i-branch" aria-hidden="true"></span>
105 <span class="ref-name">{ l.Ref }</span>
106 <span class="sha">{ l.Short }</span>
107 </button>
108 }
109 <button
110 type="button"
111 class="btn search"
112 aria-haspopup="dialog"
113 aria-controls="panel-cmd"
114 aria-keyshortcuts="Control+K :"
115 title="go to a section, ref, file or repo (ctrl k or :)"
116 hx-on:click="document.body.dispatchEvent(new CustomEvent('k-cmd'))"
117 >
118 <span class="ico i-search" aria-hidden="true"></span>
119 <span class="search-label">Go to…</span>
120 <kbd aria-hidden="true">ctrl k</kbd>
121 </button>
122 <button type="button" class="btn icon" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?" aria-label="Keyboard shortcuts" title="keyboard shortcuts (?)" hx-on:click="document.body.dispatchEvent(new CustomEvent('k-help'))">?</button>
123 if SignedIn(ctx) {
124 <form class="owner" method="post" action="/-/logout">
125 <span class="owner-badge" title="signed in as the owner">owner</span>
126 <button type="submit" class="btn" title="sign out of this browser">Sign out</button>
127 </form>
128 }
129 </div>
130 </div>
131 if len(l.Sections) > 0 {
132 <nav class="tabs" aria-label="Sections">
133 <ul>
134 for _, s := range l.Sections {
135 <li>
136 <a
137 href={ templ.SafeURL(s.Href) }
138 data-key={ s.Key }
139 aria-keyshortcuts={ s.Key }
140 if s.Current {
141 aria-current="page"
142 }
143 >{ s.Label }<kbd aria-hidden="true">{ s.Key }</kbd></a>
144 </li>
145 }
146 </ul>
147 </nav>
148 }
149 </header>
150}
151
152// Footer is the version and the link to the source of the running version,
153// which the AGPL §13 asks every user of the service to be offered.
154templ Footer(l Layout) {
155 <footer class="foot">
156 <span>ermite { l.Version }</span>
157 <a href={ templ.SafeURL(l.SourceURL) } rel="noopener" title="source of this version (AGPL-3.0-or-later)">source</a>
158 <span class="foot-keys"><kbd>?</kbd> keyboard shortcuts</span>
159 </footer>
160}
161
162// Hint is the floating badge at the bottom right. It shows only what the
163// keyboard just did or what needs attention: the row position while j/k
164// move, the selected lines of a file, a flash message (permalink copied) and
165// a lost event stream. Empty, it takes no room.
166templ Hint(l Layout) {
167 <div class="hint" role="status" aria-live="polite">
168 <span class="hint-nav" :text="document.body.dataset.nav || ''"></span>
169 <span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''"></span>
170 <span class="hint-flash" :text="document.body.dataset.flash || ''"></span>
171 @Live(l)
172 </div>
173}