docs: upgrade packages

apps/docs/.map.ts

@@ -0,0 +1,4 @@
+/** Auto-generated **/
+declare const map: Record<string, unknown>
+
+export { map }

apps/docs/app/(home)/layout.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react"
+import { layoutOptions } from "@/app/layout.config"
+import { Layout } from "fumadocs-ui/layout"
+
+export default function HomeLayout({ children }: { children: ReactNode }): React.ReactElement {
+  return <Layout {...layoutOptions}>{children}</Layout>
+}

apps/docs/app/page.tsx → apps/docs/app/(home)/page.tsx

@@ -9,21 +9,21 @@ export default function HomePage() {
       <div className="absolute inset-x-0 top-0 h-[400px] w-full -translate-y-8 z-[-1]">
         <div className="h-full w-full mx-auto max-w-[1000px] bg-gradient-to-r from-purple-400/50 to-blue-400/50 [mask-image:radial-gradient(500px_80%_at_top_center,white,transparent)] animate-in fade-in duration-1000 opacity-50" />
       </div>
-      <div className="container py-20 flex flex-col items-center text-center">
-        <div className="bg-gradient-to-b from-blue-300 shadow-md shadow-purple-400/50 rounded-lg mb-6 animate-star">
+      <div className="container flex flex-col items-center py-20 text-center">
+        <div className="mb-6 rounded-lg shadow-md bg-gradient-to-b from-blue-300 shadow-purple-400/50 animate-star">
           <div className="m-px w-12 h-12 bg-background text-foreground rounded-[inherit] flex items-center justify-center">
             <NoroffLogo />
           </div>
         </div>
-        <h1 className="text-2xl font-bold mb-6 sm:text-5xl">Noroff API</h1>
-        <p className="text-muted-foreground max-w-xl sm:text-lg">Noroff API documentation</p>
-        <div className="mt-14 grid grid-cols-1 max-w-4xl gap-8 animate-in fade-in slide-in-from-bottom-10 duration-1000 md:grid-cols-2">
+        <h1 className="mb-6 text-2xl font-bold sm:text-5xl">Noroff API</h1>
+        <p className="max-w-xl text-muted-foreground sm:text-lg">Noroff API documentation</p>
+        <div className="grid max-w-4xl grid-cols-1 gap-8 duration-1000 mt-14 animate-in fade-in slide-in-from-bottom-10 md:grid-cols-2">
           <Link href="/docs/v2" className="group relative overflow-hidden rounded-xl p-px z-[2]">
             <i className="absolute inset-0 opacity-0 transition-opacity z-[-1] animated-border group-hover:opacity-100" />
             <div className="absolute inset-px bg-background bg-gradient-radial rounded-[inherit] from-purple-400/20 to-purple-400/0 z-[-1]" />
             <div className="flex flex-col items-center rounded-[inherit] h-full p-6 border sm:p-12">
-              <div className="border p-3 bg-gradient-to-b from-blue-400/30 border-blue-500/50 shadow-xl shadow-background/50 mb-6 rounded-xl">
-                <Tally2Icon className="h-9 w-9 text-blue-400 dark:text-cyan-200" />
+              <div className="p-3 mb-6 border shadow-xl bg-gradient-to-b from-blue-400/30 border-blue-500/50 shadow-background/50 rounded-xl">
+                <Tally2Icon className="text-blue-400 h-9 w-9 dark:text-cyan-200" />
               </div>
               <p className="mb-2 text-xl font-medium">API v2</p>
               <p className="text-muted-foreground">The newest version of the API. You should use this version.</p>
@@ -34,8 +34,8 @@ export default function HomePage() {
             <i className="absolute inset-0 opacity-0 transition-opacity z-[-1] animated-border group-hover:opacity-100" />
             <div className="absolute inset-px bg-background bg-gradient-radial rounded-[inherit] from-blue-400/20 to-blue-400/0 z-[-1]" />
             <div className="flex flex-col items-center rounded-[inherit] h-full z-[2] p-6 border sm:p-12">
-              <div className="border p-3 bg-gradient-to-b from-purple-400/10 border-foreground/20 shadow-xl shadow-background/50 mb-6 rounded-xl">
-                <Tally1Icon className="h-9 w-9 text-purple-400 dark:text-purple-200" />
+              <div className="p-3 mb-6 border shadow-xl bg-gradient-to-b from-purple-400/10 border-foreground/20 shadow-background/50 rounded-xl">
+                <Tally1Icon className="text-purple-400 h-9 w-9 dark:text-purple-200" />
               </div>
               <p className="mb-2 text-xl font-medium">API v1</p>
               <p className="text-muted-foreground">

apps/docs/app/api/search/route.ts

@@ -1,13 +1,14 @@
-import { allDocs } from "contentlayer/generated"
-import { createSearchAPI } from "next-docs-zeta/search/server"
+import { createSearchAPI } from "fumadocs-core/search/server"
+
+import { utils } from "@/utils/source"
 
 export const { GET } = createSearchAPI("advanced", {
-  indexes: allDocs.map(docs => ({
-    id: docs._id,
-    title: docs.title,
-    url: `/docs/${docs.slug}`,
-    structuredData: docs.structuredData,
-    tag: docs._raw.flattenedPath.startsWith("docs/v1") ? "v1" : "v2"
+  indexes: utils.getPages().map(page => ({
+    id: page.url,
+    title: page.data.title,
+    url: page.url,
+    structuredData: page.data.exports.structuredData,
+    tag: page.url.startsWith("/docs/v1") ? "v1" : "v2"
   })),
   tag: true
 })

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

@@ -0,0 +1,71 @@
+import { notFound } from "next/navigation"
+import { Card, Cards } from "fumadocs-ui/components/card"
+import { DocsBody, DocsPage } from "fumadocs-ui/page"
+import { ExternalLinkIcon } from "lucide-react"
+
+import { utils, type Page } from "@/utils/source"
+
+type Param = {
+  slug: string[]
+}
+
+export default async function Page({ params }: { params: Param }) {
+  const page = utils.getPage(params.slug)
+
+  if (page == null) {
+    notFound()
+  }
+
+  const path = `apps/docs/content/docs/${page.file.path}`
+  const MDX = page.data.exports.default
+
+  return (
+    <DocsPage
+      toc={page.data.exports.toc}
+      tableOfContent={{
+        enabled: page.data.toc,
+        footer: (
+          <a
+            href={`https://github.com/Noroff-Online-Team/noroff-api/blob/main/${path}`}
+            target="_blank"
+            rel="noreferrer noopener"
+            className="inline-flex items-center text-xs text-muted-foreground hover:text-foreground"
+          >
+            Edit on Github <ExternalLinkIcon className="w-3 h-3 ml-1" />
+          </a>
+        )
+      }}
+    >
+      <div className="mb-6 nd-not-prose">
+        <h1 className="mb-4 text-3xl font-semibold text-foreground sm:text-4xl">{page.data.title}</h1>
+        <p className="text-muted-foreground sm:text-lg">{page.data.description}</p>
+      </div>
+      <DocsBody>{page.data.index ? <Category page={page} /> : <MDX />}</DocsBody>
+    </DocsPage>
+  )
+}
+
+function Category({ page }: { page: Page }): React.ReactElement {
+  const filtered = utils
+    .getPages()
+    .filter(item => item.file.dirname === page.file.dirname && item.file.name !== "index")
+
+  return (
+    <Cards>
+      {filtered.map(item => (
+        <Card
+          key={item.url}
+          title={item.data.title}
+          description={item.data.description ?? "No Description"}
+          href={item.url}
+        />
+      ))}
+    </Cards>
+  )
+}
+
+export function generateStaticParams(): Param[] {
+  return utils.getPages().map<Param>(page => ({
+    slug: page.slugs
+  }))
+}

apps/docs/app/docs/layout.tsx

@@ -0,0 +1,28 @@
+import { type ReactNode } from "react"
+import Image from "next/image"
+import { layoutOptions } from "@/app/layout.config"
+import { DocsLayout } from "fumadocs-ui/layout"
+
+import { Body } from "../layout.client"
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <main className="[--primary:213_94%_68%]">
+      <div id="docs-gradient" className="absolute right-0 top-0 overflow-hidden z-[-1] sm:right-[20vw]">
+        <Image
+          alt=""
+          src="/gradient.png"
+          loading="eager"
+          width={800}
+          height={800}
+          className="min-w-[800px] opacity-50"
+          priority
+          aria-hidden
+        />
+      </div>
+      <Body>
+        <DocsLayout {...layoutOptions}>{children}</DocsLayout>
+      </Body>
+    </main>
+  )
+}