@jjlmoya/utils-astronomy 1.40.0 → 1.42.0

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>

package/src/layouts/production-utility-page.css

@@ -0,0 +1,248 @@
+.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-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);
+  }
+}