New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(docs): add pwa with auto update strategy #573
Merged
Merged
Changes from 36 commits
Commits
Show all changes
37 commits
Select commit
Hold shift + click to select a range
d1ff669
chore: fix seo and a11y
userquin 7ec0be8
deps: add esno and pwa plugin
userquin 7a143b5
chore: configure netlify stuff
userquin 1d48d64
feat(docs): add pwa with auto update strategy
userquin 8dd90a5
chore: update keywords
userquin 2452e6f
docs: fix typo
userquin 6f188de
chore: update netlify deployment
userquin f7c9316
Merge branch 'main' into userquin/docs-add-pwa
userquin 7366ba6
fix: add favicon.ico and fix pwa 512 icon
userquin a78ae10
chore: add favicon.ico and move stuff to top
userquin b545baa
chore: add footer copyright + update some entries
userquin 4eab2eb
chore: add favicon.ico
userquin 4a90139
chore: update deps
userquin f46c8df
chore: typo
userquin b6803d8
Merge branch 'main' into userquin/docs-add-pwa
userquin 96e8fef
chore: update deps
userquin 2c38740
chore: use root `netlify.toml`
userquin b1b78a0
chore: collect docs data + png optimized
userquin 2a26e23
Merge branch 'main' into userquin/docs-add-pwa
userquin fa3a639
chore: update deps
userquin 64eb1d8
chore: cleanup
userquin d0a01c5
chore: update `Ivan Demchuk` description
userquin 8469880
chore: simplify logic + unify sponsors
userquin bb03f0f
chore: disable PWA + make home images lazy
userquin 340fbe0
chore: update h2 styles on home to have old h3 style
userquin c4520eb
chore: update deps
userquin 3ac4380
Revert "chore: update deps"
userquin 5808a7a
chore: revert sponsors images with fixed size
userquin ee3ac0a
Merge branch 'main' into userquin/docs-add-pwa
userquin 3e99a07
chore: add algolia
userquin 94f6d4b
Merge branch 'main' into userquin/docs-add-pwa
userquin 717cb12
deps: updated deps after merge main
userquin a88213d
chore: restore original image behavior
userquin 507be6a
Merge branch 'main' into userquin/docs-add-pwa
userquin bc83c89
chore: add again image widths and lazy loading
userquin 18e8b23
chore: update minimal algolia styles for dark theme
userquin f378a55
fix: change name (aslemammad)
Aslemammad File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,9 @@ | ||
import 'uno.css' | ||
import { inBrowser } from 'vitepress' | ||
import DefaultTheme from 'vitepress/theme' | ||
import '../../main.css' | ||
|
||
if (inBrowser) | ||
import('./pwa') | ||
|
||
export default DefaultTheme |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
import { registerSW } from 'virtual:pwa-register' | ||
|
||
registerSW({ immediate: true }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -29,4 +29,4 @@ | |
"aleclarson", | ||
"CyriacBr", | ||
"christianhg" | ||
] | ||
] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
// noinspection ES6PreferShortImport: IntelliJ IDE hint to avoid warning to use `~/contributors`, will fail on build if changed | ||
import { antfuSponsors, jsdelivr, patak, patakSponsors } from './src/contributors' | ||
/* PWA DISABLED */ | ||
export const pwaDisabled = true | ||
|
||
/* Texts */ | ||
export const vitestName = 'Vitest' | ||
export const vitestShortName = 'Vitest' | ||
export const vitestDescription = 'A blazing fast unit test framework powered by Vite' | ||
|
||
/* CDN fonts and styles */ | ||
export const googleapis = 'https://fonts.googleapis.com' | ||
export const gstatic = 'https://fonts.gstatic.com' | ||
export const font = `${googleapis}/css2?family=Readex+Pro:wght@200;400;600&display=swap` | ||
|
||
/* vitepress head */ | ||
export const ogUrl = 'https://vitest.dev/' | ||
export const ogImage = `${ogUrl}og.png` | ||
|
||
/* GitHub and social links */ | ||
export const releases = 'https://github.com/vitest-dev/vitest/releases' | ||
export const contributing = 'https://github.com/vitest-dev/vitest/blob/main/CONTRIBUTING.md' | ||
export const discord = 'https://chat.vitest.dev' | ||
export const twitter = 'https://twitter.com/vitest_dev' | ||
|
||
/* Avatar/Image/Sponsors servers */ | ||
export const imageServers: Record<string, string> = { | ||
// for antfu sponsors | ||
jsdelivr, | ||
// for patak sponsors | ||
patak, | ||
// GitHub contributor avatars | ||
github: 'github.com', | ||
avatars: 'avatars.githubusercontent.com', | ||
} | ||
export const sponsors = [antfuSponsors, patakSponsors] | ||
export const preconnectLinks = [googleapis, gstatic] | ||
export const preconnectHomeLinks = [googleapis, gstatic, ...Object.values(imageServers).map(s => `https://${s}`)] | ||
|
||
/* PWA runtime caching urlPattern regular expressions */ | ||
export const pwaImagesRegex = new RegExp(`^https://(${Object.values(imageServers).join('|')})/.*`, 'i') | ||
export const pwaFontsRegex = new RegExp(`^${googleapis}/.*`, 'i') | ||
export const pwaFontStylesRegex = new RegExp(`^${gstatic}/.*`, 'i') |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/ | ||
X-Frame-Options: DENY | ||
X-XSS-Protection: 1; mode=block | ||
|
||
/api/ | ||
X-Frame-Options: DENY | ||
X-XSS-Protection: 1; mode=block | ||
|
||
/config/ | ||
X-Frame-Options: DENY | ||
X-XSS-Protection: 1; mode=block | ||
|
||
/guide/ | ||
X-Frame-Options: DENY | ||
X-XSS-Protection: 1; mode=block | ||
|
||
/*.html | ||
X-Frame-Options: DENY | ||
X-XSS-Protection: 1; mode=block | ||
|
||
/* | ||
X-Content-Type-Options: nosniff | ||
Referrer-Policy: no-referrer | ||
Strict-Transport-Security: max-age=31536000; includeSubDomains | ||
|
||
/assets/* | ||
cache-control: max-age=31536000 | ||
cache-control: immutable |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,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') | ||
})) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { resolveConfig } from 'vite' | ||
import type { VitePluginPWAAPI } from 'vite-plugin-pwa' | ||
import { optimizePages } from './assets' | ||
|
||
const rebuildPwa = async() => { | ||
const config = await resolveConfig({}, 'build', 'production') | ||
// when `vite-plugin-pwa` is presented, use it to regenerate SW after rendering | ||
const pwaPlugin: VitePluginPWAAPI = config.plugins.find(i => i.name === 'vite-plugin-pwa')?.api | ||
const pwa = pwaPlugin && !pwaPlugin.disabled | ||
await optimizePages(pwa) | ||
if (pwa) | ||
await pwaPlugin.generateSW() | ||
} | ||
|
||
rebuildPwa() |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we automate this? I am not so confident of duplicating (It would make future changes much harder)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We can include some module with the site data, including all stuff there: avatars, links, contributors, fonts...
I'll be back next Tuesday, we can merge and then change it, but proceed as you wish