-
Notifications
You must be signed in to change notification settings - Fork 0
/
_head.tsx
48 lines (44 loc) · 1.57 KB
/
_head.tsx
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
import { React } from "./_deps.tsx";
import type { PagicLayout } from "./_deps.tsx";
// @deno-types="./types/_any.d.ts"
import Helmet from "https://cdn.pagic.org/[email protected]/esnext/react-helmet.js";
const Head: PagicLayout<{
isDark: boolean;
}> = ({ config, title, head, outputPath, isDark }) => {
const scriptSetIsDark = `
const shouldSetIsDark = document.cookie.includes('is_dark=1') ? true : document.cookie.includes('is_dark=0') ? false : window.matchMedia('(prefers-color-scheme: dark)').matches;
if (shouldSetIsDark) {
document.documentElement.classList.add('is_dark');
document.getElementById('prismTheme').href = "${config.root}assets/prism_tomorrow.css";
}
`;
return (
<head>
<Helmet>
<meta charSet="utf-8" />
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<title>
{title
? (outputPath !== "index.html"
? `${title} · ${config.title}`
: title)
: config.title}
</title>
{config.description &&
<meta name="description" content={config.description} />}
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href={`${config.root}assets/index.css`} />
<link
id="prismTheme"
rel="stylesheet"
href={isDark
? `${config.root}assets/prism_tomorrow.css`
: `${config.root}assets/prism.css`}
/>
<script>{scriptSetIsDark}</script>
</Helmet>
{head}
</head>
);
};
export default Head;