Add newer/older navigation to the photo detail page

Replace the standalone Back link with a three-cell nav row so each photo page links to its neighbours in the timeline. Prefetch the neighbouring pages and bind the arrow keys for keyboard navigation.
2026-07-03 23:03:54 +02:00
parent 856439f3fd
commit 3639bd5577
3 changed files with 55 additions and 11 deletions
@@ -8,10 +8,16 @@
  <link rel="stylesheet" href="/static/style.css">
  <style>:root { --serif: '{{.SerifFamily}}', Georgia, serif; --mj: '{{.MlFamily}}', sans-serif; }</style>
  <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Photo Feed">
+  {{if .Newer}}<link rel="prefetch" href="/photo/{{.Newer.Slug}}/">{{end}}
+  {{if .Older}}<link rel="prefetch" href="/photo/{{.Older.Slug}}/">{{end}}
 </head>
 <body>
  <div class="photo-page">
-    <a href="/" class="back-btn">← Back</a>
+    <nav class="photo-nav">
+      {{if .Newer}}<a href="/photo/{{.Newer.Slug}}/" data-nav="newer">← Newer</a>{{else}}<span></span>{{end}}
+      <a href="/" class="back-btn">← Back</a>
+      {{if .Older}}<a href="/photo/{{.Older.Slug}}/" data-nav="older">Older →</a>{{else}}<span></span>{{end}}
+    </nav>
    <div class="dlayout">
      <div class="dimg-wrap">
        <a href="/{{.Photo.File}}" target="_blank" rel="noopener">
@@ -33,5 +39,17 @@
  <footer class="site-footer">
    © 2000–{{.Year}} {{.Author}}. All rights reserved.
  </footer>
+
+  <script>
+  (function () {
+    const newer = document.querySelector('[data-nav="newer"]');
+    const older = document.querySelector('[data-nav="older"]');
+    document.addEventListener('keydown', (e) => {
+      if (e.target.matches('input, textarea')) return;
+      if (e.key === 'ArrowLeft'  && newer) location.href = newer.href;
+      if (e.key === 'ArrowRight' && older) location.href = older.href;
+    });
+  })();
+  </script>
 </body>
 </html>