feat: replaces starlight with fumadocs

Author: MathurAditya724

docs/.gitignore

@@ -1,21 +1,28 @@
-# build output
-dist/
-# generated types
-.astro/
+# deps
+/node_modules
 
-# dependencies
-node_modules/
+# generated content
+.contentlayer
+.content-collections
+.source
 
-# logs
+# test & build
+/coverage
+/.next/
+/out/
+/build
+*.tsbuildinfo
+
+# misc
+.DS_Store
+*.pem
+/.pnp
+.pnp.js
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
-
 
-# environment variables
-.env
-.env.production
-
-# macOS-specific files
-.DS_Store
+# others
+.env*.local
+.vercel
+next-env.d.ts

docs/.vscode/extensions.json

@@ -0,0 +1,4 @@
+import { source } from '@/lib/source';
+import { createFromSource } from 'fumadocs-core/search/server';
+
+export const { GET } = createFromSource(source);

docs/.vscode/launch.json

@@ -0,0 +1,62 @@
+import { source } from "@/lib/source";
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from "fumadocs-ui/page";
+import { notFound } from "next/navigation";
+import defaultMdxComponents, { createRelativeLink } from "fumadocs-ui/mdx";
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  const MDXContent = page.data.body;
+
+  return (
+    <DocsPage
+      toc={page.data.toc}
+      full={page.data.full}
+      editOnGithub={{
+        owner: "muppet-dev",
+        repo: "muppet",
+        sha: "main",
+        path: `/docs/content/docs/${page.file.path}`,
+      }}
+    >
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDXContent
+          components={{
+            ...defaultMdxComponents,
+            // this allows you to link to other pages with relative file paths
+            a: createRelativeLink(source, page),
+            // you can add other MDX components here
+          }}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

docs/app/api/search/route.ts

@@ -0,0 +1,12 @@
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import type { ReactNode } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <DocsLayout tree={source.pageTree} {...baseOptions}>
+      {children}
+    </DocsLayout>
+  );
+}

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

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+@source '../node_modules/fumadocs-ui/dist/**/*.js';

docs/app/docs/layout.tsx

@@ -0,0 +1,31 @@
+import { Logo } from "@/components/Logo";
+import { FaBluesky, FaXTwitter } from "react-icons/fa6";
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+
+/**
+ * Shared layout configurations
+ *
+ * you can customise layouts individually from:
+ * Home Layout: app/(home)/layout.tsx
+ * Docs Layout: app/docs/layout.tsx
+ */
+export const baseOptions: BaseLayoutProps = {
+  nav: {
+    title: <Logo />,
+  },
+  links: [
+    {
+      type: "icon",
+      icon: <FaBluesky />,
+      text: "X",
+      url: "https://x.com/muppetdev",
+    },
+    {
+      type: "icon",
+      icon: <FaXTwitter />,
+      text: "BlueSky",
+      url: "https://bsky.app/profile/muppet.dev",
+    },
+  ],
+  githubUrl: "https://github.com/muppet-dev/muppet",
+};

docs/app/global.css

@@ -0,0 +1,18 @@
+import './global.css';
+import { RootProvider } from 'fumadocs-ui/provider';
+import { Inter } from 'next/font/google';
+import type { ReactNode } from 'react';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen">
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

docs/app/layout.config.tsx

@@ -0,0 +1,44 @@
+import * as fs from "node:fs/promises";
+import fg from "fast-glob";
+import matter from "gray-matter";
+import { remark } from "remark";
+import remarkGfm from "remark-gfm";
+import remarkStringify from "remark-stringify";
+import remarkMdx from "remark-mdx";
+import { remarkInclude } from "fumadocs-mdx/config";
+
+export const revalidate = false;
+
+export async function GET() {
+  // all scanned content
+  const files = await fg(["./content/docs/**/*.{md,mdx}"]);
+
+  const scan = files.map(async (file) => {
+    const fileContent = await fs.readFile(file);
+    const { content, data } = matter(fileContent.toString());
+
+    const processed = await processContent(content);
+    return `file: ${file}
+meta: ${JSON.stringify(data, null, 2)}
+        
+${processed}`;
+  });
+
+  const scanned = await Promise.all(scan);
+
+  return new Response(scanned.join("\n\n"));
+}
+
+async function processContent(content: string): Promise<string> {
+  const file = await remark()
+    .use(remarkMdx)
+    // https://fumadocs.vercel.app/docs/mdx/include
+    .use(remarkInclude)
+    // gfm styles
+    .use(remarkGfm)
+    // .use(your remark plugins)
+    .use(remarkStringify) // to string
+    .process(content);
+
+  return String(file);
+}