Nextra v4 upgrade

.gitignore

@@ -4,6 +4,9 @@ node_modules/*
 .next
 .env*
 tsconfig.tsbuildinfo
+_pagefind/
+out/
+pagefind.log
 
 # Generated
 public/robots.txt

.pre-commit-config.yaml

@@ -1,3 +1,4 @@
+---
 repos:
   - repo: "https://github.com/DavidAnson/markdownlint-cli2"
     rev: "v0.14.0"

.yamllint

@@ -6,6 +6,7 @@ yaml-files:
   - ".yamllint"
 ignore: |
   pnpm-lock.yaml
+  pnpm-workspace.yaml
   node_modules/
 extends: "default"
 rules:

pages/_meta.ts → app/_meta.ts

@@ -1,3 +1,5 @@
+import type { MetaRecord } from "nextra";
+
 export default {
   index: {
     title: "Documentation",
@@ -19,4 +21,4 @@ export default {
     title: "MCP",
     type: "page",
   },
-};
+} satisfies MetaRecord;

pages/authzed/api/_meta.ts → app/authzed/api/_meta.ts

@@ -1,15 +1,15 @@
+import type { MetaRecord } from "nextra";
+
 export default {
   "grpc-api": {
     title: "gRPC API Reference",
     href: "https://buf.build/authzed/api/docs/main:authzed.api.v1",
-    newWindow: true,
   },
   "http-api": {
     title: "HTTP API Reference",
   },
   "cloud-api": {
     title: "Cloud API Reference",
     href: "https://www.postman.com/authzed/spicedb/collection/5fm402n/authzed-cloud-api",
-    newWindow: true,
   },
-};
+} satisfies MetaRecord;

app/authzed/api/http-api/page.mdx

@@ -0,0 +1,5 @@
+import { Swagger } from "@/components/swagger";
+
+# HTTP API Documentation
+
+<Swagger />

pages/authzed/concepts/workload-isolation.mdx → app/authzed/concepts/workload-isolation/page.mdx

@@ -1,4 +1,4 @@
-import YouTube from "react-youtube";
+import YouTube from "@/components/youtube-wrapper";
 
 # Workload Isolation
 

pages/authzed/guides/cloud.mdx → app/authzed/guides/cloud/page.mdx

@@ -1,5 +1,5 @@
 import { Callout } from "nextra/components";
-import YouTube from "react-youtube";
+import YouTube from "@/components/youtube-wrapper";
 
 # Getting Started with AuthZed Cloud
 

pages/authzed/links/_meta.ts → app/authzed/links/_meta.ts

@@ -1,22 +1,20 @@
+import type { MetaRecord } from "nextra";
+
 export default {
   schedule: {
     title: "Schedule a Call",
     href: "https://authzed.com/call?utm_source=docs",
-    newWindow: true,
   },
   changelog: {
     title: "Changelog",
     href: "https://changelog.authzed.cloud?utm_source=docs",
-    newWindow: true,
   },
   "security-policies": {
     title: "Security Policies",
     href: "https://security.authzed.com?utm_source=docs",
-    newWindow: true,
   },
   status: {
     title: "Service Status Page",
     href: "https://status.authzed.com?utm_source=docs",
-    newWindow: true,
   },
-};
+} satisfies MetaRecord;

app/globals.css

@@ -0,0 +1,95 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:is(html[class~="dark"] *));
+
+@theme {
+  --breakpoint-*: initial;
+  --breakpoint-sm: 640px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 1024px;
+  --breakpoint-xl: 1280px;
+  --breakpoint-2xl: 1536px;
+
+  --text-*: initial;
+  --text-xs: 0.75rem;
+  --text-sm: 0.875rem;
+  --text-base: 1rem;
+  --text-lg: 1.125rem;
+  --text-xl: 1.25rem;
+  --text-2xl: 1.5rem;
+  --text-3xl: 1.875rem;
+  --text-4xl: 2.25rem;
+  --text-5xl: 3rem;
+  --text-6xl: 4rem;
+
+  --tracking-*: initial;
+  --tracking-tight: -0.015em;
+
+  --color-dark: #111;
+  --color-transparent: transparent;
+  --color-current: currentColor;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-primary-50: #fafafa;
+  --color-primary-100: #f5f5f5;
+  --color-primary-200: #e5e5e5;
+  --color-primary-300: #d4d4d4;
+  --color-primary-400: #a3a3a3;
+  --color-primary-500: #737373;
+  --color-primary-600: #525252;
+  --color-primary-700: #404040;
+  --color-primary-800: #262626;
+  --color-primary-900: #171717;
+  --color-primary-950: #0a0a0a;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+body {
+  font-feature-settings:
+    "rlig" 1,
+    "calt" 1;
+}
+
+/* https://github.com/tjallingt/react-youtube/issues/242 */
+.youtubeContainer {
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: 56.25%;
+  overflow: hidden;
+  margin-bottom: 50px;
+}
+
+.youtubeContainer iframe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.swagger-ui .information-container {
+  display: none;
+}
+
+.swagger-ui .scheme-container {
+  display: none;
+}

