@jjlmoya/utils-tabletop 1.38.0 → 1.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.38.0",
+    "version": "1.40.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",

package/src/components/ProductionBreadcrumb.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 import type { KnownLocale } from "../types";
+import { getCategoryUi } from "../mfe/category-ui";
 import { getUtilitiesPath } from "@jjlmoya/utils-shared/routing";
 
 interface Props {
@@ -30,9 +31,10 @@ const LABELS: Record<KnownLocale, string> = {
 
 const { locale, categoryTitle, categoryHref, currentTitle } = Astro.props;
 const homeLabel = LABELS[locale];
+const breadcrumbLabel = getCategoryUi(locale).breadcrumb;
 ---
 
-<nav class="production-breadcrumb" aria-label="Breadcrumb">
+<nav class="production-breadcrumb" aria-label={breadcrumbLabel}>
     <ol class="production-breadcrumb-list">
         <li class="production-breadcrumb-item">
             <a href={getUtilitiesPath(locale)}>{homeLabel}</a>

package/src/components/ProductionStructuredData.astro

@@ -0,0 +1,46 @@
+---
+import type { KnownLocale, ToolLocaleContent } from "../types";
+import { TABLETOP_ASSET_VERSION } from "../mfe/assets";
+
+interface Props {
+    locale: KnownLocale;
+    content: ToolLocaleContent;
+    publicPath: string;
+    categoryTitle: string;
+    categoryHref: string;
+}
+
+const { locale, content, publicPath, categoryTitle, categoryHref } = Astro.props;
+const siteOrigin = locale === "es" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev";
+const fullUrl = new URL(publicPath, siteOrigin).href;
+const categoryUrl = new URL(categoryHref, siteOrigin).href;
+const brandName = locale === "es" ? "jjlmoya" : "GameBob";
+const schemas = (content.schemas ?? []).filter((schema) => (schema as unknown as Record<string, unknown>)["@type"] !== "FAQPage");
+const schemaTypes = new Set(schemas.map((schema) => (schema as unknown as Record<string, unknown>)["@type"]));
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        { "@type": "ListItem", position: 1, name: brandName, item: `${siteOrigin}/${locale === "es" ? "" : `${locale}/`}` },
+        { "@type": "ListItem", position: 2, name: categoryTitle, item: categoryUrl },
+        { "@type": "ListItem", position: 3, name: content.title, item: fullUrl },
+    ],
+};
+const webApplicationSchema = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: content.title,
+    description: content.description,
+    url: fullUrl,
+    applicationCategory: "UtilityApplication",
+    operatingSystem: "Any",
+    softwareVersion: TABLETOP_ASSET_VERSION,
+    author: { "@type": "Person", name: "jjlmoya", url: siteOrigin },
+    publisher: { "@type": "Organization", name: brandName, url: siteOrigin },
+    inLanguage: locale,
+    offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" },
+};
+---
+<script is:inline type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
+{!schemaTypes.has("WebApplication") && <script is:inline type="application/ld+json" set:html={JSON.stringify(webApplicationSchema)} />}
+{schemas.map((schema) => <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />)}

package/src/layouts/ProductionPage.astro

@@ -12,6 +12,7 @@ import { HEADER_UI } from "../i18n/header-ui";
 import { LANGUAGE_LOCALES, LANGUAGE_NAMES, type Language } from "../i18n/languages";
 import { LANGUAGE_UI } from "../i18n/language-ui";
 import { getBrand } from "../identity/brands";
