@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,133 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ReadabilityCalculatorUI } from '../ui';
+
+const slug = 'calculadora-legibilidad-visual-wcag-apca';
+const title = 'Calculadora de Legibilidad Visual WCAG y APCA';
+const description = 'Comprueba el contraste real de tus dise\u00f1os con APCA (WCAG 3.0). Analiza c\u00f3mo influye el grosor de la fuente y el tama\u00f1o en la lectura real. De ratios simples a legibilidad perceptual.';
+
+const faqData = [
+  {
+    question: '\u00bfQu\u00e9 es APCA y por qu\u00e9 es diferente a WCAG 2.1?',
+    answer: 'APCA es el Algoritmo de Contraste Perceptual Avanzado desarrollado para WCAG 3.0. A diferencia del antiguo ratio simple, APCA utiliza modelos matem\u00e1ticos que imitan c\u00f3mo el cerebro humano percibe el contraste, teniendo en cuenta la polaridad (fondo claro vs. oscuro) y el tama\u00f1o/grosor de las fuentes.',
+  },
+  {
+    question: '\u00bfQu\u00e9 significa el valor Lc?',
+    answer: 'Lc (Lightness Contrast) es el valor de contraste que genera APCA. Un valor de 100 representa un contraste m\u00e1ximo ideal, mientras que valores inferiores a 60 empiezan a ser cr\u00edticos para textos de lectura continua. Es una escala de magnitud absoluta de la percepci\u00f3n.',
+  },
+  {
+    question: '\u00bfC\u00f3mo influye el grosor de la fuente en la legibilidad?',
+    answer: 'Las fuentes delgadas (Thin/Light) requieren un contraste mucho mayor para ser legibles. APCA penaliza las fuentes de poco peso, indicando que un dise\u00f1o que pasa WCAG con una fuente de 100 de grosor puede ser ilegible en la pr\u00e1ctica.',
+  },
+  {
+    question: '\u00bfEs esta calculadora privada?',
+    answer: 'S\u00ed, todos los c\u00e1lculos se realizan localmente en tu navegador. Los colores y configuraciones que analices nunca se env\u00edan a ning\u00fan servidor, garantizando total privacidad en tus proyectos de dise\u00f1o.',
+  },
+];
+
+const howToData = [
+  { name: 'Elegir Colores', text: 'Usa los selectores de color para definir el color del texto y el color de fondo de tu dise\u00f1o.' },
+  { name: 'Ajustar Tipograf\u00eda', text: 'Mueve los sliders de tama\u00f1o y grosor de fuente para simular tu tipograf\u00eda real.' },
+  { name: 'Leer los Resultados', text: 'Consulta el ratio WCAG 2.1 y el valor Lc de APCA para saber si tu dise\u00f1o es accesible.' },
+  { name: 'Ver Recomendaciones', text: 'Revisa las recomendaciones APCA espec\u00edficas para texto de lectura, texto peque\u00f1o y elementos UI.' },
+];
+
+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: ReadabilityCalculatorUI = {
+  labelColors: 'Colores Base',
+  labelText: 'Texto',
+  labelBg: 'Fondo',
+  labelTypo: 'Tipograf\u00eda',
+  labelFontSize: 'Tama\u00f1o de Fuente',
+  labelFontWeight: 'Grosor (Weight)',
+  labelCompare: 'Comparativa de Contraste',
+  labelPreview: 'Vista Previa Perceptual',
+  labelApcaRecs: 'Recomendaciones APCA',
+  labelBody: 'Texto de Lectura (Body)',
+  labelSmall: 'Texto Peque\u00f1o / Caption',
+  labelUi: 'UI / Botones',
+  statusYes: 'S\u00ed',
+  statusNo: 'No',
+  wcagAAA: 'Pasa AAA',
+  wcagAA: 'Pasa AA',
+  wcagLarge: 'Solo Texto Grande',
+  wcagFail: 'No Pasa',
+  apcaExcellent: 'Excelente',
+  apcaGood: 'Bueno',
+  apcaMinimal: 'M\u00ednimo',
+  apcaPoor: 'Pobre',
+  previewText: 'La legibilidad visual no es solo matem\u00e1tica. Es c\u00f3mo luz y sombra interact\u00faan con tus ojos.',
+  wcagRatioLabel: 'Ratio WCAG 2.1',
+  apcaLcLabel: 'APCA Lc (WCAG 3)',
+};
+
+export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Recursos sobre Contraste y APCA',
+  bibliography: [
+    { name: 'W3C: Draft de WCAG 3.0 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
+    { name: 'Myndex: Gu\u00eda de Referencia APCA', url: 'https://apcaw3.myndex.com/' },
+    { name: 'MDN: Accesibilidad y Contraste de Color', url: 'https://developer.mozilla.org/es/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Calculadora de Legibilidad Visual (WCAG vs APCA)', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Comprende c\u00f3mo tus colores y tipograf\u00eda afectan la lectura real con el nuevo est\u00e1ndar de accesibilidad perceptual. WCAG 2.1 usa una f\u00f3rmula matem\u00e1tica simple de 2008. <strong>APCA</strong> es el nuevo modelo propuesto para <strong>WCAG 3.0</strong> que imita la percepci\u00f3n humana.',
+    },
+    { type: 'title', text: 'Puntos Clave de APCA', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Polaridad:</strong> Entiende que el modo oscuro (Dark Mode) se percibe distinto al modo claro.',
+        '<strong>Grosor de Fuente:</strong> Asigna niveles de contraste (Lc) espec\u00edficos seg\u00fan el peso de la tipograf\u00eda.',
+        '<strong>Linealidad:</strong> Corrige las imprecisiones matem\u00e1ticas de la luminancia relativa de 2008.',
+      ],
+    },
+    { type: 'title', text: 'Niveles APCA Recomendados', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Lc 90+:</strong> Ideal para texto muy peque\u00f1o o de poco peso.',
+        '<strong>Lc 75:</strong> El est\u00e1ndar para texto de lectura principal (Body).',
+        '<strong>Lc 60:</strong> M\u00ednimo para contenido legible de tama\u00f1o medio.',
+        '<strong>Lc 45:</strong> M\u00ednimo para elementos grandes o decorativos.',
+      ],
+    },
+  ],
+};

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

