feat: fumadocs - v4

.github/workflows/deploy.yml

@@ -15,27 +15,31 @@ jobs:
         with:
           fetch-depth: 0
 
+      - uses: actions/setup-node@v5
+        with:
+          node-version: "20"
+
       - name: Setup bun
         uses: oven-sh/setup-bun@v2
 
       - name: Cache bun dependencies
         uses: actions/cache@v4
         with:
           path: ~/.bun/install/cache
-          key: ${{ runner.os }}-bun-web-${{ hashFiles('bun.lockb') }}
+          key: ${{ runner.os }}-bun-web-${{ hashFiles('bun.lock') }}
           restore-keys: |
             ${{ runner.os }}-bun-web-
 
       - name: Install dependencies
-        run: bun install
+        run: bun install --frozen-lockfile
 
       - name: Build website
         run: bun run build
 
       - name: Upload Build Artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: build
+          path: build/client
 
   deploy:
     name: Deploy to GitHub Pages

.gitignore

@@ -5,7 +5,7 @@
 /build
 
 # Generated files
-.docusaurus
+.react-router
 .cache-loader
 
 # Misc

.prettierignore

@@ -1,5 +1,5 @@
-# Docusaurus build output
-.docusaurus
+# React router build output
+.react-router
 
 # Node modules
 node_modules

.vscode/settings.json

@@ -1,3 +1,13 @@
 {
-  "cSpell.enabled": true
+  "cSpell.enabled": true,
+  "cSpell.words": [
+    "appstore",
+    "Healthcheck",
+    "homelab",
+    "homeserver",
+    "Runtipi",
+    "Tinyauth",
+    "TOTP",
+    "Traefik"
+  ]
 }

app/app.css

@@ -0,0 +1,3 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';

app/cli.json

@@ -0,0 +1,11 @@
+{
+  "aliases": {
+    "uiDir": "./components/ui",
+    "componentsDir": "./components",
+    "blockDir": "./components",
+    "cssDir": "./styles",
+    "libDir": "./lib"
+  },
+  "baseDir": "",
+  "commands": {}
+}

app/components/card.tsx

@@ -0,0 +1,24 @@
+interface FeatureCardProps {
+  title: string;
+  description: string;
+  icon?: React.ReactNode;
+  children?: React.ReactNode;
+}
+
+export const Card = ({
+  title,
+  description,
+  icon,
+  children,
+}: FeatureCardProps) => {
+  return (
+    <div className="flex flex-col gap-4 p-4 shadow-xs border border-fd-border rounded-md hover:border-fd-accent transition-colors max-w-xs">
+      {icon}
+      <div className="flex flex-col gap-2">
+        <p className="text-md font-semibold">{title}</p>
+        <p className="text-sm">{description}</p>
+      </div>
+      {children}
+    </div>
+  );
+};

app/components/discord.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function IcBaselineDiscord(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"
+      ></path>
+    </svg>
+  );
+}

app/components/github.tsx

@@ -0,0 +1,18 @@
+import type { SVGProps } from "react";
+
+export function MdiGithub(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        fill="currentColor"
+        d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"
+      ></path>
+    </svg>
+  );
+}

app/components/language-toggle.tsx

