@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode';
+const title = 'Visualizador de Códigos de Teclado Online. KeyCode Inspector';
+const description =
+  'Herramienta online gratuita para ver en tiempo real el event.key, event.code, event.which y location de cualquier tecla de tu teclado. Genera snippets de código JavaScript listos para usar.';
+
+const faqData = [
+  {
+    question: '¿Qué diferencia hay entre event.key y event.code?',
+    answer:
+      'event.code representa la tecla física del teclado, independiente del idioma configurado. event.key representa el carácter generado, que puede cambiar si pulsas Shift o usas otro idioma. Para controles de juego usa code; para texto y atajos semánticos, usa key.',
+  },
+  {
+    question: '¿Qué es event.which y por qué aparece como obsoleto?',
+    answer:
+      'event.which es una propiedad heredada que devuelve un código numérico ASCII de la tecla. Está marcada como obsoleta (deprecated) en los estándares modernos porque event.key y event.code la reemplazan con información más precisa y legible. Se muestra en esta herramienta con fines educativos.',
+  },
+  {
+    question: '¿Qué significa la propiedad location?',
+    answer:
+      'La propiedad location indica dónde está físicamente la tecla en el teclado: Standard (posición normal), Left (tecla modificadora izquierda), Right (tecla modificadora derecha) o Numpad (teclado numérico). Es útil para distinguir entre el CTRL izquierdo y el derecho, por ejemplo.',
+  },
+  {
+    question: '¿Funciona con teclados internacionales y distribuciones no QWERTY?',
+    answer:
+      'Sí. La herramienta muestra exactamente lo que reporta el navegador para tu configuración de teclado. event.code siempre devolverá el nombre QWERTY de la posición física, mientras que event.key mostrará el carácter real según tu idioma.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pulsar cualquier tecla',
+    text: 'Con el foco en la página, pulsa cualquier tecla del teclado para ver instantáneamente toda la información del evento.',
+  },
+  {
+    name: 'Copiar valores individuales',
+    text: 'Haz clic en el botón de copiar junto a cada propiedad (event.key, event.code, etc.) para copiar ese valor concreto al portapapeles.',
+  },
+  {
+    name: 'Usar los snippets de código',
+    text: 'En la sección "Snippets Rápidos" encontrarás bloques de código JavaScript listos para pegar directamente en tu proyecto.',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Presiona una tecla',
+  promptSubtitle: 'Cualquier tecla de tu teclado para ver su código',
+  snippetsTitle: 'Snippets Rápidos',
+  btnCopy: 'Copiar',
+  locationStandard: 'Standard',
+  locationLeft: 'Left',
+  locationRight: 'Right',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Estándares',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/es/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'UI Events Specification (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – KeyboardEvent.code values',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Entendiendo los eventos de teclado en JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Cuando un usuario pulsa una tecla, el navegador dispara tres eventos: <code>keydown</code>, <code>keypress</code> y <code>keyup</code>. Cada uno expone propiedades con información sobre la tecla pulsada, pero no todas son equivalentes ni recomendadas.',
+    },
+    {
+      type: 'title',
+      text: 'Propiedades clave del evento',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — La tecla física',
+      html: '<p>Devuelve el identificador de la <strong>posición física</strong> de la tecla en el teclado, usando nomenclatura QWERTY. Por ejemplo, la tecla "A" en un teclado AZERTY devuelve <code>KeyQ</code>. Ideal para controles de videojuegos donde importa la posición, no el carácter.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — El carácter generado',
+      html: '<p>Devuelve el <strong>valor del carácter</strong> generado según el idioma y modificadores activos. Si pulsas Shift+A devuelve <code>"A"</code>; sin Shift devuelve <code>"a"</code>. Para teclas especiales devuelve nombres como <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Cuándo usar cada propiedad',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Usa <code>event.code</code> para controles de juego (WASD independiente del idioma) y <code>event.key</code> para detectar caracteres específicos o atajos de teclado semánticos como <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Las propiedades <code>event.which</code> y <code>event.keyCode</code> están oficialmente <strong>obsoletas</strong> según el estándar W3C. Aunque los navegadores modernos las siguen soportando por compatibilidad, no deben usarse en código nuevo.',
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode';
+const title = 'Visualiseur de codes clavier en ligne. KeyCode Inspector';
+const description =
+  'Outil en ligne gratuit pour voir en temps réel le event.key, event.code, event.which et la location de n\'importe quelle touche de clavier. Génère des extraits de code JavaScript prêts à l\'emploi.';
+
+const faqData = [
+  {
+    question: 'Quelle est la différence entre event.key et event.code ?',
+    answer:
+      'event.code représente la touche physique du clavier, indépendamment de la langue configurée. event.key représente le caractère généré, qui peut changer si vous appuyez sur Shift ou utilisez une autre langue. Utilisez code pour les contrôles de jeu ; utilisez key pour la saisie de texte et les raccourcis sémantiques.',
+  },
+  {
+    question: 'Qu\'est-ce que event.which et pourquoi est-il déprécié ?',
+    answer:
+      'event.which est une propriété héritée qui renvoie un code ASCII numérique de la touche. Elle est marquée comme dépréciée dans les standards modernes car event.key et event.code la remplacent avec des informations plus précises et lisibles. Elle est affichée dans cet outil à des fins éducatives.',
+  },
+  {
+    question: 'Que signifie la propriété location ?',
+    answer:
+      'La propriété location indique où la touche est physiquement située sur le clavier : Standard (position normale), Left (modificateur gauche), Right (modificateur droit) ou Numpad (pavé numérique). Elle est utile pour distinguer la touche CTRL gauche de la droite, par exemple.',
+  },
+  {
+    question: 'Fonctionne-t-il avec les claviers internationaux et les dispositions non-QWERTY ?',
+    answer:
+      'Oui. L\'outil affiche exactement ce que le navigateur signale pour votre configuration de clavier. event.code renverra toujours le nom QWERTY de la position physique, tandis que event.key affichera le caractère réel selon votre langue.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Appuyer sur n\'importe quelle touche',
+    text: 'Avec le focus sur la page, appuyez sur n\'importe quelle touche du clavier pour voir instantanément toutes les informations de l\'événement.',
+  },
+  {
+    name: 'Copier les valeurs individuelles',
+    text: 'Cliquez sur le bouton de copie à côté de chaque propriété (event.key, event.code, etc.) pour copier cette valeur spécifique dans le presse-papiers.',
+  },
+  {
+    name: 'Utiliser les extraits de code',
+    text: 'Dans la section "Extraits rapides", vous trouverez des blocs de code JavaScript prêts à coller directement dans votre projet.',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Appuyez sur une touche',
+  promptSubtitle: 'N\'importe quelle touche de votre clavier pour voir son code',
+  snippetsTitle: 'Extraits rapides',
+  btnCopy: 'Copier',
+  locationStandard: 'Standard',
+  locationLeft: 'Left',
+  locationRight: 'Right',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et standards',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/fr/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'Spécification UI Events (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – Valeurs de KeyboardEvent.code',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Comprendre les événements clavier en JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Lorsqu\'un utilisateur appuie sur une touche, le navigateur déclenche trois événements : <code>keydown</code>, <code>keypress</code> et <code>keyup</code>. Chacun expose des propriétés avec des informations sur la touche pressée, mais elles ne sont pas toutes équivalentes ni recommandées.',
+    },
+    {
+      type: 'title',
+      text: 'Propriétés clés de l\'événement',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — La touche physique',
+      html: '<p>Retourne l\'identifiant de la <strong>position physique</strong> de la touche sur le clavier, en utilisant la nomenclature QWERTY. Par exemple, la touche "A" sur un clavier AZERTY retourne <code>KeyQ</code>. Idéal pour les contrôles de jeu où la position importe, pas le caractère.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — Le caractère généré',
+      html: '<p>Retourne la <strong>valeur du caractère</strong> généré selon la langue et les modificateurs actifs. Appuyer sur Shift+A retourne <code>"A"</code> ; sans Shift retourne <code>"a"</code>. Pour les touches spéciales, retourne des noms comme <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Quand utiliser chaque propriété',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Utilisez <code>event.code</code> pour les contrôles de jeu (WASD indépendamment de la langue) et <code>event.key</code> pour détecter des caractères spécifiques ou des raccourcis sémantiques comme <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Les propriétés <code>event.which</code> et <code>event.keyCode</code> sont officiellement <strong>dépréciées</strong> selon le standard W3C. Bien que les navigateurs modernes continuent de les supporter par compatibilité, elles ne doivent pas être utilisées dans du nouveau code.',
+    },
+  ],
+};

package/src/tool/keycode/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import KeycodeComponent from './component.astro';
+import KeycodeSEO from './seo.astro';
+import KeycodeBibliography from './bibliography.astro';
+
+import type { KeycodeUI } from './ui';
+
+export type KeycodeLocaleContent = ToolLocaleContent<KeycodeUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const keycode: DeveloperToolEntry<KeycodeUI> = {
+  id: 'keycode',
+  icons: {
+    bg: 'mdi:keyboard-outline',
+    fg: 'mdi:code-braces',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { KeycodeComponent, KeycodeSEO, KeycodeBibliography };
+
+export const KEYCODE_TOOL: ToolDefinition = {
+  entry: keycode,
+  Component: KeycodeComponent,
+  SEOComponent: KeycodeSEO,
+  BibliographyComponent: KeycodeBibliography,
+};

package/src/tool/keycode/seo.astro

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

package/src/tool/keycode/ui.ts

@@ -0,0 +1,10 @@
+export interface KeycodeUI extends Record<string, string> {
+  promptTitle: string;
+  promptSubtitle: string;
+  snippetsTitle: string;
+  btnCopy: string;
+  locationStandard: string;
+  locationLeft: string;
+  locationRight: string;
+  locationNumpad: string;
+}

package/src/tool/llmCostCalculator/bibliography.astro

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