feat:DR-7521 blog post

apps/blog/package.json

@@ -18,6 +18,7 @@
     "@fumadocs/cli": "catalog:",
     "@prisma/eclipse": "workspace:^",
     "@prisma-docs/ui": "workspace:*",
+    "cors": "^2.8.6",
     "fumadocs-core": "catalog:",
     "fumadocs-mdx": "catalog:",
     "fumadocs-openapi": "catalog:",

apps/blog/src/app/(blog)/[slug]/page.tsx

@@ -1,11 +1,27 @@
-import { notFound } from 'next/navigation';
-import Link from 'next/link';
-import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
-import { getMDXComponents } from '@/mdx-components';
-import { createRelativeLink } from 'fumadocs-ui/mdx';
-import { blog } from '@/lib/source';
-import Image from 'next/image';
-import { withBlogBasePathForImageSrc } from '@/lib/url';
+import { formatTag, formatDate } from "@/lib/format";
+import { notFound } from "next/navigation";
+import { getMDXComponents } from "@/mdx-components";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { blog } from "@/lib/source";
+import {
+  Badge,
+  InlineTOC,
+  Separator,
+} from "@prisma/eclipse";
+
+import { FooterNewsletterForm } from "@prisma-docs/ui/components/newsletter";
+import { BlogShare } from "@/components/BlogShare";
+import { AuthorAvatarGroup } from "@/components/AuthorAvatarGroup";
+import { withBlogBasePath } from "@/lib/url";
+import Link from "next/link";
+
+interface TOCItem {
+  title: string;
+  url: string;
+  depth: number;
+  items?: TOCItem[];
+}
+
 export default async function Page(props: {
   params: Promise<{ slug: string }>;
 }) {
@@ -14,106 +30,76 @@ export default async function Page(props: {
 
   if (!page) notFound();
   const MDX = page.data.body;
-  const formatDate = (value: unknown) => {
-    const date =
-      value instanceof Date ? value : new Date((value as string) ?? '');
-    if (Number.isNaN(date.getTime())) return '';
-    return date.toLocaleDateString('en-US', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-  const getHeroImageSrc = () => {
-    const data = page.data as any;
-    const rel =
-      (data.heroImagePath as string | undefined) ??
-      (data.metaImagePath as string | undefined);
-    if (rel) {
-      if (rel.startsWith('/')) return rel;
-      const base = page.url.startsWith('/') ? page.url : `/${page.url}`;
-      const baseClean = base.endsWith('/') ? base.slice(0, -1) : base;
-      const relClean = rel.replace(/^\.\//, '').replace(/^\/+/, '');
-      return `${baseClean}/${relClean}`;
-    }
-    const absolute =
-      (data.heroImageUrl as string | undefined) ??
-      (data.metaImageUrl as string | undefined);
-    return absolute ?? null;
-  };
-  const heroSrc = getHeroImageSrc();
 
+  const newsletterApiUrl = withBlogBasePath("/api/newsletter");
   return (
-    <>
-      {/* Hero image */}
-      {heroSrc ? (
-        <div className="w-full">
-          <div className="relative w-full aspect-video">
-            <Image
-              src={withBlogBasePathForImageSrc(heroSrc)}
-              alt={(page.data as any).heroImageAlt ?? page.data.title}
-              fill
-              priority
-              className="object-cover"
-              sizes="100vw"
+    <div className="w-full px-4 z-1 mx-auto md:grid md:grid-cols-[1fr_180px] mt-4 md:mt-22 gap-12 max-w-257">
+      <div className="post-contents w-full">
+        {/* Title + meta */}
+        <header className="w-full relative">
+          <Link
+            href="/"
+            className="text-fd-primary hover:underline text-sm absolute -top-8"
+          >
+            ← Back to Blog
+          </Link>
+          <h1 className="mt-3 mb-8 font-bold max-md:text-3xl md:text-5xl   stretch-display font-display text-foreground-neutral">
+            {page.data.title}
+          </h1>
+          <div className="text-sm flex gap-2 items-center text-foreground-neutral mb-4">
+            <AuthorAvatarGroup authors={page.data.authors} />
+            {page.data.date ? (
+              <>
+                <Separator orientation="vertical" className="h-4" />
+                <span className="text-foreground-neutral-weak">
+                  {formatDate(new Date(page.data.date).toISOString())}
+                </span>
+              </>
+            ) : null}
+          </div>
+          {page.data.tags && page.data.tags.length > 0 && (
+            <div className="filter-badge flex gap-2">
+              {page.data?.tags?.map((tag) => (
+                <Badge
+                  key={tag}
+                  color="neutral"
+                  label={formatTag(tag)}
+                  className="border capitalize border-stroke-neutral-strong bg-transparent text-foreground-neutral-weak"
+                />
+              ))}
+            </div>
+          )}
+        </header>
+
+        {/* Body */}
+        <article className="w-full flex flex-col pb-8 mt-12">
+          <div className="prose min-w-0 [&_figure]:w-full [&_figure]:md:max-w-140 [&_figure]:lg:max-w-200">
+            <MDX
+              components={getMDXComponents({
+                a: createRelativeLink(blog, page),
+              })}
             />
           </div>
-        </div>
-      ) : null}
+        </article>
+        <Separator className="my-12" />
 
-      {/* Title + meta */}
-      <header className="w-full max-w-350 mx-auto px-4 md:px-8 py-10">
-        <Link href="/" className="text-fd-primary hover:underline text-sm">
-          ← Back to Blog
-        </Link>
-        <h1 className="mt-3 mb-3 text-3xl md:text-4xl font-bold">
-          {page.data.title}
-        </h1>
-        {page.data.description ? (
-          <p className="text-fd-muted-foreground mb-3">{page.data.description}</p>
-        ) : null}
-        <p className="text-sm text-fd-muted-foreground">
-          {page.data.authors?.length ? page.data.authors.join(', ') : null}
-          {page.data.date ? (
-            <>
-              {' • '}
-              <span>{formatDate(page.data.date)}</span>
-            </>
-          ) : null}
-        </p>
-      </header>
+        {/* Share Container */}
+        <BlogShare desc={page.data.metaDescription as string} />
 
-      {/* Body */}
-      <article className="w-full max-w-350 mx-auto flex flex-col px-4 md:px-8 pb-12">
-        <div className="prose min-w-0">
-          <InlineTOC items={page.data.toc} />
-          <MDX
-            components={getMDXComponents({
-              a: createRelativeLink(blog, page)
-            })}
-          />
+        {/* Newsletter CTA */}
+        <div className="w-full px-8 py-12 shadow-box-low newsletter-bg rounded-square border border-background-neutral flex max-sm:flex-col wrap items-start gap-4 sm:items-center justify-between my-12">
+          <FooterNewsletterForm apiUrl={newsletterApiUrl} />
         </div>
-      </article>
-
-      {/* Newsletter CTA */}
-      <div className="w-full max-w-350 mx-auto px-4 md:px-8 pb-16">
-        <div className="rounded-2xl border border-fd-primary/20 bg-fd-secondary p-6 md:p-8">
-          <h4 className="text-2xl font-semibold mb-2">
-            Don’t miss the next post!
-          </h4>
-          <p className="text-fd-muted mb-4">
-            Sign up for the Prisma Newsletter to stay up to date with the latest
-            releases and posts.
-          </p>
-          <Link
-            href="https://www.prisma.io/newsletter"
-            className="inline-flex items-center px-4 py-2 rounded-md bg-fd-primary text-white hover:opacity-90 transition"
-          >
-            Sign up
-          </Link>
+      </div>
+      <div className="max-md:hidden toc">
+        <div className="sticky top-24 [&_a[data-state=inactive]]:text-foreground-neutral-weak! [&_a[data-state=active]]:text-foreground-neutral!">
+          <span className="text-shadow-foreground-neutral-reverse font-semibold text-md mb-4 mt-0 block">
+            On this page
+          </span>
+          <InlineTOC items={page.data.toc as TOCItem[]} className="px-0" />
         </div>
       </div>
-    </>
+    </div>
   );
 }
 

apps/blog/src/app/(blog)/page.tsx

@@ -1,8 +1,8 @@
 import { Suspense } from "react";
 import { blog } from "@/lib/source";
 import { BlogGrid } from "@/components/BlogGrid";
-import { Avatar, Badge, Card } from "@prisma/eclipse";
 import { getCardImageSrc } from "@/lib/source";
+import { getAuthorProfiles } from "@/lib/authors";
 export default function BlogHome() {
   const posts = blog.getPages().sort((a, b) => {
     const aTime =
@@ -21,6 +21,14 @@ export default function BlogHome() {
     const authors = Array.isArray(data?.authors) ? data?.authors : [];
     return authors.length > 0 ? authors[0] : null;
   };
+
+  const getPrimaryAuthorImage = (post: (typeof posts)[number]) => {
+    const data = post.data as any;
+    const authors = Array.isArray(data?.authors) ? data?.authors : [];
+    const profiles = getAuthorProfiles(authors);
+    const firstWithImage = profiles.find((profile) => profile.imageSrc);
+    return firstWithImage?.imageSrc ?? null;
+  };
   const items = posts.map((post) => {
     const data = post.data as any;
 
@@ -45,7 +53,6 @@ export default function BlogHome() {
       description:
         (data.description as string) || (data.metaDescription as string) || "",
       author: getPrimaryAuthor(post),
-      authorSrc: null,
       imageSrc: getCardImageSrc(post),
       imageAlt: (data.heroImageAlt as string) ?? (data.title as string),
       seriesTitle: data.series?.title ?? null,