feat: Selfhost docs for services

package.json

@@ -9,15 +9,19 @@
     "start": "next start"
   },
   "dependencies": {
+    "@tailwindcss/postcss": "^4.1.18",
     "next": "^16.0.7",
     "nextra": "^4.6.1",
     "nextra-theme-docs": "^4.6.1",
+    "postcss": "^8.5.6",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "tailwindcss": "^4.1.18"
   },
   "devDependencies": {
     "@types/node": "25.0.3",
     "@types/react": "19.2.7",
-    "pagefind": "^1.3.0"
+    "pagefind": "^1.3.0",
+    "typescript": "5.9.3"
   }
 }

postcss.config.mjs

@@ -0,0 +1,6 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+}
+export default config

src/app/_components/NumberOfContent.jsx

@@ -0,0 +1,47 @@
+import Link from "next/link"
+
+export const NumberOfContent = ({
+  number,
+  title = "",
+  href = "",
+  description,
+  className,
+  isDescLink = false,
+}) => {
+  return (
+    <div className={`flex gap-3 items-start mb-2 ${className}`}>
+      <div className="size-5 text-sm border border-gray-400 rounded-sm text-gray-500 flex items-center justify-center">
+        {number}
+      </div>
+
+      <div className="-translate-y-1 flex flex-col">
+        <Link href={href} className={!!href ? "hover:underline" : ""}>
+          {title}
+        </Link>
+
+        {!isDescLink && <div className="text-xs opacity-70">{description}</div>}
+        {isDescLink && (
+          <Link
+            className="text-sm opacity-70 hover:underline"
+            href={description}
+            target="_blank"
+          >
+            {description}
+          </Link>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export const NumberWithMdx = ({ number, children, className }) => {
+  return (
+    <div className={`flex gap-3 items-start mb-2 ${className}`}>
+      <div className="size-5 text-sm border border-gray-400 rounded-sm text-gray-500 flex items-center justify-center">
+        {number}
+      </div>
+
+      <div className="-translate-y-1">{children}</div>
+    </div>
+  )
+}

src/app/_components/RichCard.jsx

@@ -0,0 +1,62 @@
+"use client"
+
+import Link from "next/link"
+
+export const RichCardOptions = ({ children, className = "" }) => {
+  return (
+    <div className={`mt-4 grid grid-cols-1 gap-6 md:grid-cols-2 ${className}`}>
+      {children}
+    </div>
+  )
+}
+
+export const RichCardOption = ({ icon, title, description, badge, href }) => {
+  return (
+    <Link
+      href={href}
+      className="
+        group block rounded-xl border border-gray-300
+        bg-white p-4 transition
+        hover:-translate-y-0.5 hover:shadow-md
+        dark:border-gray-700 dark:bg-zinc-900
+        hover:border-[#818cf8]
+      "
+    >
+      <div className="flex items-center gap-3">
+        <div
+          className="
+            flex h-10 w-10 items-center justify-center
+            rounded-lg border border-gray-200 bg-gray-50
+            dark:border-gray-700 dark:bg-gray-800
+          "
+        >
+          {icon}
+        </div>
+
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+            {title}
+          </span>
+
+          {badge && (
+            <span
+              className="
+                rounded-full border border-emerald-500
+                bg-emerald-50 px-2 py-0.5
+                text-[10px] font-semibold uppercase tracking-wide
+                text-emerald-600
+                dark:bg-emerald-500/10 dark:text-emerald-400
+              "
+            >
+              {badge}
+            </span>
+          )}
+        </div>
+      </div>
+
+      <p className="mt-3 text-sm text-gray-600 dark:text-gray-400">
+        {description}
+      </p>
+    </Link>
+  )
+}

src/app/globals.css

@@ -1,3 +1,6 @@
+@import "tailwindcss";
+
+@variant dark (&:where(.dark *));
 /* SpaceDF Theme Color Configuration */
 :root {
   --nextra-primary-hue: 255deg;

src/app/layout.jsx

@@ -1,11 +1,11 @@
 /* eslint-env node */
-import {Footer, Layout, Navbar} from "nextra-theme-docs";
-import {Banner, Head} from "nextra/components";
-import {getPageMap} from "nextra/page-map";
-import VersionLabel from "./_components/VersionLabel";
-import ImageZoomProvider from "../components/ImageZoomProvider";
-import "nextra-theme-docs/style.css";
-import "./globals.css";
+import { Footer, Layout, Navbar } from "nextra-theme-docs"
+import { Banner, Head } from "nextra/components"
+import { getPageMap } from "nextra/page-map"
+import VersionLabel from "./_components/VersionLabel"
+import ImageZoomProvider from "../components/ImageZoomProvider"
+import "nextra-theme-docs/style.css"
+import "./globals.css"
 
 export const metadata = {
   metadataBase: new URL("https://spacedf.com"),
@@ -30,13 +30,13 @@ export const metadata = {
     images: ["https://d33et8skld5wvq.cloudfront.net/images/spacedf-og.jpg"],
     site: "https://spacedf.com",
   },
-};
+}
 
-export default async function RootLayout({children}) {
+export default async function RootLayout({ children }) {
   const navbar = (
     <Navbar
       logo={
-        <div style={{display: "flex", alignItems: "center", gap: "8px"}}>
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
           <img
             src="/spacedf_logo.svg"
             alt="SpaceDF"
@@ -53,10 +53,10 @@ export default async function RootLayout({children}) {
       chatLink="https://discord.gg/HxCTyMCzuK"
       projectLink="https://github.com/Space-DF/spacedf-docs"
     />
-  );
-  const pageMap = await getPageMap();
+  )
+  const pageMap = await getPageMap()
   return (
-    <html lang="en" dir="ltr" suppressHydrationWarning>
+    <html lang="en" dir="ltr" suppressHydrationWarning style={{ fontSize: 18 }}>
       <Head
         faviconGlyph="✦"
         color={{
@@ -68,15 +68,15 @@ export default async function RootLayout({children}) {
           },
         }}
       />
-      <body>
+      <body suppressHydrationWarning>
         <ImageZoomProvider>
           <Layout
             banner={
               <Banner storageKey="SpaceDF Launch">
                 🚀 SpaceDF v2025.12.19 is now live!{" "}
                 <a
                   href="/blog/v2025.12.19"
-                  style={{color: "inherit", textDecoration: "underline"}}
+                  style={{ color: "inherit", textDecoration: "underline" }}
                 >
                   Read the release notes
                 </a>
@@ -91,7 +91,7 @@ export default async function RootLayout({children}) {
                     href="https://df.technology"
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{color: "#B7A1F7"}}
+                    style={{ color: "#B7A1F7" }}
                   >
                     Digital Fortress
                   </a>
@@ -101,13 +101,13 @@ export default async function RootLayout({children}) {
             }
             editLink="Edit this page on GitHub"
             docsRepositoryBase="https://github.com/Space-DF/spacedf-docs/blob/main"
-            sidebar={{defaultMenuCollapseLevel: 1}}
+            sidebar={{ defaultMenuCollapseLevel: 1 }}
             pageMap={pageMap}
           >
             {children}
           </Layout>
         </ImageZoomProvider>
       </body>
     </html>
-  );
+  )
 }

src/content/getting-started/_meta.js

@@ -1,4 +1,4 @@
 export default {
-  'cloud-setup': 'Cloud Setup',
-  'self-hosted': 'Self Host'
+  "cloud-setup": "Cloud Setup",
+  "self-hosting": "Self-Hosting",
 }