-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
/
assets.ts
85 lines (72 loc) · 2.78 KB
/
assets.ts
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
import { promises as fs } from 'fs'
import fg from 'fast-glob'
import { font, preconnectHomeLinks, preconnectLinks } from '../docs-data'
const preconnect = `
${preconnectLinks.map(l => `<link rel="dns-prefetch" href="${l}">`).join('\n')}
${preconnectLinks.map(l => `<link rel="preconnect" crossorigin="anonymous" href="${l}">`).join('\n')}
`
const preconnectHome = `
${preconnectHomeLinks.map(l => `<link rel="dns-prefetch" href="${l}">`).join('\n')}
${preconnectHomeLinks.map(l => `<link rel="preconnect" crossorigin="anonymous" href="${l}">`).join('\n')}
`
export const optimizePages = async(pwa: boolean) => {
const names = await fg('./.vitepress/dist/**/*.html', { onlyFiles: true })
await Promise.all(names.map(async(i) => {
let html = await fs.readFile(i, 'utf-8')
let prefetchImg = '\n\t<link rel="prefetch" href="/logo.svg">'
let usePreconnect = preconnect
if (i.endsWith('/dist/index.html')) {
usePreconnect = preconnectHome
prefetchImg = `
${prefetchImg}
\t<link rel="prefetch" href="/netlify.svg">
\t<link rel="prefetch" href="/bg.png">
`
}
// we need the font on development, so the font entry is added in vitepress head
html = html.replace(`<link href="${font.replace('&', '&')}" rel="stylesheet">`, '')
html = html.replace(
/<link rel="stylesheet" href="(.*)">/g,
`
${usePreconnect}
<link rel="preload" as="style" href="$1" />
<link rel="stylesheet" href="$1" />
<link
rel="preload"
as="style"
onload="this.onload=null;this.rel='stylesheet'"
href="${font}"
/>
<noscript>
<link rel="stylesheet" crossorigin="anonymous" href="${font}" />
</noscript>`).trim()
if (pwa) {
html = html.replace(
'</head>',
`
\t<link rel="prefetch" href="/manifest.webmanifest">${prefetchImg}
\t<link rel="manifest" href="/manifest.webmanifest">\n</head>`,
)
}
// TODO: dark/light theme, don't remove yet
// html = html.replace(
// '</head>',
// '\t<link rel="manifest" href="/manifest.webmanifest">\n<script>\n'
// + ' (function() {\n'
// + ' const prefersDark = window.matchMedia && window.matchMedia(\'(prefers-color-scheme: dark)\').matches\n'
// + ' const setting = localStorage.getItem(\'color-schema\') || \'auto\'\n'
// + ' if (setting === \'dark\' || (prefersDark && setting !== \'light\'))\n'
// + ' document.documentElement.classList.toggle(\'dark\', true)\n'
// + ' })()\n'
// + ' </script></head>',
// )
html = html.replace(
/aria-hidden="true"/gi,
'tabindex="-1" aria-hidden="true"',
).replace(
/<img class="logo"/gi,
'<img class="logo" width="31" height="31"',
)
await fs.writeFile(i, html, 'utf-8')
}))
}