Comments at the bottom of machine pages instead of a tab

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01YDRjtmAiNpo5mK5N3d7QwZ
2026-10-11 22:07:30 +02:00
parent 696dfe5e77
commit 2edf77aaa7
22 changed files with 40 additions and 77 deletions
@@ -44,8 +44,8 @@ to try the search locally.
 ## Forum and comments

 A [Flarum](https://flarum.org/) forum can run next to the site and serve as its comment system:
-with `params.forum.url` set in `hugo.toml`, the menu gets a Forum entry and the Comments tab of
-each machine shows that machine's forum thread (archived comments first, new replies after).
+with `params.forum.url` set in `hugo.toml`, the menu gets a Forum entry and every page of a
+machine ends with that machine's forum thread (archived comments first, new replies after).
 With the url empty the site has no forum and shows the archived comments as static text.
 Everything about the forum is in [`forum/README.md`](forum/README.md).

@@ -164,3 +164,4 @@ table { border-collapse: collapse; }
 .pager .current { font-weight: 700; border-color: var(--accent); }

 .forum-thread { display: block; width: 100%; min-height: 400px; border: 0; }
+.comments-section { clear: both; margin-top: 32px; }
@@ -1,7 +0,0 @@
---
-title: APPLE II
-url: /museum/apple-ii/comments/
-params:
-  machine: /museum/apple-ii
-  tab: comments
---
@@ -1,7 +0,0 @@
---
-title: Commodore C64
-url: /museum/commodore-c64/comments/
-params:
-  machine: /museum/commodore-c64
-  tab: comments
---
@@ -1,7 +0,0 @@
---
-title: Kaypro PC & 286i
-url: /museum/kaypro-pc-286i/comments/
-params:
-  machine: /museum/kaypro-pc-286i
-  tab: comments
---
@@ -1,7 +0,0 @@
---
-title: MAGNAVOX Odyssey 100
-url: /museum/magnavox-odyssey-100/comments/
-params:
-  machine: /museum/magnavox-odyssey-100
-  tab: comments
---
@@ -1,7 +0,0 @@
---
-title: MAGNAVOX Odyssey
-url: /museum/magnavox-odyssey/comments/
-params:
-  machine: /museum/magnavox-odyssey
-  tab: comments
---
@@ -1,7 +0,0 @@
---
-title: NEC PC 6601
-url: /museum/nec-pc-6601/comments/
-params:
-  machine: /museum/nec-pc-6601
-  tab: comments
---
@@ -66,7 +66,6 @@ params:
  - links
  - docs
  - videos
-  - comments
  forum_thread: 7
  photos:
  - title: INSIDE AN APPLE II
@@ -71,7 +71,6 @@ params:
  - links
  - docs
  - videos
-  - comments
  forum_thread: 8
  photos:
  - title: COMMODORE 64
@@ -66,7 +66,6 @@ params:
    value: From $4500 in 1985 - $2995 in 1987
  tabs:
  - photos
-  - comments
  forum_thread: 11
  photos:
  - title: COMPLETE SYSTEM
@@ -53,7 +53,6 @@ params:
  - photos
  - links
  - docs
-  - comments
  forum_thread: 12
  photos:
  - title: ODYSSEY 100
@@ -51,7 +51,6 @@ params:
  - emulators
  - links
  - videos
-  - comments
  forum_thread: 10
  photos:
  - title: MAIN UNIT
@@ -68,7 +68,6 @@ params:
  - photos
  - adverts
  - links
-  - comments
  forum_thread: 9
  photos:
  - title: PC-6601
@@ -28,10 +28,9 @@ frame.
  can be run again when new machines arrive. `--replace` deletes and re-imports the imported
  threads that have no reply from a real member (their thread numbers change). It writes the map machine → discussion to
  `forum.json`.
- Copied to `../data/forum.json`, that map makes `make content` give every machine a Comments
-  tab pointing at its thread (`forum_thread` in the page front matter); the old comments are
+- Copied to `../data/forum.json`, that map makes `make content` link every machine to its thread (`forum_thread` in the page front matter); the old comments are
  then no longer written into the pages.
- With `params.forum.url` set, the Comments tab shows `<forum>/embed/<id>` (Flarum's Embed
+- With `params.forum.url` set, the bottom of the machine's pages shows `<forum>/embed/<id>` (Flarum's Embed
  extension) in a frame that follows the height of the thread.

 ## Local test
@@ -1,4 +1,4 @@
-// Embedded thread, as shown in the Comments tab of the museum pages: full width, on the
+// Embedded thread, as shown at the bottom of the museum pages: full width, on the
 // light panel colour of the static site (--panel in its assets/css/main.css).
@oc-accent: #9a3412;
@oc-panel: #fffdf7;
@@ -20,7 +20,7 @@ capitalizeListTitles = false
  description = "The Old-Computers.com museum of computers, consoles and pongs, rebuilt from the Wayback Machine archive."

  # Forum (Flarum, see forum/README.md). Empty url = no forum: no menu entry, and machine pages
-  # show the archived comments as static text. With a url, the Comments tab shows the forum thread.
+  # show the archived comments as static text. With a url, machine pages end with their forum thread.
  [params.forum]
    url = "https://barbel.synology.me/oldcomputers-forum"

@@ -0,0 +1,29 @@
+{{/* Visitor comments at the bottom of a machine's pages. Context: the machine page.
+     With a forum (params.forum.url) and a thread for the machine: the live thread in a frame
+     sized to its content. Otherwise: the archived comments as static text. */}}
+{{ $p := .Params }}
+{{ if and $p.forum_thread site.Params.forum.url }}
+<section class="comments-section" id="comments" data-pagefind-ignore>
+  <h2>Comments</h2>
+  {{ $thread := printf "%s/embed/%d" (strings.TrimSuffix "/" site.Params.forum.url) (int $p.forum_thread) }}
+  <p class="note">The first comments were left by visitors of the original site. Log in to the forum to add yours. <a href="{{ replace $thread "/embed/" "/d/" }}">Open this discussion in the forum</a>.</p>
+  <iframe class="forum-thread" id="forum-thread" src="{{ $thread }}" title="Comments on {{ .Title }}" loading="lazy"></iframe>
+  {{ with resources.Get "js/iframeResizer.min.js" | fingerprint }}
+  <script src="{{ .RelPermalink }}"></script>
+  <script>iFrameResize({ checkOrigin: false, heightCalculationMethod: "lowestElement" }, "#forum-thread");</script>
+  {{ end }}
+</section>
+{{ else if $p.comments }}
+<section class="comments-section" id="comments" data-pagefind-ignore>
+  <h2>Comments</h2>
+  <p class="note">Comments left by visitors of the original site. New comments are closed.</p>
+  <ol class="comments">
+    {{ range $p.comments }}
+    <li>
+      <p class="meta"><strong>{{ .author }}</strong>{{ with .date }} · {{ . }}{{ end }}</p>
+      <div>{{ .text | markdownify }}</div>
+    </li>
+    {{ end }}
+  </ol>
+</section>
+{{ end }}
@@ -1,6 +1,6 @@
 {{/* dict "machine" <machine page> "tab" <current tab or ""> */}}
 {{ $m := .machine }}
-{{ $labels := dict "photos" "Photos" "adverts" "Adverts" "hardware" "Hardware" "connectors" "Connectors" "software" "Software" "emulators" "Emulators" "links" "Links" "docs" "Docs" "videos" "Videos" "comments" "Comments" }}
+{{ $labels := dict "photos" "Photos" "adverts" "Adverts" "hardware" "Hardware" "connectors" "Connectors" "software" "Software" "emulators" "Emulators" "links" "Links" "docs" "Docs" "videos" "Videos" }}
 <header class="machine-header">
  <p class="crumbs" data-pagefind-ignore>
    <a href="{{ (site.GetPage "/museum").RelPermalink }}">Museum</a>
@@ -24,7 +24,7 @@
    </form>
  </header>
  {{/* search index: content pages only (not lists), filterable by section; see layouts/search.html */}}
-  {{ $indexed := and .IsPage (ne .Layout "search") (ne .Params.tab "comments") }}
+  {{ $indexed := and .IsPage (ne .Layout "search") }}
  {{ $section := "" }}{{ with .FirstSection }}{{ if not .IsHome }}{{ $section = .Title }}{{ end }}{{ end }}
  {{ if eq .Section "machine-tabs" }}{{ $section = "Museum" }}{{ end }}
  <main{{ if $indexed }} data-pagefind-body{{ with $section }} data-pagefind-filter="Section:{{ . }}"{{ end }}{{ end }}>
@@ -33,26 +33,7 @@
      {{ end }}
    </div>

-  {{ else if and (eq $tab "comments") $p.forum_thread site.Params.forum.url }}
-    {{/* live comments: the machine's forum thread, shown in a frame sized to its content */}}
-    {{ $thread := printf "%s/embed/%d" (strings.TrimSuffix "/" site.Params.forum.url) (int $p.forum_thread) }}
-    <p class="note">The first comments were left by visitors of the original site. Log in to the forum to add yours. <a href="{{ replace $thread "/embed/" "/d/" }}">Open this discussion in the forum</a>.</p>
-    <iframe class="forum-thread" id="forum-thread" src="{{ $thread }}" title="Comments on {{ $m.Title }}" loading="lazy"></iframe>
-    {{ with resources.Get "js/iframeResizer.min.js" | fingerprint }}
-    <script src="{{ .RelPermalink }}"></script>
-    <script>iFrameResize({ checkOrigin: false, heightCalculationMethod: "lowestElement" }, "#forum-thread");</script>
-    {{ end }}
-
-  {{ else if eq $tab "comments" }}
-    <p class="note">Comments left by visitors of the original site. New comments are closed.</p>
-    <ol class="comments">
-      {{ range $p.comments }}
-      <li>
-        <p class="meta"><strong>{{ .author }}</strong>{{ with .date }} · {{ . }}{{ end }}</p>
-        <div>{{ .text | markdownify }}</div>
-      </li>
-      {{ end }}
-    </ol>
  {{ end }}
+  {{ partial "comments.html" $m }}
 </article>
 {{ end }}
@@ -4,5 +4,6 @@
  {{ with .Params.image }}<img class="main-image" src="{{ . }}" alt="{{ $.Title }}">{{ end }}
  <div class="content">{{ .Content }}</div>
  {{ with .Params.specs }}{{ partial "specs.html" . }}{{ end }}
+  {{ partial "comments.html" . }}
 </article>
 {{ end }}