+import { getBrandAssetPath } from "../mfe/assets";
 
 interface AlternateLink { language: Language; url: string; }
 interface Props {
@@ -21,11 +22,15 @@ interface Props {
     image?: string | undefined;
     toolCss?: string | undefined;
     publicPath: string;
+    manifestPath?: string | undefined;
     alternates: readonly AlternateLink[];
 }
 
-const { title, description, locale, image, toolCss, publicPath, alternates } = Astro.props;
+const { title, description, locale, image, toolCss, publicPath, manifestPath, alternates } = Astro.props;
 const brand = getBrand(locale);
+const brandFavicon = getBrandAssetPath(brand, "favicon");
+const brandSizedFavicon = getBrandAssetPath(brand, "faviconSized");
+const brandAppleTouchIcon = getBrandAssetPath(brand, "appleTouchIcon");
 const origin = brand === "jjlmoya" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev";
 const canonical = new URL(publicPath, origin).href;
 const socialImage = image ? new URL(image, canonical).href : undefined;
@@ -60,6 +65,10 @@ const xDefaultUrl = alternates.find(({ language }) => language === "en")?.url ??
         <meta name="author" content="jjlmoya" />
         <meta name="robots" content="index, follow, max-image-preview:large" />
         <meta name="referrer" content="strict-origin-when-cross-origin" />
+        <link rel="icon" type="image/x-icon" href={brandFavicon} />
+        <link rel="icon" type="image/webp" sizes={brand === "jjlmoya" ? "32x32" : "48x48"} href={brandSizedFavicon} />
+        <link rel="apple-touch-icon" href={brandAppleTouchIcon} />
+        {manifestPath && <link rel="manifest" href={manifestPath} />}
         <link rel="canonical" href={canonical} />
         {alternates.map(({ language, url }) => <link rel="alternate" hreflang={language} href={absoluteUrl(language, url)} />)}
         <link rel="alternate" hreflang="x-default" href={absoluteUrl("en", xDefaultUrl)} />

package/src/layouts/ProductionUtilityPage.astro

@@ -4,10 +4,11 @@ import { FAQSection, UtilityHeader } from "@jjlmoya/utils-shared";
 import { Icon } from "astro-icon/components";
 import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
 import ProductionWidget from "../components/ProductionWidget.astro";
+import ProductionStructuredData from "../components/ProductionStructuredData.astro";
 import type { KnownLocale, ToolLocaleContent } from "../types";
 import { getCategoryUi } from "../mfe/category-ui";
 import { getCategoryPath, getUtilityPath } from "../mfe/routes";
-import { getUtilityCssPath } from "../mfe/assets";
+import { getUtilityCssPath, TABLETOP_ASSET_VERSION } from "../mfe/assets";
 import type { AstroComponentFactory } from "astro/runtime/server/index.js";
 
 interface RelatedTool { title: string; description: string; href: string; icon: string; }
@@ -21,24 +22,24 @@ const publicCategoryPath = getCategoryPath(locale, categorySlug);
 const ui = getCategoryUi(locale);
 ---
 
-<ProductionPage title={content.title} description={content.description} {locale} {publicPath} {alternates} {image} toolCss={getUtilityCssPath(englishSlug)}>
+<ProductionPage title={content.title} description={content.description} {locale} {publicPath} manifestPath={`${publicPath}manifest.json?version=${TABLETOP_ASSET_VERSION}`} {alternates} {image} toolCss={getUtilityCssPath(englishSlug)}>
   <div class="utility-production">
     <div class="utility-production-inner">
       <ProductionBreadcrumb locale={locale} categoryTitle={categoryTitle} categoryHref={categoryHref || publicCategoryPath} currentTitle={content.title} />
       <UtilityHeader titleHighlight={titleHighlight} titleBase={titleBase} description={content.description} gradientFrom="#10b981" gradientTo="#0d9488" />
       <section class="utility-tool-production"><Component ui={content.ui} locale={locale} /></section>
-      <div class="utility-zoom-production" aria-label="Zoom controls">
-        <span class="utility-zoom-label">Zoom</span>
-        <div class="utility-zoom-controls"><button type="button" data-zoom="out" aria-label="Zoom out">−</button><button type="button" data-zoom="reset" aria-label="Reset zoom">100%</button><button type="button" data-zoom="in" aria-label="Zoom in">+</button></div>
+      <div class="utility-zoom-production" aria-label={ui.zoomControls}>
+        <span class="utility-zoom-label">{ui.zoom}</span>
+        <div class="utility-zoom-controls"><button type="button" data-zoom="out" aria-label={ui.zoomOut}>−</button><button type="button" data-zoom="reset" aria-label={ui.resetZoom}>100%</button><button type="button" data-zoom="in" aria-label={ui.zoomIn}>+</button></div>
       </div>
       <ProductionWidget locale={locale} slug={content.slug} />
       {content.faq.length > 0 && <section class="utility-section-production"><FAQSection items={content.faq} /></section>}
       <Fragment slot="head">
-        {(content.schemas ?? []).map((schema) => <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />)}
+        <ProductionStructuredData locale={locale} {content} {publicPath} categoryTitle={categoryTitle} categoryHref={categoryHref || publicCategoryPath} />
       </Fragment>
       <section class="utility-section-production"><SEOComponent locale={locale} /></section>
       {content.bibliography.length > 0 && <section class="utility-section-production"><BibliographyComponent locale={locale} /></section>}
-      {relatedTools.length > 0 && <section class="utility-related-production" aria-labelledby="related-tools-title"><div class="utility-related-heading"><span class="utility-related-eyebrow">Keep exploring</span><h2 id="related-tools-title">More tools in {categoryTitle}</h2></div><div class="utility-related-grid">{relatedTools.map((tool, index) => <a href={tool.href} class="utility-related-card"><span class="utility-related-index">{String(index + 1).padStart(2, "0")}</span><span class="utility-related-icon"><Icon name={tool.icon} /></span><h3>{tool.title}</h3><p>{tool.description}</p><span class="utility-related-cta">{ui.openTool} <Icon name="mdi:arrow-top-right" /></span></a>)}</div></section>}
+      {relatedTools.length > 0 && <section class="utility-related-production" aria-labelledby="related-tools-title"><div class="utility-related-heading"><span class="utility-related-eyebrow">{ui.relatedEyebrow}</span><h2 id="related-tools-title">{ui.moreToolsIn} {categoryTitle}</h2></div><div class="utility-related-grid">{relatedTools.map((tool, index) => <a href={tool.href} class="utility-related-card"><span class="utility-related-index">{String(index + 1).padStart(2, "0")}</span><span class="utility-related-icon"><Icon name={tool.icon} /></span><h3>{tool.title}</h3><p>{tool.description}</p><span class="utility-related-cta">{ui.openTool} <Icon name="mdi:arrow-top-right" /></span></a>)}</div></section>}
     </div>
   </div>
 </ProductionPage>

package/src/mfe/assets.ts

@@ -1,4 +1,7 @@
 import packageMetadata from "../../package.json";
+import type { Brand } from "../identity/brands";
+
+const UTILITY_ASSET_ROOT = "/_utilities/tabletop";
 
 export const TABLETOP_ASSET_VERSION = encodeURIComponent(
     import.meta.env.PUBLIC_APP_VERSION ?? packageMetadata.version,
@@ -6,6 +9,27 @@ export const TABLETOP_ASSET_VERSION = encodeURIComponent(
 
 const withAssetVersion = (path: string): string => `${path}?version=${TABLETOP_ASSET_VERSION}`;
 
+export const getUtilityAssetPath = (assetName: string): string =>
+    withAssetVersion(`${UTILITY_ASSET_ROOT}/${assetName}`);
+
+const BRAND_ASSETS = {
+    gamebob: {
+        favicon: "favicon.ico",
+        faviconSized: "favicon-48.webp",
+        appleTouchIcon: "apple-touch-icon-brand.webp",
+    },
+    jjlmoya: {
+        favicon: "favicon-jjlmoya.ico",
+        faviconSized: "favicon-jjlmoya-32.webp",
+        appleTouchIcon: "apple-touch-icon-jjlmoya.webp",
+    },
+} as const satisfies Record<Brand, Record<"favicon" | "faviconSized" | "appleTouchIcon", string>>;
+
+export const getBrandAssetPath = (
+    brand: Brand,
+    asset: keyof (typeof BRAND_ASSETS)[Brand],
+): string => getUtilityAssetPath(BRAND_ASSETS[brand][asset]);
+
 export const getUtilityOgImage = (englishSlug: string): string =>
     withAssetVersion(`/_utilities/tabletop/images/${englishSlug}.webp`);
 

package/src/mfe/category-ui.ts

@@ -3,24 +3,32 @@ import type { KnownLocale } from '../types';
 export interface CategoryUi {
   useTool: string;
   openTool: string;
+  relatedEyebrow: string;
+  moreToolsIn: string;
+  zoom: string;
+  zoomControls: string;
+  zoomOut: string;
+  resetZoom: string;
+  zoomIn: string;
+  breadcrumb: string;
 }
 
 export const CATEGORY_UI: Record<KnownLocale, CategoryUi> = {
-  es: { useTool: 'Usar herramienta', openTool: 'Abrir herramienta' },
-  en: { useTool: 'Use tool', openTool: 'Open tool' },
-  fr: { useTool: "Utiliser l'outil", openTool: "Ouvrir l'outil" },
-  de: { useTool: 'Werkzeug verwenden', openTool: 'Werkzeug öffnen' },
-  it: { useTool: 'Usa lo strumento', openTool: 'Apri lo strumento' },
-  pt: { useTool: 'Usar ferramenta', openTool: 'Abrir ferramenta' },
-  nl: { useTool: 'Tool gebruiken', openTool: 'Tool openen' },
-  sv: { useTool: 'Använd verktyget', openTool: 'Öppna verktyget' },
-  pl: { useTool: 'Użyj narzędzia', openTool: 'Otwórz narzędzie' },
-  id: { useTool: 'Gunakan alat', openTool: 'Buka alat' },
-  tr: { useTool: 'Aracı kullan', openTool: 'Aracı aç' },
-  ru: { useTool: 'Использовать инструмент', openTool: 'Открыть инструмент' },
-  ja: { useTool: 'ツールを使う', openTool: 'ツールを開く' },
-  ko: { useTool: '도구 사용', openTool: '도구 열기' },
-  zh: { useTool: '使用工具', openTool: '打开工具' },
+  es: { useTool: 'Usar herramienta', openTool: 'Abrir herramienta', relatedEyebrow: 'Sigue explorando', moreToolsIn: 'Más herramientas en', zoom: 'Zoom', zoomControls: 'Controles de zoom', zoomOut: 'Reducir zoom', resetZoom: 'Restablecer zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Migas de pan' },
+  en: { useTool: 'Use tool', openTool: 'Open tool', relatedEyebrow: 'Keep exploring', moreToolsIn: 'More tools in', zoom: 'Zoom', zoomControls: 'Zoom controls', zoomOut: 'Zoom out', resetZoom: 'Reset zoom', zoomIn: 'Zoom in', breadcrumb: 'Breadcrumb' },
+  fr: { useTool: "Utiliser l'outil", openTool: "Ouvrir l'outil", relatedEyebrow: 'Continuez à explorer', moreToolsIn: "Plus d'outils dans", zoom: 'Zoom', zoomControls: 'Commandes de zoom', zoomOut: 'Réduire le zoom', resetZoom: 'Réinitialiser le zoom', zoomIn: 'Augmenter le zoom', breadcrumb: 'Fil d’Ariane' },
+  de: { useTool: 'Werkzeug verwenden', openTool: 'Werkzeug öffnen', relatedEyebrow: 'Mehr entdecken', moreToolsIn: 'Weitere Werkzeuge in', zoom: 'Zoom', zoomControls: 'Zoom-Steuerung', zoomOut: 'Verkleinern', resetZoom: 'Zoom zurücksetzen', zoomIn: 'Vergrößern', breadcrumb: 'Brotkrümelnavigation' },
+  it: { useTool: 'Usa lo strumento', openTool: 'Apri lo strumento', relatedEyebrow: 'Continua a esplorare', moreToolsIn: 'Altri strumenti in', zoom: 'Zoom', zoomControls: 'Controlli zoom', zoomOut: 'Riduci zoom', resetZoom: 'Reimposta zoom', zoomIn: 'Aumenta zoom', breadcrumb: 'Breadcrumb' },
+  pt: { useTool: 'Usar ferramenta', openTool: 'Abrir ferramenta', relatedEyebrow: 'Continue a explorar', moreToolsIn: 'Mais ferramentas em', zoom: 'Zoom', zoomControls: 'Controlos de zoom', zoomOut: 'Reduzir zoom', resetZoom: 'Repor zoom', zoomIn: 'Aumentar zoom', breadcrumb: 'Trilho de navegação' },
+  nl: { useTool: 'Tool gebruiken', openTool: 'Tool openen', relatedEyebrow: 'Blijf ontdekken', moreToolsIn: 'Meer tools in', zoom: 'Zoom', zoomControls: 'Zoomknoppen', zoomOut: 'Uitzoomen', resetZoom: 'Zoom herstellen', zoomIn: 'Inzoomen', breadcrumb: 'Broodkruimelnavigatie' },
+  sv: { useTool: 'Använd verktyget', openTool: 'Öppna verktyget', relatedEyebrow: 'Utforska mer', moreToolsIn: 'Fler verktyg i', zoom: 'Zoom', zoomControls: 'Zoomkontroller', zoomOut: 'Zooma ut', resetZoom: 'Återställ zoom', zoomIn: 'Zooma in', breadcrumb: 'Brödsmulenavigering' },
+  pl: { useTool: 'Użyj narzędzia', openTool: 'Otwórz narzędzie', relatedEyebrow: 'Odkrywaj dalej', moreToolsIn: 'Więcej narzędzi w', zoom: 'Powiększenie', zoomControls: 'Sterowanie powiększeniem', zoomOut: 'Pomniejsz', resetZoom: 'Resetuj powiększenie', zoomIn: 'Powiększ', breadcrumb: 'Okruszki nawigacji' },
+  id: { useTool: 'Gunakan alat', openTool: 'Buka alat', relatedEyebrow: 'Jelajahi lebih lanjut', moreToolsIn: 'Alat lainnya di', zoom: 'Zoom', zoomControls: 'Kontrol zoom', zoomOut: 'Perkecil', resetZoom: 'Atur ulang zoom', zoomIn: 'Perbesar', breadcrumb: 'Breadcrumb' },
+  tr: { useTool: 'Aracı kullan', openTool: 'Aracı aç', relatedEyebrow: 'Keşfetmeye devam edin', moreToolsIn: 'Diğer araçlar:', zoom: 'Yakınlaştırma', zoomControls: 'Yakınlaştırma denetimleri', zoomOut: 'Uzaklaştır', resetZoom: 'Yakınlaştırmayı sıfırla', zoomIn: 'Yakınlaştır', breadcrumb: 'İçerik haritası' },
+  ru: { useTool: 'Использовать инструмент', openTool: 'Открыть инструмент', relatedEyebrow: 'Продолжить изучение', moreToolsIn: 'Другие инструменты в', zoom: 'Масштаб', zoomControls: 'Управление масштабом', zoomOut: 'Уменьшить', resetZoom: 'Сбросить масштаб', zoomIn: 'Увеличить', breadcrumb: 'Навигационная цепочка' },
+  ja: { useTool: 'ツールを使う', openTool: 'ツールを開く', relatedEyebrow: 'さらに探索', moreToolsIn: 'その他のツール：', zoom: 'ズーム', zoomControls: 'ズーム操作', zoomOut: '縮小', resetZoom: 'ズームをリセット', zoomIn: '拡大', breadcrumb: 'パンくずリスト' },
+  ko: { useTool: '도구 사용', openTool: '도구 열기', relatedEyebrow: '더 탐색하기', moreToolsIn: '카테고리의 다른 도구:', zoom: '확대/축소', zoomControls: '확대/축소 컨트롤', zoomOut: '축소', resetZoom: '확대/축소 초기화', zoomIn: '확대', breadcrumb: '탐색 경로' },
+  zh: { useTool: '使用工具', openTool: '打开工具', relatedEyebrow: '继续探索', moreToolsIn: '更多工具：', zoom: '缩放', zoomControls: '缩放控件', zoomOut: '缩小', resetZoom: '重置缩放', zoomIn: '放大', breadcrumb: '面包屑导航' },
 };
 
 export const getCategoryUi = (locale: KnownLocale): CategoryUi => CATEGORY_UI[locale];

package/src/mfe/manifest.ts

@@ -0,0 +1,45 @@
+import { getUtilityOgImage } from "./assets";
+
+export interface UtilityManifestInput {
+    title: string;
+    description: string;
+    startUrl: string;
+    englishSlug: string;
+}
+
+const buildUtilityManifest = ({
+    title,
+    description,
+    startUrl,
+    englishSlug,
+}: UtilityManifestInput) => {
+    const shortName = title.length > 12
+        ? title.split(/\s+/).map((word) => word[0]).join("")
+        : title;
+    const manifest = {
+        name: title,
+        short_name: shortName,
+        description,
+        start_url: startUrl,
+        scope: startUrl,
+        icons: [{
+            src: getUtilityOgImage(englishSlug),
+            sizes: "512x512",
+            type: "image/webp",
+            purpose: "any",
+        }],
+        theme_color: "#0f172a",
+        background_color: "#0f172a",
+        display: "standalone",
+        orientation: "portrait",
+    };
+
+    return manifest;
+};
+
+export const createUtilityManifestResponse = (input: UtilityManifestInput): Response => new Response(JSON.stringify(buildUtilityManifest(input), null, 2), {
+        headers: {
+            "Content-Type": "application/manifest+json",
+            "Cache-Control": "public, max-age=31536000, immutable",
+        },
+    });

package/src/pages/[locale]/[utilities]/[categories]/[category]/[slug]/manifest.json.ts

@@ -0,0 +1,49 @@
+import type { APIRoute } from "astro";
+import { ALL_TOOLS, tabletopCategory } from "../../../../../../index";
+import type { CategoryLocaleContent, ToolLocaleContent } from "../../../../../../types";
+import { LANGUAGE_CODES, type Language } from "../../../../../../i18n/languages";
+import { getCategoryNamespace, getUtilityNamespace, getUtilityPath } from "../../../../../../mfe/routes";
+import { createUtilityManifestResponse, type UtilityManifestInput } from "../../../../../../mfe/manifest";
+
+const loadCategories = async () => Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+    language,
+    await tabletopCategory.i18n[language]!(),
+]))) as Record<Language, CategoryLocaleContent>;
+
+const loadContents = async (entry: (typeof ALL_TOOLS)[number]["entry"]) => Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => {
+    const loader = entry.i18n[language] ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing ${language} locale for ${entry.id}`);
+    return [language, await loader()];
+}))) as Record<Language, ToolLocaleContent>;
+
+const createManifestPath = (locale: Exclude<Language, "es">, category: CategoryLocaleContent, content: ToolLocaleContent, englishContent: ToolLocaleContent) => ({
+    params: {
+        locale,
+        utilities: getUtilityNamespace(locale),
+        categories: getCategoryNamespace(locale),
+        category: category.slug,
+        slug: content.slug,
+    },
+    props: {
+        title: content.title,
+        description: content.description,
+        startUrl: getUtilityPath(locale, category.slug, content.slug),
+        englishSlug: englishContent.slug,
+    },
+});
+
+export async function getStaticPaths() {
+    const categories = await loadCategories();
+    const paths = [];
+    for (const { entry } of ALL_TOOLS) {
+        const contents = await loadContents(entry);
+        for (const locale of LANGUAGE_CODES.filter((candidate) => candidate !== "es")) {
+            const content = contents[locale];
+            const category = categories[locale];
+            paths.push(createManifestPath(locale, category, content, contents.en));
+        }
+    }
+    return paths;
+}
+
+export const GET: APIRoute = ({ props }) => createUtilityManifestResponse(props as unknown as UtilityManifestInput);

package/src/pages/utilidades/[slug]/manifest.json.ts

@@ -0,0 +1,28 @@
+import type { APIRoute } from "astro";
+import { ALL_TOOLS, tabletopCategory } from "../../../index";
+import type { ToolLocaleContent } from "../../../types";
+import { getUtilityPath } from "../../../mfe/routes";
+import { createUtilityManifestResponse, type UtilityManifestInput } from "../../../mfe/manifest";
+
+export async function getStaticPaths() {
+    const category = await tabletopCategory.i18n.es!();
+    const paths = [];
+    for (const { entry } of ALL_TOOLS) {
+        const loader = entry.i18n.es ?? entry.i18n.en;
+        if (!loader) continue;
+        const content = await loader() as ToolLocaleContent;
+        const englishContent = await (entry.i18n.en ?? loader)() as ToolLocaleContent;
+        paths.push({
+            params: { slug: content.slug },
+            props: {
+                title: content.title,
+                description: content.description,
+                startUrl: getUtilityPath("es", category.slug, content.slug),
+                englishSlug: englishContent.slug,
+            },
+        });
+    }
+    return paths;
+}
+
+export const GET: APIRoute = ({ props }) => createUtilityManifestResponse(props as unknown as UtilityManifestInput);

package/src/tests/category_ui.test.ts

@@ -7,10 +7,16 @@ describe('category UI translations', () => {
     for (const locale of UTILITY_LOCALES) {
       expect(getCategoryUi(locale).useTool.trim()).not.toBe('');
       expect(getCategoryUi(locale).openTool.trim()).not.toBe('');
+      expect(getCategoryUi(locale).relatedEyebrow.trim()).not.toBe('');
+      expect(getCategoryUi(locale).moreToolsIn.trim()).not.toBe('');
+      expect(getCategoryUi(locale).zoomControls.trim()).not.toBe('');
+      expect(getCategoryUi(locale).breadcrumb.trim()).not.toBe('');
     }
 
     expect(Object.keys(CATEGORY_UI).sort()).toEqual([...UTILITY_LOCALES].sort());
     expect(UTILITY_LOCALES.filter((locale) => locale !== 'en').every((locale) => getCategoryUi(locale).useTool !== 'Use tool')).toBe(true);
     expect(UTILITY_LOCALES.filter((locale) => locale !== 'en').every((locale) => getCategoryUi(locale).openTool !== 'Open tool')).toBe(true);
+    expect(UTILITY_LOCALES.filter((locale) => locale !== 'en').every((locale) => getCategoryUi(locale).relatedEyebrow !== 'Keep exploring')).toBe(true);
+    expect(UTILITY_LOCALES.filter((locale) => locale !== 'en').every((locale) => getCategoryUi(locale).moreToolsIn !== 'More tools in')).toBe(true);
   });
 });

package/src/tests/mfe_manifest.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from "vitest";
+import { createUtilityManifestResponse } from "../mfe/manifest";
+
+describe("MFE utility manifest", () => {
+    it("returns a versioned installable manifest for the current utility", async () => {
+        const response = createUtilityManifestResponse({
+            title: "Card draw odds calculator",
+            description: "Calculate card draw probabilities.",
+            startUrl: "/en/utilities/categories/tabletop/card-draw-odds-calculator/",
+            englishSlug: "card-draw-odds-calculator",
+        });
+        const manifest = await response.json() as {
+            name: string;
+            start_url: string;
+            scope: string;
+            icons: { src: string; sizes: string; type: string; purpose: string }[];
+        };
+
+        expect(response.headers.get("Content-Type")).toContain("application/manifest+json");
+        expect(response.headers.get("Cache-Control")).toContain("immutable");
+        expect(manifest.name).toBe("Card draw odds calculator");
+        expect(manifest.start_url).toBe(manifest.scope);
+        expect(manifest.icons[0]?.src).toContain("/_utilities/tabletop/images/card-draw-odds-calculator.webp?version=");
+        expect(manifest.icons[0]?.sizes).toBe("512x512");
+        expect(manifest.icons[0]?.type).toBe("image/webp");
+        expect(manifest.icons[0]?.purpose).toBe("any");
+    });
+});