@jjlmoya/utils-converters 1.27.0 → 1.28.0

package/src/layouts/ProductionCategoryPage.astro

@@ -0,0 +1,190 @@
+---
+import ProductionPage from "./ProductionPage.astro";
+import { Icon } from "astro-icon/components";
+import { SEORenderer } from "@jjlmoya/utils-shared";
+import ProductionBreadcrumb from "../components/ProductionBreadcrumb.astro";
+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; }
+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}>
+  <div class="category-production">
+    <div class="category-production-inner">
+      <ProductionBreadcrumb locale={locale} currentTitle={category.title} />
+      <header class="category-header-production">
+        <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>
+        ))}
+      </div>
+      <section class="category-seo-production"><SEORenderer content={{ locale, sections: category.seo }} /></section>
+    </div>
+  </div>
+</ProductionPage>
+
+<style>
+  .category-production {
+    min-height: 100vh;
+    overflow-x: clip;
+    background: radial-gradient(ellipse at top, var(--primary-10), var(--bg-surface) 50%, var(--bg-main));
+  }
+
+  .category-production-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: var(--space-xl) var(--space-md) var(--space-4xl);
+  }
+
+  .category-header-production {
+    margin-bottom: var(--space-xl);
+    text-align: center;
+  }
+
+  .category-header-production h1 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: clamp(3.5rem, 9vw, 7rem);
+    font-weight: 900;
+    letter-spacing: -0.06em;
+    line-height: 0.95;
+    text-transform: lowercase;
+  }
+
+  .category-header-production p {
+    max-width: 48rem;
+    margin: 1rem auto 0;
+    color: var(--text-muted);
+    font-size: 1.25rem;
+    line-height: 1.6;
+  }
+
+  .category-tools-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: var(--space-lg);
+    margin-bottom: var(--space-4xl);
+  }
+
+  .category-tool-card {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    min-height: 230px;
+    flex-direction: column;
+    padding: var(--space-lg);
+    border: 1px solid color-mix(in srgb, var(--converters-accent) 18%, var(--border-base));
+    border-radius: 1.25rem;
+    background: linear-gradient(145deg, var(--bg-surface), color-mix(in srgb, var(--converters-accent) 4%, var(--bg-surface)));
+    color: inherit;
+    text-decoration: none;
+
+    --converters-card-shadow: 0 1rem 2rem color-mix(in srgb, var(--shadow-base, #000) 35%, transparent);
+
+    box-shadow: var(--converters-card-shadow);
+    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(--converters-accent);
+
+    --converters-card-hover-shadow: 0 1.25rem 2.5rem color-mix(in srgb, var(--converters-accent) 18%, transparent);
+
+    box-shadow: var(--converters-card-hover-shadow);
+    transform: translateY(-4px);
+  }
+
+  .category-tool-card:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--converters-accent) 55%, transparent);
+    outline-offset: 4px;
+  }
+
+  .category-tool-card::after {
+    position: absolute;
+    right: -2rem;
+    bottom: -3rem;
+    width: 9rem;
+    height: 9rem;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--converters-accent) 10%, transparent);
+    content: "";
+    pointer-events: none;
+  }
+
+  .category-tool-icon {
+    position: relative;
+    z-index: 1;
+    display: grid;
+    width: 3.25rem;
+    height: 3.25rem;
+    place-items: center;
+    margin-bottom: var(--space-md);
+    border: 1px solid color-mix(in srgb, var(--converters-accent) 28%, transparent);
+    border-radius: 1rem;
+    background: color-mix(in srgb, var(--converters-accent) 12%, var(--bg-surface));
+    color: var(--converters-accent);
+    font-size: 1.6rem;
+  }
+
+  .category-tool-index {
+    position: absolute;
+    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;
+  }
+
+  .category-tool-card h2,
+  .category-tool-card p,
+  .category-tool-cta {
+    position: relative;
+    z-index: 1;
+  }
+
+  .category-tool-card h2 {
+    margin: 0 0 0.5rem;
+    color: var(--text-main);
+    font-size: 1.25rem;
+  }
+
+  .category-tool-card p {
+    margin: 0;
+    color: var(--text-muted);
+    line-height: 1.55;
+  }
+
+  .category-tool-cta {
+    margin-top: auto;
+    padding-top: var(--space-md);
+    color: var(--converters-accent);
+    font-weight: 700;
+  }
+
+  .category-seo-production {
+    max-width: 56rem;
+    margin: 0 auto;
+    font-size: 1.125rem;
+    line-height: 1.75;
+  }
+
+  @media (width <= 768px) {
+    .category-production-inner { padding: var(--space-lg) var(--space-sm) var(--space-3xl); }
+    .category-tools-grid { grid-template-columns: 1fr; }
+  }
+</style>

