components.templ RawHistoryFolder
1// SPDX-License-Identifier: AGPL-3.0-or-later
2
3package web
4
5// Facts is a key/value block on an 11ch key column.
6templ Facts(facts []Fact) {
7 <dl class="kv">
8 for _, f := range facts {
9 <dt>{ f.Key }</dt>
10 @FactValue(f)
11 }
12 </dl>
13}
14
15// CloneBlock is a block of copyable shell lines; each has its own [copy]
16// button, whose label says "copied" for 1.5 s.
17templ CloneBlock(c Clone) {
18 <div class="clone" id={ c.ID }>
19 for _, line := range c.Lines {
20 <div class="clone-line">
21 <span class="mute" aria-hidden="true">$ </span><code>{ line }</code>
22 <button
23 type="button"
24 class="btn copy"
25 data-js
26 data-label="Copy"
27 aria-label={ "copy: " + line }
28 hx-on:click="ermite.copy(this)"
29 >Copy</button>
30 </div>
31 }
32 </div>
33}
34
35// HomeRowView is the row of a repository in the home list. On the left what
36// it is: name, description, topics and the pulse of its activity; on the
37// right its figures and CI state over its newest commits. Its id is the
38// target of SSE swaps; the name link comes first, `enter` follows it.
39templ HomeRowView(r HomeRow) {
40 <li id={ r.ID } class="repo" data-cursor?={ r.Cursor }>
41 <div class="repo-main">
42 <h2 class="repo-name">
43 <a href={ templ.SafeURL(r.Href) }>{ r.Name }</a>
44 if r.Private {
45 <span class="pill">private</span>
46 }
47 if r.Fresh {
48 <span class="pill new">new push</span>
49 }
50 </h2>
51 if r.Desc != "" {
52 <p class="repo-desc">{ r.Desc }</p>
53 } else {
54 <p class="repo-desc mute">no description</p>
55 }
56 if len(r.Topics) > 0 {
57 <ul class="repo-topics" aria-label={ "Topics of " + r.Name }>
58 for _, t := range r.Topics {
59 <li>{ t }</li>
60 }
61 </ul>
62 }
63 if r.Stats != nil && r.Stats.Pulse != nil {
64 @pulse(r.Stats.Pulse)
65 }
66 </div>
67 <div class="repo-head">
68 <dl class="repo-stats" aria-label={ "Figures of " + r.Name }>
69 if s := r.Stats; s != nil {
70 <div><dt>commits</dt><dd>{ s.Commits }</dd></div>
71 <div><dt>last 30 days</dt><dd>{ s.Recent }</dd></div>
72 if s.Tag != "" {
73 <div class="rs-tag">
74 <dt>latest tag</dt>
75 if s.TagHref != "" {
76 <dd><a href={ templ.SafeURL(s.TagHref) } title={ s.Tag + " · made " + s.TagWhen }>{ s.Tag }</a></dd>
77 } else {
78 <dd title={ s.Tag + " · made " + s.TagWhen }>{ s.Tag }</dd>
79 }
80 </div>
81 }
82 }
83 <div>
84 <dt>last activity</dt>
85 if r.ActiveAt != "" {
86 <dd><time datetime={ r.ActiveAt } title={ r.ActiveAt }>{ r.Active }</time></dd>
87 } else {
88 <dd class="mute">never</dd>
89 }
90 </div>
91 </dl>
92 if r.CI != nil {
93 <a class="repo-ci" href={ templ.SafeURL(r.CI.Href) } title={ r.CI.Title }>
94 <span class={ "ck", "ck-" + r.CI.Kind } aria-hidden="true"></span>
95 <span class="sr">CI: </span>{ r.CI.Label }
96 </a>
97 }
98 </div>
99 if len(r.Commits) > 0 {
100 <ul
101 class="repo-commits"
102 data-full?={ len(r.Commits) == homeRecent }
103 aria-label={ "Recent commits of " + r.Name }
104 >
105 for _, c := range r.Commits {
106 <li>
107 <a class="rc-sha" href={ templ.SafeURL(c.CHref) }>{ c.Short }</a>
108 <span class="rc-subject" title={ c.Subject }>{ c.Subject }</span>
109 if c.WhenAt != "" {
110 <time class="dim" datetime={ c.WhenAt } title={ c.WhenAt }>{ c.When }</time>
111 }
112 </li>
113 }
114 </ul>
115 } else if r.NoCommits {
116 <p class="repo-commits mute">no commits yet</p>
117 }
118 </li>
119}
120
121// pulse is the activity curve of a home row: a smooth line over a fading
122// area on a faint grid, and a dot at today that beats while the repository
123// is active. The SVG scales evenly with its column, so the dot stays round.
124templ pulse(h *Heartbeat) {
125 <figure class="repo-pulse" data-live?={ h.Live }>
126 <svg viewBox="0 0 600 64" role="img" aria-label={ h.Label } focusable="false">
127 <defs>
128 <linearGradient id={ h.GradID } x1="0" y1="0" x2="0" y2="1">
129 <stop class="pulse-stop-top" offset="0"></stop>
130 <stop class="pulse-stop-bottom" offset="1"></stop>
131 </linearGradient>
132 </defs>
133 <path class="pulse-grid" d="M0 21.5 H600 M0 42.5 H600 M0 63.5 H600" vector-effect="non-scaling-stroke"></path>
134 <path class="pulse-area" d={ h.Area } fill={ "url(#" + h.GradID + ")" }></path>
135 <path class="pulse-line" d={ h.Line } vector-effect="non-scaling-stroke"></path>
136 <circle class="pulse-ring" cx={ h.X } cy={ h.Y } r="4"></circle>
137 <circle class="pulse-dot" cx={ h.X } cy={ h.Y } r="3.5"></circle>
138 </svg>
139 <figcaption class="pulse-cap" aria-hidden="true"><span>90 days ago</span><span>today</span></figcaption>
140 </figure>
141}
142
143// Outline is the README outline; levels indent by 2ch, the h1 is bold.
144templ Outline(headings []Heading) {
145 <nav class="outline" aria-label="Outline">
146 for _, h := range headings {
147 <a class={ "l" + itoa(h.Level) } href={ templ.SafeURL("#" + h.ID) }>{ h.Text }</a>
148 }
149 </nav>
150}
151
152// ReadmeCard is a README in a card whose header names the file.
153templ ReadmeCard(r Readme) {
154 <section class="card readme" aria-labelledby="readme-h">
155 <h2 class="card-h" id="readme-h">
156 <span class="ico i-file" aria-hidden="true"></span>
157 { r.Name }
158 </h2>
159 @ReadmeView(r)
160 </section>
161}
162
163// ReadmeView is a rendered README. Its HTML comes from the Markdown
164// renderer, which drops raw HTML and filters URLs.
165templ ReadmeView(r Readme) {
166 <article class="prose" aria-label={ r.Name } hx-ignore>
167 if r.Note != "" {
168 <p class="dim">{ r.Note }</p>
169 } else {
170 @templ.Raw(r.HTML)
171 }
172 </article>
173}
174
175// CommitRows is a cursor table of commits: sha, subject with inline refs,
176// author, relative date (absolute in the title).
177templ CommitRows(rows []CommitRow) {
178 <table class="list commits" aria-label="Commits">
179 <tbody data-rows>
180 for _, c := range rows {
181 <tr
182 if c.ID != "" {
183 id={ c.ID }
184 }
185 data-cursor?={ c.Cursor }
186 >
187 <td class="c-sha mute">{ c.Short }</td>
188 <td class="c-subject">
189 <a href={ templ.SafeURL(c.CHref) }>{ c.Subject }</a>
190 if c.Merge {
191 <span class="pill">merge</span>
192 }
193 for _, b := range c.Branches {
194 <span class="pill">{ b }</span>
195 }
196 for _, t := range c.Tags {
197 <span class="pill tag"><span class="sr">tag </span>{ t }</span>
198 }
199 </td>
200 <td class="c-ck">@CommitChecks(c.Checks)</td>
201 <td class="c-who dim">{ c.Author }</td>
202 <td class="c-when nowrap dim"><time datetime={ c.WhenAt } title={ c.WhenAt }>{ c.When }</time></td>
203 </tr>
204 }
205 </tbody>
206 </table>
207}