@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,129 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ConversorExcelCsvHtmlUI } from '../ui';
+
+const slug = 'excel-csv-html-table-converter';
+const title = 'Excel and CSV to HTML Table Converter Code Generator';
+const description = 'Convert your Excel or CSV data to clean, semantic HTML tables instantly. Free tool for developers and content creators.';
+
+const faqData = [
+  {
+    question: 'How do I convert an Excel file (.xlsx) to HTML?',
+    answer: 'First, open your file in Excel and save it as CSV (comma-delimited). Then, upload that CSV file to our tool or paste its content to get the HTML table code.',
+  },
+  {
+    question: 'Does the generated code include CSS styles?',
+    answer: 'The generator produces clean HTML with optional classes for borders and zebra stripes. Final visual styles depend on your website\'s own CSS, ensuring perfect integration.',
+  },
+  {
+    question: 'Can I upload very large CSV files?',
+    answer: 'Yes, our tool processes data locally in your browser. This means it\'s very fast and secure, as your data never travels over the internet.',
+  },
+  {
+    question: 'Is it compatible with Google Sheets?',
+    answer: 'Absolutely. In Google Sheets, go to File > Download > Comma separated values (.csv) and use that file with our tool.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Prepare your data',
+    text: 'Have your Excel or CSV file ready. Make sure the data is clean.',
+  },
+  {
+    name: 'Load the data',
+    text: 'Paste the CSV text in the input area or drag the file directly to the converter.',
+  },
+  {
+    name: 'Configure the table',
+    text: 'Choose whether you want to use the first row as a header and if you want basic styles.',
+  },
+  {
+    name: 'Copy the code',
+    text: 'Switch to the "HTML Code" tab and copy the result to paste on your website.',
+  },
+];
+
+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: 'USD' },
+  inLanguage: 'en',
+};
+
+const ui: ConversorExcelCsvHtmlUI = {
+  csvInputLabel: 'Paste your CSV here',
+  csvInputPlaceholder: 'Name,Age,City\nJohn,25,Madrid\nAna,30,Barcelona',
+  uploadLabel: 'Or upload your file (CSV)',
+  dragDropLabel: 'Drag and drop your file here',
+  headerCheckboxLabel: 'Use first row as header',
+  bordersCheckboxLabel: 'Add borders',
+  stripeCheckboxLabel: 'Zebra stripes',
+  previewTabLabel: 'Preview',
+  codeTabLabel: 'HTML Code',
+  emptyStateLabel: 'Enter data to see the table',
+  copyButtonLabel: 'Copy Code',
+  copiedLabel: 'Copied!',
+};
+
+export const content: ToolLocaleContent<ConversorExcelCsvHtmlUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'Resources on HTML Tables and Data Formats',
+  bibliography: [
+    { name: 'W3C: HTML Tables', url: 'https://www.w3.org/WAI/tutorials/tables/' },
+    { name: 'MDN: HTML table element', url: 'https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table' },
+    { name: 'RFC 4180: CSV Format', url: 'https://tools.ietf.org/html/rfc4180' },
+    { name: 'Google Sheets: Download your data', url: 'https://support.google.com/docs/answer/183965' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Convert Excel and CSV to HTML Tables Easily', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'In modern web development, presenting tabular data is one of the most effective ways to convey structured information. However, manually converting data from a spreadsheet like <strong>Excel</strong> or a <strong>CSV</strong> file to HTML <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code>, and <code>&lt;td&gt;</code> tags is tedious and error-prone.',
+    },
+    { type: 'title', text: 'Why use semantic HTML tables?', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Accessibility:</strong> Screen readers can interpret the structure and help users with visual disabilities.',
+        '<strong>SEO:</strong> Search engines index cell content, improving your data\'s ranking.',
+        '<strong>Responsiveness:</strong> With some CSS, HTML tables can adapt to mobile devices.',
+        '<strong>Maintainability:</strong> It\'s much easier to edit data in HTML than to regenerate an entire image.',
+      ],
+    },
+    { type: 'title', text: 'How the Excel to HTML Converter Works', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Our utility uses a native text parser that processes comma-separated files (CSV). Most spreadsheet programs, including Microsoft Excel, Google Sheets, and LibreOffice Calc, allow you to export your data in CSV format.',
+    },
+  ],
+};

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

