Staging to Prod

app/(home)/layout.tsx

@@ -1,6 +1,21 @@
 import { HomeLayout } from "fumadocs-ui/home-layout"
 import type { ReactNode } from "react"
 import { baseOptions } from "../layout.config"
+import { Metadata } from "next"
+
+const SITE_URL = "https://docs.minima.global"
+
+export const metadata: Metadata = {
+  metadataBase: new URL(SITE_URL),
+  title: {
+    default: "Docs",
+    template: "%s | Docs",
+  },
+  description: "The official documentation for Minima",
+  twitter: {
+    card: "summary_large_image",
+  },
+}
 
 export default function Layout({ children }: { children: ReactNode }) {
   return <HomeLayout {...baseOptions}>{children}</HomeLayout>

app/(home)/page.tsx

@@ -1,5 +1,11 @@
-import { DocsHomePage } from "@/components/homepage"
-
-export default function HomePage() {
-  return <DocsHomePage />
-}
+import { DocsHomePage } from "@/components/homepage"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Minima Docs",
+  description: "The official documentation for Minima",
+}
+
+export default function HomePage() {
+  return <DocsHomePage />
+}

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

@@ -3,10 +3,6 @@ import { DocsBody, DocsPage } from "fumadocs-ui/page"
 import type { Metadata } from "next"
 import { notFound } from "next/navigation"
 
