elk/composables/setups.ts
2024-02-24 16:46:14 +00:00

72 lines
2.3 KiB
TypeScript

import type { Directions, LocaleObject } from '@nuxtjs/i18n'
export function setupPageHeader() {
const { locale, locales, t } = useI18n()
const colorMode = useColorMode()
const buildInfo = useBuildInfo()
const enablePinchToZoom = usePreferences('enablePinchToZoom')
const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
acc[l.code!] = l.dir ?? 'ltr'
return acc
}, {} as Record<string, Directions>)
useHydratedHead({
htmlAttrs: {
lang: () => locale.value,
dir: () => localeMap[locale.value] ?? 'ltr',
class: () => enablePinchToZoom.value ? ['enable-pinch-to-zoom'] : [],
},
meta: [{
name: 'viewport',
content: () => `width=device-width,initial-scale=1${enablePinchToZoom.value ? '' : ',maximum-scale=1,user-scalable=0'},viewport-fit=cover`,
}],
titleTemplate: (title?: string) => {
let titleTemplate = title ?? ''
if (titleTemplate.match(/&[a-z0-9#]+;/gi)) {
titleTemplate = unescapeTitleTemplate(titleTemplate, [
['"', ['&#34;', '&quot;']],
['&', ['&#38;', '&amp;']],
['\'', ['&#39;', '&apos;']],
['\u003C', ['&#60;', '&lt;']],
['\u003E', ['&#62;', '&gt;']],
])
if (titleTemplate.length > 60)
titleTemplate = `${titleTemplate.slice(0, 60)}...${titleTemplate.endsWith('"') ? '"' : ''}`
if (!titleTemplate.includes('"'))
titleTemplate = `"${titleTemplate}"`
}
else if (titleTemplate.length > 60) {
titleTemplate = `${titleTemplate.slice(0, 60)}...${titleTemplate.endsWith('"') ? '"' : ''}`
}
if (titleTemplate.length)
titleTemplate += ' | '
titleTemplate += t('app_name')
if (buildInfo.env !== 'release')
titleTemplate += ` (${buildInfo.env})`
return titleTemplate
},
link: (import.meta.client && useAppConfig().pwaEnabled)
? () => [{
key: 'webmanifest',
rel: 'manifest',
href: `/manifest-${locale.value}${colorMode.value === 'dark' ? '-dark' : ''}.webmanifest`,
}]
: [],
})
}
function unescapeTitleTemplate(titleTemplate: string, replacements: [string, string[]][]) {
let result = titleTemplate
for (const [replacement, entities] of replacements) {
for (const e of entities)
result = result.replaceAll(e, replacement)
}
return result.trim()
}