@@ -0,0 +1,129 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ConversorExcelCsvHtmlUI } from '../ui';
+
+const slug = 'conversor-excel-csv-html-tabla';
+const title = 'Conversor de Excel y CSV a Tabla HTML Generador de Código';
+const description = 'Convierte tus datos de Excel o CSV a tablas HTML semánticas y limpias al instante. Herramienta gratuita para desarrolladores y creadores de contenido.';
+
+const faqData = [
+  {
+    question: '¿Cómo convierto un archivo Excel (.xlsx) a HTML?',
+    answer: 'Primero, abre tu archivo en Excel y guárdalo como CSV (delimitado por comas). Luego, sube ese archivo CSV a nuestra herramienta o pega su contenido para obtener el código HTML de la tabla.',
+  },
+  {
+    question: '¿El código generado incluye estilos CSS?',
+    answer: 'El generador produce HTML limpio con clases opcionales para bordes y filas cebra. Los estilos visuales finales dependerán del CSS de tu propio sitio web, asegurando una integración perfecta.',
+  },
+  {
+    question: '¿Puedo subir archivos CSV muy grandes?',
+    answer: 'Sí, nuestra herramienta procesa los datos localmente en tu navegador. Esto significa que es muy rápida y segura, ya que tus datos nunca viajan por internet.',
+  },
+  {
+    question: '¿Es compatible con Google Sheets?',
+    answer: 'Totalmente. En Google Sheets, ve a Archivo > Descargar > Valores separados por comas (.csv) y usa ese archivo con nuestra herramienta.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Prepara tus datos',
+    text: 'Ten tu archivo Excel o CSV listo. Asegúrate de que los datos estén limpios.',
+  },
+  {
+    name: 'Carga los datos',
+    text: 'Pega el texto CSV en el área de entrada o arrastra el archivo directamente al convertidor.',
+  },
+  {
+    name: 'Configura la tabla',
+    text: 'Elige si quieres usar la primera fila como encabezado y si deseas estilos básicos.',
+  },
+  {
+    name: 'Copia el código',
+    text: 'Cambia a la pestaña de "Código HTML" y copia el resultado para pegarlo en tu web.',
+  },
+];
+
+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: ConversorExcelCsvHtmlUI = {
+  csvInputLabel: 'Pega tu CSV aquí',
+  csvInputPlaceholder: 'Nombre,Edad,Ciudad\nJuan,25,Madrid\nAna,30,Barcelona',
+  uploadLabel: 'O sube tu archivo (CSV)',
+  dragDropLabel: 'Arrastra y suelta tu archivo aquí',
+  headerCheckboxLabel: 'Primera fila como encabezado',
+  bordersCheckboxLabel: 'Añadir bordes',
+  stripeCheckboxLabel: 'Filas cebra',
+  previewTabLabel: 'Previsualización',
+  codeTabLabel: 'Código HTML',
+  emptyStateLabel: 'Introduce datos para ver la tabla',
+  copyButtonLabel: 'Copiar Código',
+  copiedLabel: '¡Copiado!',
+};
+
+export const content: ToolLocaleContent<ConversorExcelCsvHtmlUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Recursos sobre Tablas HTML y Formatos de Datos',
+  bibliography: [
+    { name: 'W3C: HTML Tables', url: 'https://www.w3.org/WAI/tutorials/tables/' },
+    { name: 'MDN: HTML table element', url: 'https://developer.mozilla.org/es/docs/Web/HTML/Element/table' },
+    { name: 'RFC 4180: CSV Format', url: 'https://tools.ietf.org/html/rfc4180' },
+    { name: 'Google Sheets: Descargar datos', url: 'https://support.google.com/docs/answer/183965' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Convertir Excel y CSV a Tabla HTML de Forma Fácil', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'En el desarrollo web moderno, la presentación de datos tabulares sigue siendo una de las formas más efectivas de transmitir información estructurada. Sin embargo, pasar manualmente los datos desde una hoja de cálculo como <strong>Excel</strong> o un archivo <strong>CSV</strong> a etiquetas HTML <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code> y <code>&lt;td&gt;</code> es una tarea tediosa y propensa a errores.',
+    },
+    { type: 'title', text: '¿Por qué usar tablas HTML semánticas?', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Accesibilidad:</strong> Los lectores de pantalla pueden interpretar la estructura y ayudar a usuarios con discapacidad visual.',
+        '<strong>SEO:</strong> Los motores de búsqueda indexan el contenido de las celdas, mejorando el posicionamiento de tus datos.',
+        '<strong>Responsividad:</strong> Con un poco de CSS, las tablas HTML pueden adaptarse a dispositivos móviles.',
+        '<strong>Mantenimiento:</strong> Es mucho más fácil editar un dato en el HTML que regenerar una imagen completa.',
+      ],
+    },
+    { type: 'title', text: 'Cómo funciona el Conversor de Excel a HTML', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Nuestra utilidad utiliza un analizador de texto nativo que procesa archivos delimitados por comas (CSV). La mayoría de los programas de hojas de cálculo, incluidos Microsoft Excel, Google Sheets y LibreOffice Calc, permiten exportar sus datos en formato CSV.',
+    },
+  ],
+};

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

