From 1ff2eb48f94e9a686dc40ae660d473e018b4dc61 Mon Sep 17 00:00:00 2001
From: karim <karim@gabrielevarano.ch>
Date: Sun, 31 May 2026 14:14:21 +0200
Subject: [PATCH] =?UTF-8?q?dialog:=20auf=20eigene=20Seite=20auslagern=20?=
 =?UTF-8?q?=E2=80=94=20Beitrag=20bleibt=20sauber?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- single.html: eingebetteter Dialog raus, stattdessen „→ Dialog"-Link
- neue /dialog/-Seite (content/dialog.md + layouts/_default/dialog.html) mit
  Thread aus ?thread=, Rücklink zum Beitrag
- dialog.js liest Thread aus data-thread ODER ?thread=
- Styling: Pill-Link am Beitragsende, zentrierte Dialog-Seite

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 assets/css/custom.css        | 25 ++++++++++++++++++++-----
 content/dialog.md            |  5 +++++
 layouts/_default/dialog.html | 19 +++++++++++++++++++
 layouts/_default/single.html |  7 +++----
 static/dialog.js             |  3 ++-
 5 files changed, 49 insertions(+), 10 deletions(-)
 create mode 100644 content/dialog.md
 create mode 100644 layouts/_default/dialog.html

diff --git a/assets/css/custom.css b/assets/css/custom.css
index f7377ca..30518da 100644
--- a/assets/css/custom.css
+++ b/assets/css/custom.css
@@ -424,12 +424,27 @@ a:hover {
 a.byline-author, a.journal-author { color: inherit; text-decoration: none; }
 a.byline-author:hover, a.journal-author:hover { color: var(--accent); }
 
-/* ── Dialog (Diskussion pro Beitrag) ─────────────────────────────────────── */
-.dialog {
-  max-width: var(--container-width);
-  margin: var(--spacing-xl) auto;
-  padding: 0 var(--spacing-md);
+/* ── Dialog ───────────────────────────────────────────────────────────────── */
+/* Link am Ende des Beitrags (der Beitrag selbst bleibt sauber) */
+.dialog-link {
+  display: inline-block;
+  margin-top: var(--spacing-lg);
+  font-family: var(--font-family-display);
+  font-weight: 500;
+  color: var(--accent);
+  text-decoration: none;
+  border: 1px solid var(--accent);
+  border-radius: 999px;
+  padding: 0.45em 1.2em;
 }
+.dialog-link:hover { background: var(--accent); color: #fff; }
+
+/* Eigene Dialog-Seite (/dialog/?thread=…) */
+.dialog-page { max-width: var(--container-width); margin: 0 auto; padding: var(--spacing-lg) var(--spacing-md); }
+.dialog-back { margin: 0 0 var(--spacing-sm); }
+.dialog-back a { color: var(--color-text-muted); text-decoration: none; }
+.dialog-back a:hover { color: var(--accent); }
+
 .dialog-title {
   font-family: var(--font-family-serif);
   border-top: 1px solid var(--color-border);
diff --git a/content/dialog.md b/content/dialog.md
new file mode 100644
index 0000000..5244631
--- /dev/null
+++ b/content/dialog.md
@@ -0,0 +1,5 @@
+---
+title: Dialog
+layout: dialog
+toc: false
+---
diff --git a/layouts/_default/dialog.html b/layouts/_default/dialog.html
new file mode 100644
index 0000000..eaf5c91
--- /dev/null
+++ b/layouts/_default/dialog.html
@@ -0,0 +1,19 @@
+{{ define "main" }}
+  <div class="dialog-page">
+    <p class="dialog-back" id="dialog-context"></p>
+    <section id="ob-dialog"></section>
+  </div>
+  <script defer src="/dialog.js"></script>
+  <script>
+    /* Kontext: Rücklink zum diskutierten Beitrag (thread = dessen Pfad). */
+    (function () {
+      var t = new URLSearchParams(location.search).get('thread');
+      var el = document.getElementById('dialog-context');
+      if (t && el) {
+        var a = document.createElement('a');
+        a.href = t; a.textContent = '← zum Beitrag';
+        el.appendChild(a);
+      }
+    })();
+  </script>
+{{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 37a88da..58a200f 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -62,10 +62,9 @@
         {{- range . -}}<li><a href="/tags/{{ . | urlize }}/">{{ . }}</a></li>{{- end -}}
       </ul>
     {{- end }}
+
+    {{/* Dialog liegt auf eigener Seite — der Beitrag bleibt sauber */}}
+    <a class="dialog-link" href="/dialog/?thread={{ .RelPermalink }}">→ Dialog</a>
   </article>
 
-  {{/* Dialog — jeder Beitrag ist ein Diskussionsstart */}}
-  <section class="dialog" id="ob-dialog" data-thread="{{ .RelPermalink }}"></section>
-  <script defer src="/dialog.js"></script>
-
 {{ end }}
diff --git a/static/dialog.js b/static/dialog.js
index 541806a..b6db82d 100644
--- a/static/dialog.js
+++ b/static/dialog.js
@@ -3,7 +3,8 @@
 (function () {
   const root = document.getElementById('ob-dialog');
   if (!root) return;
-  const thread = root.dataset.thread;
+  const thread = root.dataset.thread || new URLSearchParams(location.search).get('thread') || '';
+  if (!thread) { root.innerHTML = '<p class="dialog-empty">Kein Thema gewählt.</p>'; return; }
   const TKEY = 'ob_dialog_token', NKEY = 'ob_dialog_name';
   let token = localStorage.getItem(TKEY);
   let myName = localStorage.getItem(NKEY);