82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
/**
|
|
* The tab's title: the page's, the site's name, and an unread badge.
|
|
*
|
|
* @module
|
|
*/
|
|
|
|
import { useEffect } from "react";
|
|
|
|
/**
|
|
* Returns the site's name. The server injects the configured site name into
|
|
* both <title> and a `site-name` meta tag (see api/lib/static.ts /
|
|
* api/middleware/og.ts). In the Vite dev server the placeholder isn't
|
|
* substituted, so it falls back to "gerbeur".
|
|
*/
|
|
function readSiteName(): string {
|
|
const meta = document.querySelector('meta[name="site-name"]')
|
|
?.getAttribute("content")?.trim();
|
|
if (meta && meta !== "__SITE_NAME__") return meta;
|
|
return "gerbeur";
|
|
}
|
|
|
|
/** The site's name, read once at startup. */
|
|
export const SITE_NAME: string = readSiteName();
|
|
|
|
/**
|
|
* Returns the site's emoji. The server injects the configured emoji into a
|
|
* `site-emoji` meta tag; it falls back to the default truck.
|
|
*/
|
|
function readSiteEmoji(): string {
|
|
const meta = document.querySelector('meta[name="site-emoji"]')
|
|
?.getAttribute("content")?.trim();
|
|
if (meta && meta !== "__SITE_EMOJI__") return meta;
|
|
return "🚚";
|
|
}
|
|
|
|
/** The site's emoji, read once at startup. */
|
|
export const SITE_EMOJI: string = readSiteEmoji();
|
|
|
|
/**
|
|
* The page's title and the site's name. The page title and the unread badge are
|
|
* set from different places (each page, and the live-updates provider), so both
|
|
* are kept here and composed. `null` means no page has set one yet: keep the
|
|
* server-rendered title.
|
|
*/
|
|
let baseTitle: string | null = null;
|
|
/** The unread count. */
|
|
let badge = 0;
|
|
|
|
/** Sets the tab's title from {@link baseTitle} and {@link badge}. */
|
|
function applyTitle() {
|
|
const base = baseTitle ?? document.title.replace(/^\(\d+\+?\) /, "");
|
|
document.title = badge > 0 ? `(${badge > 99 ? "99+" : badge}) ${base}` : base;
|
|
}
|
|
|
|
/**
|
|
* Keeps document.title in sync with the current page during client-side
|
|
* navigation. Without this the tab title only ever reflects the server-rendered
|
|
* <title> from the initial page load and goes stale on every SPA navigation.
|
|
*
|
|
* - Pass a non-empty `title` to show `<title> · <site name>`.
|
|
* - Pass `null` to show just the site name (home / generic pages).
|
|
* - Pass `undefined` while the page-specific title is still loading: the title
|
|
* is left untouched, so a server-rendered OG title survives until data
|
|
* arrives (avoids a flash to the bare site name on direct loads).
|
|
*/
|
|
export function useDocumentTitle(title: string | null | undefined): void {
|
|
useEffect(() => {
|
|
if (title === undefined) return;
|
|
baseTitle = title ? `${title} · ${SITE_NAME}` : SITE_NAME;
|
|
applyTitle();
|
|
}, [title]);
|
|
}
|
|
|
|
/**
|
|
* Prefixes the tab title with the unread `count`, e.g. "(3) Chat · gerbeur".
|
|
*/
|
|
export function setTitleBadge(count: number): void {
|
|
if (count === badge) return;
|
|
badge = count;
|
|
applyTitle();
|
|
}
|