@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,126 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'conversor-color-rgb-hex-hsl';
+const title = 'Conversor de Color RGB HEX y HSL';
+const description = 'Convierte colores entre RGB, HEX y HSL al instante. Genera armonías complementarias y analiza el contraste WCAG. Herramienta 100% client-side y privada.';
+
+const faqData = [
+  {
+    question: '\u00bfC\u00f3mo funciona el conversor de colores RGB a HEX y HSL?',
+    answer: 'La herramienta toma valores de Rojo, Verde y Azul (RGB) y utiliza algoritmos matem\u00e1ticos para convertirlos a su equivalente hexadecimal (HEX) o en valores de tono, saturaci\u00f3n y luminosidad (HSL). Tambi\u00e9n funciona a la inversa.',
+  },
+  {
+    question: '\u00bfPor qu\u00e9 usar HSL en lugar de HEX en mis dise\u00f1os?',
+    answer: 'El formato HSL es mucho m\u00e1s intuitivo. Permite modificar la saturaci\u00f3n o la luminosidad sin cambiar la tonalidad, lo que facilita la creaci\u00f3n de paletas arm\u00f3nicas y estados de botones (hover, disabled).',
+  },
+  {
+    question: '\u00bfQu\u00e9 es el valor de contraste relativo?',
+    answer: 'Es una m\u00e9trica que indica la legibilidad de un texto sobre un fondo basada en su luminancia. Un contraste alto asegura que personas con dificultades visuales puedan leer el contenido, siguiendo las pautas WCAG.',
+  },
+  {
+    question: '\u00bfEs seguro usar este conversor de color online?',
+    answer: 'Totalmente. Al ser 100% client-side, los datos de color nunca salen de tu ordenador. Todo el proceso ocurre directamente en tu navegador, garantizando privacidad y rapidez instant\u00e1nea.',
+  },
+];
+
+const howToData = [
+  { name: 'Seleccionar Color', text: 'Usa los sliders de Rojo, Verde y Azul o escribe directamente el c\u00f3digo HEX en el campo de texto.' },
+  { name: 'Ajustar Canales RGB', text: 'Mueve los sliders para cambiar la intensidad de cada canal y ver la actualizaci\u00f3n en tiempo real.' },
+  { name: 'Copiar el Formato', text: 'Haz clic en el bot\u00f3n Copiar junto al formato HEX, RGB o HSL que necesites.' },
+  { name: 'Explorar Armon\u00edas', text: 'Haz clic en los colores de armon\u00eda (complementario, an\u00e1logos, tr\u00edada) para copiarlos al portapapeles.' },
+];
+
+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((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.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: ColorConverterUI = {
+  labelPreview: 'Vista Previa (clic para copiar HEX)',
+  labelHarmonies: 'Armon\u00edas de Color',
+  labelR: 'Rojo',
+  labelG: 'Verde',
+  labelB: 'Azul',
+  labelComp: 'Comp.',
+  labelAna1: 'An\u00e1logo 1',
+  labelAna2: 'An\u00e1logo 2',
+  labelTri1: 'Tr\u00edada 1',
+  labelTri2: 'Tr\u00edada 2',
+  btnCopy: 'Copiar',
+  btnCopied: 'Copiado',
+  contrastLabel: 'Contraste',
+  clickToCopy: 'Clic para copiar',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Recursos de Color y Dise\u00f1o Web',
+  bibliography: [
+    { name: 'W3C: Documentaci\u00f3n de Colores en CSS', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: Gu\u00eda del Modelo de Color HSL', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: Gu\u00eda de Contraste y Accesibilidad', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Conversor de Color RGB a HEX y HSL para Desarrolladores', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'En el mundo del <strong>desarrollo frontend</strong> y el <strong>dise\u00f1o UI/UX</strong>, el manejo de colores es una tarea constante. Nuestro <strong>conversor de color online</strong> te permite transformar valores entre <strong>HEX, RGB y HSL</strong> de forma instant\u00e1nea y con precisi\u00f3n matem\u00e1tica.',
+    },
+    { type: 'title', text: 'Formatos de Color: HEX, RGB y HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (Hexadecimal):</strong> El est\u00e1ndar de facto para CSS. Compacto y f\u00e1cil de compartir en el c\u00f3digo.',
+        '<strong>RGB (Red, Green, Blue):</strong> Basado en el sistema aditivo de luz. Ideal para manipular canales directamente o aplicar transparencia con RGBA.',
+        '<strong>HSL (Hue, Saturation, Lightness):</strong> El formato m\u00e1s intuitivo. Permite ajustar tono, saturaci\u00f3n y luminosidad para crear paletas arm\u00f3nicas.',
+      ],
+    },
+    { type: 'title', text: 'Contraste y Accesibilidad WCAG', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'La calculadora incluye una medici\u00f3n de <strong>contraste relativo</strong> basada en la luminancia. Esto te ayuda a cumplir con las pautas <strong>WCAG</strong>, asegurando que tus textos sean legibles sobre los fondos seleccionados.',
+    },
+    { type: 'title', text: 'Armon\u00edas Autom\u00e1ticas de Color', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Complementario:</strong> El color opuesto en la rueda crom\u00e1tica, ideal para contraste m\u00e1ximo.',
+        '<strong>An\u00e1logos:</strong> Colores adyacentes que crean transiciones suaves y arm\u00f3nicas.',
+        '<strong>Tr\u00edada:</strong> Tres colores equidistantes para composiciones vibrantes y equilibradas.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,126 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ColorConverterUI } from '../ui';
+
+const slug = 'convertisseur-couleur-rgb-hex-hsl';
+const title = 'Convertisseur de Couleur RGB HEX et HSL';
+const description = 'Convertissez des couleurs entre RGB, HEX et HSL instantan\u00e9ment. G\u00e9n\u00e9rez des harmonies de couleurs et analysez le contraste WCAG. 100% client-side et priv\u00e9.';
+
+const faqData = [
+  {
+    question: 'Comment fonctionne le convertisseur de couleurs RGB en HEX et HSL?',
+    answer: 'L\'outil prend les valeurs Rouge, Vert et Bleu (RGB) et utilise des algorithmes math\u00e9matiques pour les convertir en leur \u00e9quivalent hexad\u00e9cimal (HEX) ou en valeurs de teinte, saturation et luminosit\u00e9 (HSL). Cela fonctionne aussi en sens inverse.',
+  },
+  {
+    question: 'Pourquoi utiliser HSL plut\u00f4t que HEX dans mes designs?',
+    answer: 'Le format HSL est beaucoup plus intuitif. Il permet de modifier la saturation ou la luminosit\u00e9 sans changer la teinte, facilitant la cr\u00e9ation de palettes harmonieuses et d\u2019\u00e9tats de boutons (hover, disabled).',
+  },
+  {
+    question: 'Qu\'est-ce que la valeur de contraste relatif?',
+    answer: 'C\'est une m\u00e9trique indiquant la lisibilit\u00e9 d\'un texte sur un fond bas\u00e9e sur sa luminance. Un contraste \u00e9lev\u00e9 assure que les personnes malvoyantes peuvent lire le contenu, conform\u00e9ment aux directives WCAG.',
+  },
+  {
+    question: 'Est-il s\u00fbr d\'utiliser ce convertisseur de couleur en ligne?',
+    answer: 'Absolument. \u00c9tant 100% client-side, vos donn\u00e9es de couleur ne quittent jamais votre ordinateur. Tout le traitement se fait directement dans votre navigateur, garantissant confidentialit\u00e9 et rapidit\u00e9 instantan\u00e9e.',
+  },
+];
+
+const howToData = [
+  { name: 'S\u00e9lectionner une Couleur', text: 'Utilisez les curseurs Rouge, Vert et Bleu ou saisissez directement un code HEX dans le champ de texte.' },
+  { name: 'Ajuster les Canaux RGB', text: 'D\u00e9placez les curseurs pour modifier l\'intensit\u00e9 de chaque canal et voir la mise \u00e0 jour en temps r\u00e9el.' },
+  { name: 'Copier le Format', text: 'Cliquez sur le bouton Copier \u00e0 c\u00f4t\u00e9 du format HEX, RGB ou HSL dont vous avez besoin.' },
+  { name: 'Explorer les Harmonies', text: 'Cliquez sur les couleurs d\'harmonie (compl\u00e9mentaire, analogues, triade) pour les copier dans le presse-papiers.' },
+];
+
+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((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.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: ColorConverterUI = {
+  labelPreview: 'Aper\u00e7u (clic pour copier HEX)',
+  labelHarmonies: 'Harmonies de Couleur',
+  labelR: 'Rouge',
+  labelG: 'Vert',
+  labelB: 'Bleu',
+  labelComp: 'Comp.',
+  labelAna1: 'Analogue 1',
+  labelAna2: 'Analogue 2',
+  labelTri1: 'Triade 1',
+  labelTri2: 'Triade 2',
+  btnCopy: 'Copier',
+  btnCopied: 'Copi\u00e9',
+  contrastLabel: 'Contraste',
+  clickToCopy: 'Cliquer pour copier',
+};
+
+export const content: ToolLocaleContent<ColorConverterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fr\u00e9quentes',
+  faq: faqData,
+  bibliographyTitle: 'Ressources sur les Couleurs et le Design Web',
+  bibliography: [
+    { name: 'W3C: Documentation des Couleurs CSS', url: 'https://www.w3.org/TR/css-color-4/' },
+    { name: 'MDN: Guide du Mod\u00e8le de Couleur HSL', url: 'https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/hsl' },
+    { name: 'WebAIM: Guide de Contraste et Accessibilit\u00e9', url: 'https://webaim.org/resources/contrastchecker/' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Convertisseur de Couleur RGB en HEX et HSL pour D\u00e9veloppeurs', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Dans le monde du <strong>d\u00e9veloppement frontend</strong> et du <strong>design UI/UX</strong>, la gestion des couleurs est une t\u00e2che constante. Notre <strong>convertisseur de couleur en ligne</strong> vous permet de transformer des valeurs entre <strong>HEX, RGB et HSL</strong> instantan\u00e9ment.',
+    },
+    { type: 'title', text: 'Formats de Couleur: HEX, RGB et HSL', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>HEX (Hexad\u00e9cimal):</strong> Le standard de facto pour CSS. Compact et facile \u00e0 partager dans le code.',
+        '<strong>RGB (Rouge, Vert, Bleu):</strong> Bas\u00e9 sur le syst\u00e8me additif de lumi\u00e8re. Id\u00e9al pour manipuler les canaux directement ou appliquer la transparence avec RGBA.',
+        '<strong>HSL (Teinte, Saturation, Luminosit\u00e9):</strong> Le format le plus intuitif pour cr\u00e9er des palettes harmonieuses.',
+      ],
+    },
+    { type: 'title', text: 'Contraste et Accessibilit\u00e9 WCAG', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'La calculatrice inclut une mesure de <strong>contraste relatif</strong> bas\u00e9e sur la luminance. Cela vous aide \u00e0 respecter les directives <strong>WCAG</strong>, assurant que vos textes sont lisibles sur les fonds s\u00e9lectionn\u00e9s.',
+    },
+    { type: 'title', text: 'Harmonies de Couleur Automatiques', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Compl\u00e9mentaire:</strong> La couleur oppos\u00e9e sur la roue chromatique, id\u00e9ale pour un contraste maximum.',
+        '<strong>Analogues:</strong> Couleurs adjacentes qui cr\u00e9ent des transitions douces et harmonieuses.',
+        '<strong>Triade:</strong> Trois couleurs \u00e9quidistantes pour des compositions vibrantes et \u00e9quilibr\u00e9es.',
+      ],
+    },
+  ],
+};

package/src/tool/colorConverter/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ColorConverterComponent from './component.astro';
+import ColorConverterSEO from './seo.astro';
+import ColorConverterBibliography from './bibliography.astro';
+import type { ColorConverterUI } from './ui';
+
+export type ColorConverterLocaleContent = ToolLocaleContent<ColorConverterUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const colorConverter: DeveloperToolEntry<ColorConverterUI> = {
+  id: 'color-converter',
+  icons: {
+    bg: 'mdi:palette',
+    fg: 'mdi:eyedropper',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { ColorConverterComponent, ColorConverterSEO, ColorConverterBibliography };
+
+export const COLOR_CONVERTER_TOOL: ToolDefinition = {
+  entry: colorConverter,
+  Component: ColorConverterComponent,
+  SEOComponent: ColorConverterSEO,
+  BibliographyComponent: ColorConverterBibliography,
+};

package/src/tool/colorConverter/seo.astro

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

package/src/tool/colorConverter/ui.ts

@@ -0,0 +1,16 @@
+export interface ColorConverterUI extends Record<string, string> {
+  labelPreview: string;
+  labelHarmonies: string;
+  labelR: string;
+  labelG: string;
+  labelB: string;
+  labelComp: string;
+  labelAna1: string;
+  labelAna2: string;
+  labelTri1: string;
+  labelTri2: string;
+  btnCopy: string;
+  btnCopied: string;
+  contrastLabel: string;
+  clickToCopy: string;
+}

package/src/tool/conversorExcelCsvHtml/bibliography.astro

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