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 <meta name="theme-color" data-scheme="light" media="(prefers-color-scheme: light)" content="#ffffff"/>
17 <meta name="theme-color" data-scheme="dark" media="(prefers-color-scheme: dark)" content="#0c0c0c"/>
18 <meta name="apple-mobile-web-app-title" content="ermite"/>
19 <link rel="icon" type="image/svg+xml" href={ templ.SafeURL(l.Assets.Icon) }/>
20 <link rel="apple-touch-icon" href={ templ.SafeURL(l.Assets.AppleIcon) }/>
21 <link rel="manifest" href={ templ.SafeURL(l.Assets.Manifest) }/>
22 <link rel="preload" href={ templ.SafeURL(l.Assets.Font) } as="font" type="font/woff2" crossorigin/>
23 <link rel="stylesheet" href={ templ.SafeURL(l.Assets.CSS) }/>
24 <meta name="htmx-config" content='{"history":false,"includeIndicatorCSS":false,"extensions":"sse, hx-live"}'/>
25 <script src={ l.Assets.HTMX } defer></script>
26 <script src={ l.Assets.Live } defer></script>
27 <script src={ l.Assets.SSE } defer></script>
28 <script src={ l.Assets.Store }></script>
29 <script src={ l.Assets.App } defer></script>
30 <script src={ l.Assets.Files } defer></script>
31 <script src={ l.Assets.Passkey } defer></script>
32 <script src={ l.Assets.Log } defer></script>
33 if l.Lazy {
34 <script src={ l.Assets.Lazy } defer></script>
35 }
36 if l.MR {
37 <script src={ l.Assets.MR } defer></script>
38 }
39 if l.IssueForm {
40 <script src={ l.Assets.IssueForm } defer></script>
41 }
42 </head>
43 <body
44 data-ref={ l.RefPath }
45 data-sha={ l.SHA }
46 data-sel=""
47 data-nav=""
48 if l.PathsURL != "" {
49 data-paths={ l.PathsURL }
50 data-blob={ l.BlobBase }
51 }
52 >
53 <a class="skip" href="#main">skip to content</a>
54 @Header(l)
55 <div class={ "work", templ.KV("has-rail", l.HasRail && rail != nil) }>
56 if l.Lede != "" {
57 <section class="work-lede" aria-label="Description"><p class="lede">{ l.Lede }</p></section>
58 }
59 <main id="main" tabindex="-1">
60 { children... }
61 </main>
62 if l.HasRail && rail != nil {
63 <aside class="rail" aria-label="Context">
64 @rail
65 </aside>
66 }
67 </div>
68 @Footer(l)
69 @Hint(l)
70 if SignedIn(ctx) {
71 <a hidden data-inbox href={ inboxPath }>Inbox</a>
72 }
73 @OverlayHelp(l.MR)
74 @OverlayRefs(l)
75 @OverlayCmd(l.Cmd)
76 @Keys()
77 </body>
78 </html>
79}
80
81// Header is the page header: the logo (home), the path, the ref switcher,
82// the "go to" palette and the owner; inside a repository, the tabs below.
83templ Header(l Layout) {
84 <header class="hdr">
85 <div class="hdr-top">
86 <a class="brand" href="/" data-g="h" aria-label="home" title="home (g h)">
87 <span class="brand-mark" aria-hidden="true"></span>
88 </a>
89 if l.Inbox != nil {
90 <a
91 class="btn inbox-btn"
92 href={ templ.SafeURL(l.Inbox.Href) }
93 title="inbox (I)"
94 aria-keyshortcuts="Shift+I"
95 >
96 <span class="ico i-mailbox" aria-hidden="true"></span>
97 Inbox
98 if l.Inbox.Count >= 0 {
99 <span class="count">{ itoa(l.Inbox.Count) }</span>
100 }
101 </a>
102 }
103 if len(l.Crumbs) > 0 {
104 <nav class="crumbs" aria-label="Path">
105 <ol>
106 for _, c := range l.Crumbs {
107 <li>
108 if c.Href != "" {
109 <a
110 href={ templ.SafeURL(c.Href) }
111 if c.Current {
112 aria-current="page"
113 }
114 >{ c.Label }</a>
115 } else {
116 <span
117 if c.Current {
118 aria-current="page"
119 }
120 >{ c.Label }</span>
121 }
122 </li>
123 }
124 </ol>
125 </nav>
126 }
127 <div class="hdr-acts">
128 if l.Ref != "" {
129 <a
130 class="btn ref"
131 href={ templ.SafeURL(repoHref(l.Repo, "refs")) }
132 data-fire="refs"
133 aria-keyshortcuts="b"
134 title="switch branch or tag (b)"
135 >
136 <span class="ico i-branch" aria-hidden="true"></span>
137 <span class="ref-name">{ l.Ref }</span>
138 <span class="sha">{ l.Short }</span>
139 </a>
140 }
141 <button
142 type="button"
143 class="btn search"
144 data-js
145 aria-haspopup="dialog"
146 aria-controls="panel-cmd"
147 aria-keyshortcuts="Control+K :"
148 title="go to a section, ref, file or repo (ctrl k or :)"
149 data-fire="cmd"
150 >
151 <span class="ico i-search" aria-hidden="true"></span>
152 <span class="search-label">Go to…</span>
153 <kbd aria-hidden="true">ctrl k</kbd>
154 </button>
155 if SignedIn(ctx) {
156 <form class="owner" method="post" action="/-/logout">
157 <span class="owner-badge" title="signed in as the owner"><span class="ico i-user" aria-hidden="true"></span>{ l.Owner }</span>
158 if l.Passkeys {
159 <a class="btn icon" href="/-/passkeys" aria-label="Passkeys" title="passkeys: add or remove the passkeys that sign you in"><span class="ico i-key" aria-hidden="true"></span></a>
160 }
161 <button type="submit" class="btn icon" aria-label="Sign out" title="sign out of this browser"><span class="ico i-log-out" aria-hidden="true"></span></button>
162 </form>
163 } else if l.Passkeys {
164 <a class="btn icon" href="/-/login" aria-label="Sign in" title="sign in with a passkey"><span class="ico i-log-in" aria-hidden="true"></span></a>
165 }
166 </div>
167 </div>
168 if len(l.Sections) > 0 {
169 <nav class="tabs" aria-label="Sections">
170 <ul>
171 for _, s := range l.Sections {
172 <li>
173 <a
174 href={ templ.SafeURL(s.Href) }
175 data-key={ "g " + s.Key }
176 if s.Current {
177 aria-current="page"
178 }
179 >
180 { s.Label }
181 if s.Count != "" {
182 <span class="count">{ s.Count }<span class="sr">{ " open" }</span></span>
183 }
184 <kbd aria-hidden="true">{ "g " + s.Key }</kbd>
185 </a>
186 </li>
187 }
188 </ul>
189 </nav>
190 }
191 </header>
192}
193
194// Footer is the version and the link to the source of the running version,
195// which the AGPL §13 asks every user of the service to be offered, then the
196// keyboard shortcuts and the theme switch (auto, light, dark; ermite.js shows
197// the stored mode).
198templ Footer(l Layout) {
199 <footer class="foot">
200 <span>ermite { l.Version }</span>
201 <a href={ templ.SafeURL(l.SourceURL) } rel="noopener" title="source of this version (AGPL-3.0-or-later)">source</a>
202 <button type="button" class="foot-keys" data-js data-fire="help" aria-haspopup="dialog" aria-controls="panel-help" aria-keyshortcuts="?"><kbd aria-hidden="true">?</kbd> keyboard shortcuts</button>
203 <button type="button" class="foot-theme" data-js data-theme-switch aria-label="theme: auto (switch to light)" title="theme: auto (switch to light)"><span class="ico i-sun-moon" aria-hidden="true"></span></button>
204 </footer>
205}
206
207// Hint is the floating badge at the bottom right. It shows only what the
208// keyboard just did or what needs attention: the row position while j/k
209// move, the selected lines of a file, a flash message (permalink copied) and
210// a lost event stream. Empty, it takes no room.
211templ Hint(l Layout) {
212 <div class="hint">
213 <span aria-hidden="true" class="hint-nav" :text="document.body.dataset.nav || ''"></span>
214 <span role="status" aria-live="polite"><span class="hint-sel" :text="document.body.dataset.sel ? document.body.dataset.sel + ' · y permalink' : ''"></span>
215 <span class="hint-flash" :text="document.body.dataset.flash || ''"></span></span>
216 @Live(l)
217 </div>
218}