@@ -0,0 +1,68 @@
+'use client';
+import { type ButtonHTMLAttributes, type HTMLAttributes } from 'react';
+import { useI18n } from 'fumadocs-ui/contexts/i18n';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from './ui/popover';
+import { cn } from '../lib/cn';
+import { buttonVariants } from './ui/button';
+
+export type LanguageSelectProps = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export function LanguageToggle(props: LanguageSelectProps): React.ReactElement {
+  const context = useI18n();
+  if (!context.locales) throw new Error('Missing `<I18nProvider />`');
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        aria-label={context.text.chooseLanguage}
+        {...props}
+        className={cn(
+          buttonVariants({
+            color: 'ghost',
+            className: 'gap-1.5 p-1.5',
+          }),
+          props.className,
+        )}
+      >
+        {props.children}
+      </PopoverTrigger>
+      <PopoverContent className="flex flex-col overflow-hidden p-0">
+        <p className="mb-1 p-2 text-xs font-medium text-fd-muted-foreground">
+          {context.text.chooseLanguage}
+        </p>
+        {context.locales.map((item) => (
+          <button
+            key={item.locale}
+            type="button"
+            className={cn(
+              'p-2 text-start text-sm',
+              item.locale === context.locale
+                ? 'bg-fd-primary/10 font-medium text-fd-primary'
+                : 'hover:bg-fd-accent hover:text-fd-accent-foreground',
+            )}
+            onClick={() => {
+              context.onChange?.(item.locale);
+            }}
+          >
+            {item.name}
+          </button>
+        ))}
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export function LanguageToggleText(
+  props: HTMLAttributes<HTMLSpanElement>,
+): React.ReactElement {
+  const context = useI18n();
+  const text = context.locales?.find(
+    (item) => item.locale === context.locale,
+  )?.name;
+
+  return <span {...props}>{text}</span>;
+}

app/components/layout/docs/client.tsx

@@ -0,0 +1,81 @@
+'use client';
+
+import { Sidebar as SidebarIcon } from 'lucide-react';
+import { type ComponentProps } from 'react';
+import { cn } from '../../../lib/cn';
+import { buttonVariants } from '../../ui/button';
+import { useSidebar } from 'fumadocs-ui/contexts/sidebar';
+import { useNav } from 'fumadocs-ui/contexts/layout';
+import { SidebarCollapseTrigger } from '../../sidebar';
+import { SearchToggle } from '../../search-toggle';
+
+export function Navbar(props: ComponentProps<'header'>) {
+  const { isTransparent } = useNav();
+
+  return (
+    <header
+      id="nd-subnav"
+      {...props}
+      className={cn(
+        'fixed top-(--fd-banner-height) left-0 right-(--removed-body-scroll-bar-size,0) z-30 flex items-center ps-4 pe-2.5 border-b transition-colors backdrop-blur-sm',
+        !isTransparent && 'bg-fd-background/80',
+        props.className,
+      )}
+    >
+      {props.children}
+    </header>
+  );
+}
+
+export function LayoutBody(props: ComponentProps<'main'>) {
+  const { collapsed } = useSidebar();
+
+  return (
+    <main
+      id="nd-docs-layout"
+      {...props}
+      className={cn(
+        'flex flex-1 flex-col pt-(--fd-nav-height) transition-[padding] fd-default-layout',
+        !collapsed && 'mx-(--fd-layout-offset)',
+        props.className,
+      )}
+      style={{
+        ...props.style,
+        paddingInlineStart: collapsed
+          ? 'min(calc(100vw - var(--fd-page-width)), var(--fd-sidebar-width))'
+          : 'var(--fd-sidebar-width)',
+      }}
+    >
+      {props.children}
+    </main>
+  );
+}
+
+export function CollapsibleControl() {
+  const { collapsed } = useSidebar();
+
+  return (
+    <div
+      className={cn(
+        'fixed flex shadow-lg transition-opacity rounded-xl p-0.5 border bg-fd-muted text-fd-muted-foreground z-10 max-md:hidden xl:start-4 max-xl:end-4',
+        !collapsed && 'pointer-events-none opacity-0',
+      )}
+      style={{
+        top: 'calc(var(--fd-banner-height) + var(--fd-tocnav-height) + var(--spacing) * 4)',
+      }}
+    >
+      <SidebarCollapseTrigger
+        className={cn(
+          buttonVariants({
+            color: 'ghost',
+            size: 'icon-sm',
+            className: 'rounded-lg',
+          }),
+        )}
+      >
+        <SidebarIcon />
+      </SidebarCollapseTrigger>
+      <SearchToggle className="rounded-lg" hideIfDisabled />
+    </div>
+  );
+}