From 1ed8ced02c0bfbeaaf8a3a9b2347cff8a0f2b91f Mon Sep 17 00:00:00 2001
From: TheFlow <theflow@sydigital.com>
Date: Mon, 9 Feb 2026 10:24:43 +1300
Subject: [PATCH] fix: Fix docs-viewer prose styling and query param routing

- Replace broken @apply directives with plain CSS (Tailwind @apply is
  build-time only, was silently failing in browser <style> tags)
- Add table, hr, and list-item spacing styles for research papers
- Handle ?slug= query parameter in docs-viewer-app.js so blog post
  links to docs-viewer.html?slug=X load the correct document

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/docs-viewer.html      | 37 ++++++++++++++++++++++--------------
 public/js/docs-viewer-app.js |  6 ++++--
 2 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/public/docs-viewer.html b/public/docs-viewer.html
index 1b8492df..245c7219 100644
--- a/public/docs-viewer.html
+++ b/public/docs-viewer.html
@@ -7,20 +7,29 @@
   <link rel="stylesheet" href="/css/tailwind.css?v=0.1.2.1770452675442">
   <link rel="stylesheet" href="/css/tractatus-theme.min.css?v=0.1.2.1770452675442">
   <style>
-    /* Prose styling for document content */
-    .prose h1 { @apply text-3xl font-bold mt-8 mb-4 text-gray-900; }
-    .prose h2 { @apply text-2xl font-bold mt-6 mb-3 text-gray-900; }
-    .prose h3 { @apply text-xl font-semibold mt-4 mb-2 text-gray-800; }
-    .prose p { @apply my-4 text-gray-700 leading-relaxed; }
-    .prose ul { @apply my-4 list-disc list-inside text-gray-700; }
-    .prose ol { @apply my-4 list-decimal list-inside text-gray-700; }
-    .prose code { @apply bg-gray-100 px-1 py-0.5 rounded text-sm font-mono text-red-600; }
-    .prose pre { @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto my-4; }
-    .prose pre code { @apply bg-transparent text-gray-100 p-0; }
-    .prose a { @apply text-blue-600 hover:text-blue-700 underline; }
-    .prose blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 my-4; }
-    .prose strong { @apply font-semibold text-gray-900; }
-    .prose em { @apply italic; }
+    /* Prose styling for document content - uses plain CSS (not @apply, which is build-time only) */
+    .prose h1 { font-size: 1.875rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #111827; line-height: 1.2; }
+    .prose h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2.5rem; margin-bottom: 0.75rem; color: #111827; line-height: 1.3; padding-bottom: 0.5rem; border-bottom: 1px solid #e5e7eb; }
+    .prose h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.5rem; color: #1f2937; line-height: 1.4; }
+    .prose p { margin-top: 1rem; margin-bottom: 1rem; color: #374151; line-height: 1.75; }
+    .prose ul { margin-top: 1rem; margin-bottom: 1rem; list-style-type: disc; padding-left: 1.5rem; color: #374151; }
+    .prose ul li { margin-bottom: 0.5rem; line-height: 1.75; }
+    .prose ol { margin-top: 1rem; margin-bottom: 1rem; list-style-type: decimal; padding-left: 1.5rem; color: #374151; }
+    .prose ol li { margin-bottom: 0.5rem; line-height: 1.75; }
+    .prose code { background-color: #f3f4f6; padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-size: 0.875rem; font-family: ui-monospace, monospace; color: #dc2626; }
+    .prose pre { background-color: #111827; color: #f3f4f6; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; margin: 1rem 0; }
+    .prose pre code { background-color: transparent; color: #f3f4f6; padding: 0; }
+    .prose a { color: #2563eb; text-decoration: underline; }
+    .prose a:hover { color: #1d4ed8; }
+    .prose blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; font-style: italic; color: #4b5563; margin: 1.5rem 0; }
+    .prose strong { font-weight: 600; color: #111827; }
+    .prose em { font-style: italic; }
+    .prose hr { margin: 2rem 0; border: none; border-top: 1px solid #d1d5db; }
+    .prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.875rem; }
+    .prose thead th { background-color: #f9fafb; font-weight: 600; text-align: left; padding: 0.75rem 1rem; border: 1px solid #e5e7eb; color: #111827; }
+    .prose tbody td { padding: 0.75rem 1rem; border: 1px solid #e5e7eb; color: #374151; vertical-align: top; }
+    .prose tbody tr:hover { background-color: #f9fafb; }
+    .prose li > p { margin: 0.25rem 0; }
   </style>
 
   <!-- Auto-reload on service worker update -->
diff --git a/public/js/docs-viewer-app.js b/public/js/docs-viewer-app.js
index 1b5543c1..a81116e9 100644
--- a/public/js/docs-viewer-app.js
+++ b/public/js/docs-viewer-app.js
@@ -24,8 +24,10 @@ async function loadNavigation() {
 // Setup routing
 router
   .on('/docs-viewer.html', async () => {
-    // Show default document
-    await viewer.render('introduction-to-the-tractatus-framework');
+    // Check for ?slug= query parameter first
+    const urlParams = new URLSearchParams(window.location.search);
+    const slug = urlParams.get('slug');
+    await viewer.render(slug || 'introduction-to-the-tractatus-framework');
   })
   .on('/docs/:slug', async (params) => {
     await viewer.render(params.slug);