Prisma Blog
-- Guides, announcements and articles about Prisma, databases and the data - access layer. -
+ const uniqueTags = [ + ...new Set(items.filter((item) => item.tags).flatMap((item) => item.tags)), + ]; + return ( ++ Blog +
{/* Category pills (static "Show all" to match layout) */} -
-
- Show all
-
+
-
- {/* Grid with pagination */}
-
+ {/* Grid with pagination */}
+
+ {items.slice(0, 12).map((post) => (
+
+ ))}
+
+ }
+ >
+
+ {/* Category pills (static "Show all" to match layout) */}
+
+
+
+ )}
+
+ setCategory("show-all")}
+ className="cursor-pointer"
+ label="Show all"
+ />
+ {uniqueTags.map((category: string, idx: number) => (
+ {
+ const nextCategory =
+ category === "show-all" || currentCat === category
+ ? "show-all"
+ : category;
+ setCategory(nextCategory);
+ }}
+ className="cursor-pointer"
+ label={formatTag(category)}
+ key={idx}
+ />
+ ))}
+
+ {currentPage === 1 && filteredItems.length > 0 && (
+
+
+
+
+ {filteredItems[0].tags && filteredItems[0].tags.length > 0 && (
+
+ + {filteredItems[0].title} +
+ {filteredItems[0].description && ( ++ {filteredItems[0].description} +
+ )} + {filteredItems[0].author && ( + + {filteredItems[0]?.authorSrc && filteredItems[0] && ( +
{visibleItems.map((post) => (
- {post.imageSrc ? (
- ) {
${processed}`;
}
+export const getCardImageSrc = (post: any) => {
+ const data = post.data as any;
+ const rel =
+ (data.heroImagePath as string | undefined) ??
+ (data.metaImagePath as string | undefined);
+ if (rel) {
+ // If frontmatter already provides an absolute path, use it directly
+ if (rel.startsWith("/")) {
+ return rel;
+ }
+ const base = post.url.startsWith("/") ? post.url : `/${post.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;
+};
diff --git a/apps/docs/cspell.json b/apps/docs/cspell.json
index 000cc695b4..c6ac0098fa 100644
--- a/apps/docs/cspell.json
+++ b/apps/docs/cspell.json
@@ -300,6 +300,7 @@
"unaccent",
"unexecutable",
"unikernels",
+ "unikernel",
"unindexed",
"unixepoch",
"uploadthing",
diff --git a/packages/eclipse/src/components/inline-toc.tsx b/packages/eclipse/src/components/inline-toc.tsx
index 2cf9aba94b..d94b017d2c 100644
--- a/packages/eclipse/src/components/inline-toc.tsx
+++ b/packages/eclipse/src/components/inline-toc.tsx
@@ -1,7 +1,8 @@
"use client";
+import { cn } from "../lib/cn";
import type { TOCItemType as BaseTOCItemType } from "fumadocs-core/toc";
-import type { ComponentProps } from "react";
+import { type ComponentProps, useEffect, useRef, useState } from "react";
// Extend TOCItemType to support nested items
export interface TOCItem extends BaseTOCItemType {
@@ -14,30 +15,80 @@ export interface InlineTocProps extends ComponentProps<"div"> {
export type { TOCItem as TOCItemType };
-function TOCItemComponent({ item }: { item: TOCItem }) {
+function flattenItems(items: TOCItem[]): TOCItem[] {
+ return items.flatMap((item) => [item, ...flattenItems(item.items ?? [])]);
+}
+
+function TOCItemComponent({
+ item,
+ activeId,
+}: {
+ item: TOCItem;
+ activeId: string | null;
+}) {
+ const id = item.url.slice(1);
+ const isActive = id === activeId;
+
return (
<>
{item.title}
- {item.items?.map((child: TOCItem) => (
- (null);
+ const observerRef = useRef(null);
+
+ useEffect(() => {
+ const flat = flattenItems(items);
+ const ids = flat.map((item) => item.url.slice(1));
+ const elements = ids
+ .map((id) => document.getElementById(id))
+ .filter(Boolean) as HTMLElement[];
+
+ observerRef.current?.disconnect();
+
+ observerRef.current = new IntersectionObserver(
+ (entries) => {
+ const visible = entries
+ .filter((e) => e.isIntersecting)
+ .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+
+ if (visible.length > 0) setActiveId(visible[0].target.id);
+ },
+ { rootMargin: "0px 0px -60% 0px", threshold: 0 },
+ );
+
+ elements.forEach((el) => observerRef.current!.observe(el));
+
+ return () => observerRef.current?.disconnect();
+ }, [items]);
+
return (
-
+
-
- {totalPages > 1 ? (
-
- ) : null}
+
+
+ {post.imageSrc && (
+
+
+ {post.author && (
+
+ {post?.authorSrc && (
+
+ {post.tags && post.tags.length > 0 && (
+
+ {post.title && (
+ + {post.title} +
+ )} + {post.description && ( ++ {post.description} +
+ )} +
-
+ )}
))}
{post.title}
-- {formatDate(post.date)} - {post.author ? ( - <> - {' • '} - {post.author} - - ) : null} -
- {post.description ? ( -{post.description}
- ) : null} - - {post.seriesTitle ? ( - - {post.seriesTitle} - - ) : null} -
+
);
}
-
diff --git a/apps/blog/src/lib/format.ts b/apps/blog/src/lib/format.ts
new file mode 100644
index 0000000000..45751c5a0a
--- /dev/null
+++ b/apps/blog/src/lib/format.ts
@@ -0,0 +1,16 @@
+export const formatDate = (iso: string) => {
+ if (!iso) return "";
+ const date = new Date(iso);
+ if (Number.isNaN(date.getTime())) return "";
+ return date.toLocaleDateString("en-US", {
+ year: "numeric",
+ month: "long",
+ day: "numeric",
+ });
+};
+
+export const formatTag = (tag: string) => {
+ return tag === "orm"
+ ? "ORM"
+ : tag.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
+};
diff --git a/apps/blog/src/lib/source.tsx b/apps/blog/src/lib/source.tsx
index 7835434893..0746882842 100644
--- a/apps/blog/src/lib/source.tsx
+++ b/apps/blog/src/lib/source.tsx
@@ -1,10 +1,10 @@
import { blogPosts } from "../../.source/server";
-import { type InferPageType, loader, multiple } from 'fumadocs-core/source';
-import { lucideIconsPlugin } from 'fumadocs-core/source/lucide-icons';
-import { toFumadocsSource } from 'fumadocs-mdx/runtime/server';
+import { type InferPageType, loader, multiple } from "fumadocs-core/source";
+import { lucideIconsPlugin } from "fumadocs-core/source/lucide-icons";
+import { toFumadocsSource } from "fumadocs-mdx/runtime/server";
export const blog = loader({
- baseUrl: '/',
+ baseUrl: "/",
source: toFumadocsSource(blogPosts, []),
});
@@ -33,3 +33,23 @@ export async function getLLMText(page: InferPageType
+
{items.map((item) => (
-
);
diff --git a/packages/eclipse/src/components/pagination.tsx b/packages/eclipse/src/components/pagination.tsx
index 25d07902a9..79ac330f59 100644
--- a/packages/eclipse/src/components/pagination.tsx
+++ b/packages/eclipse/src/components/pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
variant: isActive ? "default-weaker" : "default",
size,
}),
- "flex border-none text-foreground-neutral",
+ "flex border-none text-foreground-neutral cursor-pointer",
className,
)}
{...props}
diff --git a/packages/eclipse/src/styles/fonts.css b/packages/eclipse/src/styles/fonts.css
index a7fb99e4c7..5e73687106 100644
--- a/packages/eclipse/src/styles/fonts.css
+++ b/packages/eclipse/src/styles/fonts.css
@@ -1,41 +1,30 @@
/* Mona Sans Font Faces */
-
-@font-face {
- font-family: "Mona Sans";
- src: url("../static/fonts/MonaSans-Regular.ttf") format("truetype");
- font-weight: 400;
- font-style: normal;
- font-display: swap;
-}
-
-@font-face {
- font-family: "Mona Sans";
- src: url("../static/fonts/MonaSans-Medium.ttf") format("truetype");
- font-weight: 500;
- font-style: normal;
- font-display: swap;
-}
-
@font-face {
- font-family: "Mona Sans";
- src: url("../static/fonts/MonaSans-SemiBold.ttf") format("truetype");
- font-weight: 600;
+ font-family: "Mona Sans VF";
+ src:
+ url("/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
+ format("woff2 supports variations"),
+ url("/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
+ format("woff2-variations");
+ font-weight: 200 900;
+ font-stretch: 75% 125%;
font-style: normal;
- font-display: swap;
+ font-optical-sizing: auto;
}
@font-face {
- font-family: "Mona Sans";
- src: url("../static/fonts/MonaSans-Bold.ttf") format("truetype");
- font-weight: 700;
- font-style: normal;
- font-display: swap;
+ font-family: "Mona Sans VF";
+ src:
+ url("/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
+ format("woff2 supports variations"),
+ url("/fonts/MonaSansVF[wdth,wght,opsz,ital].woff2")
+ format("woff2-variations");
+ font-weight: 200 900;
+ font-stretch: 75% 125%;
+ font-style: italic;
+ font-optical-sizing: auto;
}
-@font-face {
- font-family: "Mona Sans";
- src: url("../static/fonts/MonaSans-ExtraBold.ttf") format("truetype");
- font-weight: 800;
- font-style: normal;
- font-display: swap;
+html {
+ font-family: "Inter";
}
diff --git a/packages/eclipse/src/styles/globals.css b/packages/eclipse/src/styles/globals.css
index 3a1b7c546f..ce7d14011e 100644
--- a/packages/eclipse/src/styles/globals.css
+++ b/packages/eclipse/src/styles/globals.css
@@ -79,12 +79,12 @@
--blur-background: 24px;
--blur-background-high: 40px;
--font-mona-sans:
- "Mona Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+ "Mona Sans VF", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
"Helvetica Neue", Arial, sans-serif;
/* Typography - Font Families */
--font-family-display: var(--font-mona-sans), Inter, sans-serif;
--font-family-sans-display: Inter, sans-serif;
- --font-family-sans: Inter, system-ui, sans-serif;
+ --font-family-sans: var(--font-mona-sans), Inter, system-ui, sans-serif;
--font-family-mono: Monaspace Neon Var;
/* Tailwind Font Family Mappings */
@@ -746,4 +746,8 @@
/* blur-background-low */
backdrop-filter: blur(8px);
}
+
+ .stretch-display {
+ font-variation-settings: "wdth" 125;
+ }
}
diff --git a/packages/ui/src/components/footer.tsx b/packages/ui/src/components/footer.tsx
index deda388e44..5aa19c6182 100644
--- a/packages/ui/src/components/footer.tsx
+++ b/packages/ui/src/components/footer.tsx
@@ -66,7 +66,7 @@ const Footer = ({
absoluteLinks = false,
}: FooterProps) => {
return (
-