app/layout.tsx

@@ -0,0 +1,109 @@
+import { Layout, Navbar, Footer } from "nextra-theme-docs";
+import Link from "next/link";
+import { Head, Search, Banner } from "nextra/components";
+import { getPageMap } from "nextra/page-map";
+import "nextra-theme-docs/style.css";
+import Logo from "@/components/icons/logo.svg";
+import LogoIcon from "@/components/icons/logo-icon.svg";
+import BannerContents from "@/components/banner";
+import Providers from "@/components/providers";
+import { TocCTA } from "@/components/cta";
+import type { Metadata, ResolvingMetadata } from "next";
+import { SpeedInsights } from "@vercel/speed-insights/next";
+import "./globals.css";
+
+import { default as OurLayout } from "@/components/layout";
+
+export const generateMetadata = async (
+  _props: unknown,
+  parentPromise: ResolvingMetadata,
+): Promise<Metadata> => {
+  const { description } = await parentPromise;
+  return {
+    metadataBase: new URL("https://authzed.com"),
+    title: {
+      default: "Authzed Docs",
+      template: "%s - Authzed Docs",
+    },
+    description: "Welcome to the SpiceDB and AuthZed docs site.",
+    openGraph: {
+      title: {
+        default: "Authzed Docs",
+        template: "%s - Authzed Docs",
+      },
+      description: description ?? undefined,
+    },
+    alternates: {
+      // This is how you say "the current page is the canonical one",
+      // using the metadataBase field.
+      canonical: "./",
+    },
+  };
+};
+
+export default async function RootLayout({ children }) {
+  const pageMap = await getPageMap();
+  const enableSearch =
+    process.env.NEXT_PUBLIC_ENABLE_SEARCH_BLOG_INTEGRATION === "true";
+
+  const navbar = (
+    <Navbar
+      logo={<Logo />}
+      logoLink="https://authzed.com"
+      chatLink="https://authzed.com/discord"
+      projectLink="https://github.com/authzed/spicedb"
+    />
+  );
+
+  return (
+    <html lang="en" dir="ltr" suppressHydrationWarning>
+      <Head
+        color={{
+          hue: { dark: 45, light: 290 },
+          saturation: { dark: 100, light: 100 },
+        }}
+      />
+      <body>
+        <Layout
+          banner={
+            <Banner dismissible={false}>
+              <BannerContents />
+            </Banner>
+          }
+          navbar={navbar}
+          footer={
+            <Footer>
+              <Link href="https://authzed.com" title="AuthZed">
+                <LogoIcon height={20} />
+              </Link>{" "}
+              &copy; {new Date().getFullYear()} AuthZed.
+            </Footer>
+          }
+          darkMode
+          docsRepositoryBase="https://github.com/authzed/docs/tree/main"
+          search={enableSearch && <Search />}
+          sidebar={{
+            defaultMenuCollapseLevel: 1,
+            toggleButton: true,
+          }}
+          pageMap={pageMap}
+          feedback={{
+            content: (
+              <span>
+                Something unclear?
+                <br />
+                Create an issue →
+              </span>
+            ),
+          }}
+          toc={{ backToTop: true, extraContent: <TocCTA /> }}
+        >
+          <OurLayout>
+            <SpeedInsights />
+            <Providers>{children}</Providers>
+          </OurLayout>
+        </Layout>
+      </body>
+    </html>
+  );
+}

pages/index.mdx → app/page.mdx

@@ -1,4 +1,6 @@
-#
+---
+title: Authzed Docs
+---
 
 Browse documentation for **SpiceDB** or **AuthZed Products** by selecting one below.
 
@@ -9,13 +11,13 @@ import { Cards } from "nextra/components";
     image
     arrow
     title="View"
-    href="spicedb/getting-started/discovering-spicedb"
+    href="/spicedb/getting-started/discovering-spicedb"
   >
     <div className="p-4">
       <h3>SpiceDB Documentation</h3>
     </div>
   </Cards.Card>
-  <Cards.Card image arrow title="View" href="authzed/guides/picking-a-product">
+  <Cards.Card image arrow title="View" href="/authzed/guides/picking-a-product">
     <div className="p-4">
       <h3>AuthZed Products Documentation</h3>
     </div>

pages/spicedb/api/_meta.ts → app/spicedb/api/_meta.ts

@@ -1,15 +1,15 @@
+import type { MetaRecord } from "nextra";
+
 export default {
   "grpc-api": {
     title: "gRPC API Reference",
     href: "https://buf.build/authzed/api/docs/main:authzed.api.v1",
-    newWindow: true,
   },
   "http-api": {
     title: "HTTP API Reference",
   },
   postman: {
     title: "Postman Collection",
     href: "https://www.postman.com/authzed/workspace/spicedb/overview",
-    newWindow: true,
   },
-};
+} satisfies MetaRecord;

app/spicedb/api/http-api/page.mdx

@@ -0,0 +1,5 @@
+import { Swagger } from "@/components/swagger";
+
+# HTTP API Documentation
+
+<Swagger />