@jjlmoya/utils-converters 1.1.0

package/src/shared/ImageConverter.astro

@@ -0,0 +1,237 @@
+---
+import { Icon } from 'astro-icon/components';
+
+export interface ImageConverterUI {
+  [key: string]: string;
+  dragText: string;
+  convertText: string;
+  selectFiles: string;
+  processedFiles: string;
+  downloadAll: string;
+  pending: string;
+  bibliographyTitle: string;
+  faqTitle: string;
+}
+
+interface Props {
+  from: string;
+  to: string;
+  ui: ImageConverterUI;
+}
+
+const { from, to, ui } = Astro.props;
+
+const formatMap: Record<string, string> = {
+  png: 'image/png',
+  jpg: 'image/jpeg',
+  jpeg: 'image/jpeg',
+  webp: 'image/webp',
+  svg: 'image/svg+xml',
+  avif: 'image/avif',
+  gif: 'image/gif',
+  ico: 'image/x-icon',
+};
+
+const targetFormat = formatMap[(to || 'png').toLowerCase()] || 'image/png';
+const acceptInput = (from || 'jpg') === 'svg' ? '.svg' : 'image/*';
+---
+
+<style is:global>
+  @import url('./style.css');
+</style>
+
+<div class="image-converter-dashboard animate-in">
+  <div
+    id="converter-drop-zone"
+    class="drop-zone"
+    data-from={from}
+    data-to={to}
+    data-target={targetFormat}
+  >
+    <div class="upload-icon">
+      <Icon name="mdi:image-move" size={96} />
+    </div>
+    <div class="upload-text">
+      <span>{ui.dragText}</span>
+    </div>
+    <p class="upload-subtext">{ui.convertText}</p>
+    <button class="upload-btn">{ui.selectFiles}</button>
+    <input type="file" id="converter-input" accept={acceptInput} multiple class="hidden" />
+  </div>
+
+  <div id="converter-list-container" class="converter-file-list hidden">
+    <div class="list-summary">
+      <h3>{ui.processedFiles}</h3>
+      <button id="download-zip" class="upload-btn hidden">
+        <Icon name="mdi:zip-box" /> {ui.downloadAll}
+      </button>
+    </div>
+    <div id="converter-items"></div>
+  </div>
+</div>
+
+<template id="converter-item-template">
+  <div class="converter-item">
+    <div class="item-preview">
+      <div class="thumb-box">
+        <img src="" alt="Thumbnail" />
+      </div>
+      <div class="item-info">
+        <span class="item-name"></span>
+        <span class="item-size"></span>
+      </div>
+    </div>
+    <div class="item-status">
+      <Icon name="mdi:arrow-right-thick" />
+    </div>
+    <div class="item-actions">
+      <span class="status-badge" data-pending={ui.pending}>{ui.pending}</span>
+      <a href="#" download class="dl-btn hidden" title="Descargar">
+        <Icon name="mdi:download" size={20} />
+      </a>
+      <span class="final-size"></span>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    generateId,
+    formatBytes,
+    processConversion,
+    processSvgToRaster,
+  } from './logic/converter';
+  import type { ConversionItem, ImageFormat } from './logic/converter';
+  import JSZip from 'jszip';
+
+  const dropZone = document.getElementById('converter-drop-zone');
+  const fileInput = document.getElementById('converter-input') as HTMLInputElement;
+  const container = document.getElementById('converter-list-container');
+  const itemsList = document.getElementById('converter-items');
+  const template = document.getElementById('converter-item-template') as HTMLTemplateElement;
+  const zipBtn = document.getElementById('download-zip') as HTMLButtonElement;
+
+  const fromExt = dropZone?.dataset.from || '';
+  const toExt = dropZone?.dataset.to || '';
+  const targetMime = (dropZone?.dataset.target || 'image/png') as ImageFormat;
+
+  const queue = new Map();
+
+  async function handleFiles(files: FileList | File[]) {
+    if (!files.length) return;
+    container?.classList.remove('hidden');
+
+    const newItems = [];
+    for (const file of files) {
+      const id = generateId();
+      const item = {
+        id,
+        file,
+        originalSize: file.size,
+        newSize: 0,
+        convertedDataUrl: '',
+        targetFormat: targetMime,
+        status: 'processing' as const,
+        originalWidth: 0,
+        originalHeight: 0,
+      };
+      queue.set(id, item);
+      newItems.push(item);
+    }
+
+    renderItems(newItems);
+
+    for (const item of newItems) {
+      if (fromExt === 'svg') {
+        await processSvgToRaster(item as ConversionItem, updateUI);
+      } else {
+        await processConversion(item as ConversionItem, updateUI);
+      }
+    }
+
+    checkZipAvailability();
+  }
+
+  function renderItems(items: ConversionItem[]) {
+    items.forEach((item) => {
+      const clone = template.content.cloneNode(true) as DocumentFragment;
+      const div = clone.querySelector('.converter-item') as HTMLElement;
+      div.dataset.id = item.id;
+
+      div.querySelector('.item-name')!.textContent = item.file.name;
+      div.querySelector('.item-size')!.textContent = formatBytes(item.originalSize);
+
+      itemsList?.prepend(div);
+    });
+  }
+
+  function updateUI(item: ConversionItem, src: string) {
+    const div = itemsList?.querySelector(`[data-id="${item.id}"]`);
+    if (!div) return;
+
+    const img = div.querySelector('.thumb-box img') as HTMLImageElement;
+    img.src = src;
+
+    const badge = div.querySelector('.status-badge') as HTMLElement;
+    const dl = div.querySelector('.dl-btn') as HTMLAnchorElement;
+    const finalSize = div.querySelector('.final-size') as HTMLElement;
+
+    if (item.status === 'completed') {
+      badge.textContent = (toExt || 'png').toUpperCase();
+      badge.className = 'status-badge completed';
+      dl.classList.remove('hidden');
+      dl.href = item.convertedDataUrl;
+
+      const base = item.file.name.substring(0, item.file.name.lastIndexOf('.')) || item.file.name;
+      dl.download = `${base}.${toExt || 'png'}`;
+
+      finalSize.textContent = formatBytes(item.newSize);
+    } else if (item.status === 'error') {
+      badge.textContent = 'Error';
+      badge.className = 'status-badge error';
+    }
+  }
+
+  function checkZipAvailability() {
+    const completed = Array.from(queue.values()).filter((i) => i.status === 'completed');
+    if (completed.length >= 2) {
+      zipBtn?.classList.remove('hidden');
+    }
+  }
+
+  dropZone?.addEventListener('click', () => fileInput?.click());
+  dropZone?.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropZone.classList.add('dragover');
+  });
+  dropZone?.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+  dropZone?.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropZone.classList.remove('dragover');
+    if (e.dataTransfer?.files) handleFiles(e.dataTransfer.files);
+  });
+  fileInput?.addEventListener('change', (e) => {
+    const target = e.target as HTMLInputElement;
+    if (target.files) handleFiles(target.files);
+  });
+
+  zipBtn?.addEventListener('click', async () => {
+    const zip = new JSZip();
+    queue.forEach((item) => {
+      if (item.status === 'completed') {
+        const base = item.file.name.substring(0, item.file.name.lastIndexOf('.')) || item.file.name;
+        const binary = atob(item.convertedDataUrl.split(',')[1]);
+        const array = new Uint8Array(binary.length);
+        for (let i = 0; i < binary.length; i++) array[i] = binary.charCodeAt(i);
+        zip.file(`${base}.${toExt || 'png'}`, array);
+      }
+    });
+
+    const content = await zip.generateAsync({ type: 'blob' });
+    const url = URL.createObjectURL(content);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `imagenes_${fromExt || 'jpg'}_a_${toExt || 'png'}.zip`;
+    a.click();
+  });
+</script>

