@jjlmoya/utils-tabletop 1.45.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-tabletop",
-    "version": "1.45.0",
+    "version": "1.46.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -24,7 +24,7 @@
         "start": "astro dev",
         "prestart": "node scripts/postinstall.mjs",
         "build": "astro build",
-        "prebuild": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs && node scripts/validate-icons.mjs",
         "preview": "astro preview",
         "astro": "astro",
         "lint": "eslint src/ --max-warnings 0 && stylelint \"src/**/*.{css,astro}\"",

package/scripts/validate-icons.mjs

@@ -0,0 +1,57 @@
+#!/usr/bin/env node
+
+import { createRequire } from 'node:module';
+import { readFileSync, readdirSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const require = createRequire(import.meta.url);
+const packageJsonPath = require.resolve('@iconify-json/mdi/package.json');
+const packageRoot = dirname(packageJsonPath);
+const iconSet = JSON.parse(readFileSync(join(packageRoot, 'icons.json'), 'utf8'));
+const availableIcons = new Set([
+  ...Object.keys(iconSet.icons ?? {}),
+  ...Object.keys(iconSet.aliases ?? {}),
+]);
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = resolve(repoRoot, 'src');
+const extensions = new Set(['.astro', '.js', '.mjs', '.ts', '.tsx']);
+const iconPattern = /\bmdi:([a-z0-9-]+)\b/g;
+const failures = [];
+let references = 0;
+
+function walk(directory) {
+  const entries = readdirSync(directory, { withFileTypes: true });
+  for (const entry of entries) {
+    const path = join(directory, entry.name);
+    if (entry.isDirectory()) {
+      if (entry.name !== 'node_modules' && entry.name !== 'dist' && entry.name !== 'tests') {
+        walk(path);
+      }
+      continue;
+    }
+    if (!extensions.has(path.slice(path.lastIndexOf('.')))) continue;
+
+    const source = readFileSync(path, 'utf8');
+    for (const match of source.matchAll(iconPattern)) {
+      references += 1;
+      const iconName = match[1];
+      if (availableIcons.has(iconName)) continue;
+
+      const line = source.slice(0, match.index).split('\n').length;
+      failures.push(`${relative(repoRoot, path)}:${line} — mdi:${iconName}`);
+    }
+  }
+}
+
+walk(sourceRoot);
+
+if (failures.length > 0) {
+  console.error('Invalid MDI icons found:');
+  for (const failure of failures) console.error(`- ${failure}`);
+  console.error(`Checked ${references} MDI icon references against @iconify-json/mdi.`);
+  process.exitCode = 1;
+} else {
+  console.log(`MDI icon validation passed: ${references} references checked.`);
+}

package/src/category/TabletopCategoryHome.astro

@@ -0,0 +1,196 @@
+---
+import { Icon } from 'astro-icon/components';
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import ProductionBreadcrumb from '../components/ProductionBreadcrumb.astro';
+import ProductionPage from '../layouts/ProductionPage.astro';
+import { getCategoryUi } from '../mfe/category-ui';
+import { getCategoryPath } from '../mfe/routes';
+import type { CategoryLocaleContent, KnownLocale } from '../types';
+import './tabletop-home.css';
+
+interface CategoryTool {
+  id: string;
+  icon: string;
+  title: string;
+  description: string;
+  href: string;
+}
+
+interface Props {
+  locale: KnownLocale;
+  category: CategoryLocaleContent;
+  tools: CategoryTool[];
+  alternates: { language: KnownLocale; url: string }[];
+  image?: string | undefined;
+}
+
+const { locale, category, tools, alternates, image } = Astro.props;
+const publicPath = getCategoryPath(locale, category.slug);
+const ui = getCategoryUi(locale);
+const firstTool = tools[0];
+const toolCount = String(tools.length).padStart(2, '0');
+
+if (!firstTool) throw new Error('The tabletop category needs at least one tool');
+
+---
+
+<ProductionPage title={category.title} description={category.description} {locale} {publicPath} {alternates} {image}>
+  <div class="tabletop-home" data-tabletop-home>
+    <div class="tabletop-felt-speckle" aria-hidden="true"></div>
+    <div class="tabletop-frame">
+      <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
+
+      <header class="tabletop-deck-intro">
+        <div class="tabletop-hero-meta" aria-hidden="true">
+          <span>01</span>
+          <span>{toolCount}</span>
+          <span>TABLETOP</span>
+        </div>
+
+        <div class="tabletop-title-lockup">
+          <span class="tabletop-title-mark" aria-hidden="true">+</span>
+          <h2 class="tabletop-hero-title">{ui.heroTitle}</h2>
+          <p>{category.description}</p>
+          <a class="tabletop-hero-cta" href="#tabletop-tools">{ui.catalogTitle} <b aria-hidden="true">↓</b></a>
+        </div>
+
+        <div class="tabletop-manifesto" aria-hidden="true">
+          <span class="tabletop-manifesto-number">{toolCount}</span>
+          <span class="tabletop-manifesto-copy">{ui.catalogTitle}</span>
+          <span class="tabletop-manifesto-mark">+</span>
+        </div>
+      </header>
+
+      <section class="tabletop-play-zone" aria-labelledby="tabletop-play-title">
+        <div class="tabletop-play-label">
+          <span id="tabletop-play-title">{ui.relatedEyebrow}</span>
+          <span aria-hidden="true">01 / {String(tools.length).padStart(2, '0')}</span>
+        </div>
+
+        <div class="tabletop-feature-wrap" data-featured-tool>
+          <article class="tabletop-feature-card">
+            <div class="tabletop-card-top">
+              <span>01</span>
+              <span class="tabletop-card-index" aria-hidden="true">{toolCount}</span>
+            </div>
+            <div class="tabletop-card-art" aria-hidden="true">
+              <span class="tabletop-card-art-ring"></span>
+              <span class="tabletop-card-art-star">*</span>
+              <Icon name={firstTool.icon} />
+            </div>
+            <div class="tabletop-card-body">
+              <a href={firstTool.href} data-featured-title>{firstTool.title}</a>
+              <p data-featured-description aria-live="polite">{firstTool.description}</p>
+            </div>
+            <div class="tabletop-card-bottom">
+              <button type="button" data-draw-tool>{ui.shuffleTool}</button>
+              <span aria-hidden="true">{ui.useTool} <b>↗</b></span>
+            </div>
+          </article>
+        </div>
+
+        <div class="tabletop-dice-bay" aria-hidden="true">
+          <div class="tabletop-d20">
+            <svg viewBox="0 0 240 220">
+              <polygon class="tabletop-d20-face" points="120,8 224,72 187,194 53,194 16,72" />
+              <path class="tabletop-d20-line" d="M120 8v186M16 72l171 122M224 72L53 194M16 72h208M120 8L53 194M120 8l67 186" />
+              <text x="120" y="139">20</text>
+            </svg>
+          </div>
+          <div class="tabletop-meeples">
+            <svg class="tabletop-meeple tabletop-meeple-red" viewBox="0 0 100 120"><path d="M50 8c-15 0-25 12-25 27 0 9 3 16 9 22C19 65 8 78 8 98v14h84V98c0-20-11-33-26-41 6-6 9-13 9-22C75 20 65 8 50 8Z" /></svg>
+            <svg class="tabletop-meeple tabletop-meeple-blue" viewBox="0 0 100 120"><path d="M50 8c-15 0-25 12-25 27 0 9 3 16 9 22C19 65 8 78 8 98v14h84V98c0-20-11-33-26-41 6-6 9-13 9-22C75 20 65 8 50 8Z" /></svg>
+            <svg class="tabletop-meeple tabletop-meeple-gold" viewBox="0 0 100 120"><path d="M50 8c-15 0-25 12-25 27 0 9 3 16 9 22C19 65 8 78 8 98v14h84V98c0-20-11-33-26-41 6-6 9-13 9-22C75 20 65 8 50 8Z" /></svg>
+          </div>
+          <span class="tabletop-dice-caption">{toolCount} / D20</span>
+        </div>
+      </section>
+
+      <section class="tabletop-catalog" id="tabletop-tools" aria-labelledby="tabletop-catalog-title">
+        <div class="tabletop-catalog-head">
+          <div>
+            <span class="tabletop-catalog-kicker" aria-hidden="true">01 — {toolCount}</span>
+            <h2 id="tabletop-catalog-title">{ui.catalogTitle}</h2>
+          </div>
+          <span class="tabletop-catalog-scribble" aria-hidden="true">*</span>
+        </div>
+
+        <div class="tabletop-card-grid">
+          {tools.map((tool, index) => (
+            <a
+              href={tool.href}
+              class:list={['tabletop-tool-card', 'tabletop-tool-card-' + ((index % 4) + 1)]}
+              data-tool-card
+              data-tool-title={tool.title}
+              data-tool-description={tool.description}
+            >
+              <div class="tabletop-tool-card-face">
+                <div class="tabletop-tool-card-top">
+                  <span>{String(index + 1).padStart(2, '0')}</span>
+                  <span aria-hidden="true">{toolCount}</span>
+                </div>
+                <div class="tabletop-tool-card-art" aria-hidden="true">
+                  <Icon name={tool.icon} />
+                </div>
+                <h3>{tool.title}</h3>
+                <p>{tool.description}</p>
+                <span class="tabletop-tool-card-action">{ui.useTool} <b aria-hidden="true">↗</b></span>
+                <span class="tabletop-tool-card-corner" aria-hidden="true">#{String(index + 1).padStart(2, '0')}</span>
+              </div>
+            </a>
+          ))}
+        </div>
+      </section>
+
+      <section class="tabletop-rulebook" aria-labelledby="tabletop-rulebook-title">
+        <div class="tabletop-rulebook-spine" aria-hidden="true">
+          <span>{toolCount}</span><span>INFO</span>
+        </div>
+        <div class="tabletop-rulebook-copy">
+          <span class="tabletop-rulebook-kicker">{ui.relatedEyebrow}</span>
+          <h2 id="tabletop-rulebook-title">{category.title}</h2>
+          <div class="tabletop-seo-copy"><SEORenderer content={{ locale, sections: category.seo }} /></div>
+        </div>
+      </section>
+
+    </div>
+  </div>
+</ProductionPage>
+
+<script>
+  const root = document.querySelector<HTMLElement>('[data-tabletop-home]');
+
+  if (root) {
+    const button = root.querySelector<HTMLButtonElement>('[data-draw-tool]');
+    const featureWrap = root.querySelector<HTMLElement>('[data-featured-tool]');
+    const featureLink = root.querySelector<HTMLAnchorElement>('[data-featured-title]');
+    const featureDescription = root.querySelector<HTMLElement>('[data-featured-description]');
+    const cards = Array.from(root.querySelectorAll<HTMLElement>('[data-tool-card]'));
+    let activeIndex = 0;
+    let isShuffling = false;
+
+    button?.addEventListener('click', () => {
+      if (!featureLink || !featureDescription || cards.length === 0 || isShuffling) return;
+      isShuffling = true;
+      featureWrap?.classList.add('is-shuffling');
+      button.setAttribute('aria-busy', 'true');
+      activeIndex = (activeIndex + 1) % cards.length;
+      const card = cards[activeIndex];
+      if (!card) {
+        isShuffling = false;
+        featureWrap?.classList.remove('is-shuffling');
+        button.removeAttribute('aria-busy');
+        return;
+      }
+      window.setTimeout(() => {
+        featureLink.href = card.getAttribute('href') ?? '#';
+        featureLink.textContent = card.dataset.toolTitle ?? '';
+        featureDescription.textContent = card.dataset.toolDescription ?? '';
+        cards.forEach((item, index) => item.toggleAttribute('data-selected', index === activeIndex));
+        featureWrap?.classList.remove('is-shuffling');
+        button.removeAttribute('aria-busy');
+        isShuffling = false;
+      }, 360);
+    });
+  }
+</script>