From 7bcd58039711c95a58f298a0b086e92e08688c58 Mon Sep 17 00:00:00 2001 From: Adrian Bonpin Date: Fri, 1 May 2026 09:49:26 +0800 Subject: [PATCH] fix: replace prose plugin with custom CSS for markdown styling --- app/globals.css | 157 ++++++++++++++++++++++++--- bun.lock | 9 -- components/updates/update-viewer.tsx | 18 +-- package.json | 1 - 4 files changed, 148 insertions(+), 37 deletions(-) diff --git a/app/globals.css b/app/globals.css index a4c6b36..142fc0b 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,5 +1,4 @@ @import "tailwindcss"; -@plugin "@tailwindcss/typography"; @theme inline { /* Colors */ @@ -15,23 +14,6 @@ /* Defaults */ --default-transition-duration: 0.3s; - /* Prose */ - --prose-body: var(--color-text); - --prose-headings: var(--color-text); - --prose-links: var(--color-primary); - --prose-bold: var(--color-text); - --prose-counters: var(--color-text); - --prose-bullets: var(--color-text); - --prose-hr: var(--color-border); - --prose-quotes: var(--color-text); - --prose-quote-borders: var(--color-border); - --prose-captions: var(--color-text); - --prose-code: var(--color-accent); - --prose-pre-code: var(--color-text); - --prose-pre-bg: var(--color-foreground); - --prose-th-borders: var(--color-border); - --prose-td-borders: var(--color-border); - /* Fonts */ --font-sans: var(--font-lexend); } @@ -43,3 +25,142 @@ .scrollbar-hide::-webkit-scrollbar { display: none; } + +/* Markdown content styles */ +.update-content { + color: var(--color-text); +} + +.update-content h2 { + font-size: 1.5rem; + font-weight: 700; + margin-top: 2.5rem; + margin-bottom: 1rem; + color: var(--color-text); +} + +.update-content h3 { + font-size: 1.125rem; + font-weight: 600; + margin-top: 1.5rem; + margin-bottom: 0.75rem; + color: var(--color-text); +} + +.update-content p { + margin-bottom: 0.75rem; + line-height: 1.7; + color: rgba(235, 228, 241, 0.8); +} + +.update-content ul { + list-style-type: disc; + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.update-content ol { + list-style-type: decimal; + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.update-content li { + margin-bottom: 0.375rem; + line-height: 1.6; +} + +.update-content li > ul, +.update-content li > ol { + margin-top: 0.25rem; + margin-bottom: 0.5rem; +} + +.update-content a { + color: var(--color-primary); + text-decoration: none; + transition: opacity 0.2s; +} + +.update-content a:hover { + text-decoration: underline; + opacity: 0.8; +} + +/* Hide anchor link icons from rehype-autolink-headings by default */ +.update-content a[aria-hidden="true"] { + text-decoration: none; + margin-right: 0.375rem; + opacity: 0; + transition: opacity 0.2s; +} + +.update-content h2:hover a[aria-hidden="true"], +.update-content h3:hover a[aria-hidden="true"] { + opacity: 0.4; +} + +.update-content a[aria-hidden="true"]::before { + content: "#"; + font-size: 0.75rem; + font-weight: 400; +} + +.update-content code { + color: var(--color-accent); + background: rgba(235, 228, 241, 0.06); + padding: 0.125rem 0.375rem; + border-radius: 0.25rem; + font-size: 0.875rem; + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; +} + +.update-content pre { + background: rgba(235, 228, 241, 0.06); + padding: 1rem; + border-radius: 0.5rem; + overflow-x: auto; + margin-bottom: 1rem; +} + +.update-content pre code { + background: transparent; + padding: 0; +} + +.update-content strong { + font-weight: 700; + color: var(--color-text); +} + +.update-content hr { + border: none; + border-top: 1px solid var(--color-border); + margin: 2rem 0; +} + +.update-content blockquote { + border-left: 3px solid var(--color-primary); + padding-left: 1rem; + margin: 1rem 0; + color: rgba(235, 228, 241, 0.7); + font-style: italic; +} + +.update-content table { + width: 100%; + border-collapse: collapse; + margin-bottom: 1rem; +} + +.update-content th, +.update-content td { + border: 1px solid var(--color-border); + padding: 0.5rem 0.75rem; + text-align: left; +} + +.update-content th { + font-weight: 600; + background: rgba(235, 228, 241, 0.05); +} diff --git a/bun.lock b/bun.lock index a090acd..7d7c50f 100644 --- a/bun.lock +++ b/bun.lock @@ -9,7 +9,6 @@ "@better-auth/drizzle-adapter": "^1.6.9", "@better-auth/passkey": "^1.6.9", "@elysia/eden": "^1.4.10", - "@tailwindcss/typography": "^0.5.19", "@tiptap/core": "^3.22.4", "@tiptap/extension-link": "^3.22.4", "@tiptap/extension-placeholder": "^3.22.4", @@ -600,8 +599,6 @@ "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.4", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.4", "@tailwindcss/oxide": "4.2.4", "postcss": "^8.5.6", "tailwindcss": "4.2.4" } }, "sha512-wgAVj6nUWAolAu8YFvzT2cTBIElWHkjZwFYovF+xsqKsW2ADxM/X2opxj5NsF/qVccAOjRNe8X2IdPzMsWyHTg=="], - "@tailwindcss/typography": ["@tailwindcss/typography@0.5.19", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="], - "@tiptap/core": ["@tiptap/core@3.22.4", "", { "peerDependencies": { "@tiptap/pm": "3.22.4" } }, "sha512-vGIGm/HpqLg8EAAQXQ+koV+/S828OEpzocfWcPOwo1u2QUVf9dQG47Yy6JJ8zFFaJwfv4dBcOXli+7BrJwsxDQ=="], "@tiptap/extension-blockquote": ["@tiptap/extension-blockquote@3.22.4", "", { "peerDependencies": { "@tiptap/core": "3.22.4" } }, "sha512-7/61kNPbGFhMgM//zMknD0pSb69rGdRIkpulXOWS1JBrFHkH6hjZDfrOETNzgKkO+NlmzVl9rXSTv0xauS3lzA=="], @@ -870,8 +867,6 @@ "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="], - "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="], - "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="], "damerau-levenshtein": ["damerau-levenshtein@1.0.8", "", {}, "sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA=="], @@ -1390,8 +1385,6 @@ "postcss": ["postcss@8.5.10", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ=="], - "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="], - "postgres-array": ["postgres-array@2.0.0", "", {}, "sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA=="], "postgres-bytea": ["postgres-bytea@1.0.1", "", {}, "sha512-5+5HqXnsZPE65IJZSMkZtURARZelel2oXUEO8rH83VS/hxH5vv1uHquPg5wZs8yMAfdv971IU+kcPUczi7NVBQ=="], @@ -1646,8 +1639,6 @@ "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="], - "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="], - "uuid": ["uuid@10.0.0", "", { "bin": { "uuid": "dist/bin/uuid" } }, "sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ=="], "vfile": ["vfile@6.0.3", "", { "dependencies": { "@types/unist": "^3.0.0", "vfile-message": "^4.0.0" } }, "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q=="], diff --git a/components/updates/update-viewer.tsx b/components/updates/update-viewer.tsx index cc9f2f0..3ebbbc2 100644 --- a/components/updates/update-viewer.tsx +++ b/components/updates/update-viewer.tsx @@ -18,7 +18,14 @@ export function UpdateViewer({ return ( <> -
+
+ {/* Chapter navigation sidebar (desktop) */} + + {/* Main content */}
@@ -31,17 +38,10 @@ export function UpdateViewer({

{update.meta.title}

- - {/* Chapter navigation sidebar (desktop) */} -
{/* Mobile chapter nav (rendered inside viewer for context) */} diff --git a/package.json b/package.json index 8547851..3e5ff5a 100644 --- a/package.json +++ b/package.json @@ -20,7 +20,6 @@ "@better-auth/drizzle-adapter": "^1.6.9", "@better-auth/passkey": "^1.6.9", "@elysia/eden": "^1.4.10", - "@tailwindcss/typography": "^0.5.19", "@tiptap/core": "^3.22.4", "@tiptap/extension-link": "^3.22.4", "@tiptap/extension-placeholder": "^3.22.4",