@@ -0,0 +1,129 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { ConversorExcelCsvHtmlUI } from '../ui';
+
+const slug = 'convertisseur-excel-csv-tableau-html';
+const title = 'Convertisseur Excel et CSV en Tableau HTML Générateur de Code';
+const description = 'Convertissez vos données Excel ou CSV en tableaux HTML propres et sémantiques instantanément. Outil gratuit pour développeurs et créateurs de contenu.';
+
+const faqData = [
+  {
+    question: 'Comment convertir un fichier Excel (.xlsx) en HTML?',
+    answer: 'D\'abord, ouvrez votre fichier dans Excel et enregistrez-le en CSV (délimité par des virgules). Ensuite, téléchargez ce fichier CSV sur notre outil ou collez son contenu pour obtenir le code de tableau HTML.',
+  },
+  {
+    question: 'Le code généré inclut-il des styles CSS?',
+    answer: 'Le générateur produit du HTML propre avec des classes optionnelles pour les bordures et les rayures zébrées. Les styles visuels finaux dépendent de votre propre CSS, assurant une intégration parfaite.',
+  },
+  {
+    question: 'Puis-je télécharger des fichiers CSV très volumineux?',
+    answer: 'Oui, notre outil traite les données localement dans votre navigateur. Cela signifie qu\'il est très rapide et sécurisé, car vos données ne voyagent jamais sur Internet.',
+  },
+  {
+    question: 'Est-ce compatible avec Google Sheets?',
+    answer: 'Absolument. Dans Google Sheets, allez à Fichier > Télécharger > Valeurs séparées par des virgules (.csv) et utilisez ce fichier avec notre outil.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Préparez vos données',
+    text: 'Ayez votre fichier Excel ou CSV prêt. Assurez-vous que les données sont propres.',
+  },
+  {
+    name: 'Chargez les données',
+    text: 'Collez le texte CSV dans la zone de saisie ou faites glisser le fichier directement dans le convertisseur.',
+  },
+  {
+    name: 'Configurez le tableau',
+    text: 'Choisissez si vous souhaitez utiliser la première ligne comme en-tête et si vous souhaitez des styles de base.',
+  },
+  {
+    name: 'Copiez le code',
+    text: 'Basculez vers l\'onglet "Code HTML" et copiez le résultat à coller sur votre site web.',
+  },
+];
+
+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: ConversorExcelCsvHtmlUI = {
+  csvInputLabel: 'Collez votre CSV ici',
+  csvInputPlaceholder: 'Nom,Âge,Ville\nJean,25,Madrid\nAna,30,Barcelone',
+  uploadLabel: 'Ou téléchargez votre fichier (CSV)',
+  dragDropLabel: 'Glissez-déposez votre fichier ici',
+  headerCheckboxLabel: 'Utiliser la première ligne comme en-tête',
+  bordersCheckboxLabel: 'Ajouter des bordures',
+  stripeCheckboxLabel: 'Rayures zébrées',
+  previewTabLabel: 'Aperçu',
+  codeTabLabel: 'Code HTML',
+  emptyStateLabel: 'Entrez des données pour voir le tableau',
+  copyButtonLabel: 'Copier le code',
+  copiedLabel: 'Copié!',
+};
+
+export const content: ToolLocaleContent<ConversorExcelCsvHtmlUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquemment Posées',
+  faq: faqData,
+  bibliographyTitle: 'Ressources sur les Tableaux HTML et les Formats de Données',
+  bibliography: [
+    { name: 'W3C: Tableaux HTML', url: 'https://www.w3.org/WAI/tutorials/tables/' },
+    { name: 'MDN: Élément de tableau HTML', url: 'https://developer.mozilla.org/fr/docs/Web/HTML/Element/table' },
+    { name: 'RFC 4180: Format CSV', url: 'https://tools.ietf.org/html/rfc4180' },
+    { name: 'Google Sheets: Télécharger vos données', url: 'https://support.google.com/docs/answer/183965' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Convertir facilement Excel et CSV en Tableaux HTML', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Dans le développement web moderne, la présentation de données tabulaires est l\'une des façons les plus efficaces de transmettre des informations structurées. Cependant, convertir manuellement les données d\'une feuille de calcul comme <strong>Excel</strong> ou un fichier <strong>CSV</strong> en balises HTML <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code> et <code>&lt;td&gt;</code> est une tâche fastidieuse et sujette à erreurs.',
+    },
+    { type: 'title', text: 'Pourquoi utiliser les tableaux HTML sémantiques?', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>Accessibilité:</strong> Les lecteurs d\'écran peuvent interpréter la structure et aider les utilisateurs malvoyants.',
+        '<strong>SEO:</strong> Les moteurs de recherche indexent le contenu des cellules, améliorant le classement de vos données.',
+        '<strong>Réactivité:</strong> Avec un peu de CSS, les tableaux HTML peuvent s\'adapter aux appareils mobiles.',
+        '<strong>Maintenabilité:</strong> Il est beaucoup plus facile de modifier les données en HTML que de régénérer une image complète.',
+      ],
+    },
+    { type: 'title', text: 'Comment fonctionne le convertisseur Excel en HTML', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Notre utilitaire utilise un analyseur de texte natif qui traite les fichiers séparés par des virgules (CSV). La plupart des programmes de feuilles de calcul, y compris Microsoft Excel, Google Sheets et LibreOffice Calc, vous permettent d\'exporter vos données au format CSV.',
+    },
+  ],
+};

