fix: bump all dependencies and clean up (gitbutlerapp#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>

app/source.ts

@@ -14,7 +14,7 @@ If you get stuck or need help with anything, hit us up over on Discord, here's [
 
 Often the most helpful thing is to look at the logs. GitButler is a Tauri app, so the logs are in your OS's [app log directory](https://docs.rs/tauri/latest/tauri/api/path/fn.app_log_dir.html). This should be:
 
-<Tabs items={['macOS', 'Windows', 'Linux']}>
+<Tabs groupId="platform" items={['macOS', 'Windows', 'Linux']} persist>
   <Tab value="macOS">
   ```bash
   ~/Library/Logs/com.gitbutler.app/
@@ -68,7 +68,7 @@ In this directory, there should be rolling daily logs:
 
 GitButler also keeps it's own data about each of your projects. The virtual branch metadata, your user config stuff, a log of changes in each file, etc. If you want to inspect what GitButler is doing or debug or reset everything, you can go to our data directory.
 
-<Tabs items={['macOS', 'Windows', 'Linux']}>
+<Tabs groupId="platform" items={['macOS', 'Windows', 'Linux']} persist>
   <Tab value="macOS">
   ```bash
   ~/Library/Application Support/com.gitbutler.app/

content/docs/api-reference/index.mdx

@@ -78,7 +78,7 @@ There are lots of other ways to set up GPG or SSH commit signing:
 <Callout title="Using GitButler's Generated SSH Key">
 Earlier versions of GitButler would only sign with it's generated SSH key. Although we've removed that functionality, you can easily set it back up by pointing the signingKey at the generated SSH Key. The key is located in the following locations:
 
-<Tabs items={['macOS', 'Windows', 'Linux']}>
+<Tabs groupId="platform" items={['macOS', 'Windows', 'Linux']} persist>
   <Tab value="macOS">
   ```bash
   /Users/[username]/Library/Application Support/com.gitbutler.app/keys/ed25519.pub

content/docs/development/debugging.mdx

@@ -1,4 +1,5 @@
 import prettier from "eslint-plugin-prettier"
+import next from "@next/eslint-plugin-next"
 import typescriptEslint from "@typescript-eslint/eslint-plugin"
 import globals from "globals"
 import tsParser from "@typescript-eslint/parser"
@@ -18,13 +19,13 @@ const compat = new FlatCompat({
 const config = [
   ...compat.extends(
     "eslint:recommended",
-    "next",
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended"
   ),
   {
     plugins: {
       prettier,
+      next,
       "@typescript-eslint": typescriptEslint
     },