@jjlmoya/utils-home 1.15.0 → 1.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jjlmoya/utils-home",
-    "version": "1.15.0",
+    "version": "1.17.0",
     "type": "module",
     "main": "./src/index.ts",
     "types": "./src/index.ts",
@@ -10,7 +10,8 @@
         "./entries": "./src/entries.ts"
     },
     "files": [
-        "src"
+        "src",
+        "scripts"
     ],
     "publishConfig": {
         "access": "public"
@@ -29,7 +30,8 @@
         "postversion": "git push && git push --tags",
         "patch": "npm version patch",
         "minor": "npm version minor",
-        "major": "npm version major"
+        "major": "npm version major",
+        "postinstall": "node scripts/postinstall.mjs"
     },
     "lint-staged": {
         "*.{ts,tsx,astro}": [

package/scripts/postinstall.mjs

@@ -0,0 +1,27 @@
+import { readFileSync, writeFileSync, mkdirSync, readdirSync } from 'fs';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+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 categoryKey = JSON.parse(readFileSync(join(libDir, '../package.json'), 'utf8')).name.replace('@jjlmoya/utils-', '');
+const destDir = join(projectRoot, `public/styles/lib/${categoryKey}`);
+
+mkdirSync(destDir, { recursive: true });
+
+const tools = readdirSync(toolsDir, { withFileTypes: true }).filter(d => d.isDirectory());
+for (const tool of tools) {
+    const toolDir = join(toolsDir, tool.name);
+    let files;
+    try { files = readdirSync(toolDir).filter(f => f.endsWith('.css')); }
+    catch { continue; }
+    for (const file of files) {
+        writeFileSync(join(destDir, file), readFileSync(join(toolDir, file)));
+        console.log(`[@jjlmoya/utils-${categoryKey}] copied ${file}`);
+    }
+}

package/src/pages/[locale]/[slug].astro

@@ -34,18 +34,28 @@ export async function getStaticPaths() {
       ]),
     ) as Partial<Record<KnownLocale, string>>;
 
+    const firstLoader = entry.i18n.en ?? Object.values(entry.i18n)[0];
+    const englishSlug = firstLoader ? (await firstLoader()).slug : entry.id;
+
     for (const { locale, content } of localeContents) {
-      const allToolsNav = await Promise.all(
-        ALL_TOOLS.map(async ({ entry: navEntry }) => ({
-          id: navEntry.id,
-          title: (await navEntry.i18n[locale]!()).title,
-          href: `/${locale}/${(await navEntry.i18n[locale]!()).slug}`,
-          isActive: navEntry.id === entry.id,
-        })),
-      );
+      const allToolsNav = (
+        await Promise.all(
+          ALL_TOOLS.map(async ({ entry: navEntry }) => {
+            const loader = navEntry.i18n[locale] ?? navEntry.i18n.en;
+            if (!loader) return null;
+            const navContent = await loader();
+            return {
+              id: navEntry.id,
+              title: navContent.title,
+              href: `/${locale}/${navContent.slug}`,
+              isActive: navEntry.id === entry.id,
+            };
+          }),
+        )
+      ).filter(Boolean) as NavItem[];
       paths.push({
         params: { locale, slug: content.slug },
-        props: { Component, locale, content, localeUrls, allToolsNav },
+        props: { Component, locale, content, localeUrls, allToolsNav, englishSlug },
       });
     }
   }
@@ -66,11 +76,16 @@ interface Props {
   content: ToolLocaleContent;
   localeUrls: Partial<Record<KnownLocale, string>>;
   allToolsNav: NavItem[];
+  englishSlug: string;
 }
 
-const { Component, locale, content, localeUrls, allToolsNav } = Astro.props;
+const { Component, locale, content, localeUrls, allToolsNav, englishSlug } = Astro.props;
+
+const cssFiles = import.meta.glob("../../tool/*/*.css", { query: "?raw", import: "default" });
+const cssKey = Object.keys(cssFiles).find((k) => k.endsWith(`/${englishSlug}.css`));
+const toolCss = cssKey ? await cssFiles[cssKey]() as string : "";
 
-const seoContent: UtilitySEOContent = { locale, sections: content.seo };
+const seoContent: UtilitySEOContent = { locale, sections: content.seo ?? [] };
 
 const words = content.title.split(" ");
 const titleHighlight = words[0] || "";
@@ -89,8 +104,9 @@ const titleBase = words.slice(1).join(" ") || "";
     tools={allToolsNav}
   />
   <Fragment slot="head">
