This repository has been archived on 2024-03-28. You can view files and clone it, but cannot push or open issues or pull requests.
dotfiles/host/layer/public-webserver/caddy/browse_template.html
2022-11-22 15:05:50 -06:00

96 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>{{html .Name}}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://lyte.dev/styles.css" />
</head>
<style>
body > header { margin-bottom: 0; justify-content: space-between; }
body > header > section > span {
text-decoration: none;
line-height: 1.5em;
display: flex;
justify-content: center;
align-items: center;
padding: .25em .5em;
}
table { width: 100%; }
div.meta { margin-bottom: 0.5em; }
thead { background-color: var(--header-bg); margin-bottom: 0.5em; }
tr.spacer { height: 0.5em; }
th { text-align: left; font-weight: normal; padding: 0.5em 0.8em; margin-bottom: 0.5em; }
td { padding: 0 0.8em; font-family: var(--msff); }
svg { stroke: var(--fg); fill: var(--fg); }
</style>
<body>
<header>
<section>
{{range $i, $crumb := .Breadcrumbs}}<a href="{{html $crumb.Link}}">{{html $crumb.Text}}</a>{{if ne $i 0}}<a href="./">/</a>{{end}}{{end}}
</section>
<section>
<span class="meta-item">{{.NumDirs}} director{{if eq 1 .NumDirs}}y{{else}}ies{{end}}</span>
<span class="meta-item">{{.NumFiles}} file{{if ne 1 .NumFiles}}s{{end}}</span>
{{- if ne 0 .Limit}}
<span class="meta-item">(of which only <b>{{.Limit}}</b> are displayed)</span>
{{- end}}
</section>
</header>
<main>
<div class="listing">
<table aria-describedby="summary">
<thead>
<tr>
<th>
Name
</th>
<th>
Size
</th>
<th class="hideable">
Modified
</th>
</tr>
<tr class="spacer"></tr>
</thead>
<tbody>
{{- range .Items}}
<tr class="file">
<td>
<a href="{{html .URL}}">
<span class="name">{{html .Name}}</span>
</a>
</td>
{{- if .IsDir}}
<td data-order="-1">&mdash;</td>
{{- else}}
<td data-order="{{.Size}}">{{.HumanSize}}</td>
{{- end}}
<td class="hideable"><time title="UTC: {{.HumanModTime "2006-01-02T15:04:05Z"}}" datetime="{{.HumanModTime "2006-01-02T15:04:05Z"}}">{{.HumanModTime "01/02/2006 03:04:05 PM -07:00"}}</time></td>
</tr>
{{- end}}
</tbody>
</table>
</div>
</main>
<script>
function localizeDatetime(e, index, ar) {
if (e.textContent === undefined) {
return;
}
var d = new Date(e.getAttribute('datetime'));
if (isNaN(d)) {
d = new Date(e.textContent);
if (isNaN(d)) {
return;
}
}
e.textContent = d.toLocaleString([], {day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit", second: "2-digit"});
}
var timeList = Array.prototype.slice.call(document.getElementsByTagName("time"));
timeList.forEach(localizeDatetime);
</script>
</body>
</html>