@jjlmoya/utils-pets 1.1.0

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

@@ -0,0 +1,148 @@
+---
+import PreviewLayout from "../../layouts/PreviewLayout.astro";
+import PreviewNavSidebar from "../../components/PreviewNavSidebar.astro";
+import { ALL_TOOLS } from "../../index";
+import {
+  UtilityHeader,
+  FAQSection,
+  Bibliography,
+  SEORenderer,
+} from "@jjlmoya/utils-shared";
+import type { KnownLocale, ToolLocaleContent } from "../../types";
+import type { UtilitySEOContent } from "@jjlmoya/utils-shared";
+
+export async function getStaticPaths() {
+  const paths = [];
+
+  for (const { entry, Component } of ALL_TOOLS) {
+    const localeEntries = Object.entries(entry.i18n) as [
+      KnownLocale,
+      () => Promise<ToolLocaleContent>,
+    ][];
+    const localeContents = await Promise.all(
+      localeEntries.map(async ([locale, loader]) => ({
+        locale,
+        content: await loader(),
+      })),
+    );
+
+    const localeUrls = Object.fromEntries(
+      localeContents.map(({ locale, content }) => [
+        locale,
+        `/${locale}/${content.slug}`,
+      ]),
+    ) as Partial<Record<KnownLocale, string>>;
+
+    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,
+        })),
+      );
+      paths.push({
+        params: { locale, slug: content.slug },
+        props: { Component, locale, content, localeUrls, allToolsNav },
+      });
+    }
+  }
+
+  return paths;
+}
+
+type ToolComponent = (props: { ui: Record<string, string> }) => unknown;
+
+interface NavItem {
+  id: string;
+  title: string;
+  href: string;
+  isActive?: boolean;
+}
+
+interface Props {
+  Component: ToolComponent;
+  locale: KnownLocale;
+  content: ToolLocaleContent;
+  localeUrls: Partial<Record<KnownLocale, string>>;
+  allToolsNav: NavItem[];
+}
+
+const { Component, locale, content, localeUrls, allToolsNav } = Astro.props;
+
+const seoContent: UtilitySEOContent = { locale, sections: content.seo };
+
+const words = content.title.split(" ");
+const titleHighlight = words[0] || "";
+const titleBase = words.slice(1).join(" ") || "";
+---
+
+<PreviewLayout
+  title={content.title}
+  currentLocale={locale}
+  localeUrls={localeUrls}
+  hasSidebar={true}
+>
+  <PreviewNavSidebar
+    slot="sidebar"
+    categoryTitle="Tools"
+    tools={allToolsNav}
+  />
+  <Fragment slot="head">
+    {
+      content.schemas.map((schema) => (
+        <script
+          is:inline
+          type="application/ld+json"
+          set:html={JSON.stringify(schema)}
+        />
+      ))
+    }
+  </Fragment>
+
+  <div class="tool-page">
+    <UtilityHeader
+      titleHighlight={titleHighlight}
+      titleBase={titleBase}
+      description={content.description}
+    />
+
+    <section class="section-tool">
+      <Component ui={content.ui} />
+    </section>
+
+    <section class="section-seo">
+      <SEORenderer content={seoContent} />
+    </section>
+
+    <section class="section-faq">
+      <FAQSection items={content.faq} inLanguage={locale} title={content.faqTitle} />
+    </section>
+
+    <section class="section-bibliography">
+      <Bibliography links={content.bibliography} title={content.bibliographyTitle} />
+    </section>
+  </div>
+</PreviewLayout>
+
+<style>
+  .tool-page {
+    display: flex;
+    flex-direction: column;
+    gap: 2rem;
+  }
+
+  .section-tool {
+    max-width: 1200px;
+    margin: 0 auto;
+    width: 100%;
+  }
+
+  .section-seo,
+  .section-faq,
+  .section-bibliography {
+    padding-top: 2rem;
+    border-top: 1px solid var(--border-color);
+  }
+</style>

package/src/pages/[locale].astro

