@jjlmoya/utils-tabletop 1.36.0 → 1.38.0

package/src/pages/[locale]/[utilities]/[categories]/[category].astro

@@ -0,0 +1,44 @@
+---
+import ProductionCategoryPage from "../../../../layouts/ProductionCategoryPage.astro";
+import { ALL_ENTRIES, tabletopCategory } from "../../../../index";
+import { LANGUAGE_CODES, type Language } from "../../../../i18n/languages";
+import { getCategoryNamespace, getCategoryPath, getUtilityNamespace, getUtilityPath } from "../../../../mfe/routes";
+import { CATEGORY_OG_IMAGE } from "../../../../mfe/assets";
+
+export async function getStaticPaths() {
+    const categories = Object.fromEntries(await Promise.all(
+        LANGUAGE_CODES.map(async (language) => [language, await tabletopCategory.i18n[language]!()]),
+    ));
+    return LANGUAGE_CODES.filter((language) => language !== "es").map((locale) => {
+        const category = categories[locale]!;
+        const alternates = LANGUAGE_CODES.map((language) => ({
+            language,
+            url: getCategoryPath(language, categories[language]!.slug),
+        }));
+        return {
+            params: { locale, utilities: getUtilityNamespace(locale), categories: getCategoryNamespace(locale), category: category.slug },
+            props: { locale, category, alternates },
+        };
+    });
+}
+
+const { locale, category, alternates } = Astro.props as {
+    locale: Exclude<Language, "es">;
+    category: Awaited<ReturnType<NonNullable<(typeof tabletopCategory.i18n)[Language]>>>;
+    alternates: { language: Language; url: string }[];
+};
+const tools = await Promise.all(ALL_ENTRIES.map(async (entry) => {
+    const loader = entry.i18n[locale] ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing ${locale} locale for ${entry.id}`);
+    const content = await loader();
+    return {
+        id: entry.id,
+        icon: entry.icons.fg,
+        title: content.title,
+        description: content.description,
+        href: getUtilityPath(locale, category.slug, content.slug),
+    };
+}));
+---
+
+<ProductionCategoryPage locale={locale} {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

package/src/pages/index.astro

@@ -1,4 +1,4 @@
 ---
 ---
-<meta http-equiv="refresh" content="0;url=/es" />
+<meta http-equiv="refresh" content="0;url=/utilidades/categorias/juegos-de-mesa/" />
 

package/src/pages/mfe-sitemaps/[locale]/[vertical]/sitemap.xml.ts

@@ -0,0 +1,75 @@
+import type { APIRoute } from "astro";
+import { tabletopCategory } from "../../../../category";
+import { ALL_ENTRIES } from "../../../../entries";
+import { LANGUAGE_CODES, type Language } from "../../../../i18n/languages";
+import { getCategoryPath, getUtilityPath } from "../../../../mfe/routes";
+
+const GAMEBOB_URL = "https://www.gamebob.dev";
+const JJLMOYA_URL = "https://www.jjlmoya.es";
+
+type LocalizedEntry = {
+    i18n: Partial<Record<Language, () => Promise<{ slug: string }>>>;
+};
+
+const absoluteUrl = (locale: Language, path: string): string =>
+    path.startsWith("http") ? path : `${locale === "es" ? JJLMOYA_URL : GAMEBOB_URL}${path}`;
+
+const escapeXml = (value: string): string => value
+    .replaceAll("&", "&amp;")
+    .replaceAll("\"", "&quot;")
+    .replaceAll("'", "&apos;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;");
+
+const getContent = async (entry: LocalizedEntry, locale: Language): Promise<{ slug: string }> => {
+    const loader = entry.i18n[locale] ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing ${locale} and English fallback`);
+    return loader();
+};
+
+export const prerender = true;
+
+export function getStaticPaths() {
+    return LANGUAGE_CODES.map((locale) => ({
+        params: { locale, vertical: "tabletop" },
+        props: { locale },
+    }));
+}
+
+const buildUrlEntry = async (locale: Language, path: string, index: number): Promise<string> => {
+    const links = await Promise.all(LANGUAGE_CODES.map(async (alternateLocale) => {
+        const alternateCategory = await getContent(tabletopCategory, alternateLocale);
+        const alternateContent = index === 0 ? null : await getContent(ALL_ENTRIES[index - 1], alternateLocale);
+        const alternatePath = alternateContent
+            ? getUtilityPath(alternateLocale, alternateCategory.slug, alternateContent.slug)
+            : getCategoryPath(alternateLocale, alternateCategory.slug);
+        return `    <xhtml:link rel="alternate" hreflang="${alternateLocale}" href="${escapeXml(absoluteUrl(alternateLocale, alternatePath))}"/>`;
+    }));
+    return [
+        "  <url>",
+        `    <loc>${escapeXml(absoluteUrl(locale, path))}</loc>`,
+        ...links,
+        `    <changefreq>${index === 0 ? "weekly" : "monthly"}</changefreq>`,
+        `    <priority>${index === 0 ? "0.7" : "0.6"}</priority>`,
+        "  </url>",
+    ].join("\n");
+};
+
+export const GET: APIRoute = async ({ props }) => {
+    const locale = props.locale as Language;
+    const category = await getContent(tabletopCategory, locale);
+    const contents = await Promise.all(ALL_ENTRIES.map((entry) => getContent(entry, locale)));
+    const paths = [
+        getCategoryPath(locale, category.slug),
+        ...contents.map((content) => getUtilityPath(locale, category.slug, content.slug)),
+    ];
+    const urls = await Promise.all(paths.map((path, index) => buildUrlEntry(locale, path, index)));
+
+    const xml = `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">\n${urls.join("\n")}\n</urlset>`;
+    return new Response(xml, {
+        headers: {
+            "Content-Type": "application/xml; charset=utf-8",
+            "Cache-Control": "public, max-age=3600, s-maxage=3600, must-revalidate",
+        },
+    });
+};

package/src/pages/utilidades/[slug].astro

@@ -0,0 +1,90 @@
+---
+import ProductionUtilityPage from "../../layouts/ProductionUtilityPage.astro";
+import { ALL_TOOLS, tabletopCategory } from "../../index";
+import { LANGUAGE_CODES, type Language } from "../../i18n/languages";
+import type { CategoryLocaleContent, ToolLocaleContent } from "../../types";
+import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+import { getCategoryPath, getUtilityPath } from "../../mfe/routes";
+import { getUtilityOgImage } from "../../mfe/assets";
+
+type Loader<T> = () => Promise<{ default: T }>;
+type LoadedTool = ToolLocaleContent;
+
+export async function getStaticPaths() {
+    const category = await tabletopCategory.i18n.es!();
+    const categories = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+        language,
+        await tabletopCategory.i18n[language]!(),
+    ]))) as Record<Language, CategoryLocaleContent>;
+    const paths = [];
+    for (const { entry, Component: componentLoader, SEOComponent: seoLoader, BibliographyComponent: bibliographyLoader } of ALL_TOOLS) {
+        const contents = 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, LoadedTool>;
+        const { default: Component } = await (componentLoader as Loader<AstroComponentFactory>)();
+        const { default: SEOComponent } = await (seoLoader as Loader<AstroComponentFactory>)();
+        const { default: BibliographyComponent } = await (bibliographyLoader as Loader<AstroComponentFactory>)();
+        paths.push({
+            params: { slug: contents.es.slug },
+            props: {
+                locale: "es",
+                content: contents.es,
+                englishSlug: contents.en.slug,
+                category,
+                categorySlug: category.slug,
+                Component,
+                SEOComponent,
+                BibliographyComponent,
+                alternates: LANGUAGE_CODES.map((language) => ({
+                    language,
+                    url: getUtilityPath(language, categories[language].slug, contents[language].slug),
+                })),
+                image: getUtilityOgImage(contents.en.slug),
+            },
+        });
+    }
+    return paths;
+}
+
+const { locale, content, englishSlug, category, categorySlug, Component, SEOComponent, BibliographyComponent, alternates, image } = Astro.props as {
+    locale: "es";
+    content: LoadedTool;
+    englishSlug: string;
+    category: CategoryLocaleContent;
+    categorySlug: string;
+    Component: AstroComponentFactory;
+    SEOComponent: AstroComponentFactory;
+    BibliographyComponent: AstroComponentFactory;
+    alternates: { language: Language; url: string }[];
+    image?: string;
+};
+const relatedTools = (await Promise.all(ALL_TOOLS.map(async ({ entry: relatedEntry }) => {
+    const loader = relatedEntry.i18n.es ?? relatedEntry.i18n.en;
+    if (!loader) return null;
+    const relatedContent = await loader();
+    if (relatedContent.slug === content.slug) return null;
+    return {
+        icon: relatedEntry.icons.fg,
+        title: relatedContent.title,
+        description: relatedContent.description,
+        href: getUtilityPath("es", categorySlug, relatedContent.slug),
+    };
+}))).filter((tool): tool is { icon: string; title: string; description: string; href: string } => tool !== null);
+---
+
+<ProductionUtilityPage
+    {locale}
+    {content}
+    {englishSlug}
+    categoryTitle={category.title}
+    {categorySlug}
+    categoryHref={getCategoryPath(locale, categorySlug)}
+    {relatedTools}
+    {Component}
+    {SEOComponent}
+    {BibliographyComponent}
+    {alternates}
+    {image}
+/> 