@@ -0,0 +1,133 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ReadabilityCalculatorUI } from '../ui';
+
+const slug = 'calculateur-lisibilite-visuelle-wcag-apca';
+const title = 'Calculateur de Lisibilit\u00e9 Visuelle WCAG et APCA';
+const description = 'V\u00e9rifiez le contraste r\u00e9el de vos designs avec APCA (WCAG 3.0). Analysez l\'influence de la graisse et de la taille de la police sur la lisibilit\u00e9 perceptuelle.';
+
+const faqData = [
+  {
+    question: 'Qu\'est-ce qu\'APCA et pourquoi est-il diff\u00e9rent de WCAG 2.1?',
+    answer: 'APCA est l\'Algorithme de Contraste Perceptuel Avanc\u00e9 d\u00e9velopp\u00e9 pour WCAG 3.0. Contrairement \u00e0 l\'ancien ratio simple, APCA utilise des mod\u00e8les math\u00e9matiques imitant la perception humaine du contraste, en tenant compte de la polarit\u00e9 et de la taille/graisse des polices.',
+  },
+  {
+    question: 'Que signifie la valeur Lc?',
+    answer: 'Lc (Lightness Contrast) est la valeur de contraste g\u00e9n\u00e9r\u00e9e par APCA. Une valeur de 100 repr\u00e9sente un contraste maximum id\u00e9al, tandis que des valeurs inf\u00e9rieures \u00e0 60 deviennent critiques pour les textes de lecture continue.',
+  },
+  {
+    question: 'Comment la graisse de la police influence-t-elle la lisibilit\u00e9?',
+    answer: 'Les polices fines (Thin/Light) n\u00e9cessitent un contraste bien plus \u00e9lev\u00e9 pour \u00eatre lisibles. APCA p\u00e9nalise les polices de faible poids, indiquant qu\'un design validant WCAG avec une police de graisse 100 peut \u00eatre illisible en pratique.',
+  },
+  {
+    question: 'Ce calculateur est-il priv\u00e9?',
+    answer: 'Oui, tous les calculs sont effectu\u00e9s localement dans votre navigateur. Les couleurs et configurations analys\u00e9es ne sont jamais envoy\u00e9es \u00e0 un serveur, garantissant une confidentialit\u00e9 totale.',
+  },
+];
+
+const howToData = [
+  { name: 'Choisir les Couleurs', text: 'Utilisez les s\u00e9lecteurs de couleur pour d\u00e9finir la couleur du texte et la couleur de fond de votre design.' },
+  { name: 'Ajuster la Typographie', text: 'D\u00e9placez les curseurs de taille et de graisse pour simuler votre typographie r\u00e9elle.' },
+  { name: 'Lire les R\u00e9sultats', text: 'Consultez le ratio WCAG 2.1 et la valeur Lc APCA pour savoir si votre design est accessible.' },
+  { name: 'Voir les Recommandations', text: 'V\u00e9rifiez les recommandations APCA sp\u00e9cifiques pour le texte de lecture, le texte petit et les \u00e9l\u00e9ments UI.' },
+];
+
+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: ReadabilityCalculatorUI = {
+  labelColors: 'Couleurs de Base',
+  labelText: 'Texte',
+  labelBg: 'Fond',
+  labelTypo: 'Typographie',
+  labelFontSize: 'Taille de Police',
+  labelFontWeight: 'Graisse (Weight)',
+  labelCompare: 'Comparaison de Contraste',
+  labelPreview: 'Aper\u00e7u Perceptuel',
+  labelApcaRecs: 'Recommandations APCA',
+  labelBody: 'Texte de Lecture (Body)',
+  labelSmall: 'Texte Petit / Caption',
+  labelUi: 'UI / Boutons',
+  statusYes: 'Oui',
+  statusNo: 'Non',
+  wcagAAA: 'Passe AAA',
+  wcagAA: 'Passe AA',
+  wcagLarge: 'Grands Textes Seulement',
+  wcagFail: '\u00c9choue',
+  apcaExcellent: 'Excellent',
+  apcaGood: 'Bon',
+  apcaMinimal: 'Minimal',
+  apcaPoor: 'Faible',
+  previewText: 'La lisibilit\u00e9 visuelle n\'est pas seulement des math\u00e9matiques. C\'est comment lumi\u00e8re et ombre interagissent avec vos yeux.',
+  wcagRatioLabel: 'Ratio WCAG 2.1',
+  apcaLcLabel: 'APCA Lc (WCAG 3)',
+};
+
+export const content: ToolLocaleContent<ReadabilityCalculatorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fr\u00e9quentes',
+  faq: faqData,
+  bibliographyTitle: 'Ressources sur le Contraste et APCA',
+  bibliography: [
+    { name: 'W3C: Brouillon WCAG 3.0 (Silver)', url: 'https://www.w3.org/WAI/standards-guidelines/wcag/wcag3-intro/' },
+    { name: 'Myndex: Guide de R\u00e9f\u00e9rence APCA', url: 'https://apcaw3.myndex.com/' },
+    { name: 'MDN: Accessibilit\u00e9 et Contraste des Couleurs', url: 'https://developer.mozilla.org/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Calculateur de Lisibilit\u00e9 Visuelle (WCAG vs APCA)', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Comprenez comment vos couleurs et typographie affectent la lecture r\u00e9elle avec le nouveau standard d\'accessibilit\u00e9 perceptuelle. WCAG 2.1 utilise une formule math\u00e9matique simple de 2008. <strong>APCA</strong> est le nouveau mod\u00e8le propos\u00e9 pour <strong>WCAG 3.0</strong> qui imite la perception humaine.',
+    },
+    { type: 'title', text: 'Points Cl\u00e9s d\'APCA', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Polarit\u00e9:</strong> Comprend que le mode sombre (Dark Mode) est per\u00e7u diff\u00e9remment du mode clair.',
+        '<strong>Graisse de Police:</strong> Attribue des niveaux de contraste (Lc) sp\u00e9cifiques selon le poids typographique.',
+        '<strong>Lin\u00e9arit\u00e9:</strong> Corrige les impr\u00e9cisions math\u00e9matiques du mod\u00e8le de luminance relative de 2008.',
+      ],
+    },
+    { type: 'title', text: 'Niveaux APCA Recommand\u00e9s', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Lc 90+:</strong> Id\u00e9al pour les textes tr\u00e8s petits ou de faible graisse.',
+        '<strong>Lc 75:</strong> Le standard pour le texte de lecture principal (Body).',
+        '<strong>Lc 60:</strong> Minimum pour un contenu lisible de taille moyenne.',
+        '<strong>Lc 45:</strong> Minimum pour les \u00e9l\u00e9ments larges ou d\u00e9coratifs.',
+      ],
+    },
+  ],
+};

