feat: newsletter page for pro users #155

apps/web/package.json

@@ -15,7 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.2",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-radio-group": "^1.2.1",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@tanstack/react-query": "^5.90.2",
     "@trpc/client": "^11.6.0",
     "@trpc/react-query": "^11.6.0",
@@ -26,7 +26,9 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.15.0",
     "geist": "^1.5.1",
+    "gray-matter": "^4.0.3",
     "lucide-react": "^0.456.0",
+    "marked": "^17.0.0",
     "next": "15.5.3",
     "next-auth": "^4.24.11",
     "next-themes": "^0.4.3",

apps/web/src/app/(main)/dashboard/newsletters/[slug]/page.tsx

@@ -0,0 +1,149 @@
+"use client";
+
+import "@/styles/newsletter.css";
+
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+import { CalendarIcon, ClockIcon, ArrowLeftIcon } from "@heroicons/react/24/outline";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSubscription } from "@/hooks/useSubscription";
+
+interface NewsletterData {
+  title: string;
+  date: string;
+  readTime: string;
+  content: string;
+}
+
+function NewsletterSkeleton() {
+  return (
+    <div className="w-full max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+      <div className="mb-8 pb-6 border-b border-[#1a1a1d]">
+        <Skeleton className="h-10 w-full mb-4 bg-zinc-800" />
+        <Skeleton className="h-8 w-3/4 mb-4 bg-zinc-800" />
+        <div className="flex gap-4">
+          <Skeleton className="h-4 w-32 bg-zinc-800" />
+          <Skeleton className="h-4 w-24 bg-zinc-800" />
+        </div>
+      </div>
+      <div className="space-y-4">
+        <Skeleton className="h-4 w-full bg-zinc-800" />
+        <Skeleton className="h-4 w-full bg-zinc-800" />
+        <Skeleton className="h-4 w-5/6 bg-zinc-800" />
+        <Skeleton className="h-32 w-full bg-zinc-800 mt-6" />
+        <Skeleton className="h-4 w-full bg-zinc-800" />
+        <Skeleton className="h-4 w-4/5 bg-zinc-800" />
+      </div>
+    </div>
+  );
+}
+
+export default function NewsletterPage() {
+  const params = useParams();
+  const router = useRouter();
+  const slug = params.slug as string;
+  const [newsletter, setNewsletter] = useState<NewsletterData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const { isLoading: subscriptionLoading } = useSubscription();
+
+  useEffect(() => {
+    // Fetch for all users (testing mode)
+    if (subscriptionLoading) return;
+
+    fetch(`/api/newsletters/${slug}`)
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error) {
+          setNewsletter(null);
+        } else {
+          setNewsletter(data);
+        }
+        setLoading(false);
+      })
+      .catch(() => {
+        setNewsletter(null);
+        setLoading(false);
+      });
+  }, [slug, subscriptionLoading]);
+
+  if (subscriptionLoading) {
+    return (
+      <div className="w-full h-full overflow-auto">
+        <div className="w-full px-4 sm:px-6 py-4 sm:py-5">
+          <Skeleton className="h-10 w-40 mb-6 bg-zinc-800" />
+          <NewsletterSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="w-full h-full overflow-auto">
+        <div className="w-full px-4 sm:px-6 py-4 sm:py-5">
+          <Skeleton className="h-10 w-40 mb-6 bg-zinc-800" />
+          <NewsletterSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  if (!newsletter) {
+    return (
+      <div className="w-full h-full flex items-center justify-center px-4">
+        <div className="text-center">
+          <p className="text-xl text-ox-white mb-4">Newsletter not found</p>
+          <button
+            onClick={() => router.push("/dashboard/newsletters")}
+            className="text-ox-purple hover:text-purple-400 transition-colors"
+          >
+            ← Back to newsletters
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full h-full overflow-auto">
+      <div className="w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
+        <button
+          onClick={() => router.back()}
+          className="flex items-center gap-2 text-ox-purple hover:text-purple-400 mb-6 transition-colors"
+        >
+          <ArrowLeftIcon className="size-4 sm:size-5 shrink-0" />
+          <span className="text-sm sm:text-base">Back to newsletters</span>
+        </button>
+
+        <article className="prose prose-invert max-w-4xl mx-auto">
+          <header className="mb-6 sm:mb-8 pb-4 sm:pb-6 border-b border-[#1a1a1d]">
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-ox-white mb-4 break-words">
+              {newsletter.title}
+            </h1>
+            <div className="flex flex-wrap items-center gap-3 sm:gap-4 text-xs sm:text-sm text-zinc-400">
+              <span className="flex items-center gap-1">
+                <CalendarIcon className="size-4 shrink-0" />
+                <span className="whitespace-nowrap">
+                  {new Date(newsletter.date).toLocaleDateString("en-US", {
+                    month: "long",
+                    day: "numeric",
+                    year: "numeric",
+                  })}
+                </span>
+              </span>
+              <span className="flex items-center gap-1">
+                <ClockIcon className="size-4 shrink-0" />
+                <span className="whitespace-nowrap">{newsletter.readTime}</span>
+              </span>
+            </div>
+          </header>
+
+          <div
+            className="newsletter-content"
+            dangerouslySetInnerHTML={{ __html: newsletter.content }}
+          />
+        </article>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/(main)/dashboard/newsletters/page.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import "@/styles/newsletter.css";
+
+import { useEffect, useState, useMemo } from "react";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useSubscription } from "@/hooks/useSubscription";
+import { Newsletter } from "@/components/newsletters/NewsletterCard";
+import { NewsletterSkeleton } from "@/components/newsletters/NewsletterSkeleton";
+import { PremiumUpgradePrompt } from "@/components/newsletters/PremiumUpgradePrompt";
+import { NewsletterFilters, TimeFilter } from "@/components/newsletters/NewsletterFilters";
+import { NewsletterPagination } from "@/components/newsletters/NewsletterPagination";
+import { NewsletterList } from "@/components/newsletters/NewsletterList";
+import { useNewsletterFilters } from "@/hooks/useNewsletterFilters";
+
+export default function NewslettersPage() {
+  const [newsletters, setNewsletters] = useState<Newsletter[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [timeFilter, setTimeFilter] = useState<TimeFilter>("all");
+  const [currentPage, setCurrentPage] = useState(1);
+  const { isPaidUser, isLoading: subscriptionLoading } = useSubscription();
+
+  const itemsPerPage = 5;
+
+  useEffect(() => {
+    // Fetch newsletters for all users (testing mode)
+    if (subscriptionLoading) return;
+
+    fetch("/api/newsletters")
+      .then((res) => res.json())
+      .then((data) => {
+        setNewsletters(data);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [subscriptionLoading]);
+
+  const filteredNewsletters = useNewsletterFilters(newsletters, searchQuery, timeFilter);
+
+  const totalPages = Math.ceil(filteredNewsletters.length / itemsPerPage);
+  const paginatedNewsletters = useMemo(() => {
+    const startIndex = (currentPage - 1) * itemsPerPage;
+    return filteredNewsletters.slice(startIndex, startIndex + itemsPerPage);
+  }, [filteredNewsletters, currentPage]);
+
+  // Reset to page 1 when filters change
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery, timeFilter]);
+
+  if (subscriptionLoading) {
+    return (
+      <div className="w-full h-full overflow-auto">
+        <div className="w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
+          <Skeleton className="h-8 w-48 mb-6 bg-zinc-800" />
+          <NewsletterSkeleton />
+          <NewsletterSkeleton />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isPaidUser) {
+    return <PremiumUpgradePrompt />;
+  }
+
+  return (
+    <div className="w-full h-full overflow-auto">
+      <div className="w-full px-4 sm:px-6 lg:px-8 py-4 sm:py-5">
+        <div className="mb-6 sm:mb-8">
+          <h1 className="text-2xl sm:text-3xl font-bold text-ox-white mb-2">
+            Newsletters
+          </h1>
+          <p className="text-sm sm:text-base text-zinc-400">
+            Stay updated with our latest news and insights
+          </p>
+        </div>
+
+        <div className="max-w-4xl mx-auto">
+          <NewsletterFilters
+            searchQuery={searchQuery}
+            onSearchChange={setSearchQuery}
+            timeFilter={timeFilter}
+            onTimeFilterChange={setTimeFilter}
+          />
+
+          <div className="space-y-4 sm:space-y-6">
+            <NewsletterList
+              newsletters={paginatedNewsletters}
+              loading={loading}
+              hasFilters={!!searchQuery || timeFilter !== "all"}
+            />
+          </div>
+
+          <NewsletterPagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={setCurrentPage}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

apps/web/src/app/api/newsletters/[slug]/route.ts

@@ -0,0 +1,57 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+import { marked } from "marked";
+
+// Configure marked for rich markdown support
+marked.setOptions({
+  gfm: true,          // GitHub Flavored Markdown: tables, task lists, etc.
+  breaks: true,       // Line breaks
+});
+
+// Cache individual newsletters
+const newsletterCache = new Map<string, { data: any; time: number }>();
+const CACHE_DURATION = 60_000; // 1 minute
+
+export async function GET(
+  _request: Request,
+  { params }: { params: Promise<{ slug: string }> }
+) {
+  const { slug } = await params;
+  const now = Date.now();
+  const cached = newsletterCache.get(slug);
+
+  if (cached && now - cached.time < CACHE_DURATION) {
+    return NextResponse.json(cached.data);
+  }
+
+  const newslettersDir = path.join(process.cwd(), "src/content/newsletters");
+  const filePath = path.join(newslettersDir, `${slug}.md`);
+
+  try {
+    if (!fs.existsSync(filePath)) {
+      return NextResponse.json({ error: "Newsletter not found" }, { status: 404 });
+    }
+
+    const fileContent = fs.readFileSync(filePath, "utf8");
+    const { data, content } = matter(fileContent);
+
+    // Render markdown (supports headings, links, lists, code blocks, images, tables, etc.)
+    const htmlContent = marked.parse(content);
+
+    const result = {
+      title: data.title || "Untitled",
+      date: data.date || new Date().toISOString(),
+      readTime: data.readTime || "5 min read",
+      content: htmlContent,
+    };
+
+    newsletterCache.set(slug, { data: result, time: now });
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error("Error reading newsletter:", error);
+    return NextResponse.json({ error: "Newsletter not found" }, { status: 404 });
+  }
+}

apps/web/src/app/api/newsletters/route.ts

@@ -0,0 +1,55 @@
+import { NextResponse } from "next/server";
+import fs from "fs";
+import path from "path";
+import matter from "gray-matter";
+
+// Cache newsletters in memory for faster subsequent loads
+let cachedNewsletters: any[] | null = null;
+let lastCacheTime = 0;
+const CACHE_DURATION = 60000; // 1 minute cache
+
+export async function GET() {
+  const now = Date.now();
+
+  // Return cached data if available and fresh
+  if (cachedNewsletters && now - lastCacheTime < CACHE_DURATION) {
+    return NextResponse.json(cachedNewsletters);
+  }
+
+  const newslettersDir = path.join(process.cwd(), "src/content/newsletters");
+
+  try {
+    if (!fs.existsSync(newslettersDir)) {
+      fs.mkdirSync(newslettersDir, { recursive: true });
+      return NextResponse.json([]);
+    }
+
+    const files = fs.readdirSync(newslettersDir);
+
+    const newsletters = files
+      .filter((file) => file.endsWith(".md"))
+      .map((file) => {
+        const filePath = path.join(newslettersDir, file);
+        const fileContent = fs.readFileSync(filePath, "utf8");
+        const { data } = matter(fileContent);
+
+        return {
+          slug: file.replace(".md", ""),
+          title: data.title || "Untitled",
+          date: data.date || new Date().toISOString(),
+          excerpt: data.excerpt || "",
+          readTime: data.readTime || "5 min read",
+        };
+      })
+      .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+
+    // Update cache
+    cachedNewsletters = newsletters;
+    lastCacheTime = now;
+
+    return NextResponse.json(newsletters);
+  } catch (error) {
+    console.error("Error reading newsletters:", error);
+    return NextResponse.json([]);
+  }
+}