@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,156 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { JsonFormatterUI } from '../ui';
+
+const slug = 'json-formatter';
+const title = 'Free Online JSON Formatter and Validator';
+const description =
+  'Free online tool to format, validate and repair JSON code. Beautify and format JSON. Detects syntax errors and improves code readability.';
+
+const faqData = [
+  {
+    question: 'Is my data safe when using this formatter?',
+    answer:
+      'Absolutely. All processing happens 100% in your browser (Client-Side). Your JSON data is never sent to any server, ensuring complete privacy for your data structures.',
+  },
+  {
+    question: "What causes an 'Invalid JSON' error?",
+    answer:
+      'It is usually caused by trailing commas at the end of an object, missing double quotes around keys, or invisible characters. Our tool highlights the exact line of the error so you can fix it.',
+  },
+  {
+    question: 'Can it repair broken JSON?',
+    answer:
+      'Our tool automatically tries to correct common errors such as unnecessary trailing commas or malformed character escapes, so the JSON becomes valid according to the RFC 8259 standard.',
+  },
+  {
+    question: 'Does it support very large JSON files?',
+    answer:
+      'Yes, the processing engine is optimised to handle complex data structures and large files without blocking the browser interface.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Paste your code',
+    text: 'Paste your unformatted or minified JSON into the main text area.',
+  },
+  {
+    name: 'Validate and Format',
+    text: 'The system will automatically analyse the code, highlighting syntax errors and applying indentation to improve readability.',
+  },
+  {
+    name: 'Choose a style',
+    text: 'Choose between an expanded (beautify) or compressed (minify) format depending on whether you need readability or space saving.',
+  },
+  {
+    name: 'Copy the result',
+    text: 'Click the copy button to take the perfectly validated JSON to your clipboard.',
+  },
+];
+
+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: 'en',
+};
+
+const ui: JsonFormatterUI = {
+  labelInput: 'Input (JSON)',
+  labelOutput: 'Output',
+  btnMinify: 'Minify',
+  btnBeautify: 'Beautify',
+  btnFix: 'Try to Fix',
+  btnCopy: 'Copy',
+  statusWaiting: 'Waiting for input...',
+  statusValid: 'Valid JSON',
+  statusInvalid: 'Invalid JSON',
+  toastCopied: 'Copied!',
+  toastFixed: 'JSON repaired (Preview)',
+  toastFixFailed: 'Could not repair automatically',
+  placeholder: 'Paste your JSON here...',
+};
+
+export const content: ToolLocaleContent<JsonFormatterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References and Standards',
+  bibliography: [
+    {
+      name: 'RFC 8259 – The JavaScript Object Notation (JSON) Data Interchange Format (IETF)',
+      url: 'https://datatracker.ietf.org/doc/html/rfc8259',
+    },
+    {
+      name: 'ECMA-404 – The JSON Data Interchange Syntax (Ecma International)',
+      url: 'https://www.ecma-international.org/publications-and-standards/standards/ecma-404/',
+    },
+    {
+      name: 'JSON.org – Introducing JSON',
+      url: 'https://www.json.org/json-en.html',
+    },
+    {
+      name: 'MDN Web Docs – JSON',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'JSON Validation and Formatting',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'JSON (JavaScript Object Notation) is the de facto standard for data exchange on the web. However, its strict syntax makes it prone to human errors when edited manually.',
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool allows you to validate the structure, format the code to improve its readability, and automatically repair common syntax errors.',
+    },
+    { type: 'grid', columns: 2 },
+    {
+      type: 'card',
+      title: 'Common Errors it Repairs',
+      html: "<ul><li><strong>Single Quotes:</strong> The JSON standard requires double quotes. The tool converts <code>'key': 'value'</code> to <code>\"key\": \"value\"</code>.</li><li><strong>Unquoted Keys:</strong> Detects JavaScript-style object keys and adds the necessary quotes.</li><li><strong>Trailing Commas:</strong> Removes commas at the end of objects or arrays (trailing commas) that break the strict parser.</li></ul>",
+    },
+    {
+      type: 'card',
+      title: 'Features',
+      html: '<ul><li><strong>Syntax Highlighting:</strong> Colours keys, strings, numbers and booleans to facilitate quick reading.</li><li><strong>Real-Time Validation:</strong> Instantly indicates whether the JSON is valid or shows the specific parsing error.</li><li><strong>Total Privacy:</strong> Processing happens 100% in your browser. No data is sent to external servers.</li></ul>',
+    },
+  ],
+};

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