-import { getGithubLastEdit } from 'fumadocs-core/server';
-
-
-
 export default async function Page({
   params,
 }: {
@@ -20,27 +16,28 @@ export default async function Page({
 
   const MDX = page.data.exports.default
 
-  const path = `/content/docs/${page.file.path}`;
+  const path = `/content/docs/${page.file.path}`
 
   /*const time = await getGithubLastEdit({
     owner: "minima-global",
     repo: "docs",
     path: path,
   });*/
 
-
   /*const lastUpdate = time?.toLocaleDateString("en-US", {
     month: "long",
     day: "numeric",
     year: "numeric",
   });*/
 
   return (
-    <DocsPage toc={page.data.exports.toc} full={page.data.full}
-    tableOfContent={{
-      style:'clerk',
-      single:false
-    }}
+    <DocsPage
+      toc={page.data.exports.toc}
+      full={page.data.full}
+      tableOfContent={{
+        style: "clerk",
+        single: false,
+      }}
       editOnGithub={{
         owner: "minima-global",
         repo: "docs",

app/docs/layout.tsx

@@ -1,6 +1,7 @@
 import { DocsLayout } from "fumadocs-ui/layout"
 import type { ReactNode } from "react"
 import { docsOptions } from "../layout.config"
+import Footer from "@/components/footer"
 export default function Layout({ children }: { children: ReactNode }) {
   return <DocsLayout {...docsOptions}>{children}</DocsLayout>
 }

app/global.css

@@ -31,6 +31,17 @@
   --learn-color: 161 40% 27%;
   --run-a-node-color: 215 100% 34%;
   --user-guides-color: 10 85% 55%;
+  --orange: 19, 100%, 51%;
+  --light-orange: 25, 100%, 59%;
+  --lighter-orange: 32, 100%, 64%;
+
+  --grey: 240, 6%, 59%;
+  --grey-10: 240, 5%, 96%;
+  --grey-20: 240, 5%, 92%;
+  --grey-40: 240, 6%, 84%;
+  --grey-60: 240, 4%, 48%;
+  --grey-80: 240, 5%, 67%;
+  --grey-highlight: 240, 12%, 22%;
 }
 
 .dark {
@@ -63,19 +74,18 @@
 }
 
 .box {
-  border: 3px solid #615a5400;
+  border: 1px solid #615a5400;
   border-radius: 0.75rem;
   animation: 5s rotate linear infinite;
   background:
     linear-gradient(#fbfbfb, #fbfbfb) padding-box,
-    linear-gradient(var(--angle), #fbfbfb, #a5a3a1) border-box;
-
+    linear-gradient(var(--angle), #fbfbfb, #9d9898) border-box;
 }
 
 .dark\:box:is(.dark *) {
   background:
     linear-gradient(#000000, #000000) padding-box,
-    linear-gradient(var(--angle), #070707, #504f4e) border-box;
+    linear-gradient(var(--angle), #070707, #9d9898) border-box;
 }
 
 @keyframes rotate {
@@ -90,5 +100,10 @@
   inherits: false;
 }
 
-
-
+[data-theme-toggle] {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 65px;
+}

app/layout.client.tsx

@@ -1,53 +1,65 @@
-"use client"
-import { cva } from "class-variance-authority"
-import Link from "next/link"
-import { useParams } from "next/navigation"
-import { ReactNode } from "react"
-import { modes } from "./lib/modes"
-import { cn } from "./lib/utils"
-
-const itemVariants = cva(
-  "rounded-md px-2 py-1 transition-colors hover:text-fd-accent-foreground",
-  {
-    variants: {
-      active: {
-        true: "bg-fd-accent text-fd-accent-foreground",
-      },
-    },
-  }
-)
-
-export function Body({
-  children,
-}: {
-  children: ReactNode
-}): React.ReactElement {
-  const mode = useMode()
-
-  return (
-    <body className={cn(mode, "flex min-h-screen flex-col")}>{children}</body>
-  )
-}
-
-export function useMode(): string | undefined {
-  const { slug } = useParams()
-  return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined
-}
-
-export function NavChildren(): React.ReactElement {
-  const mode = useMode()
-
-  return (
-    <div className="rounded-md border  p-1 text-sm text-fd-muted-foreground max-md:absolute max-md:left-1/2 max-md:-translate-x-1/2 hidden lg:block ">
-      {modes.map((m) => (
-          <Link
-            key={m.param}
-            href={`/docs/${m.param}`}
-            className={cn(itemVariants({ active: mode === m.param }))}
-          >
-            {m.name}
-          </Link>
-      ))}
-    </div>
-  )
-}
+"use client"
+import { cva } from "class-variance-authority"
+import Link from "next/link"
+import { useParams, usePathname } from "next/navigation"
+import { ReactNode, useEffect, useState } from "react"
+import { modes } from "./lib/modes"
+import { cn } from "./lib/utils"
+import Footer from "@/components/footer"
+
+const itemVariants = cva(
+  "rounded-md px-3 py-1 transition-colors hover:text-fd-accent-foreground",
+  {
+    variants: {
+      active: {
+        true: "bg-fd-accent text-fd-accent-foreground",
+      },
+    },
+  }
+)
+
+export function Body({
+  children,
+}: {
+  children: ReactNode
+}): React.ReactElement {
+  const mode = useMode()
+  const isHome = usePathname() === "/"
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return (
+    <body
+      className={cn(mode, "flex min-h-screen flex-col pt-0", isHome && "pt-3")}
+    >
+      {children}
+      {mounted && <Footer />}
+    </body>
+  )
+}
+
+export function useMode(): string | undefined {
+  const { slug } = useParams()
+  return Array.isArray(slug) && slug.length > 0 ? slug[0] : undefined
+}
+
+export function NavChildren(): React.ReactElement {
+  const mode = useMode()
+
+  return (
+    <div className="rounded-md border  p-1 text-sm text-fd-muted-foreground max-md:absolute max-md:left-1/2 max-md:-translate-x-1/2 hidden lg:block  ">
+      {modes.map((m) => (
+        <Link
+          key={m.param}
+          href={`/docs/${m.param}`}
+          className={cn(itemVariants({ active: mode === m.param }))}
+        >
+          {m.name}
+        </Link>
+      ))}
+    </div>
+  )
+}

app/layout.config.tsx

@@ -2,7 +2,6 @@ import { pageTree } from "@/app/source"
 import { RootToggle } from "fumadocs-ui/components/layout/root-toggle"
 import type { HomeLayoutProps } from "fumadocs-ui/home-layout"
 import { type DocsLayoutProps } from "fumadocs-ui/layout"
-import { Logo } from "@/components/logo"
 import { NavChildren } from "./layout.client"
 import { modes } from "./lib/modes"
 
@@ -12,14 +11,21 @@ export const baseOptions: HomeLayoutProps = {
   nav: {
     url: "/",
     title: (
-
-        <Logo
-          props={{
-            className: "h-[30px] w-[120px] -mt-3",
-          }}
-          pathClassName="dark:fill-white fill-black"
-        />
-
+      <div className="flex items-center gap-2 justify-center -mt-2">
+        <svg
+          width="40"
+          height="40"
+          viewBox="0 0 37 33"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={`dark:fill-white fill-black transition-colors`}
+        >
+          <path
+            d="M28.8727 9.20966L27.2806 16.2518L25.2445 7.7553L18.1105 4.86191L16.1816 13.3737L14.4823 3.39225L7.34831 0.51416L0 32.9998H7.79227L10.0427 23.0183L11.742 32.9998H19.5496L21.4632 24.488L23.4993 32.9998H31.2915L36.022 12.0877L28.8727 9.20966Z"
+            fill="#currentColor"
+          />
+        </svg>
+      </div>
     ),
     transparentMode: "top",
     children: <NavChildren />,
@@ -31,7 +37,8 @@ export const docsOptions: DocsLayoutProps = {
   ...baseOptions,
   tree: pageTree,
   sidebar: {
-    collapsible: false,
+    collapsible: true,
+    defaultOpenLevel: 1,
     banner: (
       <RootToggle
         options={modes.map((mode) => ({

app/layout.tsx

@@ -1,26 +1,29 @@
-import { Body } from "@/app/layout.client"
-import { Inter } from "next/font/google"
-import type { ReactNode } from "react"
-import { Provider } from "@/components/provider"
-
-import "./global.css"
-const inter = Inter({
-  subsets: ["latin"],
-})
-
-export default function Layout({ children }: { children: ReactNode }) {
-  return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <Body>
-        <Provider>
-         {/**
-          *  <Banner className=" z-[9999] hidden lg:flex">
-            Minima Docs v2 is here! 🎉
-          </Banner>
-          */}
-          {children}
-        </Provider>
-      </Body>
-    </html>
-  )
-}
+import { Body } from "@/app/layout.client"
+import { Inter } from "next/font/google"
+import type { ReactNode } from "react"
+import { Provider } from "@/components/provider"
+import { headers } from "next/headers"
+import "./global.css"
+const inter = Inter({
+  subsets: ["latin"],
+})
+
+export const dynamic = "force-dynamic"
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const nonce = headers().get("x-nonce")
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <Body>
+        <Provider nonce={nonce ?? undefined}>
+          {/**
+          *  <Banner className=" z-[9999] hidden lg:flex">
+            Minima Docs v2 is here! 🎉
+          </Banner>
+          */}
+          {children}
+        </Provider>
+      </Body>
+    </html>
+  )
+}