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

Fix post detail readability and add light/dark theme toggle

Browse Source
This commit is contained in:
Matt Bruce 2026-02-21 15:47:17 -06:00
parent d9827de152
commit 5211532923
2 changed files with 182 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/app/globals.css
View File

@ -1,35 +1,48 @@
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
:root {
--background: #ffffff;
--foreground: #171717;
--background: #f8fafc;
--foreground: #0f172a;
--markdown-heading: #0f172a;
--markdown-body: #334155;
--markdown-link: #2563eb;
--markdown-link-hover: #1d4ed8;
--markdown-rule: #cbd5e1;
color-scheme: light;
}
:root.dark {
--background: #020617;
--foreground: #e2e8f0;
--markdown-heading: #f8fafc;
--markdown-body: #cbd5e1;
--markdown-link: #60a5fa;
--markdown-link-hover: #93c5fd;
--markdown-rule: #334155;
color-scheme: dark;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
--font-sans: var(--font-inter);
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
/* Markdown content styles */
.markdown-content {
color: var(--markdown-body);
}
.markdown-content h1 {
font-size: 1.5rem;
font-weight: 700;
color: #f4f4f5;
color: var(--markdown-heading);
margin-bottom: 0.75rem;
margin-top: 1rem;
}
@ -37,7 +50,7 @@ body {
.markdown-content h2 {
font-size: 1.25rem;
font-weight: 600;
color: #e4e4e7;
color: var(--markdown-heading);
margin-bottom: 0.5rem;
margin-top: 0.75rem;
}
@ -45,13 +58,13 @@ body {
.markdown-content h3 {
font-size: 1.125rem;
font-weight: 600;
color: #d4d4d8;
color: var(--markdown-heading);
margin-bottom: 0.5rem;
margin-top: 0.75rem;
}
.markdown-content p {
color: #a1a1aa;
color: var(--markdown-body);
margin-bottom: 0.75rem;
line-height: 1.625;
}
@ -63,26 +76,26 @@ body {
}
.markdown-content li {
color: #a1a1aa;
color: var(--markdown-body);
margin-bottom: 0.25rem;
}
.markdown-content a {
color: #60a5fa;
color: var(--markdown-link);
text-decoration: none;
}
.markdown-content a:hover {
color: #93c5fd;
color: var(--markdown-link-hover);
text-decoration: underline;
}
.markdown-content hr {
border-color: #3f3f46;
border-color: var(--markdown-rule);
margin: 1rem 0;
}
.markdown-content strong {
color: #e4e4e7;
color: var(--markdown-heading);
font-weight: 600;
}

190
src/app/page.tsx
View File

@ -1,6 +1,6 @@
"use client";
import { useState, useEffect, useMemo } from "react";
import { Suspense, useState, useEffect, useMemo } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { format } from "date-fns";
import ReactMarkdown from "react-markdown";
@ -16,19 +16,53 @@ interface Message {
tags?: string[];
}
type Theme = "light" | "dark";
export default function BlogPage() {
return (
<Suspense
fallback={
<div className="min-h-screen bg-white dark:bg-slate-950 flex items-center justify-center">
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
</div>
}
>
<BlogPageContent />
</Suspense>
);
}
function BlogPageContent() {
const router = useRouter();
const searchParams = useSearchParams();
const selectedTag = searchParams.get("tag");
const selectedPostId = searchParams.get("post");
const [messages, setMessages] = useState<Message[]>([]);
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState("");
const [theme, setTheme] = useState<Theme>("light");
useEffect(() => {
fetchMessages();
}, []);
useEffect(() => {
const storedTheme = localStorage.getItem("theme");
const initialTheme: Theme =
storedTheme === "light" || storedTheme === "dark"
? storedTheme
: window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
setTheme(initialTheme);
}, []);
useEffect(() => {
document.documentElement.classList.toggle("dark", theme === "dark");
localStorage.setItem("theme", theme);
}, [theme]);
async function fetchMessages() {
try {
const res = await fetch("/api/messages");
@ -71,6 +105,13 @@ export default function BlogPage() {
// Get featured post (most recent)
const featuredPost = filteredMessages[0];
const regularPosts = filteredMessages.slice(1);
const selectedPost = useMemo(
() =>
selectedPostId
? messages.find((message) => message.id === selectedPostId) ?? null
: null,
[messages, selectedPostId]
);
// Parse title from content
function getTitle(content: string): string {
@ -92,7 +133,7 @@ export default function BlogPage() {
if (loading) {
return (
<div className="min-h-screen bg-white flex items-center justify-center">
<div className="min-h-screen bg-white dark:bg-slate-950 flex items-center justify-center">
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
</div>
);
@ -105,25 +146,33 @@ export default function BlogPage() {
<meta name="description" content="AI-powered daily digests on iOS, AI coding assistants, and indie hacking" />
</Head>
<div className="min-h-screen bg-white">
<div className="min-h-screen bg-white text-gray-900 dark:bg-slate-950 dark:text-slate-100">
{/* Header */}
<header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50">
<header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50 dark:border-slate-800 dark:bg-slate-950/95">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<Link href="/" className="flex items-center gap-2">
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold">
📓
</div>
<span className="font-bold text-xl text-gray-900">Daily Digest</span>
<span className="font-bold text-xl text-gray-900 dark:text-slate-100">Daily Digest</span>
</Link>
<nav className="hidden md:flex items-center gap-6">
<Link href="https://gantt-board.vercel.app" className="text-sm text-gray-600 hover:text-gray-900">
<nav className="flex items-center gap-4 md:gap-6">
<Link href="https://gantt-board.vercel.app" className="hidden md:inline text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
Tasks
</Link>
<Link href="https://mission-control-rho-pink.vercel.app" className="text-sm text-gray-600 hover:text-gray-900">
<Link href="https://mission-control-rho-pink.vercel.app" className="hidden md:inline text-sm text-gray-600 hover:text-gray-900 dark:text-slate-300 dark:hover:text-slate-100">
Mission Control
</Link>
<button
type="button"
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="px-3 py-1.5 rounded-lg border border-gray-300 text-xs font-medium text-gray-700 hover:bg-gray-100 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800"
aria-label={`Switch to ${theme === "dark" ? "light" : "dark"} mode`}
>
{theme === "dark" ? "Light mode" : "Dark mode"}
</button>
</nav>
</div>
</div>
@ -133,17 +182,68 @@ export default function BlogPage() {
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
{/* Main Content */}
<div className="lg:col-span-8">
{selectedPostId ? (
selectedPost ? (
<article>
<button
onClick={() => router.push("/")}
className="mb-6 text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
>
← Back to all posts
</button>
<header className="mb-8">
{selectedPost.tags && selectedPost.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-4">
{selectedPost.tags.map((tag) => (
<button
key={tag}
onClick={() => router.push(`/?tag=${tag}`)}
className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium dark:bg-blue-900/40 dark:text-blue-200"
>
{tag}
</button>
))}
</div>
)}
<h1 className="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-3">
{getTitle(selectedPost.content)}
</h1>
<p className="text-sm text-gray-500 dark:text-slate-400">
{format(new Date(selectedPost.date), "MMMM d, yyyy")}
</p>
</header>
<div className="markdown-content">
<ReactMarkdown remarkPlugins={[remarkGfm]}>
{selectedPost.content}
</ReactMarkdown>
</div>
</article>
) : (
<div className="text-center py-16">
<p className="text-gray-500 dark:text-slate-400">Post not found.</p>
<button
onClick={() => router.push("/")}
className="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
>
Back to all posts
</button>
</div>
)
) : (
<>
{/* Page Title */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">
<h1 className="text-3xl font-bold text-gray-900 dark:text-slate-100 mb-2">
{selectedTag ? `Posts tagged "${selectedTag}"` : "Latest Posts"}
</h1>
<p className="text-gray-600">
<p className="text-gray-600 dark:text-slate-300">
{filteredMessages.length} post{filteredMessages.length !== 1 ? "s" : ""}
{selectedTag && (
<button
onClick={() => router.push("/")}
className="ml-4 text-blue-600 hover:text-blue-800 text-sm"
className="ml-4 text-blue-600 hover:text-blue-800 text-sm dark:text-blue-400 dark:hover:text-blue-300"
>
Clear filter →
</button>
@ -155,30 +255,30 @@ export default function BlogPage() {
{featuredPost && !selectedTag && !searchQuery && (
<article className="mb-10">
<Link href={`/?post=${featuredPost.id}`} className="group block">
<div className="relative bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-blue-300 transition-colors">
<div className="relative bg-gray-50 rounded-2xl overflow-hidden border border-gray-200 hover:border-blue-300 transition-colors dark:bg-slate-900 dark:border-slate-800 dark:hover:border-blue-500">
<div className="p-6 md:p-8">
{featuredPost.tags && featuredPost.tags.length > 0 && (
<div className="flex flex-wrap gap-2 mb-4">
{featuredPost.tags.slice(0, 3).map((tag) => (
<span
key={tag}
className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium"
className="px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs font-medium dark:bg-blue-900/40 dark:text-blue-200"
>
{tag}
</span>
))}
</div>
)}
<span className="text-sm text-blue-600 font-medium mb-2 block">
<span className="text-sm text-blue-600 font-medium mb-2 block dark:text-blue-400">
Featured Post
</span>
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 dark:text-slate-100 mb-3 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
{getTitle(featuredPost.content)}
</h2>
<p className="text-gray-600 mb-4 line-clamp-3">
<p className="text-gray-600 dark:text-slate-300 mb-4 line-clamp-3">
{getExcerpt(featuredPost.content, 200)}
</p>
<div className="flex items-center gap-4 text-sm text-gray-500">
<div className="flex items-center gap-4 text-sm text-gray-500 dark:text-slate-400">
<span>{format(new Date(featuredPost.date), "MMMM d, yyyy")}</span>
<span>·</span>
<span>5 min read</span>
@ -194,14 +294,14 @@ export default function BlogPage() {
{regularPosts.map((post) => (
<article
key={post.id}
className="flex gap-4 md:gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200"
className="flex gap-4 md:gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors border border-transparent hover:border-gray-200 dark:hover:bg-slate-900 dark:hover:border-slate-700"
>
{/* Date Column */}
<div className="hidden sm:block text-center min-w-[60px]">
<div className="text-2xl font-bold text-gray-900">
<div className="text-2xl font-bold text-gray-900 dark:text-slate-100">
{format(new Date(post.date), "d")}
</div>
<div className="text-xs text-gray-500 uppercase">
<div className="text-xs text-gray-500 dark:text-slate-400 uppercase">
{format(new Date(post.date), "MMM")}
</div>
</div>
@ -214,7 +314,7 @@ export default function BlogPage() {
<button
key={tag}
onClick={() => router.push(`/?tag=${tag}`)}
className="text-xs text-blue-600 hover:text-blue-800 font-medium"
className="text-xs text-blue-600 hover:text-blue-800 font-medium dark:text-blue-400 dark:hover:text-blue-300"
>
#{tag}
</button>
@ -222,15 +322,17 @@ export default function BlogPage() {
</div>
)}
<h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 cursor-pointer">
<h3 className="text-lg md:text-xl font-semibold text-gray-900 dark:text-slate-100 mb-2 hover:text-blue-600 dark:hover:text-blue-400 cursor-pointer">
<Link href={`/?post=${post.id}`}>
{getTitle(post.content)}
</Link>
</h3>
<p className="text-gray-600 text-sm line-clamp-2 mb-3">
<p className="text-gray-600 dark:text-slate-300 text-sm line-clamp-2 mb-3">
{getExcerpt(post.content)}
</p>
<div className="flex items-center gap-3 text-xs text-gray-500">
<div className="flex items-center gap-3 text-xs text-gray-500 dark:text-slate-400">
<span>{format(new Date(post.date), "MMMM d, yyyy")}</span>
<span>·</span>
<span>3 min read</span>
@ -242,27 +344,29 @@ export default function BlogPage() {
{filteredMessages.length === 0 && (
<div className="text-center py-16">
<p className="text-gray-500">No posts found.</p>
<p className="text-gray-500 dark:text-slate-400">No posts found.</p>
{(selectedTag || searchQuery) && (
<button
onClick={() => {
router.push("/");
setSearchQuery("");
}}
className="mt-2 text-blue-600 hover:text-blue-800"
className="mt-2 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
>
Clear filters
</button>
)}
</div>
)}
</>
)}
</div>
{/* Sidebar */}
<div className="lg:col-span-4 space-y-6">
{/* Search */}
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
<label className="block text-sm font-medium text-gray-700 mb-2">
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
<label className="block text-sm font-medium text-gray-700 dark:text-slate-200 mb-2">
Search
</label>
<input
@ -270,13 +374,13 @@ export default function BlogPage() {
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Search posts..."
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
className="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white text-gray-900 placeholder:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-slate-950 dark:border-slate-700 dark:text-slate-100 dark:placeholder:text-slate-500"
/>
</div>
{/* Tags */}
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
<h3 className="font-semibold text-gray-900 mb-3">Tags</h3>
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-3">Tags</h3>
<div className="flex flex-wrap gap-2">
{allTags.map((tag) => (
<button
@ -287,7 +391,7 @@ export default function BlogPage() {
className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${
selectedTag === tag
? "bg-blue-600 text-white"
: "bg-white text-gray-700 border border-gray-300 hover:border-blue-400"
: "bg-white text-gray-700 border border-gray-300 hover:border-blue-400 dark:bg-slate-950 dark:text-slate-200 dark:border-slate-700 dark:hover:border-blue-500"
}`}
>
{tag}
@ -297,25 +401,25 @@ export default function BlogPage() {
</div>
{/* About */}
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
<h3 className="font-semibold text-gray-900 mb-2">About</h3>
<p className="text-sm text-gray-600">
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-2">About</h3>
<p className="text-sm text-gray-600 dark:text-slate-300">
Daily curated digests covering AI coding assistants, iOS development,
OpenClaw updates, and digital entrepreneurship.
</p>
</div>
{/* Stats */}
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200">
<h3 className="font-semibold text-gray-900 mb-3">Stats</h3>
<div className="bg-gray-50 rounded-xl p-4 border border-gray-200 dark:bg-slate-900 dark:border-slate-800">
<h3 className="font-semibold text-gray-900 dark:text-slate-100 mb-3">Stats</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600">Total posts</span>
<span className="font-medium">{messages.length}</span>
<span className="text-gray-600 dark:text-slate-300">Total posts</span>
<span className="font-medium dark:text-slate-100">{messages.length}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Tags</span>
<span className="font-medium">{allTags.length}</span>
<span className="text-gray-600 dark:text-slate-300">Tags</span>
<span className="font-medium dark:text-slate-100">{allTags.length}</span>
</div>
</div>
</div>
@ -324,9 +428,9 @@ export default function BlogPage() {
</div>
{/* Footer */}
<footer className="border-t border-gray-200 mt-16">
<footer className="border-t border-gray-200 dark:border-slate-800 mt-16">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<p className="text-center text-gray-500 text-sm">
<p className="text-center text-gray-500 dark:text-slate-400 text-sm">
© {new Date().getFullYear()} OpenClaw Daily Digest
</p>
</div>