1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7}
header,footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 20px}
a{text-decoration:none} a:hover{text-decoration:underline}
.muted{color:#666;font-size:.9rem}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid #ccc;border-radius:8px;padding:6px 10px}
h1{margin:0 0 6px}
.content :is(h1,h2,h3){margin-top:1.2em}
.content img, .content video{max-width:100%;height:auto}
</style>
</head>
<body>
<header>
<div class="nav">
{{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }}
<a class="btn" href="{{ $back }}">← Back</a>
</div>
<div class="muted">{{ .Date.Format "2006-01-02" }}</div>
</header>
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
<main class="content">
{{ .Content }}
</main>
<footer>
<div class="nav">
{{ with .PrevInSection }}
<a class="btn" href="{{ .RelPermalink }}">← Before</a>
{{ end }}
{{ with .NextInSection }}
<a class="btn" href="{{ .RelPermalink }}">Next →</a>
{{ end }}
</div>
<div></div>
</footer>
<script>
// 선택: 키보드 좌우 화살표로 이전/다음 이동
document.addEventListener("keydown", e => {
if (e.target.closest("input,textarea")) return;
if (e.key === "ArrowLeft") {
const a=document.querySelector('a.btn:has(+ a.btn), a.btn[href*="Before"]');
if (a) location.href=a.href;
} else if (e.key === "ArrowRight") {
const links=[...document.querySelectorAll('a.btn')].filter(x=>/Next/.test(x.textContent));
if (links[0]) location.href=links[0].href;
}
});
</script>
</body>
</html>
|
