@jjlmoya/utils-civic 1.9.0 → 1.11.0

package/.github/workflows/ci.yml

@@ -82,11 +82,10 @@ jobs:
                         {"baseUrl":"https://www.gamebob.dev","pathPrefixes":["/en/utilities/","/fr/utilitaires/","/de/werkzeuge/","/it/utilita/","/pt/utilidades/","/nl/hulpmiddelen/","/sv/verktyg/","/pl/narzedzia/","/id/utilitas/","/tr/araclar/","/ru/instrumenty/","/ja/utilities/","/ko/utilities/","/zh/utilities/"]}
                       ]
             - name: Deploy both domains to Cloudflare
-              uses: cloudflare/wrangler-action@v3
-              with:
-                  apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
-                  accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
-                  command: deploy
+              env:
+                  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+                  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+              run: ./node_modules/.bin/wrangler deploy
             - name: Save deployed page manifest
               continue-on-error: true
               uses: Game-Bob/ai-knows/.github/actions/indexnow-save@main

package/astro.config.mjs

@@ -2,7 +2,13 @@ import { defineConfig } from "astro/config";
 import icon from "astro-icon";
 
 export default defineConfig({
+    output: "static",
+    site: "https://www.gamebob.dev",
     integrations: [icon()],
+    trailingSlash: "always",
+    build: {
+        assets: "_utilities/civic",
+    },
     server: {
         port: 3037,
         host: true

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-civic",
-    "version": "1.9.0",
+    "version": "1.11.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -32,6 +32,7 @@
         "dev": "astro dev --host",
         "start": "astro dev",
         "build": "astro build",
+        "postbuild": "node scripts/postbuild.mjs",
         "preview": "astro preview",
         "astro": "astro",
         "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",

package/scripts/postbuild.mjs

@@ -0,0 +1,17 @@
+import { copyFileSync, existsSync, mkdirSync, rmSync, readdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+const sourceRoot = resolve('dist/mfe-sitemaps');
+const destinationRoot = resolve('dist/_utilities');
+
+if (existsSync(sourceRoot)) {
+    for (const locale of readdirSync(sourceRoot, { withFileTypes: true }).filter((entry) => entry.isDirectory())) {
+        for (const vertical of readdirSync(join(sourceRoot, locale.name), { withFileTypes: true }).filter((entry) => entry.isDirectory())) {
+            const source = join(sourceRoot, locale.name, vertical.name, 'sitemap.xml');
+            const destinationDirectory = join(destinationRoot, locale.name, vertical.name);
+            mkdirSync(destinationDirectory, { recursive: true });
+            copyFileSync(source, join(destinationDirectory, 'sitemap.xml'));
+        }
+    }
+    rmSync(sourceRoot, { recursive: true, force: true });
+}

package/src/layouts/ProductionUtilityPage.astro

@@ -5,6 +5,7 @@ import { Icon } from "astro-icon/components";
 import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
 import ProductionWidget from "../components/ProductionWidget.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 type { AstroComponentFactory } from "astro/runtime/server/index.js";
@@ -17,6 +18,7 @@ const titleHighlight = words[0] ?? content.title;
 const titleBase = words.slice(1).join(" ");
 const publicPath = getUtilityPath(locale, categorySlug, content.slug);
 const publicCategoryPath = getCategoryPath(locale, categorySlug);
+const ui = getCategoryUi(locale);
 ---
 
 <ProductionPage title={content.title} description={content.description} {locale} {publicPath} {alternates} {image} toolCss={getUtilityCssPath(englishSlug)}>
@@ -36,18 +38,31 @@ const publicCategoryPath = getCategoryPath(locale, categorySlug);
       </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">Open tool <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">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>}
     </div>
   </div>
 </ProductionPage>
 
 <script>
+  const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
+  const page = document.querySelector<HTMLElement>(".utility-production");
   const container = document.querySelector<HTMLElement>(".utility-tool-production");
-  let zoom = Number(localStorage.getItem("gamebob-utility-zoom") ?? 1);
-  const applyZoom = () => { if (container) container.style.zoom = String(zoom); };
+  const zoomButton = document.querySelector<HTMLButtonElement>('[data-zoom="reset"]');
+  const storedZoom = isWidget ? 1 : Number(localStorage.getItem("gamebob-utility-zoom") ?? 1);
+  let zoom = Number.isFinite(storedZoom) ? Math.min(1.5, Math.max(0.75, storedZoom)) : 1;
+  const applyZoom = () => {
+    if (container) container.style.zoom = String(zoom);
+    if (zoomButton) zoomButton.textContent = `${Math.round(zoom * 100)}%`;
+  };
   document.querySelector('[data-zoom="out"]')?.addEventListener("click", () => { zoom = Math.max(0.75, zoom - 0.1); applyZoom(); localStorage.setItem("gamebob-utility-zoom", String(zoom)); });
   document.querySelector('[data-zoom="in"]')?.addEventListener("click", () => { zoom = Math.min(1.5, zoom + 0.1); applyZoom(); localStorage.setItem("gamebob-utility-zoom", String(zoom)); });
   document.querySelector('[data-zoom="reset"]')?.addEventListener("click", () => { zoom = 1; applyZoom(); localStorage.removeItem("gamebob-utility-zoom"); });
+  if (isWidget) {
+    document.body.classList.add("utility-widget-body");
+    if (page) {
+      page.classList.add("utility-widget-mode");
+    }
+  }
   applyZoom();
 </script>
 
@@ -58,6 +73,38 @@ const publicCategoryPath = getCategoryPath(locale, categorySlug);
     background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
   }
 
+  .utility-production.utility-widget-mode {
+    min-height: auto;
+    background: transparent;
+  }
+
+  .utility-production.utility-widget-mode .utility-production-inner {
+    max-width: none;
+    padding: 0;
+  }
+
+  .utility-production.utility-widget-mode .utility-tool-production {
+    margin-top: 0;
+  }
+
+  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+    display: none;
+  }
+
+  :global(body.utility-widget-body) {
+    margin: 0;
+    padding-top: 0;
+    background: transparent;
+  }
+
+  :global(body.utility-widget-body > :not(main)) {
+    display: none;
+  }
+
+  :global(body.utility-widget-body main), :global(body.utility-widget-body main .utility-production), :global(body.utility-widget-body main .utility-production-inner) {
+    min-height: auto;
+  }
+
   .utility-production-inner {
     max-width: 72rem;
     margin: 0 auto;

package/src/mfe/category-ui.ts

@@ -2,24 +2,25 @@ import type { KnownLocale } from '../types';
 
 export interface CategoryUi {
   useTool: string;
+  openTool: string;
 }
 
 export const CATEGORY_UI: Record<KnownLocale, CategoryUi> = {
-  es: { useTool: 'Usar herramienta' },
-  en: { useTool: 'Use tool' },
-  fr: { useTool: "Utiliser l'outil" },
-  de: { useTool: 'Werkzeug verwenden' },
-  it: { useTool: 'Usa lo strumento' },
-  pt: { useTool: 'Usar ferramenta' },
-  nl: { useTool: 'Tool gebruiken' },
-  sv: { useTool: 'Använd verktyget' },
-  pl: { useTool: 'Użyj narzędzia' },
-  id: { useTool: 'Gunakan alat' },
-  tr: { useTool: 'Aracı kullan' },
-  ru: { useTool: 'Использовать инструмент' },
-  ja: { useTool: 'ツールを使う' },
-  ko: { useTool: '도구 사용' },
-  zh: { useTool: '使用工具' },
+  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: '打开工具' },
 };
 
 export const getCategoryUi = (locale: KnownLocale): CategoryUi => CATEGORY_UI[locale];

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

@@ -0,0 +1,75 @@
+import type { APIRoute } from "astro";
+import { civicCategory } 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: "civic" },
+        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(civicCategory, 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(civicCategory, 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/types.ts

@@ -20,7 +20,7 @@ export interface HowToStep {
   text: string;
 }
 
-export interface ToolLocaleContent<TUI extends Record<string, string> = Record<string, string>> {
+export interface ToolLocaleContent<TUI extends object = Record<string, string>> {
   slug: string;
   title: string;
   description: string;
@@ -43,7 +43,7 @@ export type LocaleLoader<T> = () => Promise<T>;
 
 export type LocaleMap<T> = Partial<Record<KnownLocale, LocaleLoader<T>>>;
 
-export interface CivicToolEntry<TUI extends Record<string, string> = Record<string, string>> {
+export interface CivicToolEntry<TUI extends object = Record<string, string>> {
   id: string;
   phase?: 'english-first' | 'localized';
   icons: {

package/src/worker.ts

@@ -2,8 +2,25 @@ 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 {
-    fetch(request: Request, environment: UtilityMfeEnvironment): Promise<Response> {
-        return environment.ASSETS.fetch(request);
+    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 });
     },
 };