docs/_includes/layout.tsx at 941bf8ad875f0b836926f3d56d7196a314a73661 · denoland/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
105
106
107
108
109
110
111
export function deleteBackticks(str?: string) {
  return str?.replace(/`/g, "");
}

export default function Layout(data: Lume.Data) {
  const isReference = data.url.startsWith("/api/");
  const section = data.url.split("/").filter(Boolean)[0];
  const description = data.description ||
    "In-depth documentation, guides, and reference materials for building secure, high-performance JavaScript and TypeScript applications with Deno";
  const isServicesPage = data.url.startsWith("/deploy") ||
    data.url.startsWith("/subhosting") ||
    data.url.startsWith("/services");
  const hasSubNav = data.page?.data?.SidebarNav?.length ||
    data.url.startsWith("/api");

  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{deleteBackticks(data.title)}</title>
        {data?.description &&
          <meta name="description" content={data.description} />}
        <link rel="icon" href="/favicon.ico" />
        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
        <script>
          const theme = localStorage.getItem('denoDocsTheme') ||
          (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' :
          'light'); document.documentElement.classList.add(theme);
        </script>

        <link rel="stylesheet" href="/styles.css" />
        <link
          rel="preload"
          href="/fonts/inter/Inter-Regular.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="true"
        />
        <link
          rel="preload"
          href="/fonts/inter/Inter-SemiBold.woff2"
          as="font"
          type="font/woff2"
          crossOrigin="true"
        />
        <link rel="me" href="https://fosstodon.org/@deno_land" />
        <data.comp.OpenGraph
          title={data.title}
          description={description}
          section={section}
          url={`https://docs.deno.com${data.url}`}
        />
        <meta
          name="keywords"
          content="Deno, JavaScript, TypeScript, reference, documentation, guide, tutorial, example"
        />
        <script type="module" defer src="/components.js"></script>
        <script type="module" defer src="/main.client.js"></script>
        <script type="module" defer src="/lint_rules.client.js"></script>
        <script type="module" defer src="/copy.client.js"></script>
        <script type="module" defer src="/tabs.client.js"></script>
        <script type="module" defer src="/feedback.client.js"></script>
        <script type="module" defer src="/search.client.js"></script>
        <script
          async
          src="https://www.googletagmanager.com/gtm.js?id=GTM-5B5TH8ZJ"
        >
        </script>
        <link rel="preconnect" href="https://www.googletagmanager.com"></link>
      </head>
      <body
        data-services-page={Boolean(isServicesPage)}
      >
        <a
          href="#content"
          class="opacity-0 p-2 px-4 bg-background-secondary transition-transform duration-150 rounded-md ease-out absolute top-2 left-2 -translate-y-full focus:opacity-100 focus:translate-y-0 z-[500]"
        >
          Skip to main content
        </a>
        <data.comp.Header
          currentSection={section}
          currentUrl={data.url}
          data={data}
          hasSubNav={hasSubNav}
        />
        <div
          class={`layout ${
            data.toc?.length ? "layout--three-column" : "layout--two-column"
          }`}
        >
          <data.comp.Navigation
            data={data}
            currentSection={section}
            currentUrl={data.url}
            hasSubNav={hasSubNav}
          />
          {data.children}
          {!isReference && (
            <data.comp.TableOfContents
              toc={data.toc}
              data={data}
              hasSubNav={hasSubNav}
            />
          )}
        </div>
        <data.comp.Footer />
      </body>
    </html>
  );
}