Supabase migration + blog redesign
This commit is contained in:
parent
5a95c9bb9e
commit
a0c015df56
131
package-lock.json
generated
131
package-lock.json
generated
@ -8,6 +8,7 @@
|
||||
"name": "blog-backup",
|
||||
"version": "0.1.0",
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.97.0",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"date-fns": "^4.1.0",
|
||||
"next": "16.1.6",
|
||||
@ -1237,6 +1238,86 @@
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@supabase/auth-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.97.0.tgz",
|
||||
"integrity": "sha512-2Og/1lqp+AIavr8qS2X04aSl8RBY06y4LrtIAGxat06XoXYiDxKNQMQzWDAKm1EyZFZVRNH48DO5YvIZ7la5fQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/functions-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.97.0.tgz",
|
||||
"integrity": "sha512-fSaA0ZeBUS9hMgpGZt5shIZvfs3Mvx2ZdajQT4kv/whubqDBAp3GU5W8iIXy21MRvKmO2NpAj8/Q6y+ZkZyF/w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/postgrest-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.97.0.tgz",
|
||||
"integrity": "sha512-g4Ps0eaxZZurvfv/KGoo2XPZNpyNtjth9aW8eho9LZWM0bUuBtxPZw3ZQ6ERSpEGogshR+XNgwlSPIwcuHCNww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/realtime-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.97.0.tgz",
|
||||
"integrity": "sha512-37Jw0NLaFP0CZd7qCan97D1zWutPrTSpgWxAw6Yok59JZoxp4IIKMrPeftJ3LZHmf+ILQOPy3i0pRDHM9FY36Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/phoenix": "^1.6.6",
|
||||
"@types/ws": "^8.18.1",
|
||||
"tslib": "2.8.1",
|
||||
"ws": "^8.18.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/storage-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.97.0.tgz",
|
||||
"integrity": "sha512-9f6NniSBfuMxOWKwEFb+RjJzkfMdJUwv9oHuFJKfe/5VJR8cd90qw68m6Hn0ImGtwG37TUO+QHtoOechxRJ1Yg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"iceberg-js": "^0.8.1",
|
||||
"tslib": "2.8.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@supabase/supabase-js": {
|
||||
"version": "2.97.0",
|
||||
"resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.97.0.tgz",
|
||||
"integrity": "sha512-kTD91rZNO4LvRUHv4x3/4hNmsEd2ofkYhuba2VMUPRVef1RCmnHtm7rIws38Fg0yQnOSZOplQzafn0GSiy6GVg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@supabase/auth-js": "2.97.0",
|
||||
"@supabase/functions-js": "2.97.0",
|
||||
"@supabase/postgrest-js": "2.97.0",
|
||||
"@supabase/realtime-js": "2.97.0",
|
||||
"@supabase/storage-js": "2.97.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.15",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
|
||||
@ -1606,17 +1687,21 @@
|
||||
"version": "20.19.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.33.tgz",
|
||||
"integrity": "sha512-Rs1bVAIdBs5gbTIKza/tgpMuG1k3U/UMJLWecIMxNdJFDMzcM5LOiLVRYh3PilWEYDIeUDv7bpiHPLPsbydGcw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.21.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/phoenix": {
|
||||
"version": "1.6.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
|
||||
"integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.2.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
|
||||
"integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
@ -1638,6 +1723,15 @@
|
||||
"integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/ws": {
|
||||
"version": "8.18.1",
|
||||
"resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
|
||||
"integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.56.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.56.0.tgz",
|
||||
@ -2793,7 +2887,6 @@
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
@ -4170,6 +4263,15 @@
|
||||
"url": "https://opencollective.com/unified"
|
||||
}
|
||||
},
|
||||
"node_modules/iceberg-js": {
|
||||
"version": "0.8.1",
|
||||
"resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
|
||||
"integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ignore": {
|
||||
"version": "5.3.2",
|
||||
"resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
|
||||
@ -7430,7 +7532,6 @@
|
||||
"version": "4.1.18",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
|
||||
"integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
@ -7725,7 +7826,6 @@
|
||||
"version": "6.21.0",
|
||||
"resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
|
||||
"integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/unified": {
|
||||
@ -8040,6 +8140,27 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "8.19.0",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
|
||||
"integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"bufferutil": "^4.0.1",
|
||||
"utf-8-validate": ">=5.0.2"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"bufferutil": {
|
||||
"optional": true
|
||||
},
|
||||
"utf-8-validate": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/yallist": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@supabase/supabase-js": "^2.97.0",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"date-fns": "^4.1.0",
|
||||
"next": "16.1.6",
|
||||
|
||||
@ -1,72 +1,86 @@
|
||||
import { NextResponse } from "next/server";
|
||||
import { readFileSync, writeFileSync, existsSync } from "fs";
|
||||
import { join } from "path";
|
||||
import { createClient } from "@supabase/supabase-js";
|
||||
|
||||
const DATA_FILE = join(process.cwd(), "data", "messages.json");
|
||||
const supabase = createClient(
|
||||
process.env.NEXT_PUBLIC_SUPABASE_URL!,
|
||||
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
|
||||
);
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
date: string;
|
||||
content: string;
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
function getMessages(): Message[] {
|
||||
if (!existsSync(DATA_FILE)) {
|
||||
return [];
|
||||
}
|
||||
try {
|
||||
const data = readFileSync(DATA_FILE, "utf-8");
|
||||
return JSON.parse(data);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function saveMessages(messages: Message[]) {
|
||||
const dir = join(process.cwd(), "data");
|
||||
if (!existsSync(dir)) {
|
||||
require("fs").mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
writeFileSync(DATA_FILE, JSON.stringify(messages, null, 2));
|
||||
// Helper to check auth
|
||||
async function getUser() {
|
||||
const { data: { user } } = await supabase.auth.getUser();
|
||||
return user;
|
||||
}
|
||||
|
||||
// GET is public (read-only)
|
||||
export async function GET() {
|
||||
const messages = getMessages();
|
||||
return NextResponse.json(messages);
|
||||
const { data: messages, error } = await supabase
|
||||
.from("blog_messages")
|
||||
.select("*")
|
||||
.order("timestamp", { ascending: false });
|
||||
|
||||
if (error) {
|
||||
console.error("Error fetching messages:", error);
|
||||
return NextResponse.json({ error: "Failed to fetch messages" }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json(messages || []);
|
||||
}
|
||||
|
||||
// POST requires auth
|
||||
export async function POST(request: Request) {
|
||||
const user = await getUser();
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { content, date } = await request.json();
|
||||
|
||||
if (!content || !date) {
|
||||
return NextResponse.json({ error: "Content and date required" }, { status: 400 });
|
||||
}
|
||||
|
||||
const messages = getMessages();
|
||||
const newMessage: Message = {
|
||||
const newMessage = {
|
||||
id: Date.now().toString(),
|
||||
date,
|
||||
content,
|
||||
timestamp: Date.now(),
|
||||
};
|
||||
|
||||
messages.unshift(newMessage);
|
||||
saveMessages(messages);
|
||||
const { error } = await supabase
|
||||
.from("blog_messages")
|
||||
.insert(newMessage);
|
||||
|
||||
if (error) {
|
||||
console.error("Error saving message:", error);
|
||||
return NextResponse.json({ error: "Failed to save message" }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json(newMessage);
|
||||
}
|
||||
|
||||
// DELETE requires auth
|
||||
export async function DELETE(request: Request) {
|
||||
const user = await getUser();
|
||||
if (!user) {
|
||||
return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
|
||||
}
|
||||
|
||||
const { id } = await request.json();
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ error: "ID required" }, { status: 400 });
|
||||
}
|
||||
|
||||
let messages = getMessages();
|
||||
messages = messages.filter((m) => m.id !== id);
|
||||
saveMessages(messages);
|
||||
const { error } = await supabase
|
||||
.from("blog_messages")
|
||||
.delete()
|
||||
.eq("id", id);
|
||||
|
||||
if (error) {
|
||||
console.error("Error deleting message:", error);
|
||||
return NextResponse.json({ error: "Failed to delete message" }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json({ success: true });
|
||||
}
|
||||
|
||||
@ -1,20 +1,16 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
const inter = Inter({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Daily Digest | OpenClaw",
|
||||
description: "AI-powered daily digests covering iOS development, AI coding assistants, OpenClaw updates, and indie hacking insights.",
|
||||
keywords: ["iOS", "AI", "OpenClaw", "Indie Hacking", "Daily Digest", "Claude", "Cursor"],
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
@ -23,12 +19,8 @@ export default function RootLayout({
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
<html lang="en" className={inter.variable}>
|
||||
<body className="font-sans antialiased">{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
414
src/app/page.tsx
414
src/app/page.tsx
@ -1,9 +1,10 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useRef } from "react";
|
||||
import { format } from "date-fns";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
import Head from "next/head";
|
||||
|
||||
interface Message {
|
||||
id: string;
|
||||
@ -12,189 +13,296 @@ interface Message {
|
||||
timestamp: number;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
export default function BlogPage() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [newMessage, setNewMessage] = useState("");
|
||||
const [selectedDate, setSelectedDate] = useState(() => {
|
||||
const today = new Date();
|
||||
return today.toISOString().split("T")[0];
|
||||
});
|
||||
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;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
async function addMessage(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!newMessage.trim()) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await fetch("/api/messages", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ content: newMessage, date: selectedDate }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setNewMessage("");
|
||||
fetchMessages();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to add message:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setInitialLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteMessage(id: string) {
|
||||
if (!confirm("Delete this message?")) return;
|
||||
function loadMore() {
|
||||
if (loading || !hasMore) return;
|
||||
|
||||
try {
|
||||
const res = await fetch("/api/messages", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
fetchMessages();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to delete message:", err);
|
||||
}
|
||||
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);
|
||||
}
|
||||
|
||||
// Group messages by date
|
||||
const groupedMessages = messages.reduce((acc, msg) => {
|
||||
if (!acc[msg.date]) acc[msg.date] = [];
|
||||
acc[msg.date].push(msg);
|
||||
return acc;
|
||||
}, {} as Record<string, Message[]>);
|
||||
// Parse digest content for preview
|
||||
function getDigestPreview(content: string) {
|
||||
const lines = content.split("\n");
|
||||
const titleLine = lines.find((line) => line.startsWith("## "));
|
||||
return titleLine?.replace("## ", "") || "Daily Digest";
|
||||
}
|
||||
|
||||
const sortedDates = Object.keys(groupedMessages).sort((a, b) =>
|
||||
new Date(b).getTime() - new Date(a).getTime()
|
||||
);
|
||||
// Get first few lines for excerpt
|
||||
function getExcerpt(content: string, maxLength: number = 200) {
|
||||
const plainText = content.replace(/#{1,6}\s/g, "").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1");
|
||||
if (plainText.length <= maxLength) return plainText;
|
||||
return plainText.substring(0, maxLength) + "...";
|
||||
}
|
||||
|
||||
// Check if message is a digest
|
||||
const isDigest = (content: string) => content.includes("##");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-zinc-100">
|
||||
<div className="max-w-3xl mx-auto px-4 py-8">
|
||||
<header className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-2">📓 Daily Blog & Digest</h1>
|
||||
<p className="text-zinc-400">Daily digests and notes backup</p>
|
||||
</header>
|
||||
<>
|
||||
<Head>
|
||||
<title>Daily Digest & Blog | OpenClaw</title>
|
||||
<meta name="description" content="Daily AI digests, iOS development insights, and indie hacking notes" />
|
||||
</Head>
|
||||
|
||||
{/* Add new message */}
|
||||
<form onSubmit={addMessage} className="mb-8 bg-zinc-900 rounded-lg p-4 border border-zinc-800">
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-zinc-400 mb-1">Date</label>
|
||||
<input
|
||||
type="date"
|
||||
value={selectedDate}
|
||||
onChange={(e) => setSelectedDate(e.target.value)}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 text-zinc-100 focus:outline-none focus:border-blue-500"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium text-zinc-400 mb-1">Message</label>
|
||||
<textarea
|
||||
value={newMessage}
|
||||
onChange={(e) => setNewMessage(e.target.value)}
|
||||
placeholder="Write your daily update here..."
|
||||
rows={4}
|
||||
className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 text-zinc-100 placeholder-zinc-500 focus:outline-none focus:border-blue-500 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading || !newMessage.trim()}
|
||||
className="bg-blue-600 hover:bg-blue-700 disabled:bg-zinc-700 disabled:cursor-not-allowed text-white font-medium px-4 py-2 rounded transition-colors"
|
||||
>
|
||||
{loading ? "Saving..." : "Save Message"}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{/* Messages list */}
|
||||
<div className="space-y-6">
|
||||
{sortedDates.length === 0 ? (
|
||||
<div className="text-center py-12 text-zinc-500">
|
||||
<p>No messages yet. Add your first entry above!</p>
|
||||
</div>
|
||||
) : (
|
||||
sortedDates.map((date) => (
|
||||
<div key={date} className="bg-zinc-900 rounded-lg border border-zinc-800 overflow-hidden">
|
||||
<div className="bg-zinc-800/50 px-4 py-2 border-b border-zinc-800">
|
||||
<h2 className="font-semibold text-zinc-300">
|
||||
{format(new Date(date), "EEEE, MMMM d, yyyy")}
|
||||
</h2>
|
||||
<div className="min-h-screen bg-slate-950 text-slate-200">
|
||||
{/* 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">
|
||||
📓
|
||||
</div>
|
||||
<div className="divide-y divide-zinc-800">
|
||||
{groupedMessages[date].map((msg) => {
|
||||
const isDailyDigest = isDigest(msg.content);
|
||||
|
||||
return (
|
||||
<div key={msg.id} className={`p-4 group ${isDailyDigest ? 'bg-blue-900/10' : ''}`}>
|
||||
{isDailyDigest && (
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="bg-blue-600 text-white text-xs px-2 py-1 rounded">🤖 AI Digest</span>
|
||||
<span className="text-xs text-blue-400">Daily Research</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex justify-between items-start gap-4">
|
||||
<div className="flex-1 markdown-content">
|
||||
<ReactMarkdown
|
||||
remarkPlugins={[remarkGfm]}
|
||||
components={{
|
||||
a: ({ node, ...props }) => (
|
||||
<a
|
||||
{...props}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-400 hover:text-blue-300 hover:underline transition-colors"
|
||||
/>
|
||||
),
|
||||
}}
|
||||
>
|
||||
{msg.content}
|
||||
</ReactMarkdown>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => deleteMessage(msg.id)}
|
||||
className="text-zinc-600 hover:text-red-400 opacity-0 group-hover:opacity-100 transition-opacity text-sm shrink-0"
|
||||
title="Delete"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-zinc-600 mt-2">
|
||||
{format(new Date(msg.timestamp), "h:mm a")}
|
||||
</p>
|
||||
</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">
|
||||
Tasks
|
||||
</a>
|
||||
</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" : ""
|
||||
}`}
|
||||
>
|
||||
{/* 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>
|
||||
);
|
||||
})}
|
||||
</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>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!hasMore && messages.length > 0 && (
|
||||
<div className="text-center py-12 text-slate-600">
|
||||
<p>You've reached the end 🎉</p>
|
||||
</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">
|
||||
📝
|
||||
</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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</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>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user