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

README.md

@@ -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
+with `params.forum.url` set in `hugo.toml`, the menu gets a Forum entry and every page of a
-each machine shows that machine's forum thread (archived comments first, new replies after).
+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).
 

assets/css/main.css

@@ -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; }

content/machine-tabs/apple-ii/comments.md

@@ -1,7 +0,0 @@
----
-title: APPLE II
-url: /museum/apple-ii/comments/
-params:
-  machine: /museum/apple-ii
-  tab: comments
----

content/machine-tabs/commodore-c64/comments.md

@@ -1,7 +0,0 @@
----
-title: Commodore C64
-url: /museum/commodore-c64/comments/
-params:
-  machine: /museum/commodore-c64
-  tab: comments
----

content/machine-tabs/kaypro-pc-286i/comments.md

@@ -1,7 +0,0 @@
----
-title: Kaypro PC & 286i
-url: /museum/kaypro-pc-286i/comments/
-params:
-  machine: /museum/kaypro-pc-286i
-  tab: comments
----

content/machine-tabs/magnavox-odyssey-100/comments.md

@@ -1,7 +0,0 @@
----
-title: MAGNAVOX Odyssey 100
-url: /museum/magnavox-odyssey-100/comments/
-params:
-  machine: /museum/magnavox-odyssey-100
-  tab: comments
----

content/machine-tabs/magnavox-odyssey/comments.md

@@ -1,7 +0,0 @@
----
-title: MAGNAVOX Odyssey
-url: /museum/magnavox-odyssey/comments/
-params:
-  machine: /museum/magnavox-odyssey
-  tab: comments
----

content/machine-tabs/nec-pc-6601/comments.md

@@ -1,7 +0,0 @@
----
-title: NEC PC 6601
-url: /museum/nec-pc-6601/comments/
-params:
-  machine: /museum/nec-pc-6601
-  tab: comments
----

content/museum/apple-ii.md

@@ -66,7 +66,6 @@ params:
   - links
   - docs
   - videos
-  - comments
   forum_thread: 7
   photos:
   - title: INSIDE AN APPLE II

content/museum/commodore-c64.md

@@ -71,7 +71,6 @@ params:
   - links
   - docs
   - videos
-  - comments
   forum_thread: 8
   photos:
   - title: COMMODORE 64

content/museum/kaypro-pc-286i.md

@@ -66,7 +66,6 @@ params:
     value: From $4500 in 1985 - $2995 in 1987
   tabs:
   - photos
-  - comments
   forum_thread: 11
   photos:
   - title: COMPLETE SYSTEM

content/museum/magnavox-odyssey-100.md

@@ -53,7 +53,6 @@ params:
   - photos
   - links
   - docs
-  - comments
   forum_thread: 12
   photos:
   - title: ODYSSEY 100

content/museum/magnavox-odyssey.md

@@ -51,7 +51,6 @@ params:
   - emulators
   - links
   - videos
-  - comments
   forum_thread: 10
   photos:
   - title: MAIN UNIT

content/museum/nec-pc-6601.md

@@ -68,7 +68,6 @@ params:
   - photos
   - adverts
   - links
-  - comments
   forum_thread: 9
   photos:
   - title: PC-6601

forum/README.md

@@ -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
+- 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
-  tab pointing at 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

forum/extension/less/embed.less

@@ -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;

hugo.toml

@@ -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"
 

layouts/_partials/comments.html

@@ -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 }}

layouts/_partials/machine-header.html

@@ -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>

layouts/baseof.html

@@ -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 }}>

layouts/machine-tabs/single.html

@@ -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 }}

layouts/museum/single.html

@@ -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 }}