feat(docs): add Stacked notifications cards

apps/docs/src/app/(docs)/(default)/layout.tsx

@@ -1,27 +1,61 @@
-import { source } from '@/lib/source';
-import { baseOptions, links } from '@/lib/layout.shared';
-import { VersionSwitcher } from '@/components/version-switcher';
-import type { LinkItemType } from 'fumadocs-ui/layouts/shared';
-import { DocsLayout } from '@/components/layout/notebook';
-import { LATEST_VERSION } from '@/lib/version';
+import type { ComponentProps } from "react";
+import { source } from "@/lib/source";
+import { baseOptions, links } from "@/lib/layout.shared";
+import { VersionSwitcher } from "@/components/version-switcher";
+import type { LinkItemType } from "fumadocs-ui/layouts/shared";
+import { DocsLayout } from "@/components/layout/notebook";
+import { LATEST_VERSION } from "@/lib/version";
+import { SidebarBannerCarousel } from "@/components/sidebar-banner";
+import { fetchOgImage } from "@/lib/og-image";
+import { cn } from "@prisma-docs/ui/lib/cn";
 
-export default async function Layout({ children, }: { children: React.ReactNode; }) {
+// Sidebar announcement slides — set to [] to hide the banner
+const SIDEBAR_SLIDES = [
+  {
+    title: "Prisma ORM v7.4",
+    description: "Query caching, partial indexes, and major performance improvements.",
+    href: "https://www.prisma.io/blog/prisma-orm-v7-4-query-caching-partial-indexes-and-major-performance-improvements",
+    gradient: "orm" as const,
+    badge: "New",
+  },
+];
+
+export default async function Layout({ children }: { children: React.ReactNode }) {
   const { nav, ...base } = baseOptions();
 
   const navbarLinks: LinkItemType[] = [
     ...links,
     {
-      type: 'custom',
+      type: "custom",
       children: <VersionSwitcher currentVersion={LATEST_VERSION} />,
     },
   ];
 
+  // Resolve OG images server-side for slides that don't have a hardcoded image
+  const slides = await Promise.all(
+    SIDEBAR_SLIDES.map(async (slide) => {
+      if (slide.href.startsWith("http")) {
+        const ogImage = await fetchOgImage(slide.href);
+        if (ogImage) return { ...slide, image: ogImage };
+      }
+      return slide;
+    }),
+  );
+
   return (
     <DocsLayout
       {...base}
       links={navbarLinks}
       nav={{ ...nav }}
-      sidebar={{ collapsible: false }}
+      sidebar={{
+        collapsible: false,
+        footer: ({ className, ...props }: ComponentProps<"div">) => (
+          <div className={cn("flex flex-col p-4 pt-2 gap-3", className)} {...props}>
+            <SidebarBannerCarousel slides={slides} />
+            {props.children}
+          </div>
+        ),
+      }}
       tree={source.pageTree}
     >
       {children}

apps/docs/src/components/sidebar-banner.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import Link from "next/link";
+import { X } from "lucide-react";
+import { cn } from "@prisma-docs/ui/lib/cn";
+
+interface BannerSlide {
+  title: string;
+  description: string;
+  href: string;
+  gradient?: "orm" | "ppg";
+  badge?: string;
+  image?: string;
+}
+
+interface SidebarBannerCarouselProps {
+  slides: BannerSlide[];
+  /** Auto-rotate interval in ms @default 5000 */
+  interval?: number;
+}
+
+const DISMISSED_KEY = "sidebar-banner-dismissed";
+
+export function SidebarBannerCarousel({ slides, interval = 5000 }: SidebarBannerCarouselProps) {
+  const [current, setCurrent] = useState(0);
+  const [dismissed, setDismissed] = useState(true);
+  const timerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  useEffect(() => {
+    setDismissed(localStorage.getItem(DISMISSED_KEY) === "true");
+  }, []);
+
+  const resetTimer = useCallback(() => {
+    if (timerRef.current) clearInterval(timerRef.current);
+    timerRef.current = setInterval(() => {
+      setCurrent((prev) => (prev + 1) % slides.length);
+    }, interval);
+  }, [slides.length, interval]);
+
+  useEffect(() => {
+    if (dismissed || slides.length <= 1) return;
+    resetTimer();
+    return () => {
+      if (timerRef.current) clearInterval(timerRef.current);
+    };
+  }, [dismissed, slides.length, resetTimer]);
+
+  if (dismissed || slides.length === 0) return null;
+
+  const slide = slides[current];
+
+  function handleDismiss(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    localStorage.setItem(DISMISSED_KEY, "true");
+    setDismissed(true);
+  }
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={handleDismiss}
+        className={cn(
+          "absolute top-2 right-2 z-10 p-0.5 rounded-square",
+          "opacity-60 hover:opacity-100 transition-opacity",
+          "bg-black/10 dark:bg-white/10",
+          slide.image ? "text-foreground-neutral" : "text-foreground-neutral-reverse",
+        )}
+        aria-label="Dismiss banner"
+      >
+        <X className="size-3.5" />
+      </button>
+
+      <Link
+        href={slide.href}
+        className={cn(
+          "group block rounded-high border border-stroke-neutral overflow-hidden shadow-drop-low",
+          "transition-shadow hover:shadow-drop",
+        )}
+      >
+        <div
+          className={cn(
+            "relative flex items-center justify-center aspect-video overflow-hidden",
+            !slide.image && (slide.gradient === "ppg" ? "bg-gradient-ppg" : "bg-gradient-orm"),
+          )}
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          {slide.image ? (
+            <img
+              src={slide.image.startsWith("http") ? slide.image : `/docs${slide.image}`}
+              alt=""
+              className="absolute inset-0 size-full object-cover"
+            />
+          ) : (
+            <svg
+              viewBox="0 0 28 37"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-10 w-auto opacity-40"
+            >
+              <path
+                d="M27.4 8.42L15.52.32a3.2 3.2 0 00-3.36 0L.32 8.42A3.22 3.22 0 000 11.1v16.2a3.22 3.22 0 001.6 2.78l11.88 7.6a3.2 3.2 0 003.36 0l11.56-7.6a3.2 3.2 0 001.6-2.78V11.1a3.22 3.22 0 00-1.6-2.68zM12.16 33.48L2.24 27.18a1.6 1.6 0 01-.8-1.38v-7.4l10.72 6.5v8.58zm1.28-10.6L2.28 16.22l5.08-3.16 11.16 6.76-5.08 3.06zm13.12-4.56v7.38a1.6 1.6 0 01-.8 1.38l-9.92 6.3v-8.56l10.72-6.5z"
+                fill="currentColor"
+                className={cn(
+                  slide.gradient === "ppg"
+                    ? "text-foreground-ppg-strong"
+                    : "text-foreground-orm-strong",
+                )}
+              />
+            </svg>
+          )}
+        </div>
+        <div className="p-3 bg-background-default">
+          <div className="flex items-center gap-1.5 mb-1">
+            <span className="text-sm font-semibold text-foreground-neutral">{slide.title}</span>
+            {slide.badge && (
+              <span
+                className={cn(
+                  "text-2xs font-medium px-1.5 py-0.5 rounded-circle",
+                  slide.gradient === "ppg"
+                    ? "bg-background-ppg text-foreground-ppg"
+                    : "bg-background-orm text-foreground-orm",
+                )}
+              >
+                {slide.badge}
+              </span>
+            )}
+          </div>
+          <p className="text-xs text-foreground-neutral-weak mb-2">{slide.description}</p>
+          <div className="flex items-center justify-between">
+            <span
+              className={cn(
+                "text-xs font-medium transition-colors",
+                slide.gradient === "ppg"
+                  ? "text-foreground-ppg group-hover:text-foreground-ppg-strong"
+                  : "text-foreground-orm group-hover:text-foreground-orm-strong",
+              )}
+            >
+              Read more &rarr;
+            </span>
+            {slides.length > 1 && (
+              <div className="flex gap-1">
+                {slides.map((_, i) => (
+                  <span
+                    key={i}
+                    className={cn(
+                      "size-1.5 rounded-circle transition-colors",
+                      i === current ? "bg-foreground-neutral-weak" : "bg-stroke-neutral",
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </Link>
+    </div>
+  );
+}

apps/docs/src/lib/og-image.ts

@@ -0,0 +1,20 @@
+/**
+ * Fetches the og:image URL from a given page URL.
+ * Returns null if the fetch fails or no og:image is found.
+ */
+export async function fetchOgImage(url: string): Promise<string | null> {
+  try {
+    const res = await fetch(url, {
+      next: { revalidate: 86400 },
+      signal: AbortSignal.timeout(5000),
+    });
+    if (!res.ok) return null;
+    const html = await res.text();
+    const match =
+      html.match(/<meta[^>]+property=["']og:image["'][^>]+content=["']([^"']+)["']/i) ??
+      html.match(/<meta[^>]+content=["']([^"']+)["'][^>]+property=["']og:image["']/i);
+    return match?.[1] ?? null;
+  } catch {
+    return null;
+  }
+}