Redesign blog with tag filtering and better UI
This commit is contained in:
parent
a0c015df56
commit
d9827de152
@ -16,7 +16,7 @@ async function getUser() {
|
||||
export async function GET() {
|
||||
const { data: messages, error } = await supabase
|
||||
.from("blog_messages")
|
||||
.select("*")
|
||||
.select("id, date, content, timestamp, tags")
|
||||
.order("timestamp", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
@ -34,7 +34,7 @@ export async function POST(request: Request) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { content, date } = await request.json();
|
||||
const { content, date, tags } = await request.json();
|
||||
|
||||
if (!content || !date) {
|
||||
return NextResponse.json({ error: "Content and date required" }, { status: 400 });
|
||||
@ -45,6 +45,7 @@ export async function POST(request: Request) {
|
||||
date,
|
||||
content,
|
||||
timestamp: Date.now(),
|
||||
tags: tags || [],
|
||||
};
|
||||
|
||||
const { error } = await supabase
|
||||
|
||||
501
src/app/page.tsx
501
src/app/page.tsx
@ -1,306 +1,335 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { format } from "date-fns";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import Head from "next/head";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
date: string;
|
||||
content: string;
|
||||
timestamp: number;
|
||||
tags?: string[];
|
||||
}
|
||||
|
||||
export default function BlogPage() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const selectedTag = searchParams.get("tag");
|
||||
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [displayedMessages, setDisplayedMessages] = useState<Message[]>([]);
|
||||
const [hasMore, setHasMore] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [initialLoading, setInitialLoading] = useState(true);
|
||||
const observerRef = useRef<IntersectionObserver | null>(null);
|
||||
const loadMoreRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const ITEMS_PER_PAGE = 5;
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetchMessages();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// Setup intersection observer for infinite scroll
|
||||
if (loadMoreRef.current) {
|
||||
observerRef.current = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && hasMore && !loading) {
|
||||
loadMore();
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
observerRef.current.observe(loadMoreRef.current);
|
||||
}
|
||||
|
||||
return () => {
|
||||
if (observerRef.current) {
|
||||
observerRef.current.disconnect();
|
||||
}
|
||||
};
|
||||
}, [hasMore, loading, messages]);
|
||||
|
||||
async function fetchMessages() {
|
||||
try {
|
||||
setInitialLoading(true);
|
||||
const res = await fetch("/api/messages");
|
||||
const data = await res.json();
|
||||
setMessages(data);
|
||||
setDisplayedMessages(data.slice(0, ITEMS_PER_PAGE));
|
||||
setHasMore(data.length > ITEMS_PER_PAGE);
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch messages:", err);
|
||||
console.error("Failed to fetch:", err);
|
||||
} finally {
|
||||
setInitialLoading(false);
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function loadMore() {
|
||||
if (loading || !hasMore) return;
|
||||
|
||||
setLoading(true);
|
||||
const currentLength = displayedMessages.length;
|
||||
const nextBatch = messages.slice(currentLength, currentLength + ITEMS_PER_PAGE);
|
||||
|
||||
setTimeout(() => {
|
||||
setDisplayedMessages((prev) => [...prev, ...nextBatch]);
|
||||
setHasMore(currentLength + nextBatch.length < messages.length);
|
||||
setLoading(false);
|
||||
}, 300);
|
||||
}
|
||||
// Get all unique tags
|
||||
const allTags = useMemo(() => {
|
||||
const tags = new Set<string>();
|
||||
messages.forEach((m) => m.tags?.forEach((t) => tags.add(t)));
|
||||
return Array.from(tags).sort();
|
||||
}, [messages]);
|
||||
|
||||
// Parse digest content for preview
|
||||
function getDigestPreview(content: string) {
|
||||
// Filter messages
|
||||
const filteredMessages = useMemo(() => {
|
||||
let filtered = messages;
|
||||
|
||||
if (selectedTag) {
|
||||
filtered = filtered.filter((m) => m.tags?.includes(selectedTag));
|
||||
}
|
||||
|
||||
if (searchQuery) {
|
||||
const query = searchQuery.toLowerCase();
|
||||
filtered = filtered.filter(
|
||||
(m) =>
|
||||
m.content.toLowerCase().includes(query) ||
|
||||
m.tags?.some((t) => t.toLowerCase().includes(query))
|
||||
);
|
||||
}
|
||||
|
||||
return filtered.sort((a, b) => b.timestamp - a.timestamp);
|
||||
}, [messages, selectedTag, searchQuery]);
|
||||
|
||||
// Get featured post (most recent)
|
||||
const featuredPost = filteredMessages[0];
|
||||
const regularPosts = filteredMessages.slice(1);
|
||||
|
||||
// Parse title from content
|
||||
function getTitle(content: string): string {
|
||||
const lines = content.split("\n");
|
||||
const titleLine = lines.find((line) => line.startsWith("## "));
|
||||
return titleLine?.replace("## ", "") || "Daily Digest";
|
||||
const titleLine = lines.find((l) => l.startsWith("# ") || l.startsWith("## "));
|
||||
return titleLine?.replace(/#{1,2}\s/, "") || "Daily Update";
|
||||
}
|
||||
|
||||
// Get first few lines for excerpt
|
||||
function getExcerpt(content: string, maxLength: number = 200) {
|
||||
const plainText = content.replace(/#{1,6}\s/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
|
||||
// Get excerpt
|
||||
function getExcerpt(content: string, maxLength: number = 150): string {
|
||||
const plainText = content
|
||||
.replace(/#{1,6}\s/g, "")
|
||||
.replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
|
||||
.replace(/\*/g, "")
|
||||
.replace(/\n/g, " ");
|
||||
if (plainText.length <= maxLength) return plainText;
|
||||
return plainText.substring(0, maxLength) + "...";
|
||||
return plainText.substring(0, maxLength).trim() + "...";
|
||||
}
|
||||
|
||||
const isDigest = (content: string) => content.includes("##");
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen bg-white flex items-center justify-center">
|
||||
<div className="w-8 h-8 border-2 border-blue-600 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Daily Digest & Blog | OpenClaw</title>
|
||||
<meta name="description" content="Daily AI digests, iOS development insights, and indie hacking notes" />
|
||||
<title>Daily Digest | OpenClaw Blog</title>
|
||||
<meta name="description" content="AI-powered daily digests on iOS, AI coding assistants, and indie hacking" />
|
||||
</Head>
|
||||
|
||||
<div className="min-h-screen bg-slate-950 text-slate-200">
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Header */}
|
||||
<header className="sticky top-0 z-50 bg-slate-950/80 backdrop-blur-md border-b border-slate-800">
|
||||
<div className="max-w-5xl mx-auto px-4 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white font-bold text-lg">
|
||||
<header className="border-b border-gray-200 sticky top-0 bg-white/95 backdrop-blur z-50">
|
||||
<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>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-white">Daily Digest</h1>
|
||||
<p className="text-xs text-slate-400">AI Research & Indie Hacking</p>
|
||||
</div>
|
||||
</div>
|
||||
<nav className="flex items-center gap-4">
|
||||
<a href="/" className="text-sm text-slate-400 hover:text-white transition-colors">
|
||||
Home
|
||||
</a>
|
||||
<a href="https://gantt-board.vercel.app" className="text-sm text-slate-400 hover:text-white transition-colors">
|
||||
<span className="font-bold text-xl text-gray-900">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">
|
||||
Tasks
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="https://mission-control-rho-pink.vercel.app" className="text-sm text-gray-600 hover:text-gray-900">
|
||||
Mission Control
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="border-b border-slate-800 bg-gradient-to-b from-slate-900 to-slate-950">
|
||||
<div className="max-w-5xl mx-auto px-4 py-16 md:py-20">
|
||||
<div className="max-w-2xl">
|
||||
<span className="inline-block px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 text-sm font-medium mb-4">
|
||||
🤖 AI-Powered Research
|
||||
</span>
|
||||
<h2 className="text-3xl md:text-5xl font-bold text-white mb-6 leading-tight">
|
||||
Daily insights on<br />
|
||||
<span className="bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
||||
iOS, AI & Indie Hacking
|
||||
</span>
|
||||
</h2>
|
||||
<p className="text-lg text-slate-400 mb-8">
|
||||
Curated daily digests covering AI coding assistants, iOS development,
|
||||
OpenClaw updates, and digital entrepreneurship.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-3 text-sm">
|
||||
<span className="px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300">iOS AI</span>
|
||||
<span className="px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300">Claude</span>
|
||||
<span className="px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300">OpenClaw</span>
|
||||
<span className="px-3 py-1.5 rounded-lg bg-slate-800 text-slate-300">Indie Hacking</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Blog Posts */}
|
||||
<main className="max-w-5xl mx-auto px-4 py-12">
|
||||
{initialLoading ? (
|
||||
<div className="flex items-center justify-center py-20">
|
||||
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="grid gap-6 md:gap-8">
|
||||
{displayedMessages.map((msg, index) => {
|
||||
const digest = isDigest(msg.content);
|
||||
const isFirst = index === 0;
|
||||
|
||||
return (
|
||||
<article
|
||||
key={msg.id}
|
||||
className={`group relative bg-slate-900 rounded-2xl border border-slate-800 overflow-hidden hover:border-slate-700 transition-all ${
|
||||
isFirst ? "md:col-span-full" : ""
|
||||
}`}
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-8">
|
||||
{/* Page Title */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold text-gray-900 mb-2">
|
||||
{selectedTag ? `Posts tagged "${selectedTag}"` : "Latest Posts"}
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
{filteredMessages.length} post{filteredMessages.length !== 1 ? "s" : ""}
|
||||
{selectedTag && (
|
||||
<button
|
||||
onClick={() => router.push("/")}
|
||||
className="ml-4 text-blue-600 hover:text-blue-800 text-sm"
|
||||
>
|
||||
{/* Card Header */}
|
||||
<div className="p-6 md:p-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{digest ? (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/10 text-blue-400 text-xs font-medium">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-blue-400 animate-pulse" />
|
||||
AI Digest
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-700 text-slate-300 text-xs font-medium">
|
||||
📝 Note
|
||||
</span>
|
||||
)}
|
||||
<span className="text-slate-500 text-sm">
|
||||
{format(new Date(msg.date), "MMMM d, yyyy")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Title */}
|
||||
<h3 className="text-xl md:text-2xl font-bold text-white mb-3 group-hover:text-blue-400 transition-colors">
|
||||
{digest ? getDigestPreview(msg.content) : "Daily Update"}
|
||||
</h3>
|
||||
|
||||
{/* Excerpt */}
|
||||
<p className="text-slate-400 leading-relaxed mb-4">
|
||||
{getExcerpt(msg.content, 280)}
|
||||
</p>
|
||||
|
||||
{/* Read More Link */}
|
||||
<button className="inline-flex items-center gap-2 text-blue-400 hover:text-blue-300 text-sm font-medium transition-colors">
|
||||
Read full post
|
||||
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Full Content (expandable) */}
|
||||
<div className="px-6 md:px-8 pb-6 md:pb-8 border-t border-slate-800">
|
||||
<div className="prose prose-invert prose-slate max-w-none mt-4">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
h1: ({ children }) => <h1 className="text-2xl font-bold text-white mb-4">{children}</h1>,
|
||||
h2: ({ children }) => <h2 className="text-xl font-semibold text-slate-200 mt-6 mb-3">{children}</h2>,
|
||||
h3: ({ children }) => <h3 className="text-lg font-semibold text-slate-300 mt-4 mb-2">{children}</h3>,
|
||||
p: ({ children }) => <p className="text-slate-400 mb-4 leading-relaxed">{children}</p>,
|
||||
ul: ({ children }) => <ul className="list-disc list-inside text-slate-400 mb-4 space-y-1">{children}</ul>,
|
||||
li: ({ children }) => <li className="marker:text-slate-600">{children}</li>,
|
||||
a: ({ children, href }) => (
|
||||
<a
|
||||
href={href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 hover:underline transition-colors"
|
||||
>
|
||||
{children}
|
||||
</a>
|
||||
),
|
||||
code: ({ children }) => (
|
||||
<code className="px-1.5 py-0.5 rounded bg-slate-800 text-slate-300 text-sm font-mono">
|
||||
{children}
|
||||
</code>
|
||||
),
|
||||
hr: () => <hr className="border-slate-800 my-6" />,
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-slate-600 mt-6">
|
||||
Posted {format(new Date(msg.timestamp), "h:mm a")}
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
})}
|
||||
Clear filter →
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Load More Trigger */}
|
||||
{hasMore && (
|
||||
<div ref={loadMoreRef} className="flex items-center justify-center py-12">
|
||||
{loading ? (
|
||||
<div className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full animate-spin" />
|
||||
) : (
|
||||
<div className="text-slate-600 text-sm">Scroll for more</div>
|
||||
{/* Featured Post */}
|
||||
{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="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"
|
||||
>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<span className="text-sm text-blue-600 font-medium mb-2 block">
|
||||
Featured Post
|
||||
</span>
|
||||
<h2 className="text-2xl md:text-3xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
|
||||
{getTitle(featuredPost.content)}
|
||||
</h2>
|
||||
<p className="text-gray-600 mb-4 line-clamp-3">
|
||||
{getExcerpt(featuredPost.content, 200)}
|
||||
</p>
|
||||
<div className="flex items-center gap-4 text-sm text-gray-500">
|
||||
<span>{format(new Date(featuredPost.date), "MMMM d, yyyy")}</span>
|
||||
<span>·</span>
|
||||
<span>5 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
</article>
|
||||
)}
|
||||
|
||||
{/* Post List */}
|
||||
<div className="space-y-6">
|
||||
{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"
|
||||
>
|
||||
{/* Date Column */}
|
||||
<div className="hidden sm:block text-center min-w-[60px]">
|
||||
<div className="text-2xl font-bold text-gray-900">
|
||||
{format(new Date(post.date), "d")}
|
||||
</div>
|
||||
<div className="text-xs text-gray-500 uppercase">
|
||||
{format(new Date(post.date), "MMM")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{post.tags && post.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{post.tags.slice(0, 2).map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() => router.push(`/?tag=${tag}`)}
|
||||
className="text-xs text-blue-600 hover:text-blue-800 font-medium"
|
||||
>
|
||||
#{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<h3 className="text-lg md:text-xl font-semibold text-gray-900 mb-2 hover:text-blue-600 cursor-pointer">
|
||||
{getTitle(post.content)}
|
||||
</h3>
|
||||
|
||||
<p className="text-gray-600 text-sm line-clamp-2 mb-3">
|
||||
{getExcerpt(post.content)}
|
||||
</p>
|
||||
|
||||
<div className="flex items-center gap-3 text-xs text-gray-500">
|
||||
<span>{format(new Date(post.date), "MMMM d, yyyy")}</span>
|
||||
<span>·</span>
|
||||
<span>3 min read</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredMessages.length === 0 && (
|
||||
<div className="text-center py-16">
|
||||
<p className="text-gray-500">No posts found.</p>
|
||||
{(selectedTag || searchQuery) && (
|
||||
<button
|
||||
onClick={() => {
|
||||
router.push("/");
|
||||
setSearchQuery("");
|
||||
}}
|
||||
className="mt-2 text-blue-600 hover:text-blue-800"
|
||||
>
|
||||
Clear filters
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!hasMore && messages.length > 0 && (
|
||||
<div className="text-center py-12 text-slate-600">
|
||||
<p>You've reached the end 🎉</p>
|
||||
{/* 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">
|
||||
Search
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
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"
|
||||
/>
|
||||
</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="flex flex-wrap gap-2">
|
||||
{allTags.map((tag) => (
|
||||
<button
|
||||
key={tag}
|
||||
onClick={() =>
|
||||
router.push(selectedTag === tag ? "/" : `/?tag=${tag}`)
|
||||
}
|
||||
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"
|
||||
}`}
|
||||
>
|
||||
{tag}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{messages.length === 0 && (
|
||||
<div className="text-center py-20">
|
||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl bg-slate-800 flex items-center justify-center text-2xl">
|
||||
📝
|
||||
{/* 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">
|
||||
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="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>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-gray-600">Tags</span>
|
||||
<span className="font-medium">{allTags.length}</span>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold text-white mb-2">No posts yet</h3>
|
||||
<p className="text-slate-400">Start adding daily digests to build your archive.</p>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-slate-800 bg-slate-950">
|
||||
<div className="max-w-5xl mx-auto px-4 py-8">
|
||||
<div className="flex flex-col md:flex-row items-center justify-between gap-4">
|
||||
<p className="text-slate-500 text-sm">
|
||||
© {new Date().getFullYear()} OpenClaw Daily Digest
|
||||
</p>
|
||||
<div className="flex items-center gap-6">
|
||||
<a href="https://gantt-board.vercel.app" className="text-slate-500 hover:text-slate-300 text-sm transition-colors">
|
||||
Gantt Board
|
||||
</a>
|
||||
<a href="https://mission-control-rho-pink.vercel.app" className="text-slate-500 hover:text-slate-300 text-sm transition-colors">
|
||||
Mission Control
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="border-t border-gray-200 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">
|
||||
© {new Date().getFullYear()} OpenClaw Daily Digest
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user