/
head.js
48 lines (42 loc) · 1.53 KB
/
head.js
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 'react'
import { Helmet } from 'react-helmet'
import { useThemeUI } from 'theme-ui'
import pkg from 'theme-ui/package.json'
export default (props) => {
const title = [
props.title,
props.pageContext.frontmatter ? props.pageContext.frontmatter.title : false,
props._frontmatter ? props._frontmatter.title : false,
'Theme UI',
]
.filter(Boolean)
.join(' – ')
const { theme, colorMode } = useThemeUI()
const isColorModeDark = ['dark', 'deep'].includes(colorMode)
return (
<Helmet htmlAttributes={{ lang: 'en-US' }}>
<title>{title}</title>
<meta name="description" content={pkg.description} />
<link rel="icon" type="image/png" href="/icon.png" />
<link
rel="icon"
media="(prefers-color-scheme:dark)"
href="/icon-dark.png"
type="image/png"
/>
<link rel="apple-touch-icon" type="image/png" href="/icon.png" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@jxnblk" />
<meta name="twitter:image" content="https://theme-ui.com/card.png" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={pkg.description} />
<meta name="theme-color" content={theme.colors.background} />
<meta name="color-scheme" content={isColorModeDark ? 'dark' : 'light'} />
<script
src="https://unpkg.com/favicon-switcher@1.2.2/dist/index.js"
crossOrigin="anonymous"
type="application/javascript"
/>
</Helmet>
)
}