package/src/layouts/ProductionPage.astro

@@ -0,0 +1,218 @@
+---
+import Footer from "@jjlmoya/identity/footer";
+import Header from "@jjlmoya/identity/header";
+import LanguageSheet from "@jjlmoya/identity/language-sheet";
+import LanguageTrigger from "@jjlmoya/identity/language-trigger";
+import ThemeBoot from "@jjlmoya/identity/theme-boot";
+import { getSiteNavigation } from "@jjlmoya/identity/navigation";
+import "@jjlmoya/identity/styles.css";
+import "@jjlmoya/utils-shared/theme.css";
+import "@jjlmoya/utils-shared/styles/jjlmoya-shared.css";
+import { HEADER_UI } from "../i18n/header-ui";
+import { LANGUAGE_LOCALES, LANGUAGE_NAMES, type Language } from "../i18n/languages";
+import { LANGUAGE_UI } from "../i18n/language-ui";
+import { getBrand } from "../identity/brands";
+import { getBrandAssetPath } from "../mfe/assets";
+
+interface AlternateLink { language: Language; url: string; }
+interface Props {
+    title: string;
+    description: string;
+    locale: Language;
+    image?: string | undefined;
+    toolCss?: string | undefined;
+    publicPath: string;
+    manifestPath?: string | undefined;
+    alternates: readonly AlternateLink[];
+}
+
+const { title, description, locale, image, toolCss, publicPath, manifestPath, alternates } = Astro.props;
+const brand = getBrand(locale);
+const brandFavicon = getBrandAssetPath(brand, "favicon");
+const brandSizedFavicon = getBrandAssetPath(brand, "faviconSized");
+const brandAppleTouchIcon = getBrandAssetPath(brand, "appleTouchIcon");
+const origin = brand === "jjlmoya" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev";
+const canonical = new URL(publicPath, origin).href;
+const socialImage = image ? new URL(image, canonical).href : undefined;
+const languageUi = LANGUAGE_UI[locale];
+const absoluteUrl = (language: Language, url: string): string => {
+    if (import.meta.env.DEV) return new URL(url, "http://localhost:4324").pathname;
+    return new URL(
+        url,
+        language === "es" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev",
+    ).href;
+};
+const languageLinks = alternates.map(({ language, url }) => ({
+    code: language,
+    name: LANGUAGE_NAMES[language],
+    href: absoluteUrl(language, url),
+    current: language === locale,
+}));
+const homeUrl = brand === "jjlmoya" ? "https://www.jjlmoya.es/" : `https://www.gamebob.dev/${locale}/`;
+const openGraphLocale = LANGUAGE_LOCALES[locale].replace("-", "_");
+const xDefaultUrl = alternates.find(({ language }) => language === "en")?.url ?? canonical;
+---
+
+<!doctype html>
+<html lang={locale} data-brand={brand}>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <ThemeBoot defaultTheme={brand === "gamebob" ? "theme-dark" : "theme-system"} />
+        <title>{title}</title>
+        <meta name="title" content={title} />
+        <meta name="description" content={description} />
+        <meta name="author" content="jjlmoya" />
+        <meta name="robots" content="index, follow, max-image-preview:large" />
+        <meta name="referrer" content="strict-origin-when-cross-origin" />
+        <link rel="icon" type="image/x-icon" href={brandFavicon} />
+        <link rel="icon" type="image/webp" sizes={brand === "jjlmoya" ? "32x32" : "48x48"} href={brandSizedFavicon} />
+        <link rel="apple-touch-icon" href={brandAppleTouchIcon} />
+        {manifestPath && <link rel="manifest" href={manifestPath} />}
+        <link rel="canonical" href={canonical} />
+        {alternates.map(({ language, url }) => <link rel="alternate" hreflang={language} href={absoluteUrl(language, url)} />)}
+        <link rel="alternate" hreflang="x-default" href={absoluteUrl("en", xDefaultUrl)} />
+        {toolCss && <link rel="stylesheet" href={toolCss} />}
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={canonical} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:site_name" content={brand === "jjlmoya" ? "jjlmoya" : "GameBob Studio"} />
+        <meta property="og:locale" content={openGraphLocale} />
+        {socialImage && <meta property="og:image" content={socialImage} />}
+        {socialImage && <meta property="og:image:secure_url" content={socialImage} />}
+        {socialImage && <meta property="og:image:type" content="image/webp" />}
+        {socialImage && <meta property="og:image:width" content="1200" />}
+        {socialImage && <meta property="og:image:height" content="630" />}
+        {socialImage && <meta property="og:image:alt" content={description} />}
+        <meta name="twitter:card" content={socialImage ? "summary_large_image" : "summary"} />
+        <meta name="twitter:url" content={canonical} />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+        {socialImage && <meta name="twitter:image" content={socialImage} />}
+        <script is:inline type="application/ld+json" set:html={JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "WebPage",
+            url: canonical,
+            name: title,
+            description,
+            inLanguage: LANGUAGE_LOCALES[locale],
+        })} />
+        <script>
+            import { installEcosystemTracking } from "@jjlmoya/tracking";
+            installEcosystemTracking();
+        </script>
+        <slot name="head" />
+    </head>
+    <body class="production-page">
+        <Header
+            class="utilities-site-header"
+            identity={brand}
+            {homeUrl}
+            navigation={getSiteNavigation({ language: locale, activeSection: "utilities" })}
+            labels={HEADER_UI[locale]}
+        >
+            <LanguageTrigger slot="desktop-actions" label={languageUi.change} />
+            <LanguageTrigger slot="mobile-actions" label={languageUi.change} />
+        </Header>
+        <LanguageSheet links={languageLinks} title={languageUi.select} closeLabel={languageUi.close} />
+        <main><slot /></main>
+        <Footer class="utilities-site-footer" identity={brand} language={locale} />
+    </body>
+</html>
+
+<style is:global>
+    :root {
+        --converters-accent: #10b981;
+        --converters-accent-strong: #0d9488;
+        --color-brand-blue: #1ddabc;
+        --color-brand-dark: #000;
+        --color-brand-white: #fff;
+        --color-primary: var(--color-brand-blue);
+        --color-primary-rgb: 29, 218, 188;
+        --space-2xs: 0.125rem;
+        --space-xs: 0.25rem;
+        --space-sm: 0.5rem;
+        --space-base: 0.75rem;
+        --space-md: 1rem;
+        --space-md-lg: 1.25rem;
+        --space-lg: 1.5rem;
+        --space-xl: 2rem;
+        --space-1-5xl: 2.5rem;
+        --space-2xl: 3rem;
+        --space-3xl: 4rem;
+        --space-4xl: 6rem;
+        --space-3-5xl: 5rem;
+        --radius-base: 0.5rem;
+        --radius-lg: 1rem;
+        --radius-2xl: 2rem;
+        --radius-full: 9999px;
+        --font-family: inter, system-ui, sans-serif;
+        --font-weight-bold: 800;
+        --color-white: #fff;
+    }
+
+    :root,
+    .theme-light {
+        --bg-main: #f0f4f8;
+        --bg-page: #f0f4f8;
+        --bg-surface: #fff;
+        --bg-muted: #f1f5f9;
+        --text-main: #000;
+        --text-base: #000;
+        --text-muted: #4a5568;
+        --text-dimmed: #64748b;
+        --border-base: #e2e8f0;
+        --border-color: #e2e8f0;
+        --glass-bg: rgba(0, 0, 0, 0.05);
+        --glass-border: rgba(0, 0, 0, 0.1);
+        --shadow-base: rgba(0, 0, 0, 0.05);
+        --shadow-hover: rgba(0, 0, 0, 0.1);
+        --primary: var(--color-primary);
+        --primary-10: rgba(29, 218, 188, 0.1);
+    }
+
+    .theme-dark {
+        --bg-main: #000;
+        --bg-page: #000;
+        --bg-surface: #0f172a;
+        --bg-muted: #1e293b;
+        --text-main: #fff;
+        --text-base: #fff;
+        --text-muted: #94a3b8;
+        --text-dimmed: #64748b;
+        --border-base: #1e293b;
+        --border-color: #1e293b;
+        --glass-bg: rgba(255, 255, 255, 0.03);
+        --glass-border: rgba(255, 255, 255, 0.08);
+        --shadow-base: rgba(0, 0, 0, 0.3);
+        --shadow-hover: rgba(0, 0, 0, 0.4);
+        --primary: var(--color-primary);
+        --primary-10: rgba(29, 218, 188, 0.1);
+    }
+
+    *, *::before, *::after {
+        box-sizing: border-box;
+    }
+
+    html {
+        background: var(--bg-main);
+        color: var(--text-main);
+        scroll-behavior: smooth;
+    }
+
+    body.production-page {
+        min-width: 320px;
+        min-height: 100vh;
+        margin: 0;
+        padding-top: 4.5rem;
+        background: var(--bg-main);
+        color: var(--text-main);
+        font-family: var(--font-family, Inter, system-ui, sans-serif);
+    }
+
+    body.production-page main {
+        width: 100%;
+        min-height: 100vh;
+    }
+</style>