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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
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"
import { getSocialImage, SITE_DESCRIPTION, SITE_URL } from "@/social-metadata"

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

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

    const title = `${pageTitle}${asPath === "/" ? "" : " | GraphQL"}`
    const { description = SITE_DESCRIPTION, canonical, image } = frontMatter
    const pageUrl = new URL(asPath.split(/[?#]/)[0], SITE_URL).href
    const socialImage = getSocialImage({
      path: new URL(pageUrl).pathname,
      title: frontMatter.title || pageTitle,
      description: frontMatter.description,
      byline:
        typeof frontMatter.byline === "string" ? frontMatter.byline : undefined,
      date: typeof frontMatter.date === "string" ? frontMatter.date : undefined,
    })
    const imageUrl = new URL(image || socialImage.url, SITE_URL).href
    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="og:url" content={canonical || pageUrl} />
        <meta property="og:site_name" content="GraphQL" />
        <meta
          property="og:type"
          content={pathname.startsWith("/blog/") ? "article" : "website"}
        />
        <meta property="og:image" content={imageUrl} />
        {!image && (
          <>
            <meta property="og:image:type" content={socialImage.type} />
            <meta
              property="og:image:width"
              content={String(socialImage.width)}
            />
            <meta
              property="og:image:height"
              content={String(socialImage.height)}
            />
            <meta property="og:image:alt" content={socialImage.alt} />
          </>
        )}
        <meta name="twitter:site" content="@graphql" />
        <meta name="twitter:card" content="summary_large_image" />
        <meta name="twitter:title" content={title} />
        {description && (
          <meta name="twitter:description" content={description} />
        )}
        <meta name="twitter:image" content={imageUrl} />
        {!image && <meta name="twitter:image:alt" content={socialImage.alt} />}
      </>
    )
  },
  // 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