@jjlmoya/utils-astronomy 1.1.0

package/src/tests/tool_validation.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import * as fs from 'fs';
+import * as path from 'path';
+import { ALL_TOOLS } from '../tools';
+import { astronomyCategory } 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 = [
+                  'simulador-cielo-oscuro',
+                  'alcance-telescopio',
+                  'calculadora-regla-500',
+                  'calculadora-resolucion-telescopio',
+                ];
+                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 4 tools in ALL_TOOLS', () => {
+      expect(ALL_TOOLS.length).toBe(4);
+    });
+
+    it('should have all tools in astronomyCategory', () => {
+      expect(astronomyCategory.tools.length).toBe(4);
+      ALL_TOOLS.forEach(({ entry }) => {
+        const exists = astronomyCategory.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/bortleVisualizer/bibliography.astro

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

package/src/tool/bortleVisualizer/component.astro

@@ -0,0 +1,491 @@
+---
+import type { BortleVisualizerUI } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  ui: BortleVisualizerUI;
+  locale?: KnownLocale;
+}
+
+const { ui } = Astro.props;
+---
+
+<div class="bortle-wrapper" id="bortle-simulator">
+  <div
+    class="bortle-scene"
+    role="img"
+    aria-label={ui.toolTitle}
+  >
+    <div class="bortle-bg-gradient"></div>
+
+    <div id="layer-stars" class="bortle-layer layer-stars">
+      <div class="stars-image"></div>
+    </div>
+
+    <div id="layer-milkyway" class="bortle-layer layer-milkyway">
+      <div class="milkyway-image"></div>
+    </div>
+
+    <div id="layer-pollution" class="bortle-layer layer-pollution">
+      <div class="pollution-gradient"></div>
+    </div>
+
+    <div id="layer-glow" class="bortle-layer layer-glow"></div>
+
+    <div class="landscape-layer">
+      <div class="landscape-image"></div>
+      <div class="landscape-fade"></div>
+    </div>
+
+    <div class="bortle-info-overlay">
+      <div class="bortle-info-content">
+        <h3 id="display-title" class="bortle-title">--</h3>
+        <div class="bortle-badges">
+          <span id="display-class" class="bortle-class-badge">--</span>
+          <span id="display-nelm" class="bortle-nelm-badge">{ui.nelmLabel} --</span>
+        </div>
+        <p id="display-description" class="bortle-description">--</p>
+      </div>
+    </div>
+
+    <div id="display-description-mobile" class="bortle-description-mobile">--</div>
+
+    <div class="bortle-controls">
+      <div class="bortle-slider-track">
+        <div class="slider-gradient-bar"></div>
+        <input
+          type="range"
+          id="bortle-slider"
+          min="1"
+          max="9"
+          value="1"
+          step="1"
+          class="bortle-slider-input"
+          aria-label={ui.sliderLabel}
+        />
+        <div id="custom-thumb" class="bortle-thumb" style="left: 0%">
+          <div class="bortle-thumb-dot"></div>
+        </div>
+        <div class="bortle-tick-marks">
+          {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((n) => (
+            <div class="bortle-tick">
+              <div class="tick-line" />
+              <span class="tick-label">{n}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div class="bortle-slider-hint">{ui.sliderLabel}</div>
+    </div>
+  </div>
+</div>
+
+<script>
+  import { getBortleData } from './logic';
+
+  const elements = {
+    stars: document.getElementById('layer-stars'),
+    milkyway: document.getElementById('layer-milkyway'),
+    pollution: document.getElementById('layer-pollution'),
+    glow: document.getElementById('layer-glow'),
+    title: document.getElementById('display-title'),
+    classLabel: document.getElementById('display-class'),
+    nelm: document.getElementById('display-nelm'),
+    desc: document.getElementById('display-description'),
+    descMobile: document.getElementById('display-description-mobile'),
+    slider: document.getElementById('bortle-slider'),
+    thumb: document.getElementById('custom-thumb'),
+  };
+
+  if (elements.slider) {
+    function updateText(level: number, data: ReturnType<typeof getBortleData>) {
+      if (elements.title) elements.title.innerText = data.title;
+      if (elements.classLabel) elements.classLabel.innerText = `CLASE ${level}`;
+      if (elements.nelm) elements.nelm.innerText = `NELM ${data.nelm.toFixed(1)}`;
+      if (elements.desc) elements.desc.innerText = data.description;
+      if (elements.descMobile) elements.descMobile.innerText = data.description;
+    }
+
+    function updateThumb(val: number) {
+      if (!elements.thumb || !elements.slider) return;
+      const min = parseInt((elements.slider as HTMLInputElement).min);
+      const max = parseInt((elements.slider as HTMLInputElement).max);
+      const percent = ((val - min) / (max - min)) * 100;
+      elements.thumb.style.left = `calc(${percent}% - 20px)`;
+    }
+
+    function getMilkywayOpacity(level: number) {
+      if (level <= 2) return 1;
+      if (level <= 4) return 0.6 - (level - 2) * 0.25;
+      return 0;
+    }
+
+    function updateLayers(level: number, skyBrightness: number) {
+      const starOpacity = Math.max(0, 1 - skyBrightness * 1.1);
+      if (elements.stars) elements.stars.style.opacity = starOpacity.toString();
+      if (elements.milkyway) elements.milkyway.style.opacity = getMilkywayOpacity(level).toString();
+      if (elements.pollution) elements.pollution.style.opacity = Math.pow(skyBrightness, 1.5).toString();
+      if (elements.glow) elements.glow.style.opacity = (skyBrightness * 0.5).toString();
+    }
+
+    function updateAll(val: number) {
+      const level = Math.floor(val);
+      const data = getBortleData(level);
+      updateText(level, data);
+      updateThumb(val);
+      updateLayers(level, data.skyBrightness);
+    }
+
+    elements.slider.addEventListener('input', (e) => {
+      const val = parseFloat((e.target as HTMLInputElement).value);
+      updateAll(val);
+    });
+
+    updateAll(1);
+  }
+</script>
+
+<style>
+  .bortle-wrapper {
+    width: 100%;
+    max-width: 80rem;
+    margin: 0 auto;
+  }
+
+  .bortle-scene {
+    --on-dark: #fff;
+
+    position: relative;
+    width: 100%;
+    aspect-ratio: 9 / 16;
+    border-radius: 2rem;
+    overflow: hidden;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
+    background: var(--color-bg-deep, #050b14);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+    user-select: none;
+  }
+
+  @media (min-width: 768px) {
+    .bortle-scene {
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  .bortle-bg-gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to bottom, #02040a, #0b1026, #1e293b);
+    z-index: 0;
+  }
+
+  .bortle-layer {
+    position: absolute;
+    inset: 0;
+    transition: opacity 1s ease-in-out;
+  }
+
+  .layer-stars {
+    z-index: 10;
+    mix-blend-mode: plus-lighter;
+    opacity: 1;
+  }
+
+  .stars-image {
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/utilities/dark-sky/stars-bg.webp');
+    background-size: cover;
+    background-position: center;
+  }
+
+  .layer-milkyway {
+    z-index: 20;
+    mix-blend-mode: screen;
+    opacity: 1;
+  }
+
+  .milkyway-image {
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/utilities/dark-sky/milky-way.webp');
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.8;
+    scale: 1.25;
+    mask-image: radial-gradient(closest-side, black 40%, transparent 100%);
+  }
+
+  .layer-pollution {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    top: 25%;
+    z-index: 30;
+    opacity: 0;
+    transition: opacity 1s ease-in-out;
+  }
+
+  .pollution-gradient {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(to top, var(--color-pollution-warm, #f97316), rgba(251, 191, 36, 0.4), transparent);
+    mix-blend-mode: hard-light;
+  }
+
+  .layer-glow {
+    z-index: 40;
+    background: rgba(219, 234, 254, 0.1);
+    opacity: 0;
+    pointer-events: none;
+    mix-blend-mode: overlay;
+    transition: opacity 1s ease-in-out;
+  }
+
+  .landscape-layer {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 50%;
+    z-index: 50;
+    pointer-events: none;
+  }
+
+  .landscape-image {
+    position: absolute;
+    inset: 0;
+    background-image: url('/images/utilities/dark-sky/landscape-silhouette.webp');
+    background-size: cover;
+    background-position: bottom;
+    background-repeat: no-repeat;
+  }
+
+  .landscape-fade {
+    position: absolute;
+    inset-inline: 0;
+    bottom: 0;
+    height: 50%;
+    background: linear-gradient(to top, black, rgba(0, 0, 0, 0.8), transparent);
+  }
+
+  .bortle-info-overlay {
+    position: absolute;
+    top: 1.5rem;
+    inset-inline: 1rem;
+    z-index: 60;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  @media (min-width: 768px) {
+    .bortle-info-overlay {
+      top: 2.5rem;
+      inset-inline: auto;
+      left: 2.5rem;
+      align-items: flex-start;
+    }
+  }
+
+  .bortle-info-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    text-align: center;
+  }
+
+  @media (min-width: 768px) {
+    .bortle-info-content {
+      text-align: left;
+    }
+  }
+
+  .bortle-title {
+    font-size: clamp(1.5rem, 5vw, 3rem);
+    font-weight: 900;
+    color: var(--on-dark);
+    letter-spacing: -0.02em;
+    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+    transition: all 0.3s ease;
+    margin: 0;
+  }
+
+  .bortle-badges {
+    display: inline-flex;
+    align-items: center;
+    gap: 1rem;
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(12px);
+    padding: 0.5rem 1rem;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  }
+
+  .bortle-class-badge {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: var(--on-dark);
+    border-right: 1px solid rgba(255, 255, 255, 0.2);
+    padding-right: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+  }
+
+  .bortle-nelm-badge {
+    color: var(--color-emerald, #34d399);
+    font-weight: 700;
+    font-size: 0.875rem;
+  }
+
+  .bortle-description {
+    display: none;
+    max-width: 24rem;
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.8);
+    font-weight: 500;
+    line-height: 1.6;
+    margin: 0;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  @media (min-width: 768px) {
+    .bortle-description {
+      display: block;
+    }
+  }
+
+  .bortle-description-mobile {
+    position: absolute;
+    bottom: 7rem;
+    inset-inline: 1rem;
+    z-index: 70;
+    text-align: center;
+    font-size: 0.875rem;
+    color: rgba(255, 255, 255, 0.9);
+    font-weight: 500;
+    line-height: 1.6;
+    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
+    min-height: 3em;
+  }
+
+  @media (min-width: 768px) {
+    .bortle-description-mobile {
+      display: none;
+    }
+  }
+
+  .bortle-controls {
+    position: absolute;
+    bottom: 2rem;
+    inset-inline: 1rem;
+    z-index: 70;
+  }
+
+  @media (min-width: 768px) {
+    .bortle-controls {
+      inset-inline: 3rem;
+    }
+  }
+
+  .bortle-slider-track {
+    position: relative;
+    height: 4rem;
+    display: flex;
+    align-items: center;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(20px);
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 0 0.5rem;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
+  }
+
+  .slider-gradient-bar {
+    position: absolute;
+    inset-inline: 1rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background: linear-gradient(to right, var(--color-emerald, #34d399), var(--color-amber, #f59e0b), var(--color-red, #ef4444));
+    opacity: 0.8;
+  }
+
+  .bortle-slider-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+    z-index: 20;
+  }
+
+  .bortle-thumb {
+    position: absolute;
+    height: 2.5rem;
+    width: 2.5rem;
+    background: white;
+    border: 4px solid var(--color-indigo, #6366f1);
+    border-radius: 50%;
+    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
+    pointer-events: none;
+    transition: left 0.15s ease-out;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
+
+  .bortle-thumb-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--color-indigo, #6366f1);
+    border-radius: 50%;
+  }
+
+  .bortle-tick-marks {
+    position: absolute;
+    inset-inline: 1rem;
+    bottom: 0.5rem;
+    top: 0.5rem;
+    display: flex;
+    justify-content: space-between;
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  .bortle-tick {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 1rem;
+    position: relative;
+  }
+
+  .tick-line {
+    width: 1px;
+    height: 100%;
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .tick-label {
+    position: absolute;
+    font-size: 0.625rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.6);
+    top: calc(100% + 0.25rem);
+  }
+
+  .bortle-slider-hint {
+    text-align: center;
+    margin-top: 1.5rem;
+    font-size: 0.625rem;
+    text-transform: uppercase;
+    letter-spacing: 0.2em;
+    color: rgba(255, 255, 255, 0.4);
+    font-weight: 700;
+  }
+</style>