@@ -0,0 +1,156 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { JsonFormatterUI } from '../ui';
+
+const slug = 'json-formatter';
+const title = 'Formateador y Validador JSON Online Gratuito';
+const description =
+  'Herramienta online gratuita para formatear, validar y reparar código JSON. Formatea y embellece JSON. Detecta errores de sintaxis y mejora la lectura del código';
+
+const faqData = [
+  {
+    question: '¿Son seguros mis datos al usar este formateador?',
+    answer:
+      'Totalmente. El procesamiento se realiza 100% en tu navegador (Client-Side). Tus datos JSON nunca se envían a ningún servidor, garantizando privacidad total para tus estructuras de datos.',
+  },
+  {
+    question: "¿Qué causa el error 'Invalid JSON'?",
+    answer:
+      'Suele deberse a comas sobrantes al final de un objeto, falta de comillas dobles en las llaves (keys) o caracteres invisibles. Nuestra herramienta resalta la línea exacta del error para que puedas corregirlo.',
+  },
+  {
+    question: '¿Puede reparar JSON dañado?',
+    answer:
+      'Nuestra herramienta intenta corregir errores comunes automáticamente, como comas finales innecesarias o escapes de caracteres mal formados, para que el JSON sea válido según el estándar RFC 8259.',
+  },
+  {
+    question: '¿Soporta archivos JSON muy grandes?',
+    answer:
+      'Sí, el motor de procesado está optimizado para manejar estructuras de datos complejas y archivos extensos sin bloquear la interfaz del navegador.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pegar el código',
+    text: 'Pega tu JSON desordenado o comprimido en el área de texto principal.',
+  },
+  {
+    name: 'Validar y Formatear',
+    text: 'El sistema analizará el código automáticamente, resaltando errores de sintaxis y aplicando sangrías para mejorar la lectura.',
+  },
+  {
+    name: 'Elegir estilo',
+    text: 'Puedes elegir entre un formato expandido (beautify) o comprimido (minify) según necesites legibilidad o ahorro de espacio.',
+  },
+  {
+    name: 'Copiar resultado',
+    text: 'Haz clic en el botón de copiar para llevarte el JSON perfectamente validado a tu 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((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: JsonFormatterUI = {
+  labelInput: 'Entrada (JSON)',
+  labelOutput: 'Resultado',
+  btnMinify: 'Minificar',
+  btnBeautify: 'Embellecer',
+  btnFix: 'Intentar Arreglar',
+  btnCopy: 'Copiar',
+  statusWaiting: 'Esperando entrada...',
+  statusValid: 'JSON Válido',
+  statusInvalid: 'JSON Inválido',
+  toastCopied: '¡Copiado!',
+  toastFixed: 'JSON reparado (Visualización)',
+  toastFixFailed: 'No se pudo reparar automáticamente',
+  placeholder: 'Pega tu JSON aquí...',
+};
+
+export const content: ToolLocaleContent<JsonFormatterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Estándares',
+  bibliography: [
+    {
+      name: 'RFC 8259 – The JavaScript Object Notation (JSON) Data Interchange Format (IETF)',
+      url: 'https://datatracker.ietf.org/doc/html/rfc8259',
+    },
+    {
+      name: 'ECMA-404 – The JSON Data Interchange Syntax (Ecma International)',
+      url: 'https://www.ecma-international.org/publications-and-standards/standards/ecma-404/',
+    },
+    {
+      name: 'JSON.org – Introducing JSON',
+      url: 'https://www.json.org/json-en.html',
+    },
+    {
+      name: 'MDN Web Docs – JSON',
+      url: 'https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/JSON',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Validación y Formato de JSON',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'JSON (JavaScript Object Notation) es el estándar de facto para el intercambio de datos en la web. Sin embargo, su sintaxis estricta lo hace propenso a errores humanos cuando se edita manualmente.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Esta herramienta permite validar la estructura, formatear el código para mejorar su legibilidad y reparar errores sintácticos comunes automáticamente.',
+    },
+    { type: 'grid', columns: 2 },
+    {
+      type: 'card',
+      title: 'Errores Comunes que Repara',
+      html: '<ul><li><strong>Comillas Simples:</strong> El estándar JSON exige comillas dobles. La herramienta convierte <code>\'clave\': \'valor\'</code> a <code>"clave": "valor"</code>.</li><li><strong>Claves sin Comillas:</strong> Detecta claves de objetos estilo JavaScript y les añade las comillas necesarias.</li><li><strong>Comas Sobrantes:</strong> Elimina las comas al final de objetos o arrays (trailing commas) que rompen el parser estricto.</li></ul>',
+    },
+    {
+      type: 'card',
+      title: 'Características',
+      html: '<ul><li><strong>Resaltado de Sintaxis:</strong> Colorea claves, cadenas, números y booleanos para facilitar la lectura rápida.</li><li><strong>Validación en Tiempo Real:</strong> Indica instantáneamente si el JSON es válido o muestra el error específico de análisis.</li><li><strong>Privacidad Total:</strong> El procesamiento se realiza 100% en tu navegador. Ningún dato se envía a servidores externos.</li></ul>',
+    },
+  ],
+};

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