package/src/tool/conversorExcelCsvHtml/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import ConversorExcelCsvHtmlComponent from './component.astro';
+import ConversorExcelCsvHtmlSEO from './seo.astro';
+import ConversorExcelCsvHtmlBibliography from './bibliography.astro';
+import type { ConversorExcelCsvHtmlUI } from './ui';
+
+export type ConversorExcelCsvHtmlLocaleContent = ToolLocaleContent<ConversorExcelCsvHtmlUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const conversorExcelCsvHtml: DeveloperToolEntry<ConversorExcelCsvHtmlUI> = {
+  id: 'conversor-excel-csv-html',
+  icons: {
+    bg: 'mdi:table',
+    fg: 'mdi:file-delimited',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { ConversorExcelCsvHtmlComponent, ConversorExcelCsvHtmlSEO, ConversorExcelCsvHtmlBibliography };
+
+export const CONVERSOR_EXCEL_CSV_HTML_TOOL: ToolDefinition = {
+  entry: conversorExcelCsvHtml,
+  Component: ConversorExcelCsvHtmlComponent,
+  SEOComponent: ConversorExcelCsvHtmlSEO,
+  BibliographyComponent: ConversorExcelCsvHtmlBibliography,
+};

package/src/tool/conversorExcelCsvHtml/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } 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 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/conversorExcelCsvHtml/ui.ts

@@ -0,0 +1,14 @@
+export interface ConversorExcelCsvHtmlUI {
+  csvInputLabel: string;
+  csvInputPlaceholder: string;
+  uploadLabel: string;
+  dragDropLabel: string;
+  headerCheckboxLabel: string;
+  bordersCheckboxLabel: string;
+  stripeCheckboxLabel: string;
+  previewTabLabel: string;
+  codeTabLabel: string;
+  emptyStateLabel: string;
+  copyButtonLabel: string;
+  copiedLabel: string;
+}

package/src/tool/cronGenerator/bibliography.astro

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