package/src/tool/readabilityCalculator/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ReadabilityCalculatorComponent from './component.astro';
+import ReadabilityCalculatorSEO from './seo.astro';
+import ReadabilityCalculatorBibliography from './bibliography.astro';
+import type { ReadabilityCalculatorUI } from './ui';
+
+export type ReadabilityCalculatorLocaleContent = ToolLocaleContent<ReadabilityCalculatorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const readabilityCalculator: DeveloperToolEntry<ReadabilityCalculatorUI> = {
+  id: 'readability-calculator',
+  icons: {
+    bg: 'mdi:eye-check',
+    fg: 'mdi:contrast-circle',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { ReadabilityCalculatorComponent, ReadabilityCalculatorSEO, ReadabilityCalculatorBibliography };
+
+export const READABILITY_CALCULATOR_TOOL: ToolDefinition = {
+  entry: readabilityCalculator,
+  Component: ReadabilityCalculatorComponent,
+  SEOComponent: ReadabilityCalculatorSEO,
+  BibliographyComponent: ReadabilityCalculatorBibliography,
+};

package/src/tool/readabilityCalculator/seo.astro

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

package/src/tool/readabilityCalculator/ui.ts

@@ -0,0 +1,27 @@
+export interface ReadabilityCalculatorUI extends Record<string, string> {
+  labelColors: string;
+  labelText: string;
+  labelBg: string;
+  labelTypo: string;
+  labelFontSize: string;
+  labelFontWeight: string;
+  labelCompare: string;
+  labelPreview: string;
+  labelApcaRecs: string;
+  labelBody: string;
+  labelSmall: string;
+  labelUi: string;
+  statusYes: string;
+  statusNo: string;
+  wcagAAA: string;
+  wcagAA: string;
+  wcagLarge: string;
+  wcagFail: string;
+  apcaExcellent: string;
+  apcaGood: string;
+  apcaMinimal: string;
+  apcaPoor: string;
+  previewText: string;
+  wcagRatioLabel: string;
+  apcaLcLabel: string;
+}

package/src/tool/svgSanitizer/bibliography.astro

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