Debug meta issues again

Author: tstirrat15

.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:

TODO.md

@@ -5,7 +5,8 @@
 - [x] check behavior of search bar, especially around docs results ranking higher than non-docs
 - [x] make sure that search bar works (check pagefind)
 - [x] finish pagefind thought
-- [ ] make styling of swagger page look nice
-- [ ] ensure that metadata is still showing up as expected
-- [ ] do migration to app folder
-- [ ] make sure that app.tsx is rendering properly
+- [ ] make styling of swagger page look nice (?)
+- [x] ensure that metadata is still showing up as expected
+- [x] do migration to app folder
+- [ ] make sure that app.tsx is rendering properly (not sure what i meant by this)
+- [ ] rebase

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

@@ -1,4 +1,4 @@
-import { Swagger } from "../../../components/swagger";
+import { Swagger } from "@/components/swagger";
 
 # HTTP API Documentation
 

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

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

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
 

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/layout.tsx

@@ -8,20 +8,38 @@ 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 } from "next";
+import type { Metadata, ResolvingMetadata } from "next";
 import { SpeedInsights } from "@vercel/speed-insights/next";
 import "./globals.css";
 
 import { default as OurLayout } from "@/components/layout";
 
 // TODO: make sure this is all right
-export const metadata: Metadata = {
-  metadataBase: new URL("https://authzed.com"),
-  title: {
-    default: "Authzed Docs",
-    template: "%s - Authzed Docs",
-  },
-  description: "Welcome to the SpiceDB and AuthZed docs site.",
+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 }) {
@@ -37,25 +55,6 @@ export default async function RootLayout({ children }) {
       projectLink="https://github.com/authzed/spicedb"
     />
   );
-  // TODO
-  /*
-    const { title: titleContent, frontMatter } = useConfig();
-    const desc =
-      frontMatter.description ||
-      ;
-    const resolvedTitle = titleContent
-      ? `${titleContent} - Authzed Docs`
-      : "Authzed Docs";
-
-        <meta property="og:title" content={resolvedTitle} />
-        <meta property="og:description" content={desc} />
-        <link
-          rel="canonical"
-          href={`https://authzed.com${
-            process.env.NEXT_PUBLIC_BASE_DIR ?? ""
-          }${asPath}`}
-        />
-   */
 
   return (
     <html lang="en" dir="ltr" suppressHydrationWarning>
@@ -65,11 +64,7 @@ export default async function RootLayout({ children }) {
           saturation: { dark: 100, light: 100 },
         }}
       />
-      <body
-        // This is how we tell pagefind that this is a doc page
-        // which should rank higher than blogs in search results.
-        data-pagefind-sort="internal:1"
-      >
+      <body>
         <Layout
           banner={
             <Banner dismissible={false}>

app/page.mdx

@@ -1,4 +1,6 @@
-#
+---
+title: Authzed Docs
+---
 
 Browse documentation for **SpiceDB** or **AuthZed Products** by selecting one below.