package/src/pages/utilidades/categorias/[category].astro

@@ -0,0 +1,38 @@
+---
+import ProductionCategoryPage from "../../../layouts/ProductionCategoryPage.astro";
+import { ALL_ENTRIES, tabletopCategory } from "../../../index";
+import { LANGUAGE_CODES, type Language } from "../../../i18n/languages";
+import { getCategoryPath, getUtilityPath } from "../../../mfe/routes";
+import { CATEGORY_OG_IMAGE } from "../../../mfe/assets";
+
+export async function getStaticPaths() {
+    const categories = Object.fromEntries(await Promise.all(
+        LANGUAGE_CODES.map(async (language) => [language, await tabletopCategory.i18n[language]!()]),
+    ));
+    const category = categories.es!;
+    const alternates = LANGUAGE_CODES.map((language) => ({
+        language,
+        url: getCategoryPath(language, categories[language]!.slug),
+    }));
+    return [{ params: { category: category.slug }, props: { category, alternates } }];
+}
+
+const { category, alternates } = Astro.props as {
+    category: Awaited<ReturnType<NonNullable<(typeof tabletopCategory.i18n)[Language]>>>;
+    alternates: { language: Language; url: string }[];
+};
+const tools = await Promise.all(ALL_ENTRIES.map(async (entry) => {
+    const loader = entry.i18n.es ?? entry.i18n.en;
+    if (!loader) throw new Error(`Missing Spanish locale for ${entry.id}`);
+    const content = await loader();
+    return {
+        id: entry.id,
+        icon: entry.icons.fg,
+        title: content.title,
+        description: content.description,
+        href: getUtilityPath("es", category.slug, content.slug),
+    };
+}));
+---
+
+<ProductionCategoryPage locale="es" {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

package/src/tests/category_ui.test.ts

@@ -0,0 +1,16 @@
+import { UTILITY_LOCALES } from '@jjlmoya/utils-shared/routing';
+import { describe, expect, it } from 'vitest';
+import { CATEGORY_UI, getCategoryUi } from '../mfe/category-ui';
+
+describe('category UI translations', () => {
+  it('provides a translated use-tool CTA for every supported locale', () => {
+    for (const locale of UTILITY_LOCALES) {
+      expect(getCategoryUi(locale).useTool.trim()).not.toBe('');
+      expect(getCategoryUi(locale).openTool.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);
+  });
+});

package/src/tests/mfe_assets_contract.test.ts

@@ -0,0 +1,44 @@
+import { existsSync, readdirSync } from 'fs';
+import { join } from 'path';
+import { describe, expect, it } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import {
+  CATEGORY_OG_IMAGE,
+  getUtilityCssPath,
+  getUtilityOgImage,
+  TABLETOP_ASSET_VERSION,
+} from '../mfe/assets';
+
+const assetRoot = join(process.cwd(), 'public', '_utilities', 'tabletop', 'images');
+
+describe('MFE asset contract', () => {
+  it('keeps one English OG asset per category and tool', async () => {
+    const expectedSlugs = new Set(['tabletop']);
+
+    for (const { entry } of ALL_TOOLS) {
+      const loader = entry.i18n.en;
+      if (!loader) throw new Error(`Missing English locale for ${entry.id}`);
+      expectedSlugs.add((await loader()).slug);
+    }
+
+    const actualSlugs = new Set(
+      readdirSync(assetRoot)
+        .filter((filename) => filename.endsWith('.webp'))
+        .map((filename) => filename.slice(0, -'.webp'.length)),
+    );
+
+    expect(actualSlugs).toEqual(expectedSlugs);
+    for (const slug of expectedSlugs) {
+      expect(existsSync(join(assetRoot, `${slug}.webp`))).toBe(true);
+      expect(getUtilityOgImage(slug)).toBe(
+        `/_utilities/tabletop/images/${slug}.webp?version=${TABLETOP_ASSET_VERSION}`,
+      );
+      expect(getUtilityCssPath(slug)).toBe(
+        `/_utilities/tabletop/styles/${slug}.css?version=${TABLETOP_ASSET_VERSION}`,
+      );
+    }
+    expect(CATEGORY_OG_IMAGE).toBe(
+      `/_utilities/tabletop/images/tabletop.webp?version=${TABLETOP_ASSET_VERSION}`,
+    );
+  });
+});

package/src/tests/routing_contract.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it } from 'vitest';
+import {
+  UTILITY_LOCALES,
+  getCategoryNamespace,
+  getCategoryPath,
+  getUtilitiesPath,
+  getUtilityPath,
+  getUtilityNamespace,
+} from '@jjlmoya/utils-shared/routing';
+
+describe('Public utility routing contract', () => {
+  it('keeps the complete fifteen-locale utility set', () => {
+    expect(UTILITY_LOCALES).toHaveLength(15);
+    expect(new Set(UTILITY_LOCALES).size).toBe(15);
+  });
+
+  it('keeps Spanish on the external jjlmoya host', () => {
+    expect(getUtilitiesPath('es')).toBe('https://www.jjlmoya.es/utilidades/');
+    expect(getCategoryPath('es', 'juegos-de-mesa')).toBe(
+      'https://www.jjlmoya.es/utilidades/categorias/juegos-de-mesa/',
+    );
+    expect(getUtilityPath('es', 'juegos-de-mesa', 'tirador-de-dados')).toBe(
+      'https://www.jjlmoya.es/utilidades/tirador-de-dados/',
+    );
+  });
+
+  it('serializes every internal locale with both translated namespaces', () => {
+    for (const locale of UTILITY_LOCALES.filter((candidate) => candidate !== 'es')) {
+      expect(getUtilitiesPath(locale)).toBe(`/${locale}/${getUtilityNamespace(locale)}/`);
+      const category = getCategoryPath(locale, 'tabletop');
+      const utility = getUtilityPath(locale, 'tabletop', 'dice-roller-simulator');
+
+      expect(category).toBe(
+        `/${locale}/${getUtilityNamespace(locale)}/${getCategoryNamespace(locale)}/tabletop/`,
+      );
+      expect(utility).toBe(
+        `/${locale}/${getUtilityNamespace(locale)}/${getCategoryNamespace(locale)}/tabletop/dice-roller-simulator/`,
+      );
+    }
+  });
+});

package/src/tool/board-game-timer/component.astro

@@ -1,5 +1,4 @@
 ---
-import './board-game-timer.css';
 import SetupPanel from './components/SetupPanel.astro';
 import DuelTimer from './components/DuelTimer.astro';
 import MultiplayerTimer from './components/MultiplayerTimer.astro';

package/src/tool/card-draw-odds-calculator/component.astro

@@ -1,5 +1,4 @@
 ---
-import './card-draw-odds-calculator.css';
 import type { CardDrawOddsUI } from './ui';
 import { DEFAULT_INPUT } from './logic';
 

package/src/tool/dungeon-map-generator/component.astro

@@ -1,5 +1,5 @@
----
-import { buildMapSvg } from './dom-views';
+---
+import { buildMapSvg } from './dom-views';
 import { evaluateMap } from './evaluator';
 import { DEFAULT_CONFIG, generateDungeon } from './logic';
 import type { DungeonMapGeneratorUI } from './ui';

package/src/tool/fantasy-runes-translator/component.astro

@@ -1,5 +1,4 @@
 ---
-import './fantasy-runes-translator.css';
 
 interface Props {
   ui: Record<string, string>;

package/src/tool/first-player-selector/component.astro

@@ -1,5 +1,4 @@
 ---
-import './first-player-selector.css';
 
 interface Props {
   ui: Record<string, string>;

package/src/tool/hidden-role-dealer/component.astro

@@ -1,5 +1,4 @@
 ---
-import './hidden-role-dealer.css';
 
 interface Props {
   ui: Record<string, string>;

package/src/tool/lunar-tide-tracker/component.astro

@@ -1,5 +1,4 @@
 ---
-import './lunar-tide-tracker.css';
 
 interface Props {
   ui: Record<string, string>;

package/src/tool/mus-scoreboard/component.astro

@@ -1,5 +1,4 @@
 ---
-import './online-mus-scoreboard.css';
 import { musScoreboard } from './index';
 import type { KnownLocale } from '../../types';
 import type { MusScoreboardUI } from './ui';

package/src/tool/rpg-initiative-tracker/component.astro

@@ -1,5 +1,4 @@
 ---
-import './rpg-initiative-tracker.css';
 import AddForm from './components/AddForm.astro';
 import CombatantList from './components/CombatantList.astro';
 import TurnControls from './components/TurnControls.astro';

package/src/tool/rpg-settlement-exploration-map-generator/component.astro

@@ -3,7 +3,6 @@ import { buildMapSvg } from './dom-views';
 import { evaluateSettlement } from './evaluator';
 import { DEFAULT_CONFIG, generateSettlement } from './logic';
 import type { SettlementMapUI } from './ui';
-import './rpg-settlement-exploration-map-generator.css';
 interface Props { ui: SettlementMapUI; }
 const { ui } = Astro.props;
 const initialMap = generateSettlement(DEFAULT_CONFIG);

package/src/tool/scatter-direction-selector/component.astro

@@ -1,5 +1,4 @@
 ---
-import './scatter-direction-selector.css';
 
 interface Props {
   ui: Record<string, string>;

package/src/tool/score-tracker/component.astro

@@ -1,5 +1,4 @@
 ---
-import './score-tracker.css';
 import PlayerSetup from './components/PlayerSetup.astro';
 import RoundScoring from './components/RoundScoring.astro';
 import Leaderboard from './components/Leaderboard.astro';

package/src/tool/token-stamp-studio/component.astro

@@ -1,5 +1,4 @@
 ---
-import './token-stamp-studio.css';
 import type { TokenStampUI } from './ui';
 
 const { ui } = Astro.props as { ui: TokenStampUI };

package/src/types.ts

@@ -1,11 +1,10 @@
 import type { SEOSection } from '@jjlmoya/utils-shared';
+import type { UtilityLocale } from '@jjlmoya/utils-shared/routing';
+import type { AstroComponentFactory } from 'astro/runtime/server/index.js';
 
 export type { SEOSection };
 
-export type KnownLocale =
-  | 'ar' | 'da' | 'de' | 'en' | 'es' | 'fi'
-  | 'fr' | 'id' | 'it' | 'ja' | 'ko' | 'nb' | 'nl'
-  | 'pl' | 'pt' | 'ru' | 'sv' | 'tr' | 'zh';
+export type KnownLocale = UtilityLocale;
 
 export interface FAQItem {
   question: string;
@@ -62,8 +61,7 @@ export interface TabletopCategoryEntry {
 
 export interface ToolDefinition {
   entry: TabletopToolEntry;
-  Component: unknown;
-  SEOComponent: unknown;
-  BibliographyComponent: unknown;
+  Component: () => Promise<{ default: AstroComponentFactory }>;
+  SEOComponent: () => Promise<{ default: AstroComponentFactory }>;
+  BibliographyComponent: () => Promise<{ default: AstroComponentFactory }>;
 }
-

package/src/worker.ts

@@ -0,0 +1,26 @@
+interface UtilityMfeEnvironment {
+    ASSETS: { fetch(request: Request): Promise<Response> };
+}
+
+const LONG_LIVED_ASSET_CACHE = "public, max-age=31536000, immutable";
+const SITEMAP_CACHE = "public, max-age=3600, s-maxage=3600, must-revalidate";
+
+const getCacheControl = (pathname: string): string | undefined => {
+    if (pathname.endsWith("/sitemap.xml")) return SITEMAP_CACHE;
+    if (pathname.startsWith("/_utilities/")) {
+        return LONG_LIVED_ASSET_CACHE;
+    }
+    return undefined;
+};
+
+export default {
+    async fetch(request: Request, environment: UtilityMfeEnvironment): Promise<Response> {
+        const response = await environment.ASSETS.fetch(request);
+        const cacheControl = getCacheControl(new URL(request.url).pathname);
+        if (!cacheControl) return response;
+
+        const headers = new Headers(response.headers);
+        headers.set("Cache-Control", cacheControl);
+        return new Response(response.body, { status: response.status, headers });
+    },
+};