john/tractatus
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: Fix docs-viewer prose styling and query param routing

Browse source 
- 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>
This commit is contained in:
TheFlow 2026-02-09 10:24:43 +13:00
parent beadd2c693
commit 1ed8ced02c
2 changed files with 27 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
public/docs-viewer.html
View file

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

6
public/js/docs-viewer-app.js
View file

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