feat: add web manifest dark theme variants (#947)

zio/stable
Joaquín Sánchez 2023-01-10 21:35:34 +01:00 committed by GitHub
parent 6e7813020e
commit 1b9fb99032
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 39 additions and 8 deletions

View File

@ -3,6 +3,7 @@ import type { LocaleObject } from '#i18n'
export function setupPageHeader() { export function setupPageHeader() {
const { locale, locales, t } = useI18n() const { locale, locales, t } = useI18n()
const colorMode = useColorMode()
const buildInfo = useBuildInfo() const buildInfo = useBuildInfo()
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => { const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
@ -26,7 +27,7 @@ export function setupPageHeader() {
? () => [{ ? () => [{
key: 'webmanifest', key: 'webmanifest',
rel: 'manifest', rel: 'manifest',
href: `/manifest-${locale.value}.webmanifest`, href: `/manifest-${locale.value}${colorMode.value === 'dark' ? '-dark' : ''}.webmanifest`,
}] }]
: [], : [],
}) })

View File

@ -74,6 +74,31 @@ export const createI18n = async (): Promise<LocalizedWebManifest> => {
}, },
], ],
} }
acc[`${lang}-dark`] = {
scope: '/',
id: '/',
start_url: '/',
display: 'standalone',
lang,
name,
short_name,
description,
dir,
background_color: '#111111',
theme_color: '#111111',
icons: [
{
src: 'pwa-192x192.png',
sizes: '192x192',
type: 'image/png',
},
{
src: 'pwa-512x512.png',
sizes: '512x512',
type: 'image/png',
},
],
}
return acc return acc
}, {} as LocalizedWebManifest) }, {} as LocalizedWebManifest)

View File

@ -41,10 +41,10 @@ export default defineNuxtModule<VitePWANuxtOptions>({
throw new Error('Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!') throw new Error('Remove vite-plugin-pwa plugin from Vite Plugins entry in Nuxt config file!')
webmanifests = await createI18n() webmanifests = await createI18n()
const generateManifest = (locale: string) => { const generateManifest = (entry: string) => {
const manifest = webmanifests![locale] const manifest = webmanifests![entry]
if (!manifest) if (!manifest)
throw new Error(`No webmanifest found for locale ${locale}`) throw new Error(`No webmanifest found for locale/theme ${entry}`)
return JSON.stringify(manifest) return JSON.stringify(manifest)
} }
viteInlineConfig.plugins.push({ viteInlineConfig.plugins.push({
@ -54,12 +54,12 @@ export default defineNuxtModule<VitePWANuxtOptions>({
if (options.disable || !bundle) if (options.disable || !bundle)
return return
Object.keys(webmanifests!).map(l => [l, `manifest-${l}.webmanifest`]).forEach(([l, fileName]) => { Object.keys(webmanifests!).map(wm => [wm, `manifest-${wm}.webmanifest`]).forEach(([wm, fileName]) => {
bundle[fileName] = { bundle[fileName] = {
isAsset: true, isAsset: true,
type: 'asset', type: 'asset',
name: undefined, name: undefined,
source: generateManifest(l), source: generateManifest(wm),
fileName, fileName,
} }
}) })
@ -107,9 +107,9 @@ export default defineNuxtModule<VitePWANuxtOptions>({
viteServer.middlewares.stack.push({ route: webManifest, handle: emptyHandle }) viteServer.middlewares.stack.push({ route: webManifest, handle: emptyHandle })
if (webmanifests) { if (webmanifests) {
Object.keys(webmanifests).forEach((locale) => { Object.keys(webmanifests).forEach((wm) => {
viteServer.middlewares.stack.push({ viteServer.middlewares.stack.push({
route: `${nuxt.options.app.baseURL}manifest-${locale}.webmanifest`, route: `${nuxt.options.app.baseURL}manifest-${wm}.webmanifest`,
handle: emptyHandle, handle: emptyHandle,
}) })
}) })
@ -138,6 +138,11 @@ export default defineNuxtModule<VitePWANuxtOptions>({
'Content-Type': 'application/manifest+json', 'Content-Type': 'application/manifest+json',
}, },
} }
nitroConfig.routeRules![`/manifest-${locale.code}-dark.webmanifest`] = {
headers: {
'Content-Type': 'application/manifest+json',
},
}
} }
}) })
nuxt.hook('nitro:init', (nitro) => { nuxt.hook('nitro:init', (nitro) => {