@@ -0,0 +1,156 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { JsonFormatterUI } from '../ui';
+
+const slug = 'json-formatter';
+const title = 'Formateur et Validateur JSON Gratuit en Ligne';
+const description =
+  'Outil en ligne gratuit pour formater, valider et réparer du code JSON. Embellissez et formatez du JSON. Détecte les erreurs de syntaxe et améliore la lisibilité du code.';
+
+const faqData = [
+  {
+    question: 'Mes données sont-elles sécurisées avec ce formateur ?',
+    answer:
+      "Absolument. Tout le traitement s'effectue à 100% dans votre navigateur (côté client). Vos données JSON ne sont jamais envoyées à un serveur, garantissant une confidentialité totale.",
+  },
+  {
+    question: "Qu'est-ce qui provoque une erreur 'Invalid JSON' ?",
+    answer:
+      "Elle est généralement causée par des virgules en fin d'objet, l'absence de guillemets doubles autour des clés, ou des caractères invisibles. Notre outil met en évidence la ligne exacte de l'erreur pour que vous puissiez la corriger.",
+  },
+  {
+    question: 'Peut-il réparer du JSON endommagé ?',
+    answer:
+      "Notre outil tente de corriger automatiquement les erreurs courantes telles que les virgules finales inutiles ou les échappements de caractères mal formés, afin que le JSON soit valide selon la norme RFC 8259.",
+  },
+  {
+    question: 'Prend-il en charge les fichiers JSON très volumineux ?',
+    answer:
+      "Oui, le moteur de traitement est optimisé pour gérer des structures de données complexes et des fichiers volumineux sans bloquer l'interface du navigateur.",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Coller le code',
+    text: 'Collez votre JSON désordonné ou compressé dans la zone de texte principale.',
+  },
+  {
+    name: 'Valider et Formater',
+    text: "Le système analysera automatiquement le code, mettra en évidence les erreurs de syntaxe et appliquera l'indentation pour améliorer la lisibilité.",
+  },
+  {
+    name: 'Choisir un style',
+    text: "Choisissez entre un format développé (embellir) ou compressé (minifier) selon que vous avez besoin de lisibilité ou d'économie d'espace.",
+  },
+  {
+    name: 'Copier le résultat',
+    text: 'Cliquez sur le bouton Copier pour récupérer le JSON parfaitement validé dans votre 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((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: JsonFormatterUI = {
+  labelInput: 'Entrée (JSON)',
+  labelOutput: 'Résultat',
+  btnMinify: 'Minifier',
+  btnBeautify: 'Embellir',
+  btnFix: 'Essayer de Réparer',
+  btnCopy: 'Copier',
+  statusWaiting: "En attente d'entrée...",
+  statusValid: 'JSON Valide',
+  statusInvalid: 'JSON Invalide',
+  toastCopied: 'Copié !',
+  toastFixed: 'JSON réparé (Aperçu)',
+  toastFixFailed: 'Impossible de réparer automatiquement',
+  placeholder: 'Collez votre JSON ici...',
+};
+
+export const content: ToolLocaleContent<JsonFormatterUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et Normes',
+  bibliography: [
+    {
+      name: 'RFC 8259 – The JavaScript Object Notation (JSON) Data Interchange Format (IETF)',
+      url: 'https://datatracker.ietf.org/doc/html/rfc8259',
+    },
+    {
+      name: 'ECMA-404 – The JSON Data Interchange Syntax (Ecma International)',
+      url: 'https://www.ecma-international.org/publications-and-standards/standards/ecma-404/',
+    },
+    {
+      name: 'JSON.org – Introducing JSON',
+      url: 'https://www.json.org/json-en.html',
+    },
+    {
+      name: 'MDN Web Docs – JSON',
+      url: 'https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/JSON',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Validation et Formatage de JSON',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "JSON (JavaScript Object Notation) est le standard de facto pour l'échange de données sur le web. Cependant, sa syntaxe stricte le rend sujet aux erreurs humaines lors d'une édition manuelle.",
+    },
+    {
+      type: 'paragraph',
+      html: "Cet outil vous permet de valider la structure, de formater le code pour améliorer sa lisibilité et de réparer automatiquement les erreurs de syntaxe courantes.",
+    },
+    { type: 'grid', columns: 2 },
+    {
+      type: 'card',
+      title: 'Erreurs Courantes Réparées',
+      html: "<ul><li><strong>Guillemets simples :</strong> La norme JSON exige des guillemets doubles. L'outil convertit <code>'clé': 'valeur'</code> en <code>\"clé\": \"valeur\"</code>.</li><li><strong>Clés sans guillemets :</strong> Détecte les clés d'objets de style JavaScript et ajoute les guillemets nécessaires.</li><li><strong>Virgules en trop :</strong> Supprime les virgules en fin d'objets ou de tableaux (trailing commas) qui cassent le parseur strict.</li></ul>",
+    },
+    {
+      type: 'card',
+      title: 'Fonctionnalités',
+      html: '<ul><li><strong>Coloration Syntaxique :</strong> Colorise les clés, chaînes, nombres et booléens pour faciliter la lecture rapide.</li><li><strong>Validation en Temps Réel :</strong> Indique instantanément si le JSON est valide ou affiche l\'erreur d\'analyse spécifique.</li><li><strong>Confidentialité Totale :</strong> Le traitement s\'effectue à 100% dans votre navigateur. Aucune donnée n\'est envoyée à des serveurs externes.</li></ul>',
+    },
+  ],
+};

