fix: bump all dependencies and clean up (#30)

Author: ndom91

.gitignore

@@ -3,6 +3,7 @@ node_modules
 
 # generated content
 .map.ts
+.source
 .contentlayer
 api-reference.json
 content/docs/api-reference/*.mdx

.prettierrc.js

@@ -5,10 +5,10 @@
 const config = {
   semi: false,
   singleQuote: false,
-  trailingComma: 'none',
+  trailingComma: "none",
   printWidth: 100,
-  endOfLine: 'auto',
-  // plugins: ['prettier-plugin-tailwindcss']
+  endOfLine: "auto",
+  plugins: ["prettier-plugin-tailwindcss"]
 }
 
-module.exports = config
+export default config

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

@@ -1,13 +1,21 @@
-import { getPage, getPages } from "@/app/source"
-import { DocsPage, DocsBody } from "fumadocs-ui/page"
+import { openapi, utils } from "@/app/source"
+import { DocsPage, DocsBody, DocsTitle, DocsDescription } from "fumadocs-ui/page"
 import { notFound } from "next/navigation"
-import { RollButton } from "fumadocs-ui/components/roll-button"
-import type { Metadata } from "next"
-import { join } from "path"
-import { getGithubLastEdit } from "fumadocs-core/server"
+import defaultComponents from "fumadocs-ui/mdx"
+import { Popup, PopupContent, PopupTrigger } from "fumadocs-ui/twoslash/popup"
+import { Tab, Tabs } from "fumadocs-ui/components/tabs"
+import { Callout } from "fumadocs-ui/components/callout"
+import { TypeTable } from "fumadocs-ui/components/type-table"
+import { Accordion, Accordions } from "fumadocs-ui/components/accordion"
+import ImageSection from "@/app/components/ImageSection"
+import type { ComponentProps, FC } from "react"
 
-export default async function Page({ params }: { params: { slug?: string[] } }) {
-  const page = getPage(params.slug)
+interface Param {
+  slug: string[]
+}
+
+export default function Page({ params }: { params: Param }): React.ReactElement {
+  const page = utils.getPage(params.slug)
 
   if (!page) notFound()
 
@@ -17,7 +25,7 @@ export default async function Page({ params }: { params: { slug?: string[] } })
         href={`https://github.com/gitbutlerapp/gitbutler-docs/blob/main/content/docs/${page.file.path}`}
         target="_blank"
         rel="noreferrer noopener"
-        className="group rounded-md text-neutral-500 dark:text-neutral-400 dark:bg-neutral-900 border border-neutral-300/50 text-sm py-1 dark:border-neutral-700 flex justify-center items-center gap-2 hover:bg-neutral-100 transition duration-300 dark:hover:bg-neutral-950"
+        className="group flex items-center justify-center gap-2 rounded-md border border-neutral-300/50 py-1 text-sm text-neutral-500 transition duration-300 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-950"
       >
         <svg
           className="size-4 group-hover:animate-[var(--animation-shake-x)]"
@@ -35,10 +43,10 @@ export default async function Page({ params }: { params: { slug?: string[] } })
         href={`https://github.com/gitbutlerapp/gitbutler-docs/issues/new?label=docs&title=Feedback+for+page+"${page.file.flattenedPath}"`}
         target="_blank"
         rel="noreferrer noopener"
-        className="rounded-md text-neutral-500 dark:text-neutral-400 dark:bg-neutral-900 border border-neutral-300/50 text-sm py-1 dark:border-neutral-700 flex justify-center items-center gap-2 hover:bg-neutral-100 transition duration-300 dark:hover:bg-neutral-950 group"
+        className="group flex items-center justify-center gap-2 rounded-md border border-neutral-300/50 py-1 text-sm text-neutral-500 transition duration-300 hover:bg-neutral-100 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-950"
       >
         <svg
-          className="size-4 transition ease-[var(--ease-spring-3)] duration-500 group-hover:animate-[var(--animation-bounce)]"
+          className="size-4 transition duration-500 ease-[var(--ease-spring-3)] group-hover:animate-[var(--animation-bounce)]"
           xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 256 256"
         >
@@ -65,46 +73,59 @@ export default async function Page({ params }: { params: { slug?: string[] } })
     </>
   )
 
-  const time = await getGithubLastEdit({
-    owner: "gitbutlerapp",
-    repo: "gitbutler-docs",
-    path: join("content/docs/", page.file.path)
-  })
-
-  const MDX = page.data.exports.default
-
   return (
     <DocsPage
-      toc={page.data.exports.toc}
-      full={page.data.full ?? false}
-      lastUpdate={time ?? undefined}
+      toc={page.data.toc}
+      full={page.data.full}
       tableOfContent={{
+        style: "clerk",
+        single: false,
+        footer
+      }}
+      lastUpdate={page.data.lastModified}
+      tableOfContentPopover={{
         footer
       }}
-      tableOfContentPopover={{ footer }}
     >
-      <RollButton percentage={0.3} />
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
-        <h1>{page.data.title}</h1>
-        <MDX />
+        <page.data.body
+          components={{
+            ...defaultComponents,
+            Popup,
+            PopupContent,
+            PopupTrigger,
+            Tabs,
+            Tab,
+            TypeTable,
+            Accordion,
+            Accordions,
+            ImageSection,
+            blockquote: Callout as unknown as FC<ComponentProps<"blockquote">>,
+            APIPage: openapi.APIPage
+          }}
+        />
       </DocsBody>
     </DocsPage>
   )
 }
 
-export async function generateStaticParams() {
-  return getPages().map((page) => ({
-    slug: page.slugs
-  }))
+export function generateStaticParams(): Param[] {
+  return utils.getPages().map((page) => {
+    return {
+      slug: page.slugs
+    }
+  })
 }
 
 export function generateMetadata({ params }: { params: { slug?: string[] } }) {
-  const page = getPage(params.slug)
+  const page = utils.getPage(params.slug)
 
-  if (page == null) notFound()
+  if (!page) notFound()
 
   return {
     title: page.data.title,
     description: page.data.description
-  } satisfies Metadata
+  }
 }

app/(docs)/layout.tsx

@@ -1,7 +1,8 @@
-import { DocsLayout } from 'fumadocs-ui/layout';
-import type { ReactNode } from 'react';
-import { docsOptions } from '../layout.config';
+import { DocsLayout } from "fumadocs-ui/layout"
+import type { ReactNode } from "react"
+import { docsOptions } from "@/app/layout.config"
+import "fumadocs-ui/twoslash.css"
 
 export default function Layout({ children }: { children: ReactNode }) {
-  return <DocsLayout {...docsOptions}>{children}</DocsLayout>;
+  return <DocsLayout {...docsOptions}>{children}</DocsLayout>
 }

app/api/search/route.ts

@@ -1,11 +1,13 @@
-import { getPages } from '@/app/source';
-import { createSearchAPI } from 'fumadocs-core/search/server';
+import { utils } from "@/app/source"
+import { createSearchAPI } from "fumadocs-core/search/server"
 
-export const { GET } = createSearchAPI('advanced', {
-  indexes: getPages().map((page) => ({
-    title: page.data.title,
-    structuredData: page.data.exports.structuredData,
-    id: page.url,
-    url: page.url,
-  })),
-});
+export const { GET } = createSearchAPI("advanced", {
+  indexes: utils.getPages().map((page) => {
+    return {
+      title: page.data.title,
+      structuredData: page.data.structuredData,
+      id: page.url,
+      url: page.url
+    }
+  })
+})

app/components/CodeBlock.tsx

@@ -1,11 +1,13 @@
-import { type BaseLayoutProps, type DocsLayoutProps } from "fumadocs-ui/layout"
-import { pageTree } from "./source"
+import { utils } from "@/app/source"
+import type { DocsLayoutProps } from "fumadocs-ui/layout"
+import type { HomeLayoutProps } from "fumadocs-ui/home-layout"
+
 import Logo from "@/components/Logo"
 import Discord from "@/components/logos/discord"
 import GitButler from "@/components/logos/gitbutler-wordmark"
 
 // shared configuration
-export const baseOptions: BaseLayoutProps = {
+export const baseOptions: HomeLayoutProps = {
   nav: {
     title: <Logo />,
     transparentMode: "top"
@@ -31,5 +33,5 @@ export const docsOptions: DocsLayoutProps = {
   sidebar: {
     defaultOpenLevel: 0
   },
-  tree: pageTree
+  tree: utils.pageTree
 }

app/layout.config.tsx

@@ -1,5 +1,5 @@
 import type { MetadataRoute } from "next"
-import { getPages } from "./source"
+import { utils } from "./source"
 
 const baseUrl =
   process.env.NODE_ENV === "development"
@@ -15,11 +15,9 @@ export default function sitemap(): MetadataRoute.Sitemap {
       changeFrequency: "monthly",
       priority: 0.8
     },
-    ...getPages().map<MetadataRoute.Sitemap[number]>((page) => ({
+    ...utils.getPages().map<MetadataRoute.Sitemap[number]>((page) => ({
       url: url(page.url),
-      lastModified: page.data.exports.lastModified
-        ? new Date(page.data.exports.lastModified)
-        : undefined,
+      lastModified: page.data.lastModified ? new Date(page.data.lastModified) : undefined,
       changeFrequency: "weekly",
       priority: 0.5
     }))

app/sitemap.ts

@@ -1,9 +1,17 @@
-import { map } from "@/.map"
+import { meta, docs } from "@/.source"
 import { createMDXSource } from "fumadocs-mdx"
 import { loader } from "fumadocs-core/source"
+import { attachFile, createOpenAPI } from "fumadocs-openapi/server"
+import type { InferMetaType, InferPageType } from "fumadocs-core/source"
 
-export const { getPage, getPages, pageTree, files } = loader({
-  baseUrl: "/",
-  rootDir: "docs",
-  source: createMDXSource(map)
+export const utils = loader({
+  source: createMDXSource(docs, meta),
+  pageTree: {
+    attachFile
+  }
 })
+
+export const openapi = createOpenAPI({})
+
+export type Page = InferPageType<typeof utils>
+export type Meta = InferMetaType<typeof utils>