fix(admin): add favicon and page-aware titles

admin/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="robots" content="noindex, nofollow" />
     <meta name="summer-admin-base" content="__SUMMER_ADMIN_BASE__" />
+    <link rel="icon" href="./favicon.ico" sizes="48x48" />
     <title>SummerCMS</title>
   </head>
   <body>

admin/src/App.vue

@@ -1,10 +1,15 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, watchEffect } from 'vue'
 import { RouterView, useRoute } from 'vue-router'
+import { documentTitleForRoute } from './app/pageTitle'
 import AppShell from './components/shell/AppShell.vue'
 
 const route = useRoute()
 const inShell = computed(() => route.meta.shell === true)
+
+watchEffect(() => {
+  document.title = documentTitleForRoute(route)
+})
 </script>
 
 <template>

admin/src/app/pageTitle.ts

@@ -0,0 +1,42 @@
+import type { RouteLocationNormalizedLoaded } from 'vue-router'
+import { controllerIdFromPath } from './controllerRoutes'
+import { t } from './i18n'
+import { recordCrumb } from '../state/useBreadcrumbs'
+import { activeEntry } from '../state/useNavigation'
+import { settingsEntry } from '../state/useSettings'
+
+const PRODUCT_TITLE = 'SummerCMS'
+
+/** The visible page indicator used before the SummerCMS product name. */
+export function pageIndicator(route: RouteLocationNormalizedLoaded): string {
+  if (route.name === 'login') {
+    return t('backend::lang.auth.title')
+  }
+  if (route.name === 'settings') {
+    return t('backend::lang.settings.title')
+  }
+  if (route.name === 'settings-form') {
+    return settingsEntry(String(route.params.code ?? ''))?.label ?? String(route.params.code ?? '')
+  }
+  if (route.name === 'home') {
+    return t('backend::lang.nav.empty')
+  }
+  if (route.name === 'not-found') {
+    return t('backend::lang.page.not_found')
+  }
+
+  const plugin = activeEntry(String(route.params.vendor ?? ''), String(route.params.plugin ?? ''))
+  const controller = controllerIdFromPath(route.path)
+  const section = plugin?.sideMenu.find((item) => item.controller === controller)
+  const controllerLabel = section?.label ?? plugin?.label ?? ''
+  if (route.name === 'create' || route.name === 'record' || route.name === 'preview') {
+    return recordCrumb.value || controllerLabel
+  }
+  return controllerLabel
+}
+
+/** Browser title matching WinterCMS's "Current page | Product" pattern. */
+export function documentTitleForRoute(route: RouteLocationNormalizedLoaded): string {
+  const indicator = pageIndicator(route).trim()
+  return indicator === '' ? PRODUCT_TITLE : `${indicator} | ${PRODUCT_TITLE}`
+}

admin/tests/app/pageTitle.test.ts

@@ -0,0 +1,42 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { documentTitleForRoute } from '../../src/app/pageTitle'
+import { setRecordCrumb } from '../../src/state/useBreadcrumbs'
+import { setNavigation } from '../../src/state/useNavigation'
+import { setSettings } from '../../src/state/useSettings'
+import { navigationFixture, settingsFixture } from '../fixtures/typed'
+import { resetState, routerAt, signIn } from '../helpers'
+
+beforeEach(resetState)
+
+describe('documentTitleForRoute', () => {
+  it('uses the active controller label on list pages', async () => {
+    await signIn()
+    setNavigation(navigationFixture.data)
+    const router = await routerAt('/acme/demo/widgets')
+    expect(documentTitleForRoute(router.currentRoute.value)).toBe('Widgets | SummerCMS')
+  })
+
+  it('uses the loaded record name on create, update and preview pages', async () => {
+    await signIn()
+    setNavigation(navigationFixture.data)
+    setRecordCrumb('Blue widget')
+    for (const path of ['/acme/demo/widgets/create', '/acme/demo/widgets/12', '/acme/demo/widgets/12/preview']) {
+      const router = await routerAt(path)
+      expect(documentTitleForRoute(router.currentRoute.value), path).toBe('Blue widget | SummerCMS')
+    }
+  })
+
+  it('uses the settings page label', async () => {
+    await signIn()
+    setSettings(settingsFixture.list.data)
+    expect(documentTitleForRoute((await routerAt('/settings')).currentRoute.value)).toBe('Ustawienia | SummerCMS')
+    expect(documentTitleForRoute((await routerAt('/settings/mail')).currentRoute.value)).toBe('Mail | SummerCMS')
+  })
+
+  it('uses translated indicators for login, the empty home and not found', async () => {
+    expect(documentTitleForRoute((await routerAt('/login')).currentRoute.value)).toBe('Witaj ponownie | SummerCMS')
+    await signIn()
+    expect(documentTitleForRoute((await routerAt('/')).currentRoute.value)).toBe('Brak dostępnych sekcji. | SummerCMS')
+    expect(documentTitleForRoute((await routerAt('/nowhere')).currentRoute.value)).toBe('Nie znaleziono strony. | SummerCMS')
+  })
+})