package/src/tool/jsonFormatter/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import JsonFormatterComponent from './component.astro';
+import JsonFormatterSEO from './seo.astro';
+import JsonFormatterBibliography from './bibliography.astro';
+
+import type { JsonFormatterUI } from './ui';
+
+export type JsonFormatterLocaleContent = ToolLocaleContent<JsonFormatterUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const jsonFormatter: DeveloperToolEntry<JsonFormatterUI> = {
+  id: 'json-formatter',
+  icons: {
+    bg: 'mdi:code-json',
+    fg: 'mdi:code-braces',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { JsonFormatterComponent, JsonFormatterSEO, JsonFormatterBibliography };
+
+export const JSON_FORMATTER_TOOL: ToolDefinition = {
+  entry: jsonFormatter,
+  Component: JsonFormatterComponent,
+  SEOComponent: JsonFormatterSEO,
+  BibliographyComponent: JsonFormatterBibliography,
+};

package/src/tool/jsonFormatter/seo.astro

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

package/src/tool/jsonFormatter/ui.ts

@@ -0,0 +1,15 @@
+export interface JsonFormatterUI extends Record<string, string> {
+  labelInput: string;
+  labelOutput: string;
+  btnMinify: string;
+  btnBeautify: string;
+  btnFix: string;
+  btnCopy: string;
+  statusWaiting: string;
+  statusValid: string;
+  statusInvalid: string;
+  toastCopied: string;
+  toastFixed: string;
+  toastFixFailed: string;
+  placeholder: string;
+}

package/src/tool/keycode/bibliography.astro

@@ -0,0 +1,14 @@
+---
+import { Bibliography as SharedBibliography } 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 && <SharedBibliography links={content.bibliography} />}