graphql.github.io/theme.config.tsx at source · graphql/graphql.github.io · 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
105
106
107
108
109
110
111
import { DocsThemeConfig, useConfig } from "nextra-theme-docs"
import { useRouter } from "next/router"

import { Navbar } from "@/components/navbar/navbar"
import { mdxComponents } from "@/_design-system/mdx-components"
import { GraphQLWordmarkLogo } from "@/icons"
import { Footer } from "@/components/footer"
import { NextraMdxWrapper } from "@/components/nextra-mdx-wrapper"

const graphQLLogo = (
  <GraphQLWordmarkLogo className="nextra-logo h-6" title="GraphQL" />
)

const absoluteUrl =
  `https://${process.env.VERCEL_URL}` ||
  process.env.__NEXT_PRIVATE_ORIGIN ||
  "http://localhost:3000"

export default {
  backgroundColor: {
    light: "251,251,249",
    dark: "15,15,12",
  },
  head: function useHead() {
    const { frontMatter, title: pageTitle } = useConfig()
    const { asPath } = useRouter()

    const title = `${pageTitle}${asPath === "/" ? "" : " | GraphQL"}`
    const { description, canonical, image } = frontMatter
    return (
      <>
        <title>{title}</title>
        <meta property="og:title" content={title} key="meta-og-title" />
        {description && (
          <>
            <meta
              name="description"
              content={description}
              key="meta-description"
            />
            <meta
              property="og:description"
              content={description}
              key="meta-og-description"
            />
          </>
        )}
        {canonical && <link rel="canonical" href={canonical} />}

        <meta property="twitter:site" content="@graphql" />

        {image ? (
          <>
            {/* if there is an OG image, we show a bigger card */}
            <meta property="og:image" content={image} />
            <meta name="twitter:card" content="summary_large_image" />
          </>
        ) : (
          <>
            <meta
              property="og:image"
              content={`${absoluteUrl}/img/og-logo.png`}
            />
            <meta name="twitter:card" content="summary" />
          </>
        )}
      </>
    )
  },
  // Hidden for now, new design is done, but not implemented yet.
  // banner: {
  //   content: (
  //     <>
  //     📣 GraphQLConf 2025 • Sept 08-10 • Amsterdam •{" "}
  //     <NextLink
  //       href="/conf/2025"
  //       className="underline after:font-sans after:content-['_→']"
  //     >
  //       Register Today!
  //     </NextLink>
  //   </>
  // )
  //   key: "graphqlconf-2024",
  // },
  logo: graphQLLogo,
  docsRepositoryBase:
    "https://github.com/graphql/graphql.github.io/tree/source",
  color: {
    hue: 319,
    lightness: {
      light: 44.1,
      dark: 90,
    },
  },
  sidebar: {
    defaultMenuCollapseLevel: 1,
  },
  footer: {
    component: () => <Footer />,
  },
  navbar: {
    component: Navbar,
  },
  toc: {
    backToTop: true,
  },
  search: {
    placeholder: "Search…",
  },
  components: { ...mdxComponents, wrapper: NextraMdxWrapper },
} satisfies DocsThemeConfig