@jjlmoya/utils-converters 1.15.0 → 1.18.0

package/src/tool/imagenBase64/i18n/zh.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImagenBase64LocaleContent } from '../index';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { ImageToBase64UI } from '../index';
@@ -60,17 +61,6 @@ const howTo: ImagenBase64LocaleContent['howTo'] = [
   },
 ];
 
-const bibliography: ImagenBase64LocaleContent['bibliography'] = [
-  {
-    name: 'MDN Web Docs: Data URIs',
-    url: 'https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs',
-  },
-  {
-    name: 'Base64 Encoding RFC 4648',
-    url: 'https://datatracker.ietf.org/doc/html/rfc4648',
-  },
-];
-
 const seo: ImagenBase64LocaleContent['seo'] = [
   {
     type: 'title',
@@ -79,7 +69,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Base64 是一种编码技术, 它将二进制数据 (如图片) 转换为纯 ASCII 文本字符串。结果是一个 Data URI: 一个以 <code>data:image/png;base64,...</code> 开头的自包含 URL, 包含整个编码后的图片。通过将此代码直接嵌入 HTML、CSS 或 JSON, 图片无需任何额外的服务器 HTTP 请求即可加载——零网络延迟, 即时加载。',
+    html: 'Base64 是一种编码技术, 它将二进制数据 (如图片) 转换为纯 ASCII 文本字符串。结果是一个 Data URI: 一个以 <code>data:image/png;base64,...</code> 开头的自包含 URL, 包含整个编码后的图片。通过将此代码直接嵌入 HTML、CSS 或 JSON, 图片无需任何额外的服务器 HTTP 请求即可加载-零网络延迟, 即时加载。',
   },
   {
     type: 'title',
@@ -88,7 +78,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: '支持 Base64 的主要理由是消除网络请求。网页上的每张图片都意味着一次 HTTP 请求, 带有连接、DNS、TLS 握手和延迟的开销。对于非常小的关键图片——主应用程序图标、favicon、UI 图标——在 CSS 或 HTML 中以 Base64 嵌入可以消除该成本, 并保证它们即使在浏览器缓存任何内容之前也能立即显示。',
+    html: '支持 Base64 的主要理由是消除网络请求。网页上的每张图片都意味着一次 HTTP 请求, 带有连接、DNS、TLS 握手和延迟的开销。对于非常小的关键图片-主应用程序图标、favicon、UI 图标-在 CSS 或 HTML 中以 Base64 嵌入可以消除该成本, 并保证它们即使在浏览器缓存任何内容之前也能立即显示。',
   },
   {
     type: 'paragraph',
@@ -117,12 +107,12 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: '当您选择或拖动图片时, 浏览器的 <code>FileReader</code> API 直接从磁盘读取图片作为 RAM 中的二进制数据。 <code>readAsDataURL()</code> 方法使用 RFC 4648 算法将这些二进制字节转换为其 Base64 表示形式——原始数据的每 3 个字节表示为 Base64 字母表中的 4 个 ASCII 字符。结果包含自动检测到的正确 MIME 类型。',
+    html: '当您选择或拖动图片时, 浏览器的 <code>FileReader</code> API 直接从磁盘读取图片作为 RAM 中的二进制数据。 <code>readAsDataURL()</code> 方法使用 RFC 4648 算法将这些二进制字节转换为其 Base64 表示形式-原始数据的每 3 个字节表示为 Base64 字母表中的 4 个 ASCII 字符。结果包含自动检测到的正确 MIME 类型。',
   },
   {
     type: 'tip',
     title: '仅对小图片使用 (10 KB 以下)',
-    html: 'Base64 会使文件大小增加约 33%: 10 KB 的图片变成约 13.3 KB 的文本。对于小图标和徽标, 此成本很小, 而消除 HTTP 请求可以弥补这一点。对于照片或大图片, 大小开销非常大——对于大图片, 请务必使用 CDN。',
+    html: 'Base64 会使文件大小增加约 33%: 10 KB 的图片变成约 13.3 KB 的文本。对于小图标和徽标, 此成本很小, 而消除 HTTP 请求可以弥补这一点。对于照片或大图片, 大小开销非常大-对于大图片, 请务必使用 CDN。',
   },
   {
     type: 'title',
@@ -131,7 +121,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'tip',
-    title: '大图片请避免使用 Base64——请改用 CDN',
+    title: '大图片请避免使用 Base64: 请改用 CDN',
     html: '如果图片大于 10-20 KB, Base64 会损害性能: 它会使 HTML/CSS 大小膨胀, 阻止浏览器独立缓存图片, 并在解析器处理巨型字符串时阻塞渲染。对于大图片, 请务必使用带有适当缓存头的 CDN 服务。',
   },
   {
@@ -141,7 +131,7 @@ const seo: ImagenBase64LocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Data URI 兼容 100% 的现代浏览器和大多数电子邮件客户端。我们的工具通过 FileReader API 在本地处理所有内容——您的图片绝不会离开您的设备。这使其适用于公司内部图片、私人截图或您需要转换为 Base64 的任何机密视觉内容。',
+    html: 'Data URI 兼容 100% 的现代浏览器和大多数电子邮件客户端。我们的工具通过 FileReader API 在本地处理所有内容-您的图片绝不会离开您的设备。这使其适用于公司内部图片、私人截图或您需要转换为 Base64 的任何机密视觉内容。',
   },
   {
     type: 'title',

package/src/tool/imagenBase64/image-to-base64-converter.css

@@ -0,0 +1,299 @@
+.base64-container {
+    width: 100%;
+    margin-bottom: 2rem;
+  }
+
+  .base64-card {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: 20px;
+
+    --card-shadow: rgba(0, 0, 0, 0.04);
+    --card-shadow-blur: 20px;
+    --card-shadow-y: 4px;
+
+    box-shadow: 0 var(--card-shadow-y) var(--card-shadow-blur) var(--card-shadow);
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+  }
+
+  @media (min-width: 800px) {
+    .base64-card {
+      flex-direction: row;
+      min-height: 550px;
+    }
+
+    .upload-section {
+      width: 40%;
+      border-right: 1px solid var(--border-base);
+      background: var(--bg-muted);
+      padding: 3rem 2rem;
+    }
+
+    .result-section {
+      flex: 1;
+      padding: 3rem 2rem;
+      display: flex;
+      flex-direction: column;
+      gap: 2rem;
+    }
+  }
+
+  .upload-section {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: 2rem;
+  }
+
+  .result-section {
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .drop-zone {
+    position: relative;
+    border: 2px dashed var(--border-base);
+    border-radius: 16px;
+    background: var(--bg-surface);
+    padding: 2rem 1rem;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 300px;
+    height: 100%;
+  }
+
+  .drop-zone:hover {
+    border-color: var(--accent);
+    background: var(--bg-muted);
+  }
+
+  .drop-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    pointer-events: none;
+  }
+
+  .upload-icon {
+    width: 40px;
+    height: 40px;
+    color: var(--text-muted);
+    margin-bottom: 0.5rem;
+  }
+
+  .drop-content h3 {
+    margin: 0;
+    font-size: 1.05rem;
+    font-weight: 700;
+    color: var(--text-base);
+  }
+
+  .drop-content p {
+    margin: 0;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+  }
+
+  .file-input-native {
+    margin-top: 1.5rem;
+    padding: 0.5rem;
+    font-size: 0.85rem;
+    color: var(--text-muted);
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: 8px;
+    max-width: 100%;
+    cursor: pointer;
+  }
+
+  .drop-zone .file-input-native {
+    pointer-events: auto;
+  }
+
+  .preview-container {
+    position: absolute;
+    inset: 0;
+    background: var(--bg-surface);
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 1.25rem;
+  }
+
+  .preview-container.hidden {
+    display: none;
+  }
+
+  #b64-image-preview {
+    max-width: 100%;
+    max-height: 250px;
+    object-fit: contain;
+    border-radius: 8px;
+  }
+
+  .clear-btn {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    cursor: pointer;
+  }
+
+  .image-info {
+    position: absolute;
+    bottom: 1rem;
+    display: flex;
+    background: var(--bg-muted);
+    padding: 0.4rem 0.8rem;
+    border-radius: 8px;
+    border: 1px solid var(--border-base);
+  }
+
+  .info-pill {
+    font-size: 0.7rem;
+    font-weight: 600;
+    color: var(--text-muted);
+  }
+
+  .name-pill {
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    padding-right: 0.5rem;
+  }
+
+  .size-pill {
+    color: var(--accent);
+    padding-left: 0.5rem;
+    border-left: 1px solid var(--border-base);
+  }
+
+  .output-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .output-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .output-header label {
+    font-weight: 700;
+    color: var(--text-base);
+    font-size: 0.95rem;
+  }
+
+  .copy-btn {
+    background: var(--bg-surface);
+    border: 1px solid var(--border-base);
+    color: var(--text-base);
+    padding: 0.35rem 0.75rem;
+    border-radius: 6px;
+    font-size: 0.8rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 0.2s;
+  }
+
+  .copy-btn:hover {
+    background: var(--accent);
+    color: var(--text-on-primary);
+  }
+
+  .code-wrapper {
+    background: var(--bg-muted);
+    border: 1px solid var(--border-base);
+    border-radius: 12px;
+    padding: 1rem;
+  }
+
+  textarea {
+    width: 100%;
+    min-height: 120px;
+    background: transparent;
+    border: none;
+    color: var(--text-base);
+    font-size: 0.85rem;
+    line-height: 1.5;
+    resize: none;
+    outline: none;
+    word-break: break-all;
+  }
+
+  .toast {
+    position: fixed;
+    bottom: 2rem;
+    left: 50%;
+    transform: translateX(-50%) translateY(20px);
+    background: var(--text-base);
+    color: var(--bg-surface);
+    padding: 0.75rem 1.5rem;
+    border-radius: 50px;
+    font-weight: 700;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+
+    --toast-shadow: rgba(0, 0, 0, 0.2);
+    --toast-shadow-y: 10px;
+    --toast-shadow-blur: 30px;
+
+    box-shadow: 0 var(--toast-shadow-y) var(--toast-shadow-blur) var(--toast-shadow);
+    opacity: 0;
+    pointer-events: none;
+    transition: all 0.2s;
+    z-index: 100;
+  }
+
+  .toast.show {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+  }
+
+  @media (max-width: 600px) {
+    .card-section {
+      padding: 1rem;
+    }
+
+    .drop-zone {
+      min-height: 280px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .card-section {
+      padding: 1.5rem;
+    }
+
+    .drop-zone {
+      min-height: 250px;
+    }
+
+    textarea {
+      height: 120px;
+    }
+  }

package/src/tool/imagenBase64/seo.astro

@@ -9,6 +9,7 @@ interface Props {
 
 const { locale = 'es' } = Astro.props;
 const content = await imagenBase64.i18n[locale]?.();
+if (!content) return null;
 ---
 
-{content && <SEORenderer content={{ locale, sections: content.seo }} />}
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/jpgAIco/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'ICO Ikonografische Struktur und Systemnutzung',
+    url: 'https://en.wikipedia.org/wiki/ICO_(file_format)',
+  },
+  {
+    name: 'JPEG.org Standards',
+    url: 'https://jpeg.org/',
+  },
+];

package/src/tool/jpgAIco/entry.ts

@@ -27,3 +27,5 @@ export const jpgAIco: ConvertersToolEntry<ImageConverterUI> = {
     zh: () => import('./i18n/zh').then((m) => m.content),
   },
 };
+
+export { bibliography } from './bibliography';

package/src/tool/jpgAIco/i18n/de.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { JpgAIcoLocaleContent } from '../index';
@@ -51,17 +52,6 @@ const howTo: JpgAIcoLocaleContent['howTo'] = [
   },
 ];
 
-const bibliography: JpgAIcoLocaleContent['bibliography'] = [
-  {
-    name: 'ICO Ikonografische Struktur und Systemnutzung',
-    url: 'https://en.wikipedia.org/wiki/ICO_(file_format)',
-  },
-  {
-    name: 'JPEG.org Standards',
-    url: 'https://jpeg.org/',
-  },
-];
-
 const seo: JpgAIcoLocaleContent['seo'] = [
   {
     type: 'title',
@@ -70,7 +60,7 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Das <strong>ICO</strong>-Format ist der Microsoft-Standard für Symbole in Windows-Anwendungen und Favicons von Websites. Im Gegensatz zum einfachen Umbenennen eines JPG in .ico erfordert eine echte ICO-Datei eine spezifische binäre Struktur mit 22-Byte-Headern und einem eingebetteten Bildverzeichnis. <strong>JPG</strong> ist der am häufigsten gewählte Ausgangspunkt für die Erstellung dieser Icons – ein Firmenlogo, ein Profilfoto oder jedes Bild, das Sie zum visuellen Erkennungsmerkmal Ihrer Anwendung oder Website machen möchten.',
+    html: 'Das <strong>ICO</strong>-Format ist der Microsoft-Standard für Symbole in Windows-Anwendungen und Favicons von Websites. Im Gegensatz zum einfachen Umbenennen eines JPG in .ico erfordert eine echte ICO-Datei eine spezifische binäre Struktur mit 22-Byte-Headern und einem eingebetteten Bildverzeichnis. <strong>JPG</strong> ist der am häufigsten gewählte Ausgangspunkt für die Erstellung dieser Icons - ein Firmenlogo, ein Profilfoto oder jedes Bild, das Sie zum visuellen Erkennungsmerkmal Ihrer Anwendung oder Website machen möchten.',
   },
   {
     type: 'title',
@@ -79,11 +69,11 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: '<strong>JPG</strong> ist ein Quellformat, kein Zielformat für Symbole. Es eignet sich hervorragend für Fotografien und Banner, ist jedoch inkompatibel mit Systemen, die Icons erfordern: Windows Explorer, die Lesezeichenleiste des Browsers, Desktop-Verknüpfungen oder PWA-Anwendungsmanifeste. Ein Betriebssystem oder Browser, der nach einem Icon sucht, erwartet das ICO-Format – und wenn es dieses nicht findet, wird ein generisches Symbol oder ein fehlerhaftes Quadrat angezeigt.',
+    html: '<strong>JPG</strong> ist ein Quellformat, kein Zielformat für Symbole. Es eignet sich hervorragend für Fotografien und Banner, ist jedoch inkompatibel mit Systemen, die Icons erfordern: Windows Explorer, die Lesezeichenleiste des Browsers, Desktop-Verknüpfungen oder PWA-Anwendungsmanifeste. Ein Betriebssystem oder Browser, der nach einem Icon sucht, erwartet das ICO-Format - und wenn es dieses nicht findet, wird ein generisches Symbol oder ein fehlerhaftes Quadrat angezeigt.',
   },
   {
     type: 'paragraph',
-    html: 'Das <strong>ICO</strong>-Format wurde entwickelt, um mehrere Auflösungen in einer einzigen Datei zu speichern: <strong>16×16</strong> für die Lesezeichenleiste, <strong>32×32</strong> für Verknüpfungen, <strong>48×48</strong> für den Datei-Explorer und <strong>256×256</strong> für hochauflösende Displays. Browser und Betriebssysteme wählen automatisch die passende Auflösung basierend auf dem Anzeigekontext aus – der Benutzer muss nichts weiter tun.',
+    html: 'Das <strong>ICO</strong>-Format wurde entwickelt, um mehrere Auflösungen in einer einzigen Datei zu speichern: <strong>16×16</strong> für die Lesezeichenleiste, <strong>32×32</strong> für Verknüpfungen, <strong>48×48</strong> für den Datei-Explorer und <strong>256×256</strong> für hochauflösende Displays. Browser und Betriebssysteme wählen automatisch die passende Auflösung basierend auf dem Anzeigekontext aus - der Benutzer muss nichts weiter tun.',
   },
   {
     type: 'title',
@@ -111,8 +101,8 @@ const seo: JpgAIcoLocaleContent['seo'] = [
         icon: 'mdi:laptop-mac',
         highlight: true,
         points: [
-          'Sofortige Geschwindigkeit – keine Netzwerklatenz',
-          'Vollständige Privatsphäre – 0 Byte werden extern gesendet',
+          'Sofortige Geschwindigkeit - keine Netzwerklatenz',
+          'Vollständige Privatsphäre - 0 Byte werden extern gesendet',
           'Keine Megabyte-Limits oder Dateianzahlbeschränkungen',
           'Saubere Benutzeroberfläche, keine Werbung oder Tracking',
         ],
@@ -126,16 +116,16 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Das JPG wird dekodiert und auf ein im Speicher befindliches <strong>HTML5 Canvas</strong> gezeichnet. Da das ICO-Format ein quadratisches Bild erfordert, erkennt die Engine automatisch, ob das JPG rechteckig ist, und schneidet es zu, indem sie den relevantesten Teil zentriert. Anschließend wird der Standard-Microsoft-ICO-Header mit der korrekten Magic Number (<code>00 00 01 00</code>), dem Bildverzeichnis und den kodierten Pixeldaten erstellt. Das Ergebnis ist eine echte binäre .ico-Datei – kein umbenanntes PNG.',
+    html: 'Das JPG wird dekodiert und auf ein im Speicher befindliches <strong>HTML5 Canvas</strong> gezeichnet. Da das ICO-Format ein quadratisches Bild erfordert, erkennt die Engine automatisch, ob das JPG rechteckig ist, und schneidet es zu, indem sie den relevantesten Teil zentriert. Anschließend wird der Standard-Microsoft-ICO-Header mit der korrekten Magic Number (<code>00 00 01 00</code>), dem Bildverzeichnis und den kodierten Pixeldaten erstellt. Das Ergebnis ist eine echte binäre .ico-Datei - kein umbenanntes PNG.',
   },
   {
     type: 'paragraph',
-    html: 'Da JPG kein Alpha-Kanal besitzt, wird das resultierende ICO ebenfalls keine Transparenz aufweisen – es wird einen soliden Hintergrund haben, der vom Originalfoto übernommen wurde. Wenn Sie ein Favicon mit transparentem Hintergrund benötigen (zum Beispiel zur Anpassung an dunkle oder helle Lesezeichenleisten), ist der empfohlene Arbeitsablauf: Hintergrund in einem Editor entfernen, als PNG speichern und den PNG zu ICO Konverter verwenden.',
+    html: 'Da JPG kein Alpha-Kanal besitzt, wird das resultierende ICO ebenfalls keine Transparenz aufweisen - es wird einen soliden Hintergrund haben, der vom Originalfoto übernommen wurde. Wenn Sie ein Favicon mit transparentem Hintergrund benötigen (zum Beispiel zur Anpassung an dunkle oder helle Lesezeichenleisten), ist der empfohlene Arbeitsablauf: Hintergrund in einem Editor entfernen, als PNG speichern und den PNG zu ICO Konverter verwenden.',
   },
   {
     type: 'tip',
     title: 'Tipp: Mehrere Auflösungen in einer einzigen ICO Datei',
-    html: 'ICO-Dateien können <strong>mehrere Auflösungen</strong> in einer einzigen Datei packen – der Browser oder das Betriebssystem wählt automatisch die passendste für den jeweiligen Kontext aus. Für das bestmögliche Ergebnis verwenden Sie ein quadratisches JPG mit mindestens <strong>256×256 Pixeln</strong> als Quelle: Dies gibt dem Konverter genügend Informationen, um scharfe 16×16, 32×32 und 48×48 Größen ohne Verpixelung zu generieren.',
+    html: 'ICO-Dateien können <strong>mehrere Auflösungen</strong> in einer einzigen Datei packen - der Browser oder das Betriebssystem wählt automatisch die passendste für den jeweiligen Kontext aus. Für das bestmögliche Ergebnis verwenden Sie ein quadratisches JPG mit mindestens <strong>256×256 Pixeln</strong> als Quelle: Dies gibt dem Konverter genügend Informationen, um scharfe 16×16, 32×32 und 48×48 Größen ohne Verpixelung zu generieren.',
   },
   {
     type: 'title',

package/src/tool/jpgAIco/i18n/en.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { JpgAIcoLocaleContent } from '../index';
@@ -51,17 +52,6 @@ const howTo: JpgAIcoLocaleContent['howTo'] = [
   },
 ];
 
-const bibliography: JpgAIcoLocaleContent['bibliography'] = [
-  {
-    name: 'ICO Iconographic Structure and System Usage',
-    url: 'https://en.wikipedia.org/wiki/ICO_(file_format)',
-  },
-  {
-    name: 'JPEG.org Standards',
-    url: 'https://jpeg.org/',
-  },
-];
-
 const seo: JpgAIcoLocaleContent['seo'] = [
   {
     type: 'title',
@@ -70,7 +60,7 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'The <strong>ICO</strong> format is Microsoft\'s standard for Windows application icons and website favicons. Unlike simply renaming a JPG as .ico, a genuine ICO file requires a specific binary structure with 22-byte headers and an embedded image directory. <strong>JPG</strong> is the most common starting point for creating these icons — a company logo, a profile photo, or any image you want to turn into the visual icon of your application or website.',
+    html: 'The <strong>ICO</strong> format is Microsoft\'s standard for Windows application icons and website favicons. Unlike simply renaming a JPG as .ico, a genuine ICO file requires a specific binary structure with 22-byte headers and an embedded image directory. <strong>JPG</strong> is the most common starting point for creating these icons - a company logo, a profile photo, or any image you want to turn into the visual icon of your application or website.',
   },
   {
     type: 'title',
@@ -79,11 +69,11 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: '<strong>JPG</strong> is a source format, not a destination for icons. Perfect for photographs and banners, but incompatible with systems that require icons: Windows Explorer, the browser\'s bookmark bar, desktop shortcuts, or PWA application manifests. An operating system or browser looking for an icon expects the ICO format — and if it doesn\'t find it, it will display a generic icon or a broken square.',
+    html: '<strong>JPG</strong> is a source format, not a destination for icons. Perfect for photographs and banners, but incompatible with systems that require icons: Windows Explorer, the browser\'s bookmark bar, desktop shortcuts, or PWA application manifests. An operating system or browser looking for an icon expects the ICO format - and if it doesn\'t find it, it will display a generic icon or a broken square.',
   },
   {
     type: 'paragraph',
-    html: 'The <strong>ICO</strong> format was designed to contain multiple resolutions in a single file: <strong>16×16</strong> for the bookmark bar, <strong>32×32</strong> for shortcuts, <strong>48×48</strong> for the file explorer, and <strong>256×256</strong> for high-density displays. Browsers and operating systems automatically select the appropriate resolution based on the display context — the user doesn\'t have to manage anything.',
+    html: 'The <strong>ICO</strong> format was designed to contain multiple resolutions in a single file: <strong>16×16</strong> for the bookmark bar, <strong>32×32</strong> for shortcuts, <strong>48×48</strong> for the file explorer, and <strong>256×256</strong> for high-density displays. Browsers and operating systems automatically select the appropriate resolution based on the display context - the user doesn\'t have to manage anything.',
   },
   {
     type: 'title',
@@ -111,8 +101,8 @@ const seo: JpgAIcoLocaleContent['seo'] = [
         icon: 'mdi:laptop-mac',
         highlight: true,
         points: [
-          'Instant speed — zero network latency',
-          'Complete privacy — 0 bytes sent externally',
+          'Instant speed - zero network latency',
+          'Complete privacy - 0 bytes sent externally',
           'No MB limits or file count restrictions',
           'Clean interface, no ads or tracking',
         ],
@@ -126,16 +116,16 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'The JPG is decoded and drawn onto an in-memory <strong>HTML5 Canvas</strong>. Since the ICO format requires a square image, the engine automatically detects if the JPG is rectangular and crops it by centering the most relevant part. It then builds the standard Microsoft ICO header with the correct magic number (<code>00 00 01 00</code>), the image directory, and the encoded pixel data. The result is a genuine binary .ico file — not a renamed PNG.',
+    html: 'The JPG is decoded and drawn onto an in-memory <strong>HTML5 Canvas</strong>. Since the ICO format requires a square image, the engine automatically detects if the JPG is rectangular and crops it by centering the most relevant part. It then builds the standard Microsoft ICO header with the correct magic number (<code>00 00 01 00</code>), the image directory, and the encoded pixel data. The result is a genuine binary .ico file - not a renamed PNG.',
   },
   {
     type: 'paragraph',
-    html: 'Since JPG lacks an alpha channel, the resulting ICO will also have no transparency — it will have a solid background inherited from the original photograph. If you need a favicon with a transparent background (for example, to adapt to dark or light bookmark bars), the recommended workflow is: remove the background in an editor, save as PNG, and use the PNG to ICO converter.',
+    html: 'Since JPG lacks an alpha channel, the resulting ICO will also have no transparency - it will have a solid background inherited from the original photograph. If you need a favicon with a transparent background (for example, to adapt to dark or light bookmark bars), the recommended workflow is: remove the background in an editor, save as PNG, and use the PNG to ICO converter.',
   },
   {
     type: 'tip',
     title: 'Tip: multiple resolutions in a single ICO',
-    html: 'ICO files can pack <strong>multiple resolutions</strong> into a single file — the browser or OS automatically picks the most appropriate one for each context. For the best possible result, use a square JPG of at least <strong>256×256 pixels</strong> as your source: this gives the converter enough information to generate sharp 16×16, 32×32, and 48×48 sizes without pixelation.',
+    html: 'ICO files can pack <strong>multiple resolutions</strong> into a single file - the browser or OS automatically picks the most appropriate one for each context. For the best possible result, use a square JPG of at least <strong>256×256 pixels</strong> as your source: this gives the converter enough information to generate sharp 16×16, 32×32, and 48×48 sizes without pixelation.',
   },
   {
     type: 'title',

package/src/tool/jpgAIco/i18n/es.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { ImageConverterUI } from '../../../shared/ImageConverter.astro';
 import { generateSchemas } from '../../../shared/logic/schemas';
 import type { JpgAIcoLocaleContent } from '../index';
@@ -51,17 +52,6 @@ const howTo: JpgAIcoLocaleContent['howTo'] = [
   },
 ];
 
-const bibliography: JpgAIcoLocaleContent['bibliography'] = [
-  {
-    name: 'Estructura Iconográfica y Uso en Sistemas ICO',
-    url: 'https://en.wikipedia.org/wiki/ICO_(file_format)',
-  },
-  {
-    name: 'JPEG.org Standards',
-    url: 'https://jpeg.org/',
-  },
-];
-
 const seo: JpgAIcoLocaleContent['seo'] = [
   {
     type: 'title',
@@ -70,7 +60,7 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'El formato <strong>ICO</strong> es el estándar de Microsoft para iconos de Windows y favicons de páginas web. A diferencia de simplemente renombrar un JPG como .ico, un archivo ICO genuino requiere una estructura binaria específica con cabeceras de 22 bytes y un directorio de imágenes embebido. El <strong>JPG</strong> es el punto de partida más común para crear estos iconos — un logotipo de empresa, una fotografía de perfil o cualquier imagen que quieras convertir en el icono visual de tu aplicación o sitio web.',
+    html: 'El formato <strong>ICO</strong> es el estándar de Microsoft para iconos de Windows y favicons de páginas web. A diferencia de simplemente renombrar un JPG como .ico, un archivo ICO genuino requiere una estructura binaria específica con cabeceras de 22 bytes y un directorio de imágenes embebido. El <strong>JPG</strong> es el punto de partida más común para crear estos iconos - un logotipo de empresa, una fotografía de perfil o cualquier imagen que quieras convertir en el icono visual de tu aplicación o sitio web.',
   },
   {
     type: 'title',
@@ -79,7 +69,7 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'El <strong>JPG</strong> es el formato de origen, no el destino. Perfectamente adecuado para fotografías y banners, pero incompatible con los sistemas que exigen iconos: Windows Explorer, la barra de favoritos del navegador, los accesos directos del escritorio o los manifest de aplicaciones PWA. Un sistema operativo o navegador que busca un icono espera el formato ICO — y si no lo encuentra, mostrará un icono genérico o un cuadrado roto.',
+    html: 'El <strong>JPG</strong> es el formato de origen, no el destino. Perfectamente adecuado para fotografías y banners, pero incompatible con los sistemas que exigen iconos: Windows Explorer, la barra de favoritos del navegador, los accesos directos del escritorio o los manifest de aplicaciones PWA. Un sistema operativo o navegador que busca un icono espera el formato ICO - y si no lo encuentra, mostrará un icono genérico o un cuadrado roto.',
   },
   {
     type: 'paragraph',
@@ -111,8 +101,8 @@ const seo: JpgAIcoLocaleContent['seo'] = [
         icon: 'mdi:laptop-mac',
         highlight: true,
         points: [
-          'Velocidad instantánea — cero latencia de red',
-          'Privacidad total — 0 bytes enviados al exterior',
+          'Velocidad instantánea - cero latencia de red',
+          'Privacidad total - 0 bytes enviados al exterior',
           'Sin límites de MB ni de número de archivos',
           'Interfaz limpia, sin anuncios ni rastreos',
         ],
@@ -130,12 +120,12 @@ const seo: JpgAIcoLocaleContent['seo'] = [
   },
   {
     type: 'paragraph',
-    html: 'Dado que el JPG carece de canal alfa, el ICO resultante tampoco tendrá transparencia — tendrá un fondo sólido heredado de la fotografía original. Si necesitas un favicon con fondo transparente (por ejemplo, para que se adapte a barras de favoritos oscuras o claras), el flujo recomendado es: elimina el fondo en un editor, guarda como PNG und usa el convertidor de PNG a ICO.',
+    html: 'Dado que el JPG carece de canal alfa, el ICO resultante tampoco tendrá transparencia - tendrá un fondo sólido heredado de la fotografía original. Si necesitas un favicon con fondo transparente (por ejemplo, para que se adapte a barras de favoritos oscuras o claras), el flujo recomendado es: elimina el fondo en un editor, guarda como PNG und usa el convertidor de PNG a ICO.',
   },
   {
     type: 'tip',
     title: 'Consejo: resoluciones múltiples en un solo ICO',
-    html: 'Los archivos ICO pueden empaquetar <strong>varias resoluciones</strong> en un único fichero — el navegador o el sistema operativo elige automáticamente la más adecuada según el contexto. Para el mejor resultado posible, usa como fuente un JPG cuadrado de al menos <strong>256×256 píxeles</strong>: así el convertidor tendrá suficiente información para generar con nitidez los tamaños 16×16, 32×32 und 48×48 sin pixelado.',
+    html: 'Los archivos ICO pueden empaquetar <strong>varias resoluciones</strong> en un único fichero - el navegador o el sistema operativo elige automáticamente la más adecuada según el contexto. Para el mejor resultado posible, usa como fuente un JPG cuadrado de al menos <strong>256×256 píxeles</strong>: así el convertidor tendrá suficiente información para generar con nitidez los tamaños 16×16, 32×32 und 48×48 sin pixelado.',
   },
   {
     type: 'title',