@jjlmoya/utils-tabletop 1.44.0 → 1.46.0

package/src/layouts/ProductionUtilityPage.astro

@@ -38,13 +38,14 @@ const ui = getCategoryUi(locale);
         <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>}
+      {(content.bibliography?.length ?? 0) > 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>
+  import { observeWidgetHeight } from "../mfe/widget-height";
   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");
@@ -60,11 +61,10 @@ const ui = getCategoryUi(locale);
   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");
-    }
+    page?.classList.add("utility-widget-mode");
   }
   applyZoom();
+  if (isWidget && container) observeWidgetHeight(container);
 </script>
 
 <style>
@@ -88,7 +88,7 @@ const ui = getCategoryUi(locale);
     margin-top: 0;
   }
 
-  .utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production) {
+  :global(.utility-production.utility-widget-mode .utility-production-inner > :not(.utility-tool-production)) {
     display: none;
   }
 

package/src/mfe/category-ui.ts

@@ -1,8 +1,11 @@
 import type { KnownLocale } from '../types';
 
 export interface CategoryUi {
+  heroTitle: string;
+  catalogTitle: string;
   useTool: string;
   openTool: string;
+  shuffleTool: string;
   relatedEyebrow: string;
   moreToolsIn: string;
   zoom: string;
@@ -14,21 +17,21 @@ export interface CategoryUi {
 }
 
 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: '面包屑导航' },
+  es: { heroTitle: 'Juegos de mesa', catalogTitle: 'Herramientas para la mesa', useTool: 'Usar herramienta', openTool: 'Abrir herramienta', shuffleTool: 'Barajar el mazo', 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: { heroTitle: 'Tabletop games', catalogTitle: 'Tools for the table', useTool: 'Use tool', openTool: 'Open tool', shuffleTool: 'Shuffle the deck', relatedEyebrow: 'Keep exploring', moreToolsIn: 'More tools in', zoom: 'Zoom', zoomControls: 'Zoom controls', zoomOut: 'Zoom out', resetZoom: 'Reset zoom', zoomIn: 'Zoom in', breadcrumb: 'Breadcrumb' },
+  fr: { heroTitle: 'Jeux de société', catalogTitle: 'Outils pour la table', useTool: "Utiliser l'outil", openTool: "Ouvrir l'outil", shuffleTool: 'Mélanger le paquet', relatedEyebrow: 'Continuez à explorer', moreToolsIn: "Plus d'outils dans", zoom: 'Zoom', zoomControls: 'Commandes de zoom', zoomOut: 'Réduire', resetZoom: 'Réinitialiser', zoomIn: 'Augmenter', breadcrumb: 'Fil d’Ariane' },
+  de: { heroTitle: 'Brettspiele', catalogTitle: 'Werkzeuge für den Tisch', useTool: 'Werkzeug verwenden', openTool: 'Werkzeug öffnen', shuffleTool: 'Deck mischen', 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: { heroTitle: 'Giochi da tavolo', catalogTitle: 'Strumenti per il tavolo', useTool: 'Usa lo strumento', openTool: 'Apri lo strumento', shuffleTool: 'Mescola il mazzo', 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: { heroTitle: 'Jogos de mesa', catalogTitle: 'Ferramentas para a mesa', useTool: 'Usar ferramenta', openTool: 'Abrir ferramenta', shuffleTool: 'Baralhar o baralho', 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: { heroTitle: 'Bordspellen', catalogTitle: 'Tools voor de tafel', useTool: 'Tool gebruiken', openTool: 'Tool openen', shuffleTool: 'Schud de stapel', relatedEyebrow: 'Blijf ontdekken', moreToolsIn: 'Meer tools in', zoom: 'Zoom', zoomControls: 'Zoomknoppen', zoomOut: 'Uitzoomen', resetZoom: 'Zoom herstellen', zoomIn: 'Inzoomen', breadcrumb: 'Broodkruimelnavigatie' },
+  sv: { heroTitle: 'Bordsspel', catalogTitle: 'Verktyg för bordet', useTool: 'Använd verktyget', openTool: 'Öppna verktyget', shuffleTool: 'Blanda kortleken', 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: { heroTitle: 'Gry planszowe', catalogTitle: 'Narzędzia do stołu', useTool: 'Użyj narzędzia', openTool: 'Otwórz narzędzie', shuffleTool: 'Przetasuj talię', 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: { heroTitle: 'Permainan papan', catalogTitle: 'Alat untuk meja', useTool: 'Gunakan alat', openTool: 'Buka alat', shuffleTool: 'Kocokkan dek', relatedEyebrow: 'Jelajahi lebih lanjut', moreToolsIn: 'Alat lainnya di', zoom: 'Zoom', zoomControls: 'Kontrol zoom', zoomOut: 'Perkecil', resetZoom: 'Atur ulang zoom', zoomIn: 'Perbesar', breadcrumb: 'Breadcrumb' },
+  tr: { heroTitle: 'Masa oyunları', catalogTitle: 'Masa için araçlar', useTool: 'Aracı kullan', openTool: 'Aracı aç', shuffleTool: 'Desteyi karıştır', 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: { heroTitle: 'Настольные игры', catalogTitle: 'Инструменты для стола', useTool: 'Использовать инструмент', openTool: 'Открыть инструмент', shuffleTool: 'Перемешать колоду', relatedEyebrow: 'Продолжить изучение', moreToolsIn: 'Другие инструменты в', zoom: 'Масштаб', zoomControls: 'Управление масштабом', zoomOut: 'Уменьшить', resetZoom: 'Сбросить масштаб', zoomIn: 'Увеличить', breadcrumb: 'Навигационная цепочка' },
+  ja: { heroTitle: 'テーブルゲーム', catalogTitle: 'テーブルのツール', useTool: 'ツールを使う', openTool: 'ツールを開く', shuffleTool: 'デッキを切る', relatedEyebrow: 'さらに探索', moreToolsIn: 'その他のツール：', zoom: 'ズーム', zoomControls: 'ズーム操作', zoomOut: '縮小', resetZoom: 'ズームをリセット', zoomIn: '拡大', breadcrumb: 'パンくずリスト' },
+  ko: { heroTitle: '테이블 게임', catalogTitle: '테이블 도구', useTool: '도구 사용', openTool: '도구 열기', shuffleTool: '덱 섞기', relatedEyebrow: '더 탐색하기', moreToolsIn: '카테고리의 다른 도구:', zoom: '확대/축소', zoomControls: '확대/축소 컨트롤', zoomOut: '축소', resetZoom: '확대/축소 초기화', zoomIn: '확대', breadcrumb: '탐색 경로' },
+  zh: { heroTitle: '桌游', catalogTitle: '桌面工具', useTool: '使用工具', openTool: '打开工具', shuffleTool: '洗牌', relatedEyebrow: '继续探索', moreToolsIn: '更多工具：', zoom: '缩放', zoomControls: '缩放控件', zoomOut: '缩小', resetZoom: '重置缩放', zoomIn: '放大', breadcrumb: '面包屑导航' },
 };
 
 export const getCategoryUi = (locale: KnownLocale): CategoryUi => CATEGORY_UI[locale];

package/src/mfe/widget-height.ts

@@ -0,0 +1,14 @@
+export function observeWidgetHeight(container: HTMLElement): void {
+  if (window.parent === window) return;
+
+  const pathSlug = window.location.pathname.split("/").filter(Boolean).pop() ?? "utility";
+  const widgetId = new URLSearchParams(window.location.search).get("id") ?? `jj-widget-${pathSlug}`;
+  const reportHeight = (height: number) => {
+    if (height > 50) {
+      window.parent.postMessage({ jjlmoyaHeight: Math.ceil(height), jjlmoyaId: widgetId }, "*");
+    }
+  };
+  const observer = new ResizeObserver(([entry]) => reportHeight(entry?.contentRect.height ?? 0));
+
+  observer.observe(container);
+}

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

@@ -1,5 +1,5 @@
 ---
-import ProductionCategoryPage from "../../../../layouts/ProductionCategoryPage.astro";
+import TabletopCategoryHome from "../../../../category/TabletopCategoryHome.astro";
 import { ALL_ENTRIES, tabletopCategory } from "../../../../index";
 import { LANGUAGE_CODES, type Language } from "../../../../i18n/languages";
 import { getCategoryNamespace, getCategoryPath, getUtilityNamespace, getUtilityPath } from "../../../../mfe/routes";
@@ -41,4 +41,4 @@ const tools = await Promise.all(ALL_ENTRIES.map(async (entry) => {
 }));
 ---
 
-<ProductionCategoryPage locale={locale} {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />
+<TabletopCategoryHome locale={locale} {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

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

@@ -1,5 +1,5 @@
 ---
-import ProductionCategoryPage from "../../../layouts/ProductionCategoryPage.astro";
+import TabletopCategoryHome from "../../../category/TabletopCategoryHome.astro";
 import { ALL_ENTRIES, tabletopCategory } from "../../../index";
 import { LANGUAGE_CODES, type Language } from "../../../i18n/languages";
 import { getCategoryPath, getUtilityPath } from "../../../mfe/routes";
@@ -35,4 +35,4 @@ const tools = await Promise.all(ALL_ENTRIES.map(async (entry) => {
 }));
 ---
 
-<ProductionCategoryPage locale="es" {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />
+<TabletopCategoryHome locale="es" {category} {tools} {alternates} image={CATEGORY_OG_IMAGE} />

package/src/tests/category_ui.test.ts

@@ -6,7 +6,10 @@ 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).heroTitle.trim()).not.toBe('');
+      expect(getCategoryUi(locale).catalogTitle.trim()).not.toBe('');
       expect(getCategoryUi(locale).openTool.trim()).not.toBe('');
+      expect(getCategoryUi(locale).shuffleTool.trim()).not.toBe('');
       expect(getCategoryUi(locale).relatedEyebrow.trim()).not.toBe('');
       expect(getCategoryUi(locale).moreToolsIn.trim()).not.toBe('');
       expect(getCategoryUi(locale).zoomControls.trim()).not.toBe('');
@@ -16,6 +19,7 @@ describe('category UI translations', () => {
     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).shuffleTool !== 'Roll a 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);
   });