@@ -0,0 +1,270 @@
+---
+import PreviewLayout from '../layouts/PreviewLayout.astro';
+import PreviewNavSidebar from '../components/PreviewNavSidebar.astro';
+import { petsCategory, ALL_TOOLS } from '../index';
+import { Icon } from 'astro-icon/components';
+import type { KnownLocale, ToolLocaleContent } from '../types';
+
+export async function getStaticPaths() {
+  const locales = ['en', 'es', 'fr'] as KnownLocale[];
+  return locales.map(locale => ({ params: { locale } }));
+}
+
+const { locale: currentLocale } = Astro.params as { locale: KnownLocale };
+
+const categoryContent = await petsCategory.i18n[currentLocale]!();
+
+const tools = ALL_TOOLS || [];
+
+const toolsWithContent = tools.length > 0
+  ? await Promise.all(
+      tools.map(async ({ entry, Component }) => {
+        const languages = Object.keys(entry.i18n);
+        const localeEntries = await Promise.all(
+          languages.map(async (l) => {
+            const content = await entry.i18n[l as KnownLocale]!();
+            return [l, content];
+          })
+        );
+
+        const localeContents = Object.fromEntries(localeEntries) as Record<string, ToolLocaleContent<Record<string, string>>>;
+
+        const currentLocaleContent = localeContents[currentLocale] || localeContents['en'] || localeContents['es'];
+        const availableLocales: Record<string, string> = {};
+
+        for (const l of languages) {
+          const lCont = localeContents[l];
+          if (lCont) {
+            availableLocales[l] = `/${l}/${lCont.slug}`;
+          }
+        }
+
+        return { entry, Component, locale: currentLocaleContent, availableLocales };
+      })
+    )
+  : [];
+---
+
+<PreviewLayout
+  title={categoryContent.title}
+  currentLocale={currentLocale}
+  hasSidebar={true}
+>
+  <PreviewNavSidebar
+    slot="sidebar"
+    categoryTitle={categoryContent.title}
+    tools={toolsWithContent.map(({ entry, locale, availableLocales }) => {
+      const href = availableLocales[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#');
+      return {
+        id: entry.id,
+        title: locale?.title || entry.id,
+        href: href,
+      };
+    })}
+  />
+  <div class="dashboard">
+    <header class="preview-header">
+      <span class="badge">preview · @jjlmoya/utils-pets</span>
+      <h1>{categoryContent.title}</h1>
+      <p>{categoryContent.description}</p>
+    </header>
+
+    <div class="tool-list">
+      {toolsWithContent?.map(({ entry, locale, availableLocales }) => (
+        <article class="tool-card">
+          <a href={availableLocales?.[currentLocale] || (locale ? `/${currentLocale}/${locale.slug}` : '#')} class="tool-card-link">
+            <div class="tool-icons">
+               <div class="icon-wrapper bg">
+                  <Icon name={entry.icons.bg} />
+               </div>
+               <div class="icon-wrapper fg">
+                  <Icon name={entry.icons.fg} />
+               </div>
+            </div>
+            <div class="tool-card-content">
+              <h2 class="tool-title">{locale?.title}</h2>
+              <p class="tool-description">{locale?.description}</p>
+            </div>
+            <div class="tool-card-meta">
+              <span class="tool-id">{entry.id}</span>
+            </div>
+          </a>
+
+          {availableLocales && Object.keys(availableLocales).length > 1 && (
+            <div class="tool-locales">
+              {Object.entries(availableLocales).map(([l, url]) => (
+                <a href={url} class="locale-badge" title={`Ver en ${l.toUpperCase()}`} class:list={{ active: l === currentLocale }}>
+                  {l.toUpperCase()}
+                </a>
+              ))}
+            </div>
+          )}
+        </article>
+      ))}
+    </div>
+  </div>
+</PreviewLayout>
+
+<style>
+  .dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: 5rem;
+  }
+
+  .preview-header {
+    text-align: center;
+    padding-bottom: 3rem;
+    border-bottom: 1px solid var(--border-color);
+  }
+
+  .badge {
+    display: inline-block;
+    padding: 0.25rem 0.75rem;
+    background: var(--accent);
+    border-radius: 99px;
+    font-size: 0.7rem;
+    font-weight: 800;
+    margin-bottom: 1.5rem;
+    color: var(--text-base);
+    letter-spacing: 0.05em;
+  }
+
+  h1 {
+    font-size: clamp(2rem, 6vw, 3.5rem);
+    font-weight: 900;
+    margin: 0 0 1rem;
+    background: linear-gradient(to bottom, var(--text-base), var(--text-muted));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+  }
+
+  .preview-header p {
+    color: var(--text-muted);
+    font-size: 1.1rem;
+    margin: 0;
+  }
+
+  .tool-list {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 2rem;
+  }
+
+  .tool-card {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .tool-card-link {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    padding: 1.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-color);
+    border-radius: 0.75rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+  }
+
+  .tool-card-link:hover {
+    border-color: var(--accent);
+    background: rgba(244, 63, 94, 0.05);
+    transform: translateY(-2px);
+  }
+
+  .tool-icons {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.5rem;
+    font-size: 1.5rem;
+  }
+
+  .icon-wrapper.bg {
+    background: var(--accent);
+    color: var(--text-base);
+  }
+
+  .icon-wrapper.fg {
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    color: var(--accent);
+  }
+
+  .tool-card-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .tool-title {
+    font-size: 1.25rem;
+    font-weight: 700;
+    margin: 0 0 0.5rem;
+    color: var(--text-base);
+  }
+
+  .tool-description {
+    font-size: 0.9375rem;
+    color: var(--text-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  .tool-card-meta {
+    padding-top: 1rem;
+    border-top: 1px solid var(--border-color);
+    margin-top: 1.5rem;
+  }
+
+  .tool-id {
+    display: inline-block;
+    font-size: 0.7rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    padding: 0.35rem 0.75rem;
+    border-radius: 0.4rem;
+    color: var(--accent);
+    font-weight: 600;
+  }
+
+  .tool-locales {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .locale-badge {
+    display: inline-block;
+    padding: 0.4rem 0.85rem;
+    background: var(--bg-page);
+    border: 1px solid var(--border-color);
+    border-radius: 0.4rem;
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    transition: all 0.15s ease;
+  }
+
+  .locale-badge:hover, .locale-badge.active {
+    color: var(--accent);
+    border-color: var(--accent);
+    background: rgba(244, 63, 94, 0.1);
+  }
+</style>

package/src/pages/index.astro

@@ -0,0 +1,3 @@
+---
+---
+<meta http-equiv="refresh" content="0;url=/es" />

package/src/tests/faq_count.test.ts

@@ -0,0 +1,23 @@
+import { describe, it, expect } from 'vitest';
+import * as DATA from '../data';
+
+const TOOLS = [DATA.petAge, DATA.petRation];
+
+describe('FAQ Content Validation', () => {
+  TOOLS.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      Object.keys(entry.i18n).forEach((locale) => {
+        it(`${locale}: should have at least 3 FAQ items`, async () => {
+          const loader = (entry.i18n as any)[locale];
+          const content = await loader();
+
+          if (!content.faq) {
+            throw new Error(`Tool ${entry.id} (${locale}) is missing the 'faq' property entirely.`);
+          }
+
+          expect(content.faq.length, `Tool ${entry.id} (${locale}) has only ${content.faq.length} FAQs, minimum 3 required.`).toBeGreaterThanOrEqual(3);
+        });
+      });
+    });
+  });
+});

