Merge pull request #181 from codelitdev/fumadocs-upgrade-mar26

Documentation upgrade

Author: rajat1saxena

.github/workflows/code-quality.yaml

@@ -1,5 +1,8 @@
 name: Code Quality
-on: [push]
+on:
+  push:
+    branches:
+      - '**'
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
@@ -49,4 +52,4 @@ jobs:
           pnpm -r build
 
       - name: Run test
-        run: pnpm test
+        run: pnpm test

apps/docs/app/(home)/[[...slug]]/page.tsx

@@ -5,23 +5,56 @@ import {
     DocsDescription,
     DocsTitle,
 } from "fumadocs-ui/page";
-import { notFound } from "next/navigation";
+import { notFound, redirect } from "next/navigation";
 import { createRelativeLink } from "fumadocs-ui/mdx";
 import { getMDXComponents } from "@/mdx-components";
+import { APIPage } from "@/components/api-page";
+import { PageActions } from "@/components/page-actions";
 
 export default async function Page(props: {
     params: Promise<{ slug?: string[] }>;
 }) {
     const params = await props.params;
+    const slugPath = params.slug?.join("/");
+
+    if (slugPath?.endsWith(".mdx")) {
+        const markdownSlug = slugPath.slice(0, -4);
+        redirect(`/llms.mdx/${markdownSlug || "index"}`);
+    }
+
+    if (slugPath === "rest-api" || slugPath === "api-reference") {
+        redirect("/api/uploadMedia");
+    }
+
     const page = source.getPage(params.slug);
     if (!page) notFound();
 
+    if (page.data.type === "openapi") {
+        return (
+            <DocsPage full>
+                <DocsTitle>{page.data.title}</DocsTitle>
+                <DocsDescription>{page.data.description}</DocsDescription>
+                <DocsBody>
+                    <APIPage {...page.data.getAPIPageProps()} />
+                </DocsBody>
+            </DocsPage>
+        );
+    }
+
     const MDXContent = page.data.body;
+    const markdownUrl = `${page.url === "/" ? "/index" : page.url}.mdx`;
+    const githubBaseUrl =
+        process.env.NEXT_PUBLIC_DOCS_GITHUB_BASE_URL ||
+        "https://github.com/codelitdev/medialit/blob/main/apps/docs/content/docs";
+    const githubUrl = `${githubBaseUrl.replace(/\/$/, "")}/${page.path}`;
 
     return (
         <DocsPage toc={page.data.toc} full={page.data.full}>
             <DocsTitle>{page.data.title}</DocsTitle>
-            <DocsDescription>{page.data.description}</DocsDescription>
+            <DocsDescription className="mb-4">
+                {page.data.description}
+            </DocsDescription>
+            <PageActions markdownUrl={markdownUrl} githubUrl={githubUrl} />
             <DocsBody>
                 <MDXContent
                     components={getMDXComponents({
@@ -35,7 +68,9 @@ export default async function Page(props: {
 }
 
 export async function generateStaticParams() {
-    return source.generateParams();
+    const params = source.generateParams();
+
+    return [...params, { slug: ["rest-api"] }, { slug: ["api-reference"] }];
 }
 
 export async function generateMetadata(props: {

apps/docs/app/[...slug].mdx/route.ts

@@ -0,0 +1,32 @@
+import { source } from "@/lib/source";
+import { getLLMText } from "@/lib/get-llm-text";
+
+export const revalidate = false;
+
+export async function GET(
+    req: Request,
+    _ctx: { params: Promise<Record<string, string | string[]>> },
+) {
+    const pathname = new URL(req.url).pathname;
+    const relative = pathname.replace(/^\/+/, "").replace(/\.mdx$/, "");
+    const slug = relative.length > 0 ? relative.split("/") : [];
+    const normalizedSlug =
+        slug.length === 1 && slug[0] === "index" ? undefined : slug;
+    const page = source.getPage(normalizedSlug);
+
+    if (!page) {
+        return new Response("Not Found", { status: 404 });
+    }
+
+    return new Response(await getLLMText(page), {
+        headers: {
+            "Content-Type": "text/markdown; charset=utf-8",
+        },
+    });
+}
+
+export function generateStaticParams() {
+    return source.generateParams().map((item) => ({
+        slug: item.slug.length > 0 ? item.slug : ["index"],
+    }));
+}

apps/docs/app/global.css

@@ -1,3 +1,4 @@
 @import "tailwindcss";
 @import "fumadocs-ui/css/neutral.css";
 @import "fumadocs-ui/css/preset.css";
+@import "fumadocs-openapi/css/preset.css";

apps/docs/app/layout.tsx

@@ -1,5 +1,5 @@
 import "./global.css";
-import { RootProvider } from "fumadocs-ui/provider";
+import { RootProvider } from "fumadocs-ui/provider/next";
 import { Inter } from "next/font/google";
 import type { ReactNode } from "react";
 

apps/docs/app/llms.mdx/[...slug]/route.ts

@@ -0,0 +1,30 @@
+import { source } from "@/lib/source";
+import { getLLMText } from "@/lib/get-llm-text";
+
+export const revalidate = false;
+
+export async function GET(
+    _req: Request,
+    { params }: { params: Promise<{ slug: string[] }> },
+) {
+    const { slug } = await params;
+    const normalizedSlug =
+        slug.length === 1 && slug[0] === "index" ? undefined : slug;
+    const page = source.getPage(normalizedSlug);
+
+    if (!page) {
+        return new Response("Not Found", { status: 404 });
+    }
+
+    return new Response(await getLLMText(page), {
+        headers: {
+            "Content-Type": "text/markdown",
+        },
+    });
+}
+
+export function generateStaticParams() {
+    return source.generateParams().map((item) => ({
+        slug: item.slug.length > 0 ? item.slug : ["index"],
+    }));
+}

apps/docs/app/llms.txt/route.ts

@@ -0,0 +1,12 @@
+import { source } from "@/lib/source";
+import { llms } from "fumadocs-core/source";
+
+export const revalidate = false;
+
+export function GET() {
+    return new Response(llms(source).index(), {
+        headers: {
+            "Content-Type": "text/plain; charset=utf-8",
+        },
+    });
+}

apps/docs/components/api-page.client.tsx

@@ -0,0 +1,5 @@
+"use client";
+
+import { defineClientConfig } from "fumadocs-openapi/ui/client";
+
+export default defineClientConfig({});

apps/docs/components/api-page.tsx

@@ -0,0 +1,7 @@
+import { openapi } from "@/lib/openapi";
+import { createAPIPage } from "fumadocs-openapi/ui";
+import client from "./api-page.client";
+
+export const APIPage = createAPIPage(openapi, {
+    client,
+});

apps/docs/components/page-actions.tsx

@@ -0,0 +1,159 @@
+"use client";
+
+import { useMemo } from "react";
+import type { ReactNode } from "react";
+import { usePathname } from "fumadocs-core/framework";
+import { buttonVariants } from "fumadocs-ui/components/ui/button";
+import {
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+} from "fumadocs-ui/components/ui/popover";
+import { MarkdownCopyButton } from "fumadocs-ui/layouts/docs/page";
+import { ChevronDown, ExternalLinkIcon, TextIcon } from "lucide-react";
+
+type ViewOptionsPopoverProps = {
+    markdownUrl: string;
+    githubUrl: string;
+    className?: string;
+};
+
+type ViewOption = {
+    title: string;
+    href: string;
+    icon: ReactNode;
+};
+
+const linkClassName =
+    "text-sm p-2 rounded-lg inline-flex items-center gap-2 hover:text-fd-accent-foreground hover:bg-fd-accent [&_svg]:size-4";
+
+function iconGitHub() {
+    return (
+        <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+            <title>GitHub</title>
+            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+        </svg>
+    );
+}
+
+function iconOpenAI() {
+    return (
+        <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+            <title>OpenAI</title>
+            <path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z" />
+        </svg>
+    );
+}
+
+function iconClaude() {
+    return (
+        <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+            <title>Anthropic</title>
+            <path d="M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.5409Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z" />
+        </svg>
+    );
+}
+
+function iconCursor() {
+    return (
+        <svg fill="currentColor" role="img" viewBox="0 0 24 24">
+            <title>Cursor</title>
+            <path d="M11.503.131 1.891 5.678a.84.84 0 0 0-.42.726v11.188c0 .3.162.575.42.724l9.609 5.55a1 1 0 0 0 .998 0l9.61-5.55a.84.84 0 0 0 .42-.724V6.404a.84.84 0 0 0-.42-.726L12.497.131a1.01 1.01 0 0 0-.996 0M2.657 6.338h18.55c.263 0 .43.287.297.515L12.23 22.918c-.062.107-.229.064-.229-.06V12.335a.59.59 0 0 0-.295-.51l-9.11-5.257c-.109-.063-.064-.23.061-.23" />
+        </svg>
+    );
+}
+
+export function PageActions({
+    markdownUrl,
+    githubUrl,
+}: {
+    markdownUrl: string;
+    githubUrl: string;
+}) {
+    return (
+        <div className="not-prose mb-6 flex items-center gap-2 border-b pb-6">
+            <MarkdownCopyButton markdownUrl={markdownUrl} />
+            <ViewOptionsPopover
+                markdownUrl={markdownUrl}
+                githubUrl={githubUrl}
+            />
+        </div>
+    );
+}
+
+export function ViewOptionsPopover({
+    markdownUrl,
+    githubUrl,
+    className,
+}: ViewOptionsPopoverProps) {
+    const pathname = usePathname();
+
+    const items = useMemo<ViewOption[]>(() => {
+        const q = `Read ${typeof window === "undefined" ? pathname : new URL(pathname, window.location.origin)}, I want to ask questions about it.`;
+
+        return [
+            {
+                title: "Open in GitHub",
+                href: githubUrl,
+                icon: iconGitHub(),
+            },
+            {
+                title: "View as Markdown",
+                href: markdownUrl,
+                icon: <TextIcon />,
+            },
+            {
+                title: "Open in ChatGPT",
+                href: `https://chatgpt.com/?${new URLSearchParams({
+                    hints: "search",
+                    q,
+                })}`,
+                icon: iconOpenAI(),
+            },
+            {
+                title: "Open in Claude",
+                href: `https://claude.ai/new?${new URLSearchParams({ q })}`,
+                icon: iconClaude(),
+            },
+            {
+                title: "Open in Cursor",
+                href: `https://cursor.com/link/prompt?${new URLSearchParams({
+                    text: q,
+                })}`,
+                icon: iconCursor(),
+            },
+        ];
+    }, [githubUrl, markdownUrl, pathname]);
+
+    return (
+        <Popover>
+            <PopoverTrigger
+                className={[
+                    buttonVariants({ color: "secondary", size: "sm" }),
+                    "gap-2 data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground",
+                    className,
+                ]
+                    .filter(Boolean)
+                    .join(" ")}
+            >
+                Open
+                <ChevronDown className="size-3.5 text-fd-muted-foreground" />
+            </PopoverTrigger>
+            <PopoverContent className="flex flex-col">
+                {items.map((item) => (
+                    <a
+                        key={item.href}
+                        href={item.href}
+                        rel="noreferrer noopener"
+                        target="_blank"
+                        className={linkClassName}
+                    >
+                        {item.icon}
+                        {item.title}
+                        <ExternalLinkIcon className="text-fd-muted-foreground size-3.5 ms-auto" />
+                    </a>
+                ))}
+            </PopoverContent>
+        </Popover>
+    );
+}