@jjlmoya/utils-converters 1.27.0 → 1.28.0

package/src/layouts/ProductionUtilityPage.astro

@@ -0,0 +1,292 @@
+---
+import ProductionPage from "./ProductionPage.astro";
+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, 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; }
+interface Props { locale: KnownLocale; content: ToolLocaleContent; englishSlug: string; categoryTitle: string; categorySlug: string; categoryHref: string; relatedTools: RelatedTool[]; Component: AstroComponentFactory; SEOComponent: AstroComponentFactory; BibliographyComponent: AstroComponentFactory; alternates: { language: KnownLocale; url: string }[]; image?: string | undefined; }
+const { locale, content, englishSlug, categoryTitle, categorySlug, categoryHref, relatedTools, Component, SEOComponent, BibliographyComponent, alternates, image } = Astro.props;
+const words = content.title.split(/\s+/).filter(Boolean);
+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} 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={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">
+        <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">{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>
+
+<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");
+  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>
+
+<style>
+  .utility-production {
+    min-height: 100vh;
+    overflow-x: clip;
+    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;
+    padding: var(--space-xl) var(--space-lg) var(--space-4xl);
+  }
+
+  .utility-tool-production {
+    width: 100%;
+    margin-top: var(--space-2xl);
+  }
+
+  .utility-zoom-production {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+    margin: var(--space-xl) auto 0;
+    color: var(--text-muted);
+    font-size: 0.8rem;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .utility-zoom-controls {
+    display: inline-flex;
+    overflow: hidden;
+    border: 1px solid var(--border-base);
+    border-radius: 0.75rem;
+    background: color-mix(in srgb, var(--bg-surface) 90%, transparent);
+
+    --converters-zoom-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+
+    box-shadow: var(--converters-zoom-shadow);
+  }
+
+  .utility-zoom-production button {
+    min-width: 2.5rem;
+    border: 0;
+    border-right: 1px solid var(--border-base);
+    padding: 0.5rem 0.75rem;
+    background: transparent;
+    color: var(--text-main);
+    cursor: pointer;
+    font-size: 1rem;
+  }
+  .utility-zoom-production button:last-child { border-right: 0; }
+
+  .utility-zoom-production button:hover,
+  .utility-zoom-production button:focus-visible {
+    background: color-mix(in srgb, var(--converters-accent) 12%, transparent);
+    color: var(--converters-accent);
+  }
+
+  .utility-section-production, .utility-related-production {
+    max-width: 56rem;
+    margin: var(--space-4xl) auto 0;
+  }
+
+  .utility-section-production {
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  .utility-related-heading {
+    margin-bottom: var(--space-lg);
+    text-align: center;
+  }
+
+  .utility-related-eyebrow {
+    display: block;
+    margin-bottom: 0.45rem;
+    color: var(--converters-accent);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+
+  .utility-related-production h2 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: clamp(1.75rem, 4vw, 2.5rem);
+  }
+
+  .utility-related-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1rem;
+  }
+
+  .utility-related-card {
+    position: relative;
+    display: flex;
+    min-height: 238px;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 1.25rem;
+    border: 1px solid color-mix(in srgb, var(--converters-accent) 18%, var(--border-base));
+    border-radius: 1rem;
+    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--converters-accent) 4%, var(--bg-surface)));
+    color: inherit;
+    text-decoration: none;
+
+    --converters-related-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--shadow-base, #000) 30%, transparent);
+
+    box-shadow: var(--converters-related-shadow);
+    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+  }
+
+  .utility-related-card:hover,
+  .utility-related-card:focus-visible {
+    border-color: var(--converters-accent);
+
+    --converters-related-hover-shadow: 0 1rem 2rem color-mix(in srgb, var(--converters-accent) 16%, transparent);
+
+    box-shadow: var(--converters-related-hover-shadow);
+    transform: translateY(-3px);
+  }
+
+  .utility-related-card:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--converters-accent) 55%, transparent);
+    outline-offset: 3px;
+  }
+
+  .utility-related-index {
+    position: absolute;
+    top: 1.25rem;
+    right: 1.25rem;
+    color: var(--text-dimmed, var(--text-muted));
+    font-family: ui-monospace, SFMono-Regular, monospace;
+    font-size: 0.7rem;
+    letter-spacing: 0.12em;
+  }
+
+  .utility-related-icon {
+    display: grid;
+    width: 2.75rem;
+    height: 2.75rem;
+    place-items: center;
+    margin-bottom: 1rem;
+    border: 1px solid color-mix(in srgb, var(--converters-accent) 28%, transparent);
+    border-radius: 0.8rem;
+    background: color-mix(in srgb, var(--converters-accent) 12%, var(--bg-surface));
+    color: var(--converters-accent);
+    font-size: 1.35rem;
+  }
+
+  .utility-related-card h3 {
+    margin: 0 0 0.5rem;
+    color: var(--text-main);
+    font-size: 1rem;
+  }
+
+  .utility-related-card p {
+    margin: 0 0 1rem;
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    line-height: 1.5;
+  }
+
+  .utility-related-cta {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: auto;
+    color: var(--converters-accent);
+    font-size: 0.75rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .utility-related-cta svg {
+    width: 1rem;
+    height: 1rem;
+    transition: transform 0.2s ease;
+  }
+  .utility-related-card:hover .utility-related-cta svg { transform: translate(2px, -2px); }
+
+  @media (width <= 640px) {
+    .utility-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
+  }
+</style>

package/src/mfe/assets.ts

@@ -0,0 +1,39 @@
+import packageMetadata from "../../package.json";
+import type { Brand } from "../identity/brands";
+
+const UTILITY_ASSET_ROOT = "/_utilities/converters";
+
+export const TABLETOP_ASSET_VERSION = encodeURIComponent(
+    import.meta.env.PUBLIC_APP_VERSION ?? packageMetadata.version,
+);
+
+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/converters/images/${englishSlug}.webp`);
+
+export const getUtilityCssPath = (englishSlug: string): string =>
+    withAssetVersion(`/_utilities/converters/styles/${englishSlug}.css`);
+
+export const CATEGORY_OG_IMAGE = getUtilityOgImage("converters");

package/src/mfe/category-ui.ts

@@ -0,0 +1,34 @@
+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', 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/mfe/routes.ts

@@ -0,0 +1,50 @@
+import {
+    getCategoryNamespace,
+    getCategoryPath as getSharedCategoryPath,
+    getUtilitiesPath as getSharedUtilitiesPath,
+    getUtilityNamespace,
+    getUtilityPath as getSharedUtilityPath,
+    type UtilityLocale,
+} from "@jjlmoya/utils-shared/routing";
+
+export type { UtilityLocale };
+export { getCategoryNamespace, getUtilityNamespace };
+
+export const INTERNAL_LOCALES = [
+    "en", "fr", "de", "it", "pt", "nl", "sv", "pl", "id", "tr", "ru", "ja", "ko", "zh",
+] as const satisfies readonly UtilityLocale[];
+
+const getDevelopmentPath = (url: string): string => {
+    if (!import.meta.env.DEV) return url;
+    try {
+        return new URL(url, "http://localhost:4324").pathname;
+    } catch {
+        return url;
+    }
+};
+
+export const getUtilitiesPath = (locale: UtilityLocale): string =>
+    getDevelopmentPath(getSharedUtilitiesPath(locale));
+
+export const getCategoryPath = (locale: UtilityLocale, categorySlug: string): string =>
+    getDevelopmentPath(getSharedCategoryPath(locale, categorySlug));
+
+export const getUtilityPath = (
+    locale: UtilityLocale,
+    categorySlug: string,
+    toolSlug: string,
+): string => getDevelopmentPath(getSharedUtilityPath(locale, categorySlug, toolSlug));
+
+export const getCategoryRoute = (locale: UtilityLocale, categorySlug: string): string =>
+    getCategoryPath(locale, categorySlug);
+
+export const getUtilityRoute = (locale: UtilityLocale, categorySlug: string, toolSlug: string): string =>
+    getUtilityPath(locale, categorySlug, toolSlug);
+
+export const getUtilityIndexRoute = (locale: UtilityLocale): string => getUtilitiesPath(locale);
+
+export const getInternalCategoryRoute = (locale: Exclude<UtilityLocale, "es">, categorySlug: string): string =>
+    getCategoryPath(locale, categorySlug);
+
+export const getInternalUtilityRoute = (locale: Exclude<UtilityLocale, "es">, categorySlug: string, toolSlug: string): string =>
+    getUtilityPath(locale, categorySlug, toolSlug);

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

@@ -0,0 +1,49 @@
+import type { APIRoute } from "astro";
+import { ALL_TOOLS, convertersCategory } 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 convertersCategory.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/[locale]/[utilities]/[categories]/[category]/[slug].astro

@@ -0,0 +1,100 @@
+---
+import ProductionUtilityPage from "../../../../../layouts/ProductionUtilityPage.astro";
+import { ALL_TOOLS, convertersCategory } 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 { getCategoryNamespace, getCategoryPath, getUtilityNamespace, getUtilityPath } from "../../../../../mfe/routes";
+import { getUtilityOgImage } from "../../../../../mfe/assets";
+
+type Loader<T> = () => Promise<{ default: T }>;
+type LoadedTool = ToolLocaleContent;
+
+export async function getStaticPaths() {
+    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 categories = Object.fromEntries(await Promise.all(LANGUAGE_CODES.map(async (language) => [
+            language,
+            await convertersCategory.i18n[language]!(),
+        ]))) as Record<Language, CategoryLocaleContent>;
+        const { default: Component } = await (componentLoader as Loader<AstroComponentFactory>)();
+        const { default: SEOComponent } = await (seoLoader as Loader<AstroComponentFactory>)();
+        const { default: BibliographyComponent } = await (bibliographyLoader as Loader<AstroComponentFactory>)();
+        for (const locale of LANGUAGE_CODES.filter((candidate) => candidate !== "es")) {
+            const content = contents[locale];
+            const category = categories[locale];
+            paths.push({
+                params: {
+                    locale,
+                    utilities: getUtilityNamespace(locale),
+                    categories: getCategoryNamespace(locale),
+                    category: category.slug,
+                    slug: content.slug,
+                },
+                props: {
+                    locale,
+                    content,
+                    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, relatedTools, alternates, image } = Astro.props as {
+    locale: Exclude<Language, "es">;
+    content: LoadedTool;
+    englishSlug: string;
+    category: CategoryLocaleContent;
+    categorySlug: string;
+    Component: AstroComponentFactory;
+    SEOComponent: AstroComponentFactory;
+    BibliographyComponent: AstroComponentFactory;
+    relatedTools?: { icon: string; title: string; description: string; href: string }[];
+    alternates: { language: Language; url: string }[];
+    image?: string;
+};
+const related = relatedTools ?? (await Promise.all(ALL_TOOLS.map(async ({ entry: relatedEntry }) => {
+    const loader = relatedEntry.i18n[locale] ?? 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(locale, 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={related}
+    {Component}
+    {SEOComponent}
+    {BibliographyComponent}
+    {alternates}
+    {image}
+/> 

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

@@ -0,0 +1,44 @@
+---
+import ProductionCategoryPage from "../../../../layouts/ProductionCategoryPage.astro";
+import { ALL_TOOLS, convertersCategory } 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 convertersCategory.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 convertersCategory.i18n)[Language]>>>;
+    alternates: { language: Language; url: string }[];
+};
+const tools = await Promise.all(ALL_TOOLS.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,3 @@
----
 ---
-<meta http-equiv="refresh" content="0;url=/es" />
-
+---
+<meta http-equiv="refresh" content="0;url=/utilidades/categorias/convertidores-imagen/" />