316 lines
8.6 KiB
TypeScript
316 lines
8.6 KiB
TypeScript
import { Buffer } from 'node:buffer'
|
|
import { readFile } from 'fs-extra'
|
|
import { createResolver } from '@nuxt/kit'
|
|
import type { ManifestOptions } from 'vite-plugin-pwa'
|
|
import { getEnv } from '../../config/env'
|
|
import { i18n } from '../../config/i18n'
|
|
import type { LocaleObject } from '#i18n'
|
|
|
|
export type LocalizedWebManifest = Record<string, Partial<ManifestOptions>>
|
|
|
|
export const pwaLocales = i18n.locales as LocaleObject[]
|
|
|
|
type WebManifestEntry = Pick<ManifestOptions, 'name' | 'short_name' | 'description' | 'screenshots' | 'shortcuts'>
|
|
type RequiredWebManifestEntry = Required<WebManifestEntry & Pick<ManifestOptions, 'dir' | 'lang' | 'screenshots' | 'shortcuts'>>
|
|
|
|
export async function createI18n(): Promise<LocalizedWebManifest> {
|
|
const { env } = await getEnv()
|
|
const envName = `${env === 'release' ? '' : `(${env})`}`
|
|
const { action, nav, pwa } = await readI18nFile('en.json')
|
|
|
|
const defaultManifest: Required<WebManifestEntry> = pwa.webmanifest[env]
|
|
|
|
const defaultShortcuts: ManifestOptions['shortcuts'] = [{
|
|
name: nav.home,
|
|
url: '/home',
|
|
icons: [
|
|
{ src: 'shortcuts/home-96x96.png', sizes: '96x96', type: 'image/png' },
|
|
{ src: 'shortcuts/home.png', sizes: '192x192', type: 'image/png' },
|
|
],
|
|
}, {
|
|
name: nav.local,
|
|
url: '/',
|
|
icons: [
|
|
{ src: 'shortcuts/local-96x96.png', sizes: '96x96', type: 'image/png' },
|
|
{ src: 'shortcuts/local.png', sizes: '192x192', type: 'image/png' },
|
|
],
|
|
}, {
|
|
name: nav.notifications,
|
|
url: '/notifications',
|
|
icons: [
|
|
{ src: 'shortcuts/notifications-96x96.png', sizes: '96x96', type: 'image/png' },
|
|
{ src: 'shortcuts/notifications.png', sizes: '192x192', type: 'image/png' },
|
|
],
|
|
}, {
|
|
name: action.compose,
|
|
url: '/compose',
|
|
icons: [
|
|
{ src: 'shortcuts/compose-96x96.png', sizes: '96x96', type: 'image/png' },
|
|
{ src: 'shortcuts/compose.png', sizes: '192x192', type: 'image/png' },
|
|
],
|
|
}, {
|
|
name: nav.settings,
|
|
url: '/settings',
|
|
icons: [
|
|
{ src: 'shortcuts/settings-96x96.png', sizes: '96x96', type: 'image/png' },
|
|
{ src: 'shortcuts/settings.png', sizes: '192x192', type: 'image/png' },
|
|
],
|
|
}]
|
|
|
|
const defaultScreenshots: ManifestOptions['screenshots'] = [{
|
|
src: 'screenshots/dark-1.webp',
|
|
sizes: '3840x2400',
|
|
type: 'image/webp',
|
|
label: pwa.screenshots.dark,
|
|
}, {
|
|
src: 'screenshots/light-1.webp',
|
|
sizes: '3840x2400',
|
|
type: 'image/webp',
|
|
label: pwa.screenshots.light,
|
|
}]
|
|
|
|
const manifestEntries: Partial<ManifestOptions> = {
|
|
scope: '/',
|
|
id: '/',
|
|
start_url: '/',
|
|
orientation: 'natural',
|
|
display: 'standalone',
|
|
display_override: ['window-controls-overlay'],
|
|
categories: ['social', 'social networking', 'news'],
|
|
icons: [
|
|
{
|
|
src: 'pwa-64x64.png',
|
|
sizes: '64x64',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'pwa-192x192.png',
|
|
sizes: '192x192',
|
|
type: 'image/png',
|
|
},
|
|
{
|
|
src: 'pwa-512x512.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'any',
|
|
},
|
|
{
|
|
src: 'maskable-icon.png',
|
|
sizes: '512x512',
|
|
type: 'image/png',
|
|
purpose: 'maskable',
|
|
},
|
|
],
|
|
share_target: {
|
|
action: '/web-share-target',
|
|
method: 'POST',
|
|
enctype: 'multipart/form-data',
|
|
params: {
|
|
title: 'title',
|
|
text: 'text',
|
|
url: 'url',
|
|
files: [
|
|
{
|
|
name: 'files',
|
|
accept: ['image/*', 'video/*'],
|
|
},
|
|
],
|
|
},
|
|
},
|
|
}
|
|
|
|
// TODO: add related_applications, only when env === 'release'
|
|
|
|
const locales: RequiredWebManifestEntry[] = await Promise.all(
|
|
pwaLocales
|
|
.filter(l => l.code !== 'en-US')
|
|
.map(async ({ code, dir = 'ltr', file, files }) => {
|
|
// read locale file or files
|
|
const { action, app_desc_short, app_name, nav, pwa } = file
|
|
? await readI18nFile(file)
|
|
: await findBestWebManifestData(files, env)
|
|
const entry = pwa?.webmanifest?.[env] ?? {}
|
|
|
|
if (!entry.name && app_name)
|
|
entry.name = dir === 'rtl' ? `${envName} ${app_name}` : `${app_name} ${envName}`
|
|
|
|
if (!entry.short_name && app_name)
|
|
entry.short_name = dir === 'rtl' ? `${envName} ${app_name}` : `${app_name} ${envName}`
|
|
|
|
if (!entry.description && app_desc_short)
|
|
entry.description = app_desc_short
|
|
|
|
// clone default screenshots and shortcuts
|
|
const useScreenshots = [...defaultScreenshots.map(screenshot => ({ ...screenshot }))]
|
|
const useShortcuts = [...defaultShortcuts.map(shortcut => ({ ...shortcut }))]
|
|
|
|
const pwaScreenshots = pwa?.screenshots
|
|
if (pwaScreenshots) {
|
|
useScreenshots.forEach((screenshot, idx) => {
|
|
if (idx === 0 && pwaScreenshots?.dark)
|
|
screenshot.label = pwaScreenshots.dark
|
|
|
|
if (idx === 1 && pwaScreenshots?.light)
|
|
screenshot.label = pwaScreenshots.light
|
|
})
|
|
}
|
|
|
|
useShortcuts.forEach((shortcut, idx) => {
|
|
if (idx === 0 && nav?.home)
|
|
shortcut.name = nav.home
|
|
|
|
if (idx === 1 && nav?.local)
|
|
shortcut.name = nav.local
|
|
|
|
if (idx === 2 && nav?.notifications)
|
|
shortcut.name = nav.notifications
|
|
|
|
if (idx === 3 && action?.compose)
|
|
shortcut.name = action?.compose
|
|
|
|
if (idx === 4 && nav?.settings)
|
|
shortcut.name = nav.settings
|
|
})
|
|
|
|
return <RequiredWebManifestEntry>{
|
|
...defaultManifest,
|
|
...entry,
|
|
lang: code,
|
|
dir,
|
|
screenshots: useScreenshots,
|
|
shortcuts: useShortcuts,
|
|
}
|
|
}),
|
|
)
|
|
locales.push({
|
|
...defaultManifest,
|
|
lang: 'en-US',
|
|
dir: 'ltr',
|
|
screenshots: defaultScreenshots,
|
|
shortcuts: defaultShortcuts,
|
|
})
|
|
return locales.reduce((acc, {
|
|
lang,
|
|
dir,
|
|
name,
|
|
short_name,
|
|
description,
|
|
shortcuts,
|
|
screenshots,
|
|
}) => {
|
|
acc[lang] = {
|
|
lang,
|
|
name,
|
|
short_name,
|
|
description,
|
|
dir,
|
|
background_color: '#ffffff',
|
|
theme_color: '#ffffff',
|
|
...manifestEntries,
|
|
shortcuts,
|
|
screenshots,
|
|
}
|
|
acc[`${lang}-dark`] = {
|
|
lang,
|
|
name,
|
|
short_name,
|
|
description,
|
|
dir,
|
|
background_color: '#111111',
|
|
theme_color: '#111111',
|
|
...manifestEntries,
|
|
shortcuts,
|
|
screenshots,
|
|
}
|
|
|
|
return acc
|
|
}, {} as LocalizedWebManifest)
|
|
}
|
|
|
|
async function readI18nFile(file: string) {
|
|
const { resolve } = createResolver(import.meta.url)
|
|
return JSON.parse(Buffer.from(
|
|
await readFile(resolve(`../../locales/${file}`), 'utf-8'),
|
|
).toString())
|
|
}
|
|
|
|
interface PWAEntry {
|
|
webmanifest?: Record<string, {
|
|
name?: string
|
|
short_name?: string
|
|
description?: string
|
|
}>
|
|
screenshots?: Record<string, string>
|
|
shortcuts?: Record<string, string>
|
|
}
|
|
|
|
interface JsonEntry {
|
|
pwa?: PWAEntry
|
|
app_name?: string
|
|
app_desc_short?: string
|
|
action?: Record<string, any>
|
|
nav?: Record<string, any>
|
|
screenshots?: Record<string, string>
|
|
}
|
|
|
|
async function findBestWebManifestData(files: string[], env: string) {
|
|
const entries: JsonEntry[] = await Promise.all(files.map(async (file) => {
|
|
const { action, app_name, app_desc_short, nav, pwa } = await readI18nFile(file)
|
|
return { action, app_name, app_desc_short, nav, pwa }
|
|
}))
|
|
|
|
let pwa: PWAEntry | undefined
|
|
let app_name: string | undefined
|
|
let app_desc_short: string | undefined
|
|
const action: Record<string, any> = {}
|
|
const nav: Record<string, any> = {}
|
|
|
|
for (const entry of entries) {
|
|
const webmanifest = entry?.pwa?.webmanifest?.[env]
|
|
if (webmanifest) {
|
|
if (pwa) {
|
|
if (webmanifest.name)
|
|
pwa.webmanifest![env].name = webmanifest.name
|
|
|
|
if (webmanifest.short_name)
|
|
pwa.webmanifest![env].short_name = webmanifest.short_name
|
|
|
|
if (webmanifest.description)
|
|
pwa.webmanifest![env].description = webmanifest.description
|
|
}
|
|
else {
|
|
pwa = entry.pwa
|
|
}
|
|
}
|
|
|
|
if (entry.app_name)
|
|
app_name = entry.app_name
|
|
|
|
if (entry.app_desc_short)
|
|
app_desc_short = entry.app_desc_short
|
|
|
|
if (entry.nav) {
|
|
['home', 'local', 'notifications', 'settings'].forEach((key) => {
|
|
const value = entry.nav![key]
|
|
if (value)
|
|
nav[key] = value
|
|
})
|
|
}
|
|
|
|
if (entry.action?.compose)
|
|
action.compose = entry.action.compose
|
|
|
|
if (entry.pwa?.screenshots) {
|
|
if (!pwa)
|
|
pwa = {}
|
|
|
|
pwa.screenshots = pwa.screenshots ?? {}
|
|
Object
|
|
.entries(entry.pwa.screenshots)
|
|
.forEach(([key, value]) => pwa!.screenshots![key] = value)
|
|
}
|
|
}
|
|
|
|
return { action, app_desc_short, app_name, nav, pwa }
|
|
}
|