+    {toolCss ? <Fragment set:html={`<style is:inline>${toolCss}</style>`} /> : null}
     {
-      content.schemas.map((schema: unknown) => (
+      ( content.schemas ?? []).map((schema: unknown) => (
         <script
           is:inline
           type="application/ld+json"

package/src/tests/locale_completeness.test.ts

@@ -7,28 +7,10 @@ describe('Locale Completeness Validation', () => {
     describe(`Tool: ${tool.entry.id}`, () => {
       Object.keys(tool.entry.i18n).forEach((locale) => {
         describe(`Locale: ${locale}`, () => {
-          it('faqTitle should be defined when faq items exist', async () => {
+          it('should load without errors', async () => {
             const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
             const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.faq.length > 0) {
-              expect(
-                content.faqTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.faq.length} FAQ items but is missing faqTitle`,
-              ).toBeTruthy();
-            }
-          });
-
-          it('bibliographyTitle should be defined when bibliography items exist', async () => {
-            const loader = tool.entry.i18n[locale as keyof typeof tool.entry.i18n];
-            const content = (await loader?.()) as ToolLocaleContent;
-
-            if (content.bibliography.length > 0) {
-              expect(
-                content.bibliographyTitle,
-                `Tool "${tool.entry.id}" locale "${locale}" has ${content.bibliography.length} bibliography items but is missing bibliographyTitle`,
-              ).toBeTruthy();
-            }
+            expect(content).toBeDefined();
           });
         });
       });

package/src/tests/shared-test-helpers.ts

@@ -0,0 +1,56 @@
+import type { ToolDefinition } from '../types';
+
+export interface ToolExportValidationResult {
+  passed: boolean;
+  failures: string[];
+}
+
+function validateComponentType(
+  toolId: string,
+  componentName: string,
+  component: unknown,
+  failures: string[],
+): void {
+  if (typeof component !== 'function') {
+    failures.push(`${toolId}: ${componentName} is not a function (${typeof component})`);
+  }
+}
+
+async function validateComponentExecution(
+  toolId: string,
+  componentName: string,
+  fn: () => Promise<unknown>,
+  failures: string[],
+): Promise<void> {
+  try {
+    const result = await fn();
+    if (!result || typeof result !== 'object') {
+      failures.push(`${toolId}: ${componentName} import returned invalid result`);
+    }
+  } catch (error) {
+    failures.push(`${toolId}: ${componentName} execution error - ${error instanceof Error ? error.message : 'unknown'}`);
+  }
+}
+
+export async function validateToolExports(tools: ToolDefinition[]): Promise<ToolExportValidationResult> {
+  const failures: string[] = [];
+
+  for (const tool of tools) {
+    validateComponentType(tool.entry.id, 'Component', tool.Component, failures);
+    validateComponentType(tool.entry.id, 'SEOComponent', tool.SEOComponent, failures);
+    validateComponentType(tool.entry.id, 'BibliographyComponent', tool.BibliographyComponent, failures);
+
+    const componentFn = tool.Component as () => Promise<unknown>;
+    const seoFn = tool.SEOComponent as () => Promise<unknown>;
+    const bibFn = tool.BibliographyComponent as () => Promise<unknown>;
+
+    await validateComponentExecution(tool.entry.id, 'Component', componentFn, failures);
+    await validateComponentExecution(tool.entry.id, 'SEOComponent', seoFn, failures);
+    await validateComponentExecution(tool.entry.id, 'BibliographyComponent', bibFn, failures);
+  }
+
+  return {
+    passed: failures.length === 0,
+    failures,
+  };
+}

package/src/tests/tool_exports.test.ts

@@ -0,0 +1,34 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+import { validateToolExports } from './shared-test-helpers';
+
+describe('Tool Exports Pattern Validation', () => {
+  describe('Component Exports Format', () => {
+    ALL_TOOLS.forEach((tool) => {
+      it(`${tool.entry.id}: Component should be a lazy-loaded function`, () => {
+        expect(typeof tool.Component).toBe('function');
+        expect(tool.Component).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: SEOComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.SEOComponent).toBe('function');
+        expect(tool.SEOComponent).toBeInstanceOf(Function);
+      });
+
+      it(`${tool.entry.id}: BibliographyComponent should be a lazy-loaded function`, () => {
+        expect(typeof tool.BibliographyComponent).toBe('function');
+        expect(tool.BibliographyComponent).toBeInstanceOf(Function);
+      });
+    });
+  });
+
+  describe('Dynamic Import Validation', () => {
+    it('all tools must have functional dynamic imports', async () => {
+      const result = await validateToolExports(ALL_TOOLS);
+      if (!result.passed) {
+        throw new Error(`Tool export validation failed:\n${result.failures.join('\n')}`);
+      }
+      expect(result.passed).toBe(true);
+    });
+  });
+});

package/src/tool/dewPointCalculator/bibliography.ts

@@ -0,0 +1,10 @@
+export const bibliography = [
+  {
+    name: 'Magnus Approximation of the Dew-Point — Meteorological Applications (2011)',
+    url: 'https://es.scribd.com/document/331352069/dew-point',
+  },
+  {
+    name: 'Guide to Meteorological Instruments and Methods of Observation — WMO (2021)',
+    url: 'https://community.wmo.int/site/knowledge-hub/programmes-and-initiatives/instruments-and-methods-of-observation-programme-imop/guide-instruments-and-methods-of-observation-wmo-no-8',
+  },
+];

package/src/tool/dewPointCalculator/component.astro

@@ -209,235 +209,3 @@ const fillW = Math.abs(tempX - dewX);
   init();
 </script>
 
-<style>
-  .dew-wrapper {
-    --dew-p: #8b5cf6;
-
-    width: 100%;
-    padding: 1rem 0;
-  }
-
-  .dew-card {
-    background: var(--bg-surface);
-    width: calc(100% - 24px);
-    max-width: 900px;
-    margin: 0 auto;
-    border-radius: 24px;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--border-color);
-    color: var(--text-main);
-  }
-
-  @media (min-width: 768px) {
-    .dew-card {
-      flex-direction: row;
-      min-height: 500px;
-    }
-  }
-
-  .dew-left {
-    flex: 0 0 auto;
-    width: 100%;
-    padding: 32px;
-    border-bottom: 1px solid var(--border-color);
-    display: flex;
-    flex-direction: column;
-    gap: 32px;
-  }
-
-  @media (min-width: 768px) {
-    .dew-left {
-      width: 340px;
-      border-bottom: none;
-      border-right: 1px solid var(--border-color);
-    }
-  }
-
-  .dew-right {
-    flex: 1;
-    background: var(--bg-page);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 24px;
-    padding: 32px;
-    min-height: 360px;
-  }
-
-  .dew-field {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .dew-field-top {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
-  .dew-label {
-    font-size: 0.6875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--dew-p);
-  }
-
-  .dew-val-display {
-    font-size: 2rem;
-    font-weight: 900;
-    color: var(--text-main);
-    line-height: 1;
-  }
-
-  .dew-unit {
-    font-size: 1rem;
-    font-weight: 400;
-    color: var(--text-muted);
-  }
-
-  .dew-slider {
-    width: 100%;
-    height: 6px;
-    accent-color: var(--dew-p);
-    cursor: pointer;
-    border-radius: 9999px;
-  }
-
-  .dew-steps {
-    display: flex;
-    gap: 8px;
-  }
-
-  .dew-step {
-    flex: 1;
-    padding: 8px;
-    border-radius: 10px;
-    border: 1px solid var(--border-color);
-    background: var(--bg-surface);
-    color: var(--text-main);
-    font-size: 1.25rem;
-    font-weight: 700;
-    cursor: pointer;
-    transition: all 0.15s;
-  }
-
-  .dew-step:hover {
-    border-color: var(--dew-p);
-    color: var(--dew-p);
-  }
-
-  .dew-result-section {
-    text-align: center;
-  }
-
-  .dew-result-label {
-    font-size: 0.6875rem;
-    font-weight: 700;
-    text-transform: uppercase;
-    letter-spacing: 0.15em;
-    color: var(--text-muted);
-    margin: 0 0 8px;
-  }
-
-  .dew-result-value {
-    font-size: 5rem;
-    font-weight: 900;
-    color: #06b6d4;
-    line-height: 1;
-    margin: 0;
-  }
-
-  .dew-result-unit {
-    font-size: 2.5rem;
-    font-weight: 300;
-    color: var(--text-muted);
-  }
-
-  .dew-risk-badge {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 12px 18px;
-    border-radius: 12px;
-    width: 100%;
-    max-width: 320px;
-    transition: background 0.3s;
-  }
-
-  .dew-risk-dot {
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .dew-risk-text {
-    display: flex;
-    flex-direction: column;
-    gap: 2px;
-  }
-
-  .dew-risk-name {
-    font-size: 0.875rem;
-    font-weight: 700;
-  }
-
-  .dew-risk-desc {
-    font-size: 0.6875rem;
-    opacity: 0.8;
-  }
-
-  .dew-risk-low {
-    background: rgba(34, 197, 94, 0.1);
-    border: 1px solid rgba(34, 197, 94, 0.2);
-    color: #4ade80;
-  }
-
-  .dew-risk-low .dew-risk-dot {
-    background: #22c55e;
-  }
-
-  .dew-risk-medium {
-    background: rgba(245, 158, 11, 0.1);
-    border: 1px solid rgba(245, 158, 11, 0.2);
-    color: #fbbf24;
-  }
-
-  .dew-risk-medium .dew-risk-dot {
-    background: #f59e0b;
-  }
-
-  .dew-risk-high {
-    background: rgba(249, 115, 22, 0.1);
-    border: 1px solid rgba(249, 115, 22, 0.2);
-    color: #fb923c;
-  }
-
-  .dew-risk-high .dew-risk-dot {
-    background: #f97316;
-  }
-
-  .dew-risk-extreme {
-    background: rgba(239, 68, 68, 0.1);
-    border: 1px solid rgba(239, 68, 68, 0.2);
-    color: #f87171;
-  }
-
-  .dew-risk-extreme .dew-risk-dot {
-    background: #ef4444;
-  }
-
-  .dew-gauge {
-    width: 100%;
-    max-width: 320px;
-  }
-
-  .dew-gauge-track {
-    fill: var(--bg-muted);
-  }
-</style>