TopDogLabs/blog-backup
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix markdown styling - remove incompatible typography plugin

Browse Source 
- Tailwind v4 doesn't support @tailwindcss/typography
- Replaced with custom CSS classes for markdown content
- Added proper styling for h1, h2, h3, p, ul, li, a, hr, strong
- Links are blue with hover effects
- All working now on http://localhost:3003
This commit is contained in:
OpenClaw Bot 2026-02-19 08:50:55 -06:00
parent b618772883
commit d0f73130f2
2 changed files with 63 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/app/globals.css
View File

@ -1,5 +1,4 @@
@import "tailwindcss";
@import "@tailwindcss/typography";
:root {
--background: #ffffff;
@ -25,3 +24,65 @@ body {
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
/* Markdown content styles */
.markdown-content h1 {
font-size: 1.5rem;
font-weight: 700;
color: #f4f4f5;
margin-bottom: 0.75rem;
margin-top: 1rem;
}
.markdown-content h2 {
font-size: 1.25rem;
font-weight: 600;
color: #e4e4e7;
margin-bottom: 0.5rem;
margin-top: 0.75rem;
}
.markdown-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #d4d4d8;
margin-bottom: 0.5rem;
margin-top: 0.75rem;
}
.markdown-content p {
color: #a1a1aa;
margin-bottom: 0.75rem;
line-height: 1.625;
}
.markdown-content ul {
list-style-type: disc;
list-style-position: inside;
margin-bottom: 0.75rem;
}
.markdown-content li {
color: #a1a1aa;
margin-bottom: 0.25rem;
}
.markdown-content a {
color: #60a5fa;
text-decoration: none;
}
.markdown-content a:hover {
color: #93c5fd;
text-decoration: underline;
}
.markdown-content hr {
border-color: #3f3f46;
margin: 1rem 0;
}
.markdown-content strong {
color: #e4e4e7;
font-weight: 600;
}

23
src/app/page.tsx
View File

@ -156,7 +156,7 @@ export default function Home() {
)}
<div className="flex justify-between items-start gap-4">
<div className="flex-1 prose prose-invert prose-zinc max-w-none">
<div className="flex-1 markdown-content">
<ReactMarkdown
remarkPlugins={[remarkGfm]}
components={{
@ -168,27 +168,6 @@ export default function Home() {
className="text-blue-400 hover:text-blue-300 hover:underline transition-colors"
/>
),
h1: ({ node, ...props }) => (
<h1 {...props} className="text-xl font-bold text-zinc-100 mb-3" />
),
h2: ({ node, ...props }) => (
<h2 {...props} className="text-lg font-semibold text-zinc-200 mt-4 mb-2" />
),
h3: ({ node, ...props }) => (
<h3 {...props} className="text-base font-medium text-zinc-300 mt-3 mb-2" />
),
ul: ({ node, ...props }) => (
<ul {...props} className="list-disc list-inside space-y-1 text-zinc-300 mb-3" />
),
li: ({ node, ...props }) => (
<li {...props} className="text-zinc-300" />
),
p: ({ node, ...props }) => (
<p {...props} className="text-zinc-300 mb-3 leading-relaxed" />
),
hr: ({ node, ...props }) => (
<hr {...props} className="border-zinc-700 my-4" />
),
}}
>
{msg.content}