forked from denoland/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlayout.tsx
More file actions
130 lines (126 loc) · 4.53 KB
/
Copy pathlayout.tsx
File metadata and controls
130 lines (126 loc) · 4.53 KB
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
130
export function deleteBackticks(str?: string) {
return str?.replace(/`/g, "");
}
export default function Layout(data: Lume.Data) {
const fingerprint = Deno.env.get("DENO_DEPLOY_BUILD_ID") || null;
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") ||
data.url.startsWith("/sandbox");
const hasSubNav = isServicesPage;
return (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="light dark" />
<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
dangerouslySetInnerHTML={{
__html:
`const theme = localStorage.getItem('denoDocsTheme') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'); document.documentElement.classList.add(theme);`,
}}
/>
<link
rel="stylesheet"
href={`/style.css${fingerprint ? `?v=${fingerprint}` : ""}`}
/>
<link
rel="preload"
href="/fonts/inter/Inter-Regular.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
<link
rel="preload"
href="/fonts/inter/Inter-SemiBold.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>
{data.page?.sourcePath?.endsWith(".md") && data.url !== "/" && (
<link
rel="alternate"
type="text/markdown"
href={data.page.sourcePath.endsWith("/index.md")
? `/${data.page.sourcePath}`
: `${data.url.replace(/\/$/, "")}.md`}
/>
)}
<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="/script.js"></script>
<script type="module" defer src="/js/main.js"></script>
<script type="module" defer src="/js/lint_rules.js"></script>
<script type="module" defer src="/js/copy.js"></script>
<script type="module" defer src="/js/tabs.js"></script>
<script type="module" defer src="/js/feedback.js"></script>
<script type="module" defer src="/js/copy-page.js"></script>
<script type="module" defer src="/js/search.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 || isReference
? "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>
);
}