Moduletrace/cobble
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases 9 Wiki Activity

Name each install, fix the notification badge, switch to Archivo

Browse Source 
- Settings > General: an App name (super admin) for the installed app.
  The manifest's name/short_name, the iOS head tags and the loading
  page's title use it, so two installs on one phone can be told apart.
- Notifications get a real badge (white stone silhouette): Android masks
  the badge by alpha, so the opaque app icon showed as a square.
- The loading and offline pages load the app's font.
- The font is now Archivo (variable, one request for every weight),
  matching the marketing site.

Co-Authored-By: Claude Opus 5.5 <[email protected]>
This commit is contained in:
tben
2026-10-25 10:17:40 +01:00
co-authored by Claude Opus 5.5
parent 89c4e26d06
commit 3b7c05bfa0
23 changed files with 440 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+2
View File
@@ -147,6 +147,8 @@ Set in Settings > Environment (super admin), not `.env`. `envs` (private; encryp
### PWA and notifications
- Generated assets (manifest, icons, `offline.html`, `loading.html`) come from `bun run gen:favicon`, which reads `main.css`; outputs are committed. Shared paths in `src/data/pwa-data.ts`.
- **Install name:** app setting `install_name` (Settings > General, super admin). `handlePwaFile` rewrites the manifest's `name`/`short_name` per request (`namePwaManifest`), the root head uses it for iOS tags, the loading page's `<title>` is the `{{name}}` placeholder. Devices pick up a new name only on reinstall.
- Notification `badge` is `icons/badge-96.png` (white silhouette; Android masks by alpha, so never the opaque app icon). Brave on Android has no WebAPK, so its notifications always carry Brave's name and icon.
- `public/sw.js` is served `no-store`; navigations network-only (authenticated HTML never cached); `/api/`, `/ws`, `/media/`, `/computers/`, `/build-info.json` never intercepted. It never reloads on its own. In development the worker and caches are actively removed (`clear-development-service-worker.ts`, stub `/sw.js`).
- **Precache (production):** a navigation without the current build cookie gets `loading.html`, which downloads all of `.bunext/public` into `cobble-assets-<build_id>`, verifies, sets the cookie and reloads (falls back to network on stall). React knows nothing of this.
- Phone shell: rail is a slide-over below `md`; rail internals use the `@rail:` container variant, not viewport `lg:`. `LiveSocket` is remounted on online/pageshow/visibility since twui stops retrying after three attempts. Nothing is queued offline.
public/icons/badge-96.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 760 B

public/loading.html
+5 -2
View File
@@ -5,8 +5,11 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="#fbfaf7" />
<meta name="robots" content="noindex" />
<title>cobble</title>
<title>{{name}}</title>
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />
<style>
:root {
--paper: #fbfaf7;
@@ -33,7 +36,7 @@ body {
padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
background: var(--paper);
color: var(--ink);
font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
main {
public/offline.html
+4 -1
View File
@@ -6,6 +6,9 @@
<meta name="theme-color" content="#fbfaf7" />
<title>Offline | cobble</title>
<link rel="manifest" href="/manifest.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />
<style>
:root {
--paper: #fbfaf7;
@@ -32,7 +35,7 @@ body {
padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
background: var(--paper);
color: var(--ink);
font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
main {
public/sw.js
+12 -3
View File
@@ -59,8 +59,17 @@ const ASSET_PATHS = ["/favicon.ico", "/favicon.png", "/apple-touch-icon.png"];
const BYPASS_PREFIXES = ["/api/", "/ws", "/media", "/computers/"];
const BYPASS_PATHS = ["/sw.js", "/manifest.webmanifest", "/auth/logout", BUILD_INFO_URL];
/**
* Android draws a badge from its alpha alone, so it's the white stone on
* transparent (`PwaBadgePath`); the app icon sits on opaque paper and
* would show as a square.
*/
const DEFAULT_ICON = "/icons/icon-192.png";
const DEFAULT_BADGE = "/icons/icon-192.png";
const DEFAULT_BADGE = "/icons/badge-96.png";
function absoluteUrl(path) {
return new URL(path, self.location.origin).href;
}
function isAssetRequest(url) {
return (
@@ -203,8 +212,8 @@ self.addEventListener("push", (event) => {
const title = payload.title || "Cobble";
const options = {
body: payload.body || "",
icon: payload.icon || DEFAULT_ICON,
badge: payload.badge || DEFAULT_BADGE,
icon: absoluteUrl(payload.icon || DEFAULT_ICON),
badge: absoluteUrl(payload.badge || DEFAULT_BADGE),
tag: payload.tag || undefined,
renotify: Boolean(payload.tag),
requireInteraction: Boolean(payload.requireInteraction),
src/data/pwa-data.ts
+20
View File
@@ -90,3 +90,23 @@ export const PwaIconPath = (name: `icon` | `maskable`, size: number) =>
*/
export const PwaManifestName = SiteData["SiteName"];
export const PwaShortName = SiteData["SiteName"];
/**
* A notification's `badge`: the stone's white silhouette, since Android
* draws only its alpha. `public/sw.js` repeats the path.
*/
export const PwaBadgeSize = 96;
export const PwaBadgePath = `/icons/badge-${PwaBadgeSize}.png`;
/**
* What `handlePrecacheGate` swaps for the install's name in the loading
* page's title.
*/
export const PwaLoadingNamePlaceholder = "{{name}}";
/**
* The install's own name (Settings > General), so two installs on one
* phone don't both read `SiteName`. Saved in `app_settings`.
*/
export const PwaInstallNameSettingKey = "install_name";
export const PwaInstallNameMaxLength = 30;
src/functions/backend/db/app-settings/grab-install-name.ts
+12
View File
@@ -0,0 +1,12 @@
import { PwaInstallNameSettingKey } from "@/src/data/pwa-data";
import grabAppSetting from "./grab-app-setting";
/**
* The name this install was given in Settings > General, or empty when it
* was never named (`installDisplayName` falls back to `SiteName`).
*/
export default async function grabInstallName() {
const saved = await grabAppSetting({ key: PwaInstallNameSettingKey });
return saved?.trim() || "";
}
src/functions/server/pwa/handle-precache-gate.ts
+13 -2
View File
@@ -1,6 +1,9 @@
import path from "path";
import { AppData } from "@/src/data/app-data";
import { PwaLoadingPath } from "@/src/data/pwa-data";
import { PwaLoadingNamePlaceholder, PwaLoadingPath } from "@/src/data/pwa-data";
import grabInstallName from "@/src/functions/backend/db/app-settings/grab-install-name";
import installDisplayName from "@/src/utils/install-display-name";
import escapeHtml from "@/src/utils/escape-html";
import { getCookie } from "@/src/utils/cookies";
import needsPrecachePage from "@/src/utils/needs-precache-page";
import grabPrecacheManifest from "./grab-precache-manifest";
@@ -53,7 +56,15 @@ export default async function handlePrecacheGate({
total: manifest.files.length,
}).replace(/</g, "\\u003c");
return new Response((await file.text()).replace(BuildPlaceholder, build), {
const name = escapeHtml({
text: installDisplayName({ install_name: await grabInstallName().catch(() => "") }),
});
const page = (await file.text())
.replace(BuildPlaceholder, build)
.replace(PwaLoadingNamePlaceholder, name);
return new Response(page, {
headers: {
"Content-Type": "text/html; charset=utf-8",
"Cache-Control": "no-store, max-age=0, must-revalidate",
src/functions/server/pwa/handle-pwa-file.ts
+24 -1
View File
@@ -1,5 +1,7 @@
import path from "path";
import { PwaManifestPath, PwaServiceWorkerPath } from "@/src/data/pwa-data";
import grabInstallName from "@/src/functions/backend/db/app-settings/grab-install-name";
import namePwaManifest from "@/src/utils/name-pwa-manifest";
const PUBLIC_DIR = path.resolve(import.meta.dir, "../../../../public");
@@ -77,7 +79,11 @@ export default async function handlePwaFile({
headers.set("Service-Worker-Allowed", "/");
}
const response = new Response(development_stub || file, { headers });
const response = new Response(
development_stub ||
(file_name == "manifest.webmanifest" ? await namedManifest({ file }) : file),
{ headers },
);
/**
* `Bun.file` adds a filename disposition; a manifest is inline data.
@@ -86,3 +92,20 @@ export default async function handlePwaFile({
return response;
}
/**
* The generated manifest under the install's own name (Settings >
* General). Unnamed, or when the file isn't JSON, it goes out as it is.
*/
async function namedManifest({ file }: { file: ReturnType<typeof Bun.file> }) {
const text = await file.text();
const install_name = await grabInstallName().catch(() => "");
if (!install_name) return text;
try {
return JSON.stringify(namePwaManifest({ manifest: JSON.parse(text), install_name }), null, 4);
} catch {
return text;
}
}
src/pages/__root.server.ts
+2
View File
@@ -6,6 +6,7 @@ import isAdminSectionPath from "../utils/is-admin-section-path";
import { AdminHomePath } from "../dict/admin-sections-dict";
import isUnknownSettingsPath from "../utils/is-unknown-settings-path";
import { SettingsDefaultPath } from "../dict/settings-pages-dict";
import grabInstallName from "../functions/backend/db/app-settings/grab-install-name";
/**
* Routing for a local install. There are no public pages:
@@ -80,6 +81,7 @@ const server: BunextPageServerFn<PagePropsType> = async ({ req, url }) => {
},
user,
user_types,
install_name: await grabInstallName().catch(() => ""),
},
};
};
src/pages/__root.tsx
+11 -3
View File
@@ -13,6 +13,7 @@ import type {
PagePropsType,
} from "@/src/types";
import { SiteData } from "@/src/data/site-data";
import installDisplayName from "@/src/utils/install-display-name";
import Layout from "../layouts/main";
import AuthLayout from "../layouts/auth";
import BotsLayout from "../layouts/bots";
@@ -93,16 +94,23 @@ export default function App({
}
export function Head({ serverRes, ctx }: BunextPageHeadFCProps) {
/**
* iOS names a home-screen app from these tags, not the manifest.
*/
const app_name = installDisplayName({
install_name: (serverRes?.props as PagePropsType | undefined)?.install_name,
});
return (
<>
<ThemeInitScript />
<PwaInitScript />
<meta name="application-name" content={SiteData["SiteName"]} />
<meta name="application-name" content={app_name} />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta
name="apple-mobile-web-app-title"
content={SiteData["SiteName"]}
content={app_name}
/>
<meta
name="apple-mobile-web-app-status-bar-style"
@@ -115,7 +123,7 @@ export function Head({ serverRes, ctx }: BunextPageHeadFCProps) {
crossOrigin=""
/>
<link
href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap"
href="https://fonts.googleapis.com/css2?family=Archivo:wght@400..900&display=swap"
rel="stylesheet"
/>
<link
src/pages/admin/settings/general/(partials)/install-name-form.tsx
+101
View File
@@ -0,0 +1,101 @@
import { useState } from "react";
import fetchApi from "@moduletrace/twui/utils/fetch/fetchApi";
import type { APIResponseObject } from "@moduletrace/bunext/types";
import Form from "@moduletrace/twui/form/Form";
import Input from "@moduletrace/twui/form/Input";
import { PwaInstallNameMaxLength } from "@/src/data/pwa-data";
import { SiteData } from "@/src/data/site-data";
import SettingsSaveBar from "../../(partials)/settings-save-bar";
type Props = {
install_name?: string | null;
};
/**
* The name the install goes by as an installed app, saved on its own
* without a reload. Empty puts the site name back.
*/
export default function InstallNameForm({ install_name }: Props) {
const [saved, setSaved] = useState(install_name || "");
const [value, setValue] = useState(install_name || "");
const [dirty, setDirty] = useState(false);
/**
* The input only reads `defaultValue` when it mounts, so discarding or
* saving remounts it with the saved name.
*/
const [form_key, setFormKey] = useState(0);
const [loading, setLoading] = useState(false);
const [status, setStatus] = useState<{
msg?: string;
error?: boolean;
success?: boolean;
}>();
const save = async () => {
if (!window.confirm("Save the install name?")) return;
setLoading(true);
setStatus(undefined);
const res = await fetchApi<{}, APIResponseObject<{ install_name: string }>>(
"/api/admin/settings/install-name",
{ method: "POST", body: { install_name: value } },
).catch(() => null);
setLoading(false);
if (!res?.success || !res.singleRes) {
setStatus({ error: true, msg: res?.msg || `Couldn't save the name.` });
return;
}
setSaved(res.singleRes.install_name);
setValue(res.singleRes.install_name);
setFormKey((key) => key + 1);
setDirty(false);
setStatus({
success: true,
msg: res.singleRes.install_name
? `Saved. Reinstall the app on a device to see "${res.singleRes.install_name}".`
: `Removed. The app is called ${SiteData["SiteName"]} again.`,
});
};
const discard = () => {
setValue(saved);
setFormKey((key) => key + 1);
setDirty(false);
setStatus(undefined);
};
return (
<Form
onSubmit={(event) => {
event.preventDefault();
save().catch(() => {});
}}
className="w-full gap-3! items-stretch"
>
<Input
key={`install-name-${form_key}`}
label="Install name"
placeholder={SiteData["SiteName"]}
maxLength={PwaInstallNameMaxLength}
defaultValue={value}
onChange={(event) => {
setValue(event.target.value);
setDirty(true);
setStatus(undefined);
}}
info={`Shown under the app's icon on phones and computers, e.g. "Acme". Empty uses ${SiteData["SiteName"]}. A device that already installed the app keeps the old name until it's installed again.`}
/>
<SettingsSaveBar
dirty={dirty}
loading={loading}
status={status}
save_label="Save name"
onDiscard={discard}
/>
</Form>
);
}
src/pages/admin/settings/general/(sections)/install-name-section.tsx
+25
View File
@@ -0,0 +1,25 @@
import { useContext } from "react";
import { AppContext } from "@/src/pages/__root";
import isPassThroughUser from "@/src/utils/rbac/is-pass-through-user";
import SettingsGroup from "../../(partials)/settings-group";
import InstallNameForm from "../(partials)/install-name-form";
/**
* What this install is called once installed as an app, so installs for
* different teams can sit side by side on one device. Super admin only.
*/
export default function InstallNameSection() {
const { pageProps } = useContext(AppContext);
if (!isPassThroughUser({ user_types: pageProps?.user_types })) return null;
return (
<SettingsGroup
title="App name"
description="The name this install goes by when it's added to a home screen or app list."
id="install-name"
>
<InstallNameForm install_name={pageProps?.install_name} />
</SettingsGroup>
);
}
src/pages/admin/settings/general/index.tsx
+2
View File
@@ -1,4 +1,5 @@
import AppearanceSection from "./(sections)/appearance-section";
import InstallNameSection from "./(sections)/install-name-section";
import NotificationsSection from "./(sections)/notifications-section";
import PromptSection from "./(sections)/prompt-section";
import RunLimitsSection from "./(sections)/run-limits-section";
@@ -15,6 +16,7 @@ export default function AdminSettingsGeneralPage() {
description="How the app looks and behaves."
>
<AppearanceSection />
<InstallNameSection />
<NotificationsSection />
<PromptSection />
<RunLimitsSection />
src/pages/api/admin/settings/install-name.ts
+47
View File
@@ -0,0 +1,47 @@
import grabSuperAdminUser from "@/src/functions/backend/backups/grab-super-admin-user";
import grabInstallName from "@/src/functions/backend/db/app-settings/grab-install-name";
import saveAppSetting from "@/src/functions/backend/db/app-settings/save-app-setting";
import logEvent, { grabRequestIP } from "@/src/functions/backend/logger";
import { PwaInstallNameSettingKey } from "@/src/data/pwa-data";
import { SaveInstallNameRequestSchema } from "@/src/schemas/push-schema";
import AppError from "@/src/utils/app-error";
import parseWithSchema from "@/src/utils/parse-with-schema";
import safeErrorMessage from "@/src/utils/safe-error-message";
import type { APIResponseObject, BunextAPIRouteHandler } from "@moduletrace/bunext/types";
/**
* Super admin only: the name this install goes by when it's installed as
* an app. Empty puts `SiteName` back.
*/
export const handler: BunextAPIRouteHandler<APIResponseObject<{ install_name: string }>> = async ({
req,
body,
}) => {
try {
if (req.method != "POST") throw new AppError(`Method not allowed`);
const user = await grabSuperAdminUser({ req });
if (!user?.id) throw new AppError(`Only a super admin can rename the install.`);
const { install_name } = parseWithSchema({
schema: SaveInstallNameRequestSchema,
data: body,
});
await saveAppSetting({ key: PwaInstallNameSettingKey, value: install_name || null });
await logEvent({
title: "Install renamed",
category: "system",
user_id: user.id,
plain_text: `User #${user.id} set the install name to ${install_name ? `"${install_name}"` : "the default"}.`,
metadata: { install_name },
ip_address: grabRequestIP(req),
});
return { success: true, singleRes: { install_name: await grabInstallName() } };
} catch (error: unknown) {
return { success: false, msg: safeErrorMessage({ error }) };
}
};
src/schemas/push-schema.ts
+5
View File
@@ -1,4 +1,5 @@
import { z } from "zod";
import { PwaInstallNameMaxLength } from "@/src/data/pwa-data";
const PushEndpointField = z
.string()
@@ -34,3 +35,7 @@ export const PushEndpointRequestSchema = z.object({
export const PushSubscriptionIdRequestSchema = z.object({
id: z.coerce.number().int().positive("Pick a device"),
});
export const SaveInstallNameRequestSchema = z.object({
install_name: z.string().trim().max(PwaInstallNameMaxLength),
});
src/scripts/generate-brand-assets.ts
+60 -3
View File
@@ -5,8 +5,11 @@ import { SiteData } from "../data/site-data";
import { AppData } from "../data/app-data";
import { HashedAssetPattern } from "../utils/is-hashed-asset-path";
import {
PwaBadgePath,
PwaBadgeSize,
PwaBuildInfoPath,
PwaIcons,
PwaLoadingNamePlaceholder,
PwaPrecacheCachePrefix,
PwaPrecacheMarkerPath,
PwaServiceWorkerPath,
@@ -68,6 +71,52 @@ function buildIco(pngs: Record<number, Buffer>): Buffer {
return Buffer.concat([header, ...entries, ...blobs]);
}
/**
* The app's font, loaded the way `src/pages/__root.tsx` loads it, so the
* generated pages read like the app. Offline, the browser's cached copy is
* used when it has one, else the fallbacks.
*/
const FontLinks = `<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Archivo:[email protected]&display=swap" />`;
/**
* The status-bar icon Android draws from a notification's `badge`. Only
* the alpha channel counts, so it is the stone's silhouette alone, white
* on transparent (the app icons sit on opaque paper and mask to a square).
*/
async function renderBadge({ svg, size }: { svg: Buffer; size: number }) {
const silhouette = await sharp(svg)
.resize(Math.round(size * 0.84), Math.round(size * 0.84), { fit: "contain" })
.ensureAlpha()
.extractChannel("alpha")
.toBuffer();
const mark = await sharp({
create: {
width: Math.round(size * 0.84),
height: Math.round(size * 0.84),
channels: 3,
background: "#ffffff",
},
})
.joinChannel(silhouette)
.png()
.toBuffer();
return sharp({
create: {
width: size,
height: size,
channels: 4,
background: { r: 0, g: 0, b: 0, alpha: 0 },
},
})
.composite([{ input: mark, gravity: "center" }])
.png()
.toBuffer();
}
function escapeHtml(text: string) {
return text
.replace(/&/g, "&amp;")
@@ -202,6 +251,7 @@ function buildOfflinePage({
<meta name="theme-color" content="${colors.paper}" />
<title>Offline | ${name}</title>
<link rel="manifest" href="${PwaManifestPath}" />
${FontLinks}
<style>
:root {
--paper: ${colors.paper};
@@ -228,7 +278,7 @@ body {
padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
background: var(--paper);
color: var(--ink);
font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
main {
@@ -310,8 +360,9 @@ function buildLoadingPage({
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<meta name="theme-color" content="${colors.paper}" />
<meta name="robots" content="noindex" />
<title>${name}</title>
<title>${PwaLoadingNamePlaceholder}</title>
<link rel="manifest" href="${PwaManifestPath}" />
${FontLinks}
<style>
:root {
--paper: ${colors.paper};
@@ -338,7 +389,7 @@ body {
padding: calc(24px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom));
background: var(--paper);
color: var(--ink);
font-family: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
font-family: "Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
-webkit-font-smoothing: antialiased;
}
main {
@@ -610,6 +661,11 @@ async function main() {
);
}
writeFileSync(
path.join(PUBLIC_DIR, PwaBadgePath.replace(/^\//, "")),
await renderBadge({ svg, size: PwaBadgeSize }),
);
writeFileSync(
path.join(PUBLIC_DIR, "manifest.webmanifest"),
`${JSON.stringify(buildManifest({ colors }), null, 4)}\n`,
@@ -634,6 +690,7 @@ async function main() {
console.log(" public/icons/icon-512.png (app icon)");
console.log(" public/icons/maskable-192.png (maskable, safe zone)");
console.log(" public/icons/maskable-512.png (maskable, safe zone)");
console.log(" public/icons/badge-96.png (notification badge, alpha only)");
console.log(" public/manifest.webmanifest (name, colors and icons)");
console.log(" public/offline.html (self-contained offline page)");
console.log(" public/loading.html (precache loading page)");
src/styles/main.css
+1 -1
View File
@@ -73,7 +73,7 @@
@theme inline {
/* Typography */
--font-sans:
"Lato", "Liberation Sans", system-ui, -apple-system, sans-serif;
"Archivo", "Liberation Sans", system-ui, -apple-system, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
/* Cobble neutrals - switch with the color scheme */
src/types/index.ts
+5
View File
@@ -1438,6 +1438,11 @@ export type PagePropsType = {
* at once, with the code's defaults (the General settings page).
*/
skill_limits?: SkillLimitsOverview | null;
/**
* The name the install goes by as an installed app (Settings >
* General, and the root's head tags). Empty when never named.
*/
install_name?: string | null;
/**
* The release the server is running, for the General settings page.
*/
src/utils/escape-html.ts
+15
View File
@@ -0,0 +1,15 @@
type Params = {
text: string;
};
/**
* Text made safe to drop into HTML, in an element or a quoted attribute.
*/
export default function escapeHtml({ text }: Params) {
return text
.replace(/&/g, "&amp;")
.replace(/</g, "&lt;")
.replace(/>/g, "&gt;")
.replace(/"/g, "&quot;")
.replace(/'/g, "&#39;");
}
src/utils/install-display-name.ts
+13
View File
@@ -0,0 +1,13 @@
import { SiteData } from "@/src/data/site-data";
type Params = {
install_name?: string | null;
};
/**
* What the installed app is called: the install's own name, else
* `SiteName`.
*/
export default function installDisplayName({ install_name }: Params) {
return install_name?.trim() || SiteData["SiteName"];
}
src/utils/name-pwa-manifest.test.ts
+34
View File
@@ -0,0 +1,34 @@
import { describe, expect, test } from "bun:test";
import { SiteData } from "@/src/data/site-data";
import namePwaManifest from "./name-pwa-manifest";
const manifest = {
name: SiteData["SiteName"],
short_name: SiteData["SiteName"],
start_url: "/admin/bots",
};
describe("namePwaManifest", () => {
test("leaves an unnamed install's manifest alone", () => {
expect(namePwaManifest({ manifest, install_name: "" })).toEqual(manifest);
expect(namePwaManifest({ manifest, install_name: " " })).toEqual(manifest);
expect(namePwaManifest({ manifest })).toEqual(manifest);
});
test("labels the icon with the name and adds the site name to the full name", () => {
expect(namePwaManifest({ manifest, install_name: " Acme " })).toEqual({
...manifest,
name: `Acme - ${SiteData["SiteName"]}`,
short_name: "Acme",
});
});
test("doesn't repeat the site name when the name already has it", () => {
const install_name = `Acme ${SiteData["SiteName"].toUpperCase()}`;
expect(namePwaManifest({ manifest, install_name })).toMatchObject({
name: install_name,
short_name: install_name,
});
});
});
src/utils/name-pwa-manifest.ts
+27
View File
@@ -0,0 +1,27 @@
import { SiteData } from "@/src/data/site-data";
type Params = {
manifest: Record<string, unknown>;
install_name?: string | null;
};
/**
* The generated manifest with the install's own name, so the launcher
* tells two installs apart. `short_name` (the label under the icon) is the
* name alone; `name` adds `SiteName` unless the name already says it.
* Unnamed, the manifest is unchanged.
*/
export default function namePwaManifest({ manifest, install_name }: Params) {
const name = install_name?.trim();
if (!name) return manifest;
const site_name = SiteData["SiteName"];
const says_site_name = name.toLowerCase().includes(site_name.toLowerCase());
return {
...manifest,
name: says_site_name ? name : `${name} - ${site_name}`,
short_name: name,
};
}