package/src/tests/mocks/astro_mock.js

@@ -0,0 +1 @@
+export default function () { return null; }

package/src/tests/seo_length.test.ts

@@ -0,0 +1,54 @@
+import { describe, it, expect } from 'vitest';
+import * as DATA from '../data';
+
+const ENTRIES = [
+  { id: 'petAge', i18n: DATA.petAge.i18n },
+  { id: 'petRation', i18n: DATA.petRation.i18n },
+  { id: 'petsCategory', i18n: DATA.petsCategory.i18n },
+];
+
+describe('SEO Content Length Validation', () => {
+  ENTRIES.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      Object.keys(entry.i18n).forEach((locale) => {
+        it(`${locale}: SEO section should contain between 400 and 900 words`, async () => {
+          const loader = (entry.i18n as any)[locale];
+          const content = await loader();
+          if (!content.seo) return;
+
+          let combinedText = '';
+          content.seo.forEach((section: any) => {
+            if (section.text) combinedText += section.text + ' ';
+            if (section.html) combinedText += section.html + ' ';
+            if (section.title) combinedText += section.title + ' ';
+            if (section.items) {
+              section.items.forEach((item: any) => {
+                if (typeof item === 'string') combinedText += item + ' ';
+                else {
+                  if (item.label) combinedText += item.label + ' ';
+                  if (item.value) combinedText += item.value + ' ';
+                  if (item.term) combinedText += item.term + ' ';
+                  if (item.definition) combinedText += item.definition + ' ';
+                  if (item.pro) combinedText += item.pro + ' ';
+                  if (item.con) combinedText += item.con + ' ';
+                }
+              });
+            }
+            if (section.headers) combinedText += section.headers.join(' ') + ' ';
+            if (section.rows) {
+              section.rows.forEach((row: string[]) => {
+                combinedText += row.join(' ') + ' ';
+              });
+            }
+          });
+
+          const cleanText = combinedText.replace(/<[^>]*>?/gm, ' ').trim();
+          const words = cleanText.split(/\s+/).filter((w: string) => w.length > 0);
+
+          expect(words.length, `Tool ${entry.id} (${locale}) has ${words.length} words. Target: 400-900.`).toBeGreaterThanOrEqual(400);
+          expect(words.length, `Tool ${entry.id} (${locale}) has ${words.length} words. Target: 400-900.`).toBeLessThanOrEqual(900);
+        });
+      });
+    });
+  });
+});

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,139 @@
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import { ALL_TOOLS } from '../tools';
+import { petsCategory } from '../data';
+import type { ToolDefinition } from '../types';
+
+function extractSeoText(sections: any[]): string {
+  return sections
+    .map((section) => extractSectionText(section))
+    .join(' ');
+}
+
+function extractHtmlOrText(section: any): string {
+  const hasContent = 'html' in section || 'text' in section;
+  const isNotTable = section.type !== 'table';
+  return hasContent && isNotTable ? (section.html || section.text || '') : '';
+}
+
+function extractListItems(section: any): string {
+  return 'items' in section && Array.isArray(section.items) ? section.items.join(' ') : '';
+}
+
+function extractTableRows(section: any): string {
+  return 'rows' in section && Array.isArray(section.rows) ? section.rows.flat().join(' ') : '';
+}
+
+function extractSectionText(section: any): string {
+  let text = '';
+  text += extractHtmlOrText(section);
+  text += extractListItems(section);
+  text += extractTableRows(section);
+  return text;
+}
+
+function countWords(text: string): number {
+  return text
+    .replace(/<[^>]*>/g, '')
+    .trim()
+    .split(/\s+/)
+    .filter((w) => w.length > 0).length;
+}
+
+describe('Tool Validation Suite', () => {
+  describe('Strict Tool Definition Validation', () => {
+    ALL_TOOLS.forEach((tool: ToolDefinition) => {
+      const { entry } = tool;
+
+      describe(`${entry.id} structure`, () => {
+        it('should fulfill ToolDefinition interface', () => {
+          expect(tool.entry).toBeDefined();
+          expect(tool.Component).toBeDefined();
+          expect(tool.SEOComponent).toBeDefined();
+          expect(tool.BibliographyComponent).toBeDefined();
+        });
+
+        it('should have valid ID in kebab-case', () => {
+          expect(entry.id).toMatch(/^[a-z0-9]+-?[a-z0-9]*$/);
+        });
+
+        it('should have valid icons with bg and fg', () => {
+          expect(entry.icons.bg).toMatch(/^mdi:/);
+          expect(entry.icons.fg).toMatch(/^mdi:/);
+        });
+
+        describe('i18n Content Validation', () => {
+          Object.entries(entry.i18n).forEach(([locale, loader]) => {
+            it(`should load ${locale} content and follow slug rules`, async () => {
+              const content = await loader();
+              expect(content.slug).toBeDefined();
+              expect(content.slug).toMatch(/^[a-z0-9]+(-[a-z0-9]+)*$/);
+
+              if (locale === 'es') {
+                const validSlugs = ['calculadora-edad-mascotas', 'calculadora-racion-diaria-mascotas'];
+                expect(validSlugs).toContain(content.slug);
+              }
+            });
+
+            it(`should have valid basic content in ${locale}`, async () => {
+              const content = await loader();
+              expect(content.title.length).toBeGreaterThan(0);
+              expect(content.description.length).toBeGreaterThan(0);
+              expect(Object.keys(content.ui).length).toBeGreaterThan(0);
+            });
+
+            it(`should have SEO content with > 300 words in ${locale}`, async () => {
+              const content = await loader();
+              const seoText = extractSeoText(content.seo);
+              const wordCount = countWords(seoText);
+              expect(wordCount).toBeGreaterThanOrEqual(300);
+            });
+          });
+        });
+      });
+    });
+  });
+
+  describe('Library Registration', () => {
+    it('should have 2 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(2);
+    });
+
+    it('should have all tools in petsCategory', () => {
+      expect(petsCategory.tools.length).toBe(2);
+      ALL_TOOLS.forEach(({ entry }) => {
+        const exists = petsCategory.tools.some((t: any) => t.id === entry.id);
+        expect(exists).toBe(true);
+      });
+    });
+  });
+
+  describe('Binary Consistency', () => {
+    ALL_TOOLS.forEach(({ entry }) => {
+      it(`${entry.id} files should exist in the tool folder`, () => {
+        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
+        const toolDir = path.join('src', 'tool', toolVarName);
+
+        expect(fs.existsSync(path.join(toolDir, 'component.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'seo.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'bibliography.astro'))).toBe(true);
+        expect(fs.existsSync(path.join(toolDir, 'index.ts'))).toBe(true);
+      });
+    });
+  });
+
+  describe('Bibliography Components Structure', () => {
+    ALL_TOOLS.forEach(({ entry }) => {
+      it(`${entry.id} should have a standard bibliography structure`, () => {
+        const toolVarName = (entry.id ?? '').replace(/-([a-z])/g, (_: string, g: string) => g.toUpperCase());
+        const componentPath = path.join('src', 'tool', toolVarName, 'bibliography.astro');
+        const content = fs.readFileSync(componentPath, 'utf-8');
+
+        expect(content).toContain("import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared'");
+        expect(content).toContain(`import { ${toolVarName} } from './index'`);
+        expect(content).toContain('<SharedBibliography links={content.bibliography} />');
+      });
+    });
+  });
+});

package/src/tool/petAge/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
+import { petAge } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await petAge.i18n[locale]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}