built a newsletter section

Author: Shivam107

apps/api/src/routers/_app.ts

@@ -4,6 +4,7 @@ import { userRouter } from "./user.js";
 import { projectRouter } from "./projects.js";
 import { authRouter } from "./auth.js";
 import { z } from "zod";
+import { newsletterRouter } from "./newsletter.js";
 
 const testRouter = router({
   test: publicProcedure
@@ -19,6 +20,7 @@ export const appRouter = router({
   user: userRouter,
   project: projectRouter,
   auth: authRouter,
+  newsletter: newsletterRouter,
 });
 
 export type AppRouter = typeof appRouter;

apps/api/src/routers/newsletter.ts

@@ -0,0 +1,13 @@
+import { z } from "zod";
+import { router, publicProcedure } from "../trpc.js";
+import { newsletterService } from "../services/newsletter.service.js";
+
+export const newsletterRouter = router({
+  list: publicProcedure
+    .input(z.object({ search: z.string().optional() }).optional())
+    .query(async ({ input }) => newsletterService.list(input?.search)),
+
+  bySlug: publicProcedure
+    .input(z.object({ slug: z.string() }))
+    .query(async ({ input }) => newsletterService.bySlug(input.slug)),
+});

apps/api/src/services/newsletter.service.ts

@@ -0,0 +1,45 @@
+import { Prisma } from "@prisma/client";
+import dbClient from "../prisma.js";
+
+const { prisma } = dbClient;
+
+export const newsletterService = {
+  list: async (search?: string) => {
+    const where: Prisma.NewsletterIssueWhereInput | undefined = search
+      ? {
+          OR: [
+            { title: { contains: search, mode: "insensitive" } },
+            { summary: { contains: search, mode: "insensitive" } },
+            { tags: { hasSome: search.split(" ").filter(Boolean) } },
+          ],
+        }
+      : undefined;
+
+    return prisma.newsletterIssue.findMany({
+      ...(where && { where }),
+      orderBy: { publishedAt: "desc" },
+      select: {
+        id: true,
+        slug: true,
+        title: true,
+        summary: true,
+        publishedAt: true,
+        readTime: true,
+        heroMediaUrl: true,
+        heroMediaType: true,
+        tags: true,
+      },
+    });
+  },
+
+  bySlug: async (slug: string) => {
+    return prisma.newsletterIssue.findUnique({
+      where: { slug },
+      include: {
+        sections: {
+          orderBy: { order: "asc" },
+        },
+      },
+    });
+  },
+};

apps/web/next.config.js

@@ -6,6 +6,10 @@ const nextConfig = {
         protocol: "https",
         hostname: "avatars.githubusercontent.com",
       },
+      {
+        protocol: "https",
+        hostname: "assets.opensox.dev",
+      },
     ],
   },
 };

apps/web/package.json

@@ -32,6 +32,7 @@
     "posthog-js": "^1.203.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-player": "^3.3.3",
     "react-qr-code": "^2.0.18",
     "react-tweet": "^3.2.1",
     "tailwind-merge": "^2.5.4",

apps/web/public/images/Screenshot-2025-10-22.png

@@ -17,14 +17,14 @@ export default function DashboardLayout({
       <div className="flex w-full h-16">
         <DashboardHeader></DashboardHeader>
       </div>
-      <div className="flex flex-row w-full">
+      <div className="flex flex-row w-full overflow-hidden">
         {showFilters && <FiltersContainer></FiltersContainer>}
         <aside
-          className={`w-48 md:w-[40%] xl:w-[20%] ${showSidebar ? "block relative" : "hidden"} xl:block`}
+          className={`flex-shrink-0 w-48 md:w-[40%] xl:w-[20%] ${showSidebar ? "block relative" : "hidden"} xl:block overflow-y-auto`}
         >
           <Sidebar></Sidebar>
         </aside>
-        <main className="flex-grow">{children}</main>
+        <main className="flex-grow overflow-y-auto">{children}</main>
       </div>
     </div>
   );

apps/web/public/images/welcome.jpg

@@ -0,0 +1,82 @@
+"use client";
+
+import { Suspense, lazy } from "react";
+import Link from "next/link";
+import { useNewsletterDetail } from "@/app/api/newsletter";
+import { NewsletterIssue } from "@/data/newsletters";
+import { NewsletterHero } from "@/components/newsletter/NewsletterHero";
+import { NewsletterSectionRenderer } from "@/components/newsletter/NewsletterSectionRenderer";
+import { EngagementBar } from "../engagementBar";
+
+const LazyNewsletterSectionRenderer = lazy(() =>
+  import("@/components/newsletter/NewsletterSectionRenderer").then((mod) => ({
+    default: mod.NewsletterSectionRenderer,
+  }))
+);
+
+type NewsletterDetailClientProps = {
+  slug: string;
+  fallback: NewsletterIssue;
+};
+
+function SectionsSkeleton() {
+  return (
+    <div className="space-y-8">
+      {[1, 2, 3].map((i) => (
+        <div key={i} className="space-y-3 animate-pulse">
+          <div className="h-8 w-48 rounded-lg bg-ox-black-2" />
+          <div className="space-y-2">
+            <div className="h-4 w-full rounded bg-ox-black-2" />
+            <div className="h-4 w-5/6 rounded bg-ox-black-2" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function NavigationButtons() {
+  return (
+    <div className="flex gap-3 flex-wrap">
+      <Link
+        href="/dashboard/newsletters"
+        className="rounded-full border border-ox-purple px-6 py-2 text-xs font-semibold uppercase tracking-wide text-ox-purple transition hover:bg-ox-purple hover:text-ox-white"
+      >
+        Home
+      </Link>
+      <Link
+        href="/pricing"
+        className="rounded-full border border-ox-purple px-6 py-2 text-xs font-semibold uppercase tracking-wide text-ox-purple transition hover:bg-ox-purple hover:text-ox-white"
+      >
+        Pricing
+      </Link>
+      <a
+        href="https://discord.gg/opensox"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="rounded-full border border-ox-purple px-6 py-2 text-xs font-semibold uppercase tracking-wide text-ox-purple transition hover:bg-ox-purple hover:text-ox-white"
+      >
+        Community
+      </a>
+    </div>
+  );
+}
+
+export function NewsletterDetailClient({ slug, fallback }: NewsletterDetailClientProps) {
+  const { data, isLoading } = useNewsletterDetail(slug);
+  const issue = data ?? fallback;
+
+  if (!issue) return null;
+
+  return (
+    <div className="flex flex-col gap-6 p-4 xl:p-6">
+      {/* @ts-ignore */}
+      <NewsletterHero issue={issue} shareButton={<EngagementBar slug={slug} />} />
+      <NavigationButtons />
+      <Suspense fallback={<SectionsSkeleton />}>
+        {/* @ts-ignore */}
+        <LazyNewsletterSectionRenderer sections={issue.sections} />
+      </Suspense>
+    </div>
+  );
+}

apps/web/src/app/(main)/dashboard/layout.tsx

@@ -0,0 +1,19 @@
+import { notFound } from "next/navigation";
+import { newsletterIssues } from "@/data/newsletters";
+import { NewsletterDetailClient } from "./NewsletterDetailClient";
+
+interface PageProps {
+  params: Promise<{ slug: string }>;  
+}
+
+
+export default async function NewsletterDetail({ params }: PageProps) {
+  const { slug } = await params;  
+   const fallback = newsletterIssues.find((issue) => issue.slug === slug);
+
+  if (!fallback) {
+    notFound();
+  }
+
+  return <NewsletterDetailClient slug={slug} fallback={fallback} />;
+}