docs: migrate documentation to Fumadocs

2026-09-10 20:39:26 +02:00
1 parent 6cca757493
commit 6704ef2c13
@@ -0,0 +1,108 @@
+import {
+  IconArrowRight,
+  IconBook2,
+  IconBraces,
+  IconCopy,
+  IconPlugConnected,
+  IconSearch,
+  IconTools,
+} from "@tabler/icons-react";
+import Link from "next/link";
+
+import { SectionContainer } from "@/components/pages/home/container/section-container";
+
+const destinations = [
+  {
+    href: "/docs/getting-started",
+    icon: IconBook2,
+    title: "Install Homarr",
+    description: "Choose a platform and get your first instance running.",
+  },
+  {
+    href: "/docs/integrations",
+    icon: IconPlugConnected,
+    title: "Connect integrations",
+    description: "Add the services Homarr can monitor and control.",
+  },
+  {
+    href: "/docs/widgets",
+    icon: IconTools,
+    title: "Configure widgets",
+    description: "See available widgets and their configuration.",
+  },
+  {
+    href: "/api-reference",
+    icon: IconBraces,
+    title: "Explore the API",
+    description: "Use the generated reference for supported endpoints.",
+  },
+] as const;
+
+export function DocsGateway() {
+  return (
+    <section className="py-12 sm:py-16" aria-labelledby="docs-gateway-title">
+      <SectionContainer>
+        <div className="grid overflow-hidden border bg-fd-card lg:grid-cols-[0.9fr_1.1fr]">
+          <div className="flex flex-col justify-between border-b p-7 sm:p-10 lg:border-b-0 lg:border-r">
+            <div>
+              <h2 id="docs-gateway-title" className="m-0 text-3xl font-bold tracking-tight sm:text-4xl">
+                Documentation
+              </h2>
+              <p className="mb-0 mt-5 max-w-lg leading-7 text-fd-muted-foreground">
+                Choose a starting point, search the documentation, or use the Markdown and LLM-readable versions.
+              </p>
+            </div>
+
+            <div className="mt-10 grid gap-3 text-sm">
+              <div className="flex items-center gap-3 text-fd-muted-foreground">
+                <IconSearch aria-hidden="true" size={18} />
+                <span>Search all documentation</span>
+              </div>
+              <div className="flex items-center gap-3 text-fd-muted-foreground">
+                <IconCopy aria-hidden="true" size={18} />
+                <span>Copy or view each guide as Markdown</span>
+              </div>
+              <div className="flex flex-wrap gap-2 pt-2">
+                <a
+                  className="rounded-md bg-fd-muted px-2.5 py-1 font-mono text-xs hover:text-fd-primary"
+                  href="/llms.txt"
+                >
+                  /llms.txt
+                </a>
+                <a
+                  className="rounded-md bg-fd-muted px-2.5 py-1 font-mono text-xs hover:text-fd-primary"
+                  href="/llms-full.txt"
+                >
+                  /llms-full.txt
+                </a>
+              </div>
+            </div>
+          </div>
+
+          <nav aria-label="Documentation starting points">
+            {destinations.map(({ href, icon: Icon, title, description }) => (
+              <Link
+                key={href}
+                href={href}
+                className="group grid grid-cols-[2.5rem_1fr_auto] items-center gap-4 border-b p-5 text-fd-foreground transition-colors last:border-b-0 hover:bg-fd-muted/70 sm:p-6"
+              >
+                <span className="flex size-10 items-center justify-center rounded-md bg-fd-muted text-fd-primary">
+                  <Icon aria-hidden="true" size={21} />
+                </span>
+                <span>
+                  <strong className="block text-sm font-semibold">{title}</strong>
+                  <span className="mt-1 block text-sm leading-5 text-fd-muted-foreground">{description}</span>
+                </span>
+                <IconArrowRight
+                  aria-hidden="true"
+                  className="text-fd-muted-foreground transition-transform group-hover:translate-x-1 group-hover:text-fd-primary"
+                  size={19}
+                />
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </SectionContainer>
+    </section>
+  );
+}