admin/tests/views/App.test.ts

@@ -19,6 +19,7 @@ beforeEach(() => {
 
 afterEach(() => {
   document.body.innerHTML = ''
+  document.title = ''
 })
 
 enableAutoUnmount(afterEach)
@@ -28,6 +29,7 @@ describe('app root', () => {
     const { wrapper } = await mountAt('/login')
     expect(wrapper.find('nav[aria-label="Wtyczki"]').exists()).toBe(false)
     expect(wrapper.find('form').exists()).toBe(true)
+    expect(document.title).toBe('Witaj ponownie | SummerCMS')
   })
 
   it('renders shell routes inside the shell and an unknown path as not found', async () => {
@@ -37,6 +39,7 @@ describe('app root', () => {
     expect(wrapper.find('nav[aria-label="Wtyczki"]').exists()).toBe(true)
     expect(wrapper.findComponent(NotFoundView).exists()).toBe(true)
     expect(wrapper.find('main h1').text()).toBe('Nie znaleziono strony.')
+    expect(document.title).toBe('Nie znaleziono strony. | SummerCMS')
   })
 
   it('says so when the admin may open no plugin', async () => {

modules/boardwalk/boardwalk.go

@@ -36,6 +36,7 @@ var contentTypes = map[string]string{
 	".mjs":   "text/javascript; charset=utf-8",
 	".css":   "text/css; charset=utf-8",
 	".html":  "text/html; charset=utf-8",
+	".ico":   "image/x-icon",
 	".woff2": "font/woff2",
 	".woff":  "font/woff",
 	".svg":   "image/svg+xml",

modules/boardwalk/boardwalk_test.go

@@ -165,7 +165,7 @@ func TestAPIPathsAreDelegated(t *testing.T) {
 
 func TestMissingFileWithExtensionIs404(t *testing.T) {
 	h, _ := newTestHandler(t)
-	for _, target := range []string{testPrefix + "/assets/missing.js", testPrefix + "/favicon.ico", testPrefix + "/golem/missing.css"} {
+	for _, target := range []string{testPrefix + "/assets/missing.js", testPrefix + "/missing.ico", testPrefix + "/golem/missing.css"} {
 		rec := get(h, target)
 		if rec.Code != http.StatusNotFound || strings.Contains(rec.Body.String(), "summer-admin-base") {
 			t.Fatalf("%s status=%d body=%s", target, rec.Code, rec.Body.String())
@@ -276,6 +276,10 @@ func TestContentTypesAndCaching(t *testing.T) {
 	if got := ContentType("x.svg"); got != "image/svg+xml" {
 		t.Fatalf("svg type %q", got)
 	}
+	favicon := get(h, testPrefix+"/favicon.ico")
+	if favicon.Code != http.StatusOK || favicon.Header().Get("Content-Type") != "image/x-icon" || favicon.Header().Get("Cache-Control") != "no-cache" {
+		t.Fatalf("favicon headers = status %d, %v", favicon.Code, favicon.Header())
+	}
 	if got := ContentType("x.json"); got != "application/json" {
 		t.Fatalf("json type %q", got)
 	}