package/src/shared/logic/converter.ts

@@ -0,0 +1,167 @@
+export type ImageFormat = 'image/png' | 'image/jpeg' | 'image/webp' | 'image/x-icon' | 'image/svg+xml' | 'image/avif' | 'image/gif';
+
+export interface ConversionItem {
+  id: string;
+  file: File;
+  originalSize: number;
+  newSize: number;
+  convertedDataUrl: string;
+  originalWidth: number;
+  originalHeight: number;
+  targetFormat: ImageFormat;
+  status: 'pending' | 'processing' | 'completed' | 'error';
+  error?: string;
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
+
+export function generateId(): string {
+  return Math.random().toString(36).substring(2, 9);
+}
+
+function writeIcoHeader(buffer: Uint8Array, pngSize: number, width: number, height: number): void {
+  buffer[0] = 0; buffer[1] = 0; buffer[2] = 1; buffer[3] = 0;
+  buffer[4] = 1; buffer[5] = 0;
+  buffer[6] = width >= 256 ? 0 : width;
+  buffer[7] = height >= 256 ? 0 : height;
+  buffer[8] = 0; buffer[9] = 0; buffer[10] = 1; buffer[11] = 0;
+  buffer[12] = 32; buffer[13] = 0;
+  buffer[14] = pngSize & 0xFF; buffer[15] = (pngSize >> 8) & 0xFF;
+  buffer[16] = (pngSize >> 16) & 0xFF; buffer[17] = (pngSize >> 24) & 0xFF;
+  buffer[18] = 22; buffer[19] = 0; buffer[20] = 0; buffer[21] = 0;
+}
+
+async function pngToIcoBase64(pngBase64: string, width: number, height: number): Promise<string> {
+  const response = await fetch(pngBase64);
+  const pngArray = new Uint8Array(await response.arrayBuffer());
+  const buffer = new Uint8Array(22 + pngArray.length);
+  writeIcoHeader(buffer, pngArray.length, width, height);
+  buffer.set(pngArray, 22);
+  const blob = new Blob([buffer], { type: 'image/x-icon' });
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result as string);
+    reader.readAsDataURL(blob);
+  });
+}
+
+async function convertToIco(img: HTMLImageElement): Promise<string> {
+  let size = Math.min(img.width, img.height);
+  if (size > 256) size = 256;
+  const canvas = document.createElement('canvas');
+  canvas.width = size;
+  canvas.height = size;
+  const ctx = canvas.getContext('2d');
+  const sx = (img.width - size) / 2;
+  const sy = (img.height - size) / 2;
+  ctx?.drawImage(img, sx, sy, size, size, 0, 0, size, size);
+  return pngToIcoBase64(canvas.toDataURL('image/png'), size, size);
+}
+
+function convertToRaster(img: HTMLImageElement, targetFormat: ImageFormat): string {
+  const canvas = document.createElement('canvas');
+  canvas.width = img.width;
+  canvas.height = img.height;
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    if (targetFormat === 'image/jpeg') {
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(img, 0, 0);
+  }
+  return canvas.toDataURL(targetFormat, 0.92);
+}
+
+async function applyConversion(item: ConversionItem, img: HTMLImageElement): Promise<void> {
+  try {
+    const dataUrl = item.targetFormat === 'image/x-icon'
+      ? await convertToIco(img)
+      : convertToRaster(img, item.targetFormat);
+    item.convertedDataUrl = dataUrl;
+    const head = 'data:' + item.targetFormat + ';base64,';
+    item.newSize = Math.round(((dataUrl.length - head.length) * 3) / 4);
+    item.status = 'completed';
+  } catch {
+    item.status = 'error';
+    item.error = 'Fallo en la conversión';
+  }
+}
+
+export async function processConversion(
+  item: ConversionItem,
+  onComplete: (item: ConversionItem, src: string) => void
+): Promise<void> {
+  item.status = 'processing';
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const img = new Image();
+      img.onload = async () => {
+        item.originalWidth = img.width;
+        item.originalHeight = img.height;
+        await applyConversion(item, img);
+        onComplete(item, img.src);
+        resolve();
+      };
+      img.onerror = () => {
+        item.status = 'error';
+        item.error = 'Error al cargar imagen';
+        onComplete(item, '');
+        resolve();
+      };
+      img.src = e.target?.result as string;
+    };
+    reader.readAsDataURL(item.file);
+  });
+}
+
+function renderSvgOnCanvas(img: HTMLImageElement, targetFormat: ImageFormat): string {
+  const scale = 2;
+  const canvas = document.createElement('canvas');
+  canvas.width = (img.width || 800) * scale;
+  canvas.height = (img.height || 800) * scale;
+  const ctx = canvas.getContext('2d');
+  if (ctx) {
+    if (targetFormat === 'image/jpeg') {
+      ctx.fillStyle = '#FFFFFF';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+  }
+  return canvas.toDataURL(targetFormat, 0.95);
+}
+
+export async function processSvgToRaster(
+  item: ConversionItem,
+  onComplete: (item: ConversionItem, src: string) => void
+): Promise<void> {
+  item.status = 'processing';
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const svgText = e.target?.result as string;
+      const blob = new Blob([svgText], { type: 'image/svg+xml' });
+      const url = URL.createObjectURL(blob);
+      const img = new Image();
+      img.onload = () => {
+        const dataUrl = renderSvgOnCanvas(img, item.targetFormat);
+        item.convertedDataUrl = dataUrl;
+        const head = 'data:' + item.targetFormat + ';base64,';
+        item.newSize = Math.round(((dataUrl.length - head.length) * 3) / 4);
+        item.status = 'completed';
+        URL.revokeObjectURL(url);
+        onComplete(item, url);
+        resolve();
+      };
+      img.src = url;
+    };
+    reader.readAsText(item.file);
+  });
+}

package/src/shared/style.css

@@ -0,0 +1,258 @@
+.image-converter-dashboard {
+    max-width: 860px;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+/* ── Drop zone ─────────────────────────────────────────── */
+.drop-zone {
+    background: var(--bg-surface);
+    border: 2px dashed var(--border-base);
+    border-radius: 20px;
+    padding: 3.5rem 2rem;
+    cursor: pointer;
+    transition: border-color 0.2s, background 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
+}
+
+.drop-zone:hover {
+    border-color: var(--accent);
+    background: var(--bg-muted);
+}
+
+.drop-zone.dragover {
+    border-color: var(--accent);
+    border-style: solid;
+    background: var(--bg-muted);
+}
+
+.upload-icon {
+    width: 96px;
+    height: 96px;
+    border-radius: 50%;
+    background: var(--accent-bg);
+    color: var(--accent);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.5rem;
+    transition: transform 0.3s ease;
+    flex-shrink: 0;
+}
+
+.drop-zone:hover .upload-icon {
+    transform: scale(1.08) rotate(-4deg);
+}
+
+.upload-text {
+    font-size: 1.3rem;
+    font-weight: 700;
+    color: var(--text-base);
+    margin: 0;
+    text-align: center;
+}
+
+.upload-subtext {
+    color: var(--text-muted);
+    font-size: 0.9rem;
+    margin: 0;
+    text-align: center;
+}
+
+.upload-btn {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    padding: 0.7rem 1.75rem;
+    border-radius: 50px;
+    font-weight: 600;
+    font-size: 0.9rem;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.2s;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    margin-top: 0.5rem;
+}
+
+.upload-btn:hover {
+    opacity: 0.75;
+}
+
+/* ── File list ─────────────────────────────────────────── */
+.converter-file-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: 16px;
+    overflow: hidden;
+    padding: 1rem;
+}
+
+.list-summary {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 0.25rem 0.5rem;
+    border-bottom: 1px solid var(--border-base);
+    margin-bottom: 0.25rem;
+}
+
+.list-summary h3 {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 0;
+}
+
+/* ── Converter item ────────────────────────────────────── */
+.converter-item {
+    background: var(--bg-surface);
+    border-bottom: 1px solid var(--border-base);
+    padding: 0.875rem 1rem;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.converter-item:last-child {
+    border-bottom: none;
+}
+
+.item-preview {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex: 1;
+    min-width: 0;
+}
+
+.thumb-box {
+    width: 44px;
+    height: 44px;
+    border-radius: 8px;
+    overflow: hidden;
+    flex-shrink: 0;
+    background: var(--bg-muted);
+}
+
+.thumb-box img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.item-info {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+}
+
+.item-name {
+    font-weight: 600;
+    font-size: 0.875rem;
+    color: var(--text-base);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.item-size {
+    font-size: 0.75rem;
+    color: var(--text-muted);
+}
+
+.item-status {
+    display: flex;
+    align-items: center;
+    color: var(--text-muted);
+    flex-shrink: 0;
+}
+
+.item-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-shrink: 0;
+}
+
+.final-size {
+    font-size: 0.8rem;
+    font-weight: 600;
+    color: var(--text-muted);
+}
+
+/* ── Badges ────────────────────────────────────────────── */
+.status-badge {
+    padding: 0.2rem 0.6rem;
+    border-radius: 20px;
+    font-size: 0.7rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    background: var(--bg-muted);
+    color: var(--text-muted);
+}
+
+.status-badge.completed {
+    background: rgba(16, 185, 129, 0.15);
+    color: var(--color-success);
+}
+
+.status-badge.error {
+    background: rgba(244, 63, 94, 0.15);
+    color: var(--color-error);
+}
+
+/* ── Download button ───────────────────────────────────── */
+.dl-btn {
+    background: var(--accent);
+    color: var(--text-on-accent);
+    width: 34px;
+    height: 34px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity 0.2s;
+    flex-shrink: 0;
+}
+
+.dl-btn:hover {
+    opacity: 0.8;
+}
+
+/* ── Utility ───────────────────────────────────────────── */
+.hidden {
+    display: none;
+}
+
+/* ── Mobile ────────────────────────────────────────────── */
+@media (max-width: 600px) {
+    .converter-item {
+        flex-wrap: wrap;
+    }
+
+    .item-preview {
+        flex: 1 1 100%;
+    }
+
+    .item-status {
+        display: none;
+    }
+
+    .item-actions {
+        flex: 1 1 100%;
+        justify-content: flex-end;
+    }
+}

package/src/tests/faq_count.test.ts

@@ -0,0 +1,10 @@
+import { describe, it, expect } from 'vitest';
+import { ALL_TOOLS } from '../tools';
+
+describe('FAQ Content Validation', () => {
+  it('all tools have i18n defined', () => {
+    ALL_TOOLS.forEach((tool) => {
+      expect(tool.entry.i18n).toBeDefined();
+    });
+  });
+});

package/src/tests/mocks/astro_mock.js

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

package/src/tests/seo_length.test.ts

@@ -0,0 +1,22 @@
+import { describe, it, expect } from 'vitest';
+import * as DATA from '../data';
+
+const ENTRIES = [
+  { id: 'convertersCategory', i18n: DATA.convertersCategory.i18n },
+];
+
+describe('SEO Content Length Validation', () => {
+  ENTRIES.forEach((entry) => {
+    describe(`Tool: ${entry.id}`, () => {
+      Object.keys(entry.i18n).forEach((locale) => {
+        it(`${locale}: SEO section should exist`, async () => {
+          const loader = (entry.i18n as Record<string, () => Promise<{ seo?: unknown[] }>>)[locale];
+          const content = await loader();
+          if (!content.seo) return;
+          expect(Array.isArray(content.seo)).toBe(true);
+        });
+      });
+    });
+  });
+});
+