@jjlmoya/utils-science 1.53.0 → 1.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-science",
-    "version": "1.53.0",
+    "version": "1.55.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -33,7 +33,17 @@
         "patch": "npm version patch",
         "minor": "npm version minor",
         "major": "npm version major",
-        "postinstall": "node scripts/postinstall.mjs"
+        "postinstall": "node scripts/postinstall.mjs",
+        "predev": "node scripts/postinstall.mjs",
+        "prestart": "node scripts/postinstall.mjs",
+        "prebuild": "node scripts/postinstall.mjs",
+        "postbuild": "node scripts/postbuild.mjs",
+        "qa": "npm run lint && npm run test && npm run build",
+        "cf:dry-run": "npm run build && wrangler deploy --dry-run",
+        "cf:preview": "npm run build && wrangler deploy --config wrangler.staging.jsonc",
+        "cf:deploy": "npm run build && wrangler deploy",
+        "cf:deployments": "wrangler deployments list",
+        "cf:rollback": "wrangler rollback"
     },
     "lint-staged": {
         "*.{ts,tsx,astro}": [
@@ -43,9 +53,11 @@
     "dependencies": {
         "@iconify-json/mdi": "^1.2.3",
         "@jjlmoya/prompagate": "^1.1.0",
-        "@jjlmoya/utils-shared": "1.2.0",
+        "@jjlmoya/utils-shared": "1.5.0",
         "astro": "^6.1.2",
-        "astro-icon": "^1.1.0"
+        "astro-icon": "^1.1.0",
+        "@jjlmoya/identity": "0.4.0",
+        "@jjlmoya/tracking": "0.2.0"
     },
     "peerDependencies": {
         "leaflet": "^1.9.4"
@@ -66,6 +78,7 @@
         "stylelint-declaration-strict-value": "^1.11.1",
         "typescript": "^5.4.0",
         "typescript-eslint": "^8.58.0",
-        "vitest": "^4.1.2"
+        "vitest": "^4.1.2",
+        "wrangler": "4.113.0"
     }
 }

package/scripts/postbuild.mjs

@@ -0,0 +1,17 @@
+import { copyFileSync, existsSync, mkdirSync, rmSync, readdirSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+const sourceRoot = resolve('dist/mfe-sitemaps');
+const destinationRoot = resolve('dist/_utilities');
+
+if (existsSync(sourceRoot)) {
+    for (const locale of readdirSync(sourceRoot, { withFileTypes: true }).filter((entry) => entry.isDirectory())) {
+        for (const vertical of readdirSync(join(sourceRoot, locale.name), { withFileTypes: true }).filter((entry) => entry.isDirectory())) {
+            const source = join(sourceRoot, locale.name, vertical.name, 'sitemap.xml');
+            const destinationDirectory = join(destinationRoot, locale.name, vertical.name);
+            mkdirSync(destinationDirectory, { recursive: true });
+            copyFileSync(source, join(destinationDirectory, 'sitemap.xml'));
+        }
+    }
+    rmSync(sourceRoot, { recursive: true, force: true });
+}

package/scripts/postinstall.mjs

@@ -6,11 +6,9 @@ const libDir = dirname(fileURLToPath(import.meta.url));
 const toolsDir = join(libDir, '../src/tool');
 
 const inNodeModules = libDir.includes('node_modules');
-if (!inNodeModules) process.exit(0);
-
-const projectRoot = join(libDir, '../../../..');
+const projectRoot = inNodeModules ? join(libDir, '../../../..') : join(libDir, '..');
 const categoryKey = JSON.parse(readFileSync(join(libDir, '../package.json'), 'utf8')).name.replace('@jjlmoya/utils-', '');
-const destDir = join(projectRoot, `public/styles/lib/${categoryKey}`);
+const destDir = join(projectRoot, `public/_utilities/${categoryKey}/styles`);
 
 mkdirSync(destDir, { recursive: true });
 

package/src/components/ProductionBreadcrumb.astro

@@ -0,0 +1,134 @@
+---
+import { Icon } from "astro-icon/components";
+import type { KnownLocale } from "../types";
+import { getCategoryUi } from "../mfe/category-ui";
+import { getUtilitiesPath } from "@jjlmoya/utils-shared/routing";
+
+interface Props {
+    locale: KnownLocale;
+    categoryTitle?: string;
+    categoryHref?: string;
+    currentTitle?: string;
+}
+
+const LABELS: Record<KnownLocale, string> = {
+    es: "Todas las utilidades",
+    en: "All utilities",
+    fr: "Toutes les utilités",
+    de: "Alle Werkzeuge",
+    it: "Tutte le utilità",
+    pt: "Todas as utilidades",
+    nl: "Alle hulpmiddelen",
+    sv: "Alla verktyg",
+    pl: "Wszystkie narzędzia",
+    id: "Semua utilitas",
+    tr: "Tüm araçlar",
+    ru: "Все инструменты",
+    ja: "すべてのユーティリティ",
+    ko: "모든 유틸리티",
+    zh: "所有工具",
+};
+
+const { locale, categoryTitle, categoryHref, currentTitle } = Astro.props;
+const homeLabel = LABELS[locale];
+const breadcrumbLabel = getCategoryUi(locale).breadcrumb;
+---
+
+<nav class="production-breadcrumb" aria-label={breadcrumbLabel}>
+    <ol class="production-breadcrumb-list">
+        <li class="production-breadcrumb-item">
+            <a href={getUtilitiesPath(locale)}>{homeLabel}</a>
+        </li>
+        {categoryTitle && categoryHref && (
+            <>
+                <li class="production-breadcrumb-separator" aria-hidden="true">
+                    <Icon name="mdi:chevron-right" />
+                </li>
+                <li class="production-breadcrumb-item">
+                    <a href={categoryHref}>{categoryTitle}</a>
+                </li>
+            </>
+        )}
+        {currentTitle && (
+            <>
+                <li class="production-breadcrumb-separator" aria-hidden="true">
+                    <Icon name="mdi:chevron-right" />
+                </li>
+                <li class="production-breadcrumb-item production-breadcrumb-current" aria-current="page">
+                    <span>{currentTitle}</span>
+                </li>
+            </>
+        )}
+    </ol>
+</nav>
+
+<style>
+    .production-breadcrumb {
+        margin-bottom: var(--space-xl);
+    }
+
+    .production-breadcrumb-list {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-sm);
+        align-items: center;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    .production-breadcrumb-item {
+        display: flex;
+        min-width: 0;
+        align-items: center;
+        color: var(--text-muted);
+        font-size: 0.9rem;
+    }
+
+    .production-breadcrumb-item a {
+        overflow: hidden;
+        color: var(--text-main);
+        font-weight: 500;
+        text-decoration: none;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .production-breadcrumb-item a:hover,
+    .production-breadcrumb-item a:focus-visible {
+        color: var(--science-accent);
+        text-decoration: underline;
+        text-underline-offset: 0.25rem;
+    }
+
+    .production-breadcrumb-separator {
+        display: flex;
+        flex: 0 0 auto;
+        align-items: center;
+        color: var(--text-dimmed, var(--text-muted));
+    }
+
+    .production-breadcrumb-separator svg {
+        width: 1rem;
+        height: 1rem;
+    }
+
+    .production-breadcrumb-current {
+        overflow: hidden;
+        max-width: min(28rem, 70vw);
+        color: var(--text-muted);
+        font-size: 0.9rem;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    @media (width <= 640px) {
+        .production-breadcrumb {
+            margin-bottom: var(--space-lg);
+        }
+
+        .production-breadcrumb-item {
+            font-size: 0.8rem;
+        }
+    }
+</style>

package/src/components/ProductionStructuredData.astro

@@ -0,0 +1,46 @@
+---
+import type { KnownLocale, ToolLocaleContent } from "../types";
+import { TABLETOP_ASSET_VERSION } from "../mfe/assets";
+
+interface Props {
+    locale: KnownLocale;
+    content: ToolLocaleContent;
+    publicPath: string;
+    categoryTitle: string;
+    categoryHref: string;
+}
+
+const { locale, content, publicPath, categoryTitle, categoryHref } = Astro.props;
+const siteOrigin = locale === "es" ? "https://www.jjlmoya.es" : "https://www.gamebob.dev";
+const fullUrl = new URL(publicPath, siteOrigin).href;
+const categoryUrl = new URL(categoryHref, siteOrigin).href;
+const brandName = locale === "es" ? "jjlmoya" : "GameBob";
+const schemas = (content.schemas ?? []).filter((schema) => (schema as unknown as Record<string, unknown>)["@type"] !== "FAQPage");
+const schemaTypes = new Set(schemas.map((schema) => (schema as unknown as Record<string, unknown>)["@type"]));
+const breadcrumbSchema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: [
+        { "@type": "ListItem", position: 1, name: brandName, item: `${siteOrigin}/${locale === "es" ? "" : `${locale}/`}` },
+        { "@type": "ListItem", position: 2, name: categoryTitle, item: categoryUrl },
+        { "@type": "ListItem", position: 3, name: content.title, item: fullUrl },
+    ],
+};
+const webApplicationSchema = {
+    "@context": "https://schema.org",
+    "@type": "WebApplication",
+    name: content.title,
+    description: content.description,
+    url: fullUrl,
+    applicationCategory: "UtilityApplication",
+    operatingSystem: "Any",
+    softwareVersion: TABLETOP_ASSET_VERSION,
+    author: { "@type": "Person", name: "jjlmoya", url: siteOrigin },
+    publisher: { "@type": "Organization", name: brandName, url: siteOrigin },
+    inLanguage: locale,
+    offers: { "@type": "Offer", price: "0", priceCurrency: "EUR" },
+};
+---
+<script is:inline type="application/ld+json" set:html={JSON.stringify(breadcrumbSchema)} />
+{!schemaTypes.has("WebApplication") && <script is:inline type="application/ld+json" set:html={JSON.stringify(webApplicationSchema)} />}
+{schemas.map((schema) => <script is:inline type="application/ld+json" set:html={JSON.stringify(schema)} />)}

package/src/components/ProductionWidget.astro

@@ -0,0 +1,182 @@
+---
+import { Icon } from "astro-icon/components";
+import type { KnownLocale } from "../types";
+
+interface Props {
+  locale: KnownLocale;
+  slug: string;
+}
+
+const { locale, slug } = Astro.props;
+
+const copy: Record<KnownLocale, { badge: string; title: string; description: string; action: string }> = {
+  es: { badge: "Estudio de utilidades", title: "¿Quieres esta utilidad en tu web?", description: "Personaliza colores y modo oscuro para WordPress, Notion o tu propia web.", action: "Empezar" },
+  en: { badge: "Utilities Studio", title: "Want this utility on your website?", description: "Customize colors and dark mode for WordPress, Notion or your own site.", action: "Go Ahead" },
+  fr: { badge: "Studio d'utilitaires", title: "Voulez-vous cet outil sur votre site web ?", description: "Personnalisez les couleurs et le mode sombre pour WordPress, Notion ou votre propre site.", action: "Allons-y" },
+  de: { badge: "Tools-Studio", title: "Möchtest du dieses Werkzeug auf deiner Website?", description: "Passe Farben und den Dunkelmodus für WordPress, Notion oder deine eigene Website an.", action: "Los geht's" },
+  it: { badge: "Studio Strumenti", title: "Vuoi questo strumento sul tuo sito?", description: "Personalizza i colori e la modalità scura per WordPress, Notion o il tuo sito.", action: "Vai" },
+  pt: { badge: "Estúdio de Utilitários", title: "Quer este utilitário no seu site?", description: "Personalize cores e o modo escuro para WordPress, Notion ou o seu próprio site.", action: "Avançar" },
+  nl: { badge: "Hulpmiddelenstudio", title: "Wil je dit hulpmiddel op je website?", description: "Pas kleuren en de donkere modus aan voor WordPress, Notion of je eigen site.", action: "Ga verder" },
+  sv: { badge: "Verktygsstudio", title: "Vill du ha det här verktyget på din webbplats?", description: "Anpassa färger och mörkt läge för WordPress, Notion eller din egen sajt.", action: "Kör igång" },
+  pl: { badge: "Studio narzędzi", title: "Chcesz mieć to narzędzie na swojej stronie?", description: "Dostosuj kolory i tryb ciemny dla WordPress, Notion lub własnej witryny.", action: "Działaj" },
+  id: { badge: "Studio Utilitas", title: "Ingin utilitas ini di situs Anda?", description: "Sesuaikan warna dan mode gelap untuk WordPress, Notion, atau situs Anda sendiri.", action: "Mulai Sekarang" },
+  tr: { badge: "Araç Stüdyosu", title: "Bu aracı kendi sitenizde kullanmak ister misiniz?", description: "WordPress, Notion veya kendi siteniz için renkleri ve karanlık modu özelleştirin.", action: "Hemen Başla" },
+  ru: { badge: "Студия утилит", title: "Хотите эту утилиту на своём сайте?", description: "Настройте цвета и тёмную тему для WordPress, Notion или вашего сайта.", action: "Вперёд" },
+  ja: { badge: "ユーティリティスタジオ", title: "このユーティリティをあなたのサイトに追加しませんか？", description: "WordPress、Notion、またはご自身のサイト向けに、カラーとダークモードをカスタマイズできます。", action: "さっそく始める" },
+  ko: { badge: "유틸리티 스튜디오", title: "이 유틸리티를 내 웹사이트에 추가하고 싶으신가요?", description: "WordPress, Notion 또는 직접 운영하는 사이트에 맞게 색상과 다크 모드를 설정하세요.", action: "시작하기" },
+  zh: { badge: "工具工作室", title: "想把这个工具添加到你的网站吗？", description: "为 WordPress、Notion 或你自己的网站自定义配色和深色模式。", action: "立即开始" },
+};
+
+const text = copy[locale];
+const widgetPath = locale === "es" ? `/widgets/?utilidad=${encodeURIComponent(slug)}` : `/${locale}/widgets/?utilidad=${encodeURIComponent(slug)}`;
+const widgetHref = locale === "es" ? `https://www.jjlmoya.es${widgetPath}` : `https://www.gamebob.dev${widgetPath}`;
+---
+
+<section class="production-widget" aria-labelledby="production-widget-title">
+  <div class="production-widget-card">
+    <div class="production-widget-glow"></div>
+    <div class="production-widget-content">
+      <div class="production-widget-copy">
+        <span class="production-widget-badge"><Icon name="mdi:widgets-outline" />{text.badge}</span>
+        <div>
+          <h2 id="production-widget-title">{text.title}</h2>
+          <p>{text.description}</p>
+        </div>
+      </div>
+      <a class="production-widget-action" href={widgetHref}>
+        {text.action}<Icon name="mdi:arrow-right" />
+      </a>
+    </div>
+  </div>
+</section>
+
+<style>
+  .production-widget {
+    margin-top: var(--space-2xl);
+  }
+
+  .production-widget-card {
+    position: relative;
+    max-width: 56rem;
+    margin: 0 auto;
+    overflow: hidden;
+    padding: var(--space-md) var(--space-lg);
+    border: 1px solid var(--border-base);
+    border-radius: 1rem;
+    background: var(--bg-surface);
+    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--shadow-base, #000) 25%, transparent);
+  }
+
+  .production-widget-glow {
+    position: absolute;
+    top: -3rem;
+    right: -3rem;
+    width: 8rem;
+    height: 8rem;
+    border-radius: 50%;
+    background: var(--science-accent);
+    opacity: 0.08;
+    filter: blur(2.5rem);
+  }
+
+  .production-widget-content {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-lg);
+  }
+
+  .production-widget-copy {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-md);
+  }
+
+  .production-widget-badge {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.35rem 0.6rem;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--science-accent) 12%, transparent);
+    color: var(--science-accent);
+    font-size: 0.55rem;
+    font-weight: 900;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+
+  .production-widget-badge svg,
+  .production-widget-action svg {
+    width: 0.9rem;
+    height: 0.9rem;
+  }
+
+  .production-widget-copy h2 {
+    margin: 0;
+    color: var(--text-main);
+    font-size: 0.95rem;
+    font-weight: 800;
+    line-height: 1.2;
+  }
+
+  .production-widget-copy p {
+    margin: 0.25rem 0 0;
+    overflow: hidden;
+    color: var(--text-muted);
+    font-size: 0.75rem;
+    line-height: 1.3;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .production-widget-action {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    gap: 0.35rem;
+    padding: 0.6rem 0.85rem;
+    border-radius: 0.7rem;
+    background: var(--science-accent);
+    color: var(--bg-main);
+    font-size: 0.75rem;
+    font-weight: 800;
+    text-decoration: none;
+    transition: transform 0.2s ease, filter 0.2s ease;
+  }
+
+  .production-widget-action:hover,
+  .production-widget-action:focus-visible {
+    filter: brightness(1.08);
+    transform: translateY(-1px);
+  }
+
+  @media (width <= 768px) {
+    .production-widget-card {
+      padding: var(--space-md);
+    }
+
+    .production-widget-content {
+      align-items: stretch;
+      flex-direction: column;
+    }
+
+    .production-widget-copy {
+      align-items: flex-start;
+      flex-direction: column;
+      gap: var(--space-sm);
+    }
+
+    .production-widget-copy p {
+      white-space: normal;
+    }
+
+    .production-widget-action {
+      justify-content: center;
+    }
+  }
+</style>

package/src/i18n/header-ui.ts

@@ -0,0 +1,15 @@
+import type { HeaderLabels } from "@jjlmoya/identity/types";
+import { LANGUAGE_CODES, type Language } from "./languages";
+
+const DEFAULT_LABELS: HeaderLabels = {
+    menu: "Menu",
+    closeMenu: "Close menu",
+    theme: "Theme",
+    switchToLight: "Switch to light theme",
+    switchToDark: "Switch to dark theme",
+    switchToSystem: "Use system theme",
+};
+
+export const HEADER_UI = Object.fromEntries(
+    LANGUAGE_CODES.map((language) => [language, DEFAULT_LABELS]),
+) as Record<Language, HeaderLabels>;

package/src/i18n/language-ui.ts

@@ -0,0 +1,9 @@
+import { LANGUAGE_CODES, type Language } from "./languages";
+
+export const LANGUAGE_UI = Object.fromEntries(
+    LANGUAGE_CODES.map((language) => [language, {
+            change: "Change language",
+            select: "Select language",
+            close: "Close language selector",
+        }]),
+) as Record<Language, { change: string; select: string; close: string }>;

package/src/i18n/languages.ts

@@ -0,0 +1,24 @@
+import { UTILITY_LOCALES, type UtilityLocale } from "@jjlmoya/utils-shared/routing";
+
+export const LANGUAGES = [
+    ["es", "Español", "es-ES"],
+    ["en", "English", "en-US"],
+    ["fr", "Français", "fr-FR"],
+    ["de", "Deutsch", "de-DE"],
+    ["it", "Italiano", "it-IT"],
+    ["pt", "Português", "pt-PT"],
+    ["nl", "Nederlands", "nl-NL"],
+    ["sv", "Svenska", "sv-SE"],
+    ["pl", "Polski", "pl-PL"],
+    ["id", "Bahasa Indonesia", "id-ID"],
+    ["tr", "Türkçe", "tr-TR"],
+    ["ru", "Русский", "ru-RU"],
+    ["ja", "日本語", "ja-JP"],
+    ["ko", "한국어", "ko-KR"],
+    ["zh", "中文", "zh-CN"],
+] as const satisfies readonly (readonly [UtilityLocale, string, string])[];
+
+export type Language = UtilityLocale;
+export const LANGUAGE_CODES = UTILITY_LOCALES;
+export const LANGUAGE_NAMES = Object.fromEntries(LANGUAGES.map(([code, name]) => [code, name])) as Record<Language, string>;
+export const LANGUAGE_LOCALES = Object.fromEntries(LANGUAGES.map(([code, , locale]) => [code, locale])) as Record<Language, string>;

package/src/identity/brands.ts

@@ -0,0 +1,5 @@
+import type { Language } from "../i18n/languages";
+import type { Identity } from "@jjlmoya/identity/types";
+
+export type Brand = Identity;
+export const getBrand = (language: Language): Brand => language === "es" ? "jjlmoya" : "gamebob";