feat(SPA): "<page> · RenewCMS" as pages titles, instead of being stuck on whatever lands on first loading

web/src/composables/documentTitle.ts

@@ -0,0 +1,66 @@
+import { getCurrentScope, onScopeDispose, shallowRef, watchEffect } from 'vue'
+import type { Router } from 'vue-router'
+import { t, translate } from '@/i18n'
+
+const PRODUCT_NAME = 'RenewCMS'
+
+type TitleSource = () => string | undefined
+
+const overrides = shallowRef<TitleSource[]>([])
+const headings = shallowRef<TitleSource[]>([])
+
+function register(list: typeof overrides, source: TitleSource) {
+	list.value = [...list.value, source]
+	if (getCurrentScope()) {
+		onScopeDispose(() => {
+			list.value = list.value.filter((entry) => entry !== source)
+		})
+	}
+}
+
+function firstName(sources: TitleSource[]) {
+	for (const source of [...sources].reverse()) {
+		const name = source()
+		if (name) {
+			return name
+		}
+	}
+	return undefined
+}
+
+export function usePageTitleOverride(source: TitleSource) {
+	register(overrides, source)
+}
+
+export function useCardHeading(source: TitleSource) {
+	register(headings, source)
+}
+
+function formatTitle(name: string | undefined) {
+	return name ? t('{0} · RenewCMS', [name]) : PRODUCT_NAME
+}
+
+function routeName(router: Router) {
+	const meta = router.currentRoute.value.meta
+	if (typeof meta.documentTitle === 'string') {
+		return meta.documentTitle
+	}
+	const override = firstName(overrides.value)
+	if (override) {
+		return override
+	}
+	const heading = firstName(headings.value)
+	if (heading) {
+		return heading
+	}
+	return typeof meta.title === 'string' ? translate(meta.title) : undefined
+}
+
+let stopTitleWatcher: (() => void) | null = null
+
+export function installDocumentTitle(router: Router) {
+	stopTitleWatcher?.()
+	stopTitleWatcher = watchEffect(() => {
+		document.title = formatTitle(routeName(router))
+	})
+}