kms docs

Author: izadoesdev

apps/docs/app/docs/[[...slug]]/page.tsx

@@ -1,3 +1,4 @@
+import type { DocData, DocMethods } from "fumadocs-mdx/runtime/types";
 import { DocsBody, DocsPage, DocsTitle } from "fumadocs-ui/page";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
@@ -7,6 +8,12 @@ import { onRateDocs } from "@/lib/feedback-action";
 import { getPageImage, source } from "@/lib/source";
 import { getMDXComponents } from "@/mdx-components";
 
+type AsyncPageData = DocMethods & {
+	title?: string;
+	description?: string;
+	load: () => Promise<DocData>;
+};
+
 export default async function Page(props: {
 	params: Promise<{ slug?: string[] }>;
 }) {
@@ -16,7 +23,8 @@ export default async function Page(props: {
 		notFound();
 	}
 
-	const MDX = await page.data.body;
+	const pageData = page.data as AsyncPageData;
+	const { body: MDX, toc } = await pageData.load();
 
 	return (
 		<DocsPage
@@ -30,11 +38,10 @@ export default async function Page(props: {
 				component: <DocsFooter />,
 				enabled: true,
 			}}
-			full={page.data.full}
 			tableOfContent={{
 				style: "clerk",
 			}}
-			toc={page.data.toc}
+			toc={toc}
 		>
 			<DocsTitle>{page.data.title}</DocsTitle>
 			<DocsBody>
@@ -58,15 +65,16 @@ export async function generateMetadata(props: {
 		notFound();
 	}
 
+	const pageTitle = page.data.title ?? "Documentation";
 	const url = `https://www.databuddy.cc${page.url}`;
-	const title = `${page.data.title} | Databuddy Documentation`;
+	const title = `${pageTitle} | Databuddy Documentation`;
 	const description =
-		page.data.description ||
-		`Learn about ${page.data.title} in Databuddy's privacy-first analytics platform. Complete guides and API documentation.`;
+		page.data.description ??
+		`Learn about ${pageTitle} in Databuddy's privacy-first analytics platform. Complete guides and API documentation.`;
 	const ogImage = `https://www.databuddy.cc${getPageImage(page).url}`;
 
 	const baseKeywords = [
-		page.data.title.toLowerCase(),
+		pageTitle.toLowerCase(),
 		"databuddy",
 		"analytics",
 		"privacy-first",
@@ -125,7 +133,7 @@ export async function generateMetadata(props: {
 					url: ogImage,
 					width: 1200,
 					height: 630,
-					alt: `${page.data.title} - Databuddy Documentation`,
+					alt: `${pageTitle} - Databuddy Documentation`,
 				},
 			],
 		},
@@ -156,7 +164,7 @@ export async function generateMetadata(props: {
 		},
 		other: {
 			"article:section": "Documentation",
-			"article:tag": page.data.title,
+			"article:tag": pageTitle,
 			"article:author": "Databuddy Team",
 			"og:site_name": "Databuddy Documentation",
 		},

apps/docs/app/global.css

@@ -626,6 +626,33 @@ body {
   padding-top: 0px !important;
 }
 
+/* Add padding to docs layout to account for fixed navbar and sidebar */
+#nd-docs-layout {
+  padding-top: 64px; /* Account for fixed navbar (h-16 = 64px) */
+}
+
+#nd-docs-layout main,
+#nd-docs-layout [role="main"],
+#nd-docs-layout > div > main {
+  padding-left: 0;
+}
+
+@media (min-width: 768px) {
+  #nd-docs-layout main,
+  #nd-docs-layout [role="main"],
+  #nd-docs-layout > div > main {
+    padding-left: 268px;
+  }
+}
+
+@media (min-width: 1024px) {
+  #nd-docs-layout main,
+  #nd-docs-layout [role="main"],
+  #nd-docs-layout > div > main {
+    padding-left: 286px;
+  }
+}
+
 @keyframes borderGlitch {
   0% {
     border-color: rgb(41 37 36); /* stone-800 */

apps/docs/components/docs-footer.tsx

@@ -8,7 +8,9 @@ import { SciFiButton } from "./landing/scifi-btn";
 
 export function DocsFooter() {
 	const handleGetStarted = () => {
-		if (typeof window === "undefined") return;
+		if (typeof window === "undefined") {
+			return;
+		}
 
 		const trackingParams = getTrackingParams();
 		const url = trackingParams
@@ -20,7 +22,7 @@ export function DocsFooter() {
 
 	return (
 		<footer className="border-border border-t bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-			<div className="mx-auto max-w-6xl px-4 pt-8 sm:px-6 lg:px-8">
+			<div className="mx-auto max-w-6xl px-4 pt-8 pb-8 sm:px-6 lg:px-8">
 				{/* CTA Section */}
 				<div className="mb-10 text-center">
 					<h2 className="mb-4 font-medium text-xl leading-tight sm:text-2xl">

apps/docs/components/docs-navbar.tsx

@@ -9,9 +9,9 @@ import { Logo } from "./logo";
 import { NavLink } from "./nav-link";
 import { contents } from "./sidebar-content";
 
-export type DocsNavbarProps = {
+export interface DocsNavbarProps {
 	stars?: number | null;
-};
+}
 
 export const DocsNavbar = ({ stars }: DocsNavbarProps) => {
 	const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
@@ -26,7 +26,7 @@ export const DocsNavbar = ({ stars }: DocsNavbarProps) => {
 	};
 
 	return (
-		<div className="sticky top-0 z-30 flex flex-col border-border border-b backdrop-blur-md">
+		<div className="fixed top-0 right-0 left-0 z-30 flex flex-col border-border border-b bg-background/95 backdrop-blur-md">
 			<nav>
 				<div className="mx-auto w-full px-2 sm:px-2 md:px-6 lg:px-8">
 					<div className="flex h-16 items-center justify-between">
@@ -187,10 +187,12 @@ export const DocsNavbar = ({ stars }: DocsNavbarProps) => {
 																	}}
 																>
 																	<div className="flex items-center gap-2">
-																		<item.icon
-																			className="size-4 shrink-0"
-																			weight="duotone"
-																		/>
+																		{item.icon ? (
+																			<item.icon
+																				className="size-4 shrink-0"
+																				weight="duotone"
+																			/>
+																		) : null}
 																		<span>{item.title}</span>
 																		{item.isNew && (
 																			<span className="rounded border border-border/40 bg-muted/40 px-1.5 py-0.5 text-foreground/80 text-xs">

apps/docs/package.json

@@ -51,7 +51,7 @@
     "fast-glob": "^3.3.3",
     "fumadocs-core": "15.5.0",
     "fumadocs-docgen": "^2.1.0",
-    "fumadocs-mdx": "13",
+    "fumadocs-mdx": "14",
     "fumadocs-ui": "15.5.0",
     "gray-matter": "^4.0.3",
     "input-otp": "^1.4.2",

apps/docs/scripts/validate-links.ts

@@ -1,4 +1,5 @@
 import type { InferPageType } from "fumadocs-core/source";
+import type { DocData, DocMethods } from "fumadocs-mdx/runtime/types";
 import {
 	type FileObject,
 	printErrors,
@@ -8,18 +9,29 @@ import {
 import { source } from "../lib/source";
 
 type Page = InferPageType<typeof source>;
+type AsyncPageData = DocMethods & {
+	title?: string;
+	description?: string;
+	load: () => Promise<DocData>;
+};
 
-const getHeadings = (page: Page): string[] =>
-	page.data.toc?.map((item) => item.url.slice(1)) ?? [];
+const getHeadings = async (page: Page): Promise<string[]> => {
+	const pageData = page.data as AsyncPageData;
+	const { toc } = await pageData.load();
+	return toc?.map((item) => item.url.slice(1)) ?? [];
+};
 
 const getFiles = (): Promise<FileObject[]> =>
 	Promise.all(
-		source.getPages().map(async (page) => ({
-			path: page.file.path,
-			content: await page.data.getText("raw"),
-			url: page.url,
-			data: page.data,
-		}))
+		source.getPages().map(async (page) => {
+			const pageData = page.data as AsyncPageData;
+			return {
+				path: page.file.path,
+				content: await pageData.getText("raw"),
+				url: page.url,
+				data: page.data,
+			};
+		})
 	);
 
 async function checkLinks() {
@@ -28,10 +40,12 @@ async function checkLinks() {
 	const scanned = await scanURLs({
 		preset: "next",
 		populate: {
-			"docs/[[...slug]]": pages.map((page) => ({
-				value: { slug: page.slugs },
-				hashes: getHeadings(page),
-			})),
+			"docs/[[...slug]]": await Promise.all(
+				pages.map(async (page) => ({
+					value: { slug: page.slugs },
+					hashes: await getHeadings(page),
+				}))
+			),
 		},
 	});
 

apps/docs/source.config.ts

@@ -1,45 +1,17 @@
 import {
-	defineConfig,
 	defineDocs,
 	frontmatterSchema,
 	metaSchema,
 } from "fumadocs-mdx/config";
-import { z } from "zod";
 
-// Simplified blog frontmatter schema - separate from docs schema
-const blogFrontmatterSchema = z.object({
-	title: z.string(),
-	description: z.string().optional(),
-	icon: z.string().optional(),
-	full: z.boolean().optional(),
-	author: z.string(),
-	publishedAt: z.string(),
-	lastModified: z.string().optional(),
-	featured: z.boolean().optional().default(false),
-	category: z.string(),
-	tags: z.array(z.string()).optional().default([]),
-});
-
-// You can customise Zod schemas for frontmatter and `meta.json` here
-// see https://fumadocs.vercel.app/docs/mdx/collections#define-docs
 export const docs = defineDocs({
 	dir: "content/docs",
 	docs: {
 		schema: frontmatterSchema,
+		async: true
 	},
 	meta: {
 		schema: metaSchema,
 	},
 });
 
-export const blogs = defineDocs({
-	dir: "content/blogs",
-	docs: {
-		schema: blogFrontmatterSchema,
-	},
-	meta: {
-		schema: metaSchema,
-	},
-});
-
-export default defineConfig();

apps/docs/tsconfig.json

@@ -16,7 +16,7 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "fumadocs-mdx:collections/*": ["./source/*"],
+      "fumadocs-mdx:collections/*": [".source/*"],
       "@/*": ["./*"]
     },
     "plugins": [