@jjlmoya/utils-astronomy 1.41.0 → 1.42.0

package/src/layouts/ProductionCategoryPage.astro

@@ -7,14 +7,33 @@ import type { KnownLocale, CategoryLocaleContent } from "../types";
 import { getCategoryPath } from "../mfe/routes";
 import { getCategoryUi } from "../mfe/category-ui";
 
-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; }
+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);
 ---
 
-<ProductionPage title={category.title} description={category.description} {locale} {publicPath} {alternates} {image}>
+<ProductionPage
+  title={category.title}
+  description={category.description}
+  {locale}
+  {publicPath}
+  {alternates}
+  {image}
+>
   <div class="category-production">
     <div class="category-production-inner">
       <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
@@ -22,16 +41,29 @@ const ui = getCategoryUi(locale);
         <h1>{category.title}</h1><p>{category.description}</p>
       </header>
       <div class="category-tools-grid">
-        {tools.map((tool, index) => (
-          <a href={tool.href} class="category-tool-card">
-            <span class="category-tool-index">{String(index + 1).padStart(2, "0")}</span>
-            <div class="category-tool-icon"><Icon name={tool.icon} /></div>
-            <h2>{tool.title}</h2><p>{tool.description}</p>
-            <span class="category-tool-cta">{ui.useTool} <span aria-hidden="true">→</span></span>
-          </a>
-        ))}
+        {
+          tools.map((tool, index) => (
+            <a href={tool.href} class="category-tool-card">
+              <span class="category-tool-index">
+                {String(index + 1).padStart(2, "0")}
+              </span>
+              <div class="category-tool-icon">
+                <Icon name={tool.icon} />
+              </div>
+              <>
+                <h2>{tool.title}</h2>
+                <p>{tool.description}</p>
+              </>
+              <span class="category-tool-cta">
+                {ui.useTool} <span aria-hidden="true">→</span>
+              </span>
+            </a>
+          ))
+        }
       </div>
-      <section class="category-seo-production"><SEORenderer content={{ locale, sections: category.seo }} /></section>
+      <section class="category-seo-production">
+        <SEORenderer content={{ locale, sections: category.seo }} />
+      </section>
     </div>
   </div>
 </ProductionPage>
@@ -40,7 +72,12 @@ const ui = getCategoryUi(locale);
   .category-production {
     min-height: 100vh;
     overflow-x: clip;
-    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
+    background: radial-gradient(
+      ellipse at top,
+      var(--primary-10),
+      var(--bg-surface) 50%,
+      var(--bg-main)
+    );
   }
 
   .category-production-inner {
@@ -86,24 +123,35 @@ const ui = getCategoryUi(locale);
     min-height: 230px;
     flex-direction: column;
     padding: var(--space-lg);
-    border: 1px solid color-mix(in srgb, var(--astronomy-accent) 18%, var(--border-base));
+    border: 1px solid
+      color-mix(in srgb, var(--astronomy-accent) 18%, var(--border-base));
     border-radius: 1.25rem;
-    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--astronomy-accent) 4%, var(--bg-surface)));
+    background: linear-gradient(
+      145deg,
+      var(--bg-surface),
+      color-mix(in srgb, var(--astronomy-accent) 4%, var(--bg-surface))
+    );
     color: inherit;
     text-decoration: none;
-    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
-    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
+    box-shadow: 0 1rem 2rem
+      color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+    transition:
+      transform 0.25s ease,
+      border-color 0.25s ease,
+      box-shadow 0.25s ease;
   }
 
   .category-tool-card:hover,
   .category-tool-card:focus-visible {
     border-color: var(--astronomy-accent);
-    box-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--astronomy-accent) 18%, transparent);
+    box-shadow: 0 1.25rem 2.5rem
+      color-mix(in srgb, var(--astronomy-accent) 18%, transparent);
     transform: translateY(-4px);
   }
 
   .category-tool-card:focus-visible {
-    outline: 3px solid color-mix(in srgb, var(--astronomy-accent) 55%, transparent);
+    outline: 3px solid
+      color-mix(in srgb, var(--astronomy-accent) 55%, transparent);
     outline-offset: 4px;
   }
 
@@ -127,9 +175,14 @@ const ui = getCategoryUi(locale);
     height: 3.25rem;
     place-items: center;
     margin-bottom: var(--space-md);
-    border: 1px solid color-mix(in srgb, var(--astronomy-accent) 28%, transparent);
+    border: 1px solid
+      color-mix(in srgb, var(--astronomy-accent) 28%, transparent);
     border-radius: 1rem;
-    background: color-mix(in srgb, var(--astronomy-accent) 12%, var(--bg-surface));
+    background: color-mix(
+      in srgb,
+      var(--astronomy-accent) 12%,
+      var(--bg-surface)
+    );
     color: var(--astronomy-accent);
     font-size: 1.6rem;
   }
@@ -139,7 +192,6 @@ const ui = getCategoryUi(locale);
     top: var(--space-md);
     right: var(--space-lg);
     color: var(--text-dimmed, var(--text-muted));
-    font-family: ui-monospace, SFMono-Regular, monospace;
     font-size: 0.72rem;
     letter-spacing: 0.12em;
   }
@@ -178,7 +230,12 @@ const ui = getCategoryUi(locale);
   }
 
   @media (width <= 768px) {
-    .category-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
-    .category-tools-grid { grid-template-columns: 1fr; }
+    .category-production-inner {
+      padding: var(--space-lg) var(--space-sm) var(--space-3xl);
+    }
+
+    .category-tools-grid {
+      grid-template-columns: 1fr;
+    }
   }
 </style>

package/src/layouts/ProductionUtilityPage.astro

@@ -10,10 +10,44 @@ 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;
+import "./production-utility-page.css";
+
+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(" ");
@@ -22,43 +56,133 @@ 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)}>
+<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>
+      <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 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>}
+      {
+        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} />
+        <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>}
+      <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>
   import { observeWidgetHeight } from "../mfe/widget-height";
-  const isWidget = new URLSearchParams(window.location.search).get("widget") === "true";
+
+  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 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"); });
+  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");
     page?.classList.add("utility-widget-mode");
@@ -66,218 +190,3 @@ const ui = getCategoryUi(locale);
   applyZoom();
   if (isWidget && container) observeWidgetHeight(container);
 </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;
-  }
-
-  :global(.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);
-    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
-  }
-
-  .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(--astronomy-accent) 12%, transparent);
-    color: var(--astronomy-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(--astronomy-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(--astronomy-accent) 18%, var(--border-base));
-    border-radius: 1rem;
-    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--astronomy-accent) 4%, var(--bg-surface)));
-    color: inherit;
-    text-decoration: none;
-    box-shadow: 0 0.75rem 1.75rem color-mix(in srgb, var(--shadow-base, #000) 30%, transparent);
-    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(--astronomy-accent);
-    box-shadow: 0 1rem 2rem color-mix(in srgb, var(--astronomy-accent) 16%, transparent);
-    transform: translateY(-3px);
-  }
-
-  .utility-related-card:focus-visible {
-    outline: 3px solid color-mix(in srgb, var(--astronomy-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(--astronomy-accent) 28%, transparent);
-    border-radius: 0.8rem;
-    background: color-mix(in srgb, var(--astronomy-accent) 12%, var(--bg-surface));
-    color: var(--astronomy-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(--astronomy-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>