docs/app/layout.tsx at 9ba0f54d88420019b286ca635b0c155ac9746ea6 · authzed/docs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
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 { TocExtraContent } from "@/components/toc-extra-content";
import Scripts from "@/components/scripts";
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/docs"),
    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: null,
          }}
          toc={{ backToTop: true, extraContent: <TocExtraContent /> }}
        >
          <OurLayout>
            <SpeedInsights />
            <Providers>{children}</Providers>
            <Scripts />
          </OurLayout>
        </Layout>
      </body>
    </html>
  );
}