@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'convertidor-svg-css';
+const title = 'Convertidor de SVG a CSS y Data URI. Optimización Web';
+const description =
+  'Transforma tus iconos y vectores SVG en código CSS (Background o Mask) o Data URI comprimido. Optimiza el rendimiento de tu web eliminando peticiones HTTP externas.';
+
+const faqData = [
+  {
+    question: '¿Es mejor usar Data URI o un archivo .svg externo?',
+    answer:
+      'Depende del uso. Los Data URIs eliminan peticiones HTTP (ideal para iconos pequeños), pero aumentan el tamaño del CSS. Para ilustraciones grandes o ricas en detalles, es preferible un archivo externo.',
+  },
+  {
+    question: '¿Cómo cambio el color de un SVG incrustado en CSS?',
+    answer:
+      "La mejor forma es mediante 'mask-image'. Al definir el SVG como una máscara, puedes usar 'background-color' para cambiar su color dinámicamente, incluso en estados :hover.",
+  },
+  {
+    question: '¿Qué navegadores soportan las Máscaras CSS?',
+    answer:
+      'Todos los navegadores modernos (Chrome, Firefox, Safari, Edge) tienen soporte completo. Para navegadores antiguos se suelen usar prefijos -webkit-.',
+  },
+  {
+    question: '¿Afecta el uso de Data URIs al SEO?',
+    answer:
+      'Sí, de forma positiva. Al reducir el número de peticiones necesarias para renderizar la página, mejora el tiempo de carga (LCP) y la puntuación en Core Web Vitals.',
+  },
+  {
+    question: '¿Puedo usarlo en frameworks como React o Tailwind?',
+    answer:
+      '¡Por supuesto! Puedes copiar el código generado y usarlo en tus archivos .css o incluso como valores arbitrarios en Tailwind CSS.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pegar el SVG',
+    text: 'Copia el código fuente de tu archivo SVG y pégalo en el área de texto de la izquierda.',
+  },
+  {
+    name: 'Elegir el tipo de salida',
+    text: 'Selecciona entre Background Image (para fondos estáticos), CSS Mask (para iconos con color dinámico) o Solo Data URI (para uso directo).',
+  },
+  {
+    name: 'Copiar el resultado',
+    text: 'Haz clic en "Copiar" para llevar el código CSS generado a tu portapapeles.',
+  },
+  {
+    name: 'Aplicar en tu proyecto',
+    text: 'Pega el código en tu hoja de estilos o componente CSS. Para Masks, añade también background-color para definir el color del icono.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Pegar SVG',
+  labelInputArea: 'Código Fuente SVG',
+  labelPreviewOriginal: 'Vista Previa Original',
+  labelResultTitle: 'Resultado CSS',
+  labelPreviewApplied: 'Resultado Aplicado',
+  tabBackground: 'Background Image',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Solo Data URI',
+  btnCopy: 'Copiar',
+  btnCopied: '¡Copiado!',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Using SVG as Background',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/es/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/es/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: '¿Por qué convertir SVG a CSS Data URI?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'En el desarrollo web moderno, optimizar el rendimiento y la carga de recursos es fundamental. Insertar iconos directamente en el CSS mediante <strong>Data URIs</strong> elimina peticiones HTTP innecesarias, lo que reduce la latencia y mejora el tiempo hasta que la página es interactiva (TTI).',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta herramienta transforma el código vectorial <code>&lt;svg&gt;</code> en una cadena de texto codificada que el navegador puede interpretar como una imagen de fondo o una máscara de recorte, manteniendo la escalabilidad infinita y la nitidez característica de los vectores.',
+    },
+    {
+      type: 'title',
+      text: 'Beneficios Técnicos Principales',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Cero Peticiones HTTP:</strong> Al integrar el gráfico en tus archivos <code>.css</code>, el navegador no necesita descargar archivos externos adicionales.',
+        '<strong>Personalización vía CSS Mask:</strong> Usando la técnica de <code>mask-image</code>, puedes cambiar el color de un icono vectorial complejo simplemente usando <code>background-color</code>.',
+        '<strong>Renderizado Inmediato:</strong> Evitas el parpadeo de contenido (FOUC) ya que los recursos visuales críticos están disponibles tan pronto como se descarga la hoja de estilos.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Máscaras CSS (CSS Masks) vs Backgrounds',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Mucha gente usa simplemente <code>background-image</code> para incrustar vectores, pero esto tiene una limitación: no puedes cambiar el color del SVG dinámicamente desde CSS.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Nuestra utilidad soporta la generación de código para <strong>Máscaras CSS</strong>. Al aplicar un <code>mask-image</code> con el Data URI generado, el icono actúa como un estencil, permitiendo que el <code>background-color</code> del elemento defina el color final del icono. Es la forma más profesional y flexible de gestionar iconos en Astro, Next.js o cualquier framework moderno.',
+    },
+  ],
+};

package/src/tool/svgToCss/i18n/fr.ts

@@ -0,0 +1,174 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SvgToCssUI } from '../ui';
+
+const slug = 'convertisseur-svg-css';
+const title = 'Convertisseur SVG vers CSS et Data URI. Optimisation Web';
+const description =
+  "Transformez vos icônes et vecteurs SVG en code CSS (Background ou Mask) ou Data URI compressé. Optimisez les performances de votre site en éliminant les requêtes HTTP externes.";
+
+const faqData = [
+  {
+    question: "Vaut-il mieux utiliser un Data URI ou un fichier .svg externe ?",
+    answer:
+      "Cela dépend de l'usage. Les Data URIs éliminent les requêtes HTTP (idéal pour les petites icônes), mais augmentent la taille du CSS. Pour les illustrations grandes ou riches en détails, un fichier externe est préférable.",
+  },
+  {
+    question: "Comment changer la couleur d'un SVG intégré en CSS ?",
+    answer:
+      "La meilleure façon est via 'mask-image'. En définissant le SVG comme un masque, vous pouvez utiliser 'background-color' pour changer sa couleur dynamiquement, même dans les états :hover.",
+  },
+  {
+    question: 'Quels navigateurs supportent les masques CSS ?',
+    answer:
+      'Tous les navigateurs modernes (Chrome, Firefox, Safari, Edge) ont un support complet. Pour les navigateurs plus anciens, les préfixes -webkit- sont couramment utilisés.',
+  },
+  {
+    question: "L'utilisation de Data URIs affecte-t-elle le SEO ?",
+    answer:
+      "Oui, positivement. En réduisant le nombre de requêtes nécessaires au rendu de la page, cela améliore le temps de chargement (LCP) et les scores Core Web Vitals.",
+  },
+  {
+    question: "Puis-je l'utiliser dans des frameworks comme React ou Tailwind ?",
+    answer:
+      "Absolument ! Vous pouvez copier le code généré et l'utiliser dans vos fichiers .css ou même comme valeurs arbitraires dans Tailwind CSS.",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Coller le SVG',
+    text: 'Copiez le code source de votre fichier SVG et collez-le dans la zone de texte à gauche.',
+  },
+  {
+    name: "Choisir le type de sortie",
+    text: "Sélectionnez entre Background Image (pour les fonds statiques), CSS Mask (pour les icônes avec couleur dynamique) ou Data URI uniquement (pour utilisation directe).",
+  },
+  {
+    name: 'Copier le résultat',
+    text: 'Cliquez sur "Copier" pour transférer le code CSS généré dans votre presse-papiers.',
+  },
+  {
+    name: 'Appliquer dans votre projet',
+    text: 'Collez le code dans votre feuille de styles ou composant CSS. Pour les masques, ajoutez également background-color pour définir la couleur de l\'icône.',
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+const ui: SvgToCssUI = {
+  labelPasteTitle: 'Coller le SVG',
+  labelInputArea: 'Code Source SVG',
+  labelPreviewOriginal: 'Aperçu Original',
+  labelResultTitle: 'Résultat CSS',
+  labelPreviewApplied: 'Résultat Appliqué',
+  tabBackground: 'Background Image',
+  tabMask: 'CSS Mask / Webkit',
+  tabUri: 'Data URI uniquement',
+  btnCopy: 'Copier',
+  btnCopied: 'Copié !',
+  placeholder: '<svg xmlns="http://www.w3.org/2000/svg" ...',
+};
+
+export const content: ToolLocaleContent<SvgToCssUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et Documentation',
+  bibliography: [
+    {
+      name: 'CSS-Tricks: Using SVG as Background',
+      url: 'https://css-tricks.com/using-svg/',
+    },
+    {
+      name: 'MDN Web Docs: mask-image',
+      url: 'https://developer.mozilla.org/fr/docs/Web/CSS/mask-image',
+    },
+    {
+      name: 'MDN Web Docs: background-image',
+      url: 'https://developer.mozilla.org/fr/docs/Web/CSS/background-image',
+    },
+    {
+      name: 'W3C: CSS Masking Module Level 1',
+      url: 'https://www.w3.org/TR/css-masking-1/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Pourquoi convertir un SVG en CSS Data URI ?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Dans le développement web moderne, optimiser les performances et le chargement des ressources est fondamental. Intégrer des icônes directement dans le CSS via des <strong>Data URIs</strong> élimine les requêtes HTTP inutiles, réduisant la latence et améliorant le Time to Interactive (TTI).",
+    },
+    {
+      type: 'paragraph',
+      html: "Cet outil transforme le code vectoriel <code>&lt;svg&gt;</code> en une chaîne de texte encodée que le navigateur peut interpréter comme une image de fond ou un masque de découpe, en conservant la scalabilité infinie et la netteté caractéristique des vecteurs.",
+    },
+    {
+      type: 'title',
+      text: 'Principaux Avantages Techniques',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        "<strong>Zéro Requête HTTP :</strong> En intégrant le graphique dans vos fichiers <code>.css</code>, le navigateur n'a pas besoin de télécharger de fichiers externes supplémentaires.",
+        "<strong>Personnalisation via CSS Mask :</strong> Grâce à la technique <code>mask-image</code>, vous pouvez changer la couleur d'une icône vectorielle complexe simplement en utilisant <code>background-color</code>.",
+        "<strong>Rendu Immédiat :</strong> Vous évitez le scintillement de contenu (FOUC) car les ressources visuelles critiques sont disponibles dès que la feuille de styles est téléchargée.",
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Masques CSS vs Backgrounds',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Beaucoup de développeurs utilisent simplement <code>background-image</code> pour intégrer des vecteurs, mais cela a une limitation : vous ne pouvez pas changer la couleur du SVG dynamiquement depuis le CSS.",
+    },
+    {
+      type: 'paragraph',
+      html: "Notre utilitaire supporte la génération de code pour les <strong>Masques CSS</strong>. En appliquant un <code>mask-image</code> avec le Data URI généré, l'icône agit comme un pochoir, permettant au <code>background-color</code> de l'élément de définir la couleur finale de l'icône. C'est la façon la plus professionnelle et flexible de gérer les icônes dans Astro, Next.js ou n'importe quel framework moderne.",
+    },
+  ],
+};

package/src/tool/svgToCss/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import SvgToCssComponent from './component.astro';
+import SvgToCssSEO from './seo.astro';
+import SvgToCssBibliography from './bibliography.astro';
+
+import type { SvgToCssUI } from './ui';
+
+export type SvgToCssLocaleContent = ToolLocaleContent<SvgToCssUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const svgToCss: DeveloperToolEntry<SvgToCssUI> = {
+  id: 'svg-to-css',
+  icons: {
+    bg: 'mdi:svg',
+    fg: 'mdi:code-braces',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { SvgToCssComponent, SvgToCssSEO, SvgToCssBibliography };
+
+export const SVG_TO_CSS_TOOL: ToolDefinition = {
+  entry: svgToCss,
+  Component: SvgToCssComponent,
+  SEOComponent: SvgToCssSEO,
+  BibliographyComponent: SvgToCssBibliography,
+};

package/src/tool/svgToCss/seo.astro

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

package/src/tool/svgToCss/ui.ts

@@ -0,0 +1,13 @@
+export interface SvgToCssUI extends Record<string, string> {
+  labelPasteTitle: string;
+  labelInputArea: string;
+  labelPreviewOriginal: string;
+  labelResultTitle: string;
+  labelPreviewApplied: string;
+  tabBackground: string;
+  tabMask: string;
+  tabUri: string;
+  btnCopy: string;
+  btnCopied: string;
+  placeholder: string;
+}

package/src/tool/urlCleaner/bibliography.astro

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