@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,176 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PlaceholderGeneratorUI } from '../ui';
+
+const slug = 'generador-imagenes-placeholder';
+const title = 'Generador de Imágenes Placeholder. Mockups Rápidos Online';
+const description =
+  'Crea imágenes de relleno personalizadas para tus diseños web. Ajusta resolución, fondo, texto y exporta en PNG, WebP o JPEG en milisegundos.';
+
+const faqData = [
+  {
+    question: '¿Qué es una imagen placeholder?',
+    answer:
+      'Una imagen placeholder o de relleno es un gráfico temporal utilizado en diseño web y maquetación para reservar el espacio donde irá una imagen definitiva. Ayudan a visualizar la estructura de una página antes de tener el contenido final.',
+  },
+  {
+    question: '¿Puedo usar cualquier resolución en el generador?',
+    answer:
+      'Sí, puedes introducir cualquier valor numérico para el ancho y el alto. El generador creará un lienzo con las dimensiones exactas solicitadas, perfecto para cuadrículas estrictas o banners publicitarios específicos.',
+  },
+  {
+    question: '¿En qué formato se descargan las imágenes?',
+    answer:
+      'Por defecto, las imágenes se generan en WebP para una compresión óptima, pero puedes elegir descargarlas en formato PNG si buscas mantener la máxima calidad sin pérdida, o JPEG para compatibilidad tradicional.',
+  },
+  {
+    question: '¿Se procesa esto en algún servidor?',
+    answer:
+      'No, todo el renderizado de la imagen se genera instantáneamente en la memoria virtual (Canvas) de tu propio navegador. Es instantáneo y no requiere enviar datos a través de la red.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Establecer dimensiones',
+    text: 'Introduce los valores de ancho y alto directamente o haz clic en uno de los presets (FHD, HD, Instagram, etc.) para rellenarlos automáticamente.',
+  },
+  {
+    name: 'Configurar colores y texto',
+    text: 'Elige el color de fondo y de texto usando los selectores nativos o escribiendo un código hexadecimal. Opcionalmente, añade texto personalizado para reemplazar la etiqueta de dimensiones predeterminada.',
+  },
+  {
+    name: 'Seleccionar tipografía y formato',
+    text: 'Escoge la familia tipográfica y el tamaño de fuente. Selecciona el formato de salida (WebP, PNG o JPEG) según tus necesidades.',
+  },
+  {
+    name: 'Descargar la imagen',
+    text: 'Haz clic en el botón Descargar para guardar el placeholder generado directamente en tu dispositivo.',
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Dimensiones Rápidas',
+  labelWidth: 'Ancho (px)',
+  labelHeight: 'Alto (px)',
+  labelBgColor: 'Fondo',
+  labelTextColor: 'Texto',
+  labelCustomText: 'Texto Personalizado (Opcional)',
+  placeholderCustomText: 'Ej: Banner Hero',
+  labelFontFamily: 'Tipografía',
+  labelFontSize: 'Tamaño Base',
+  fontSizeAuto: 'Automático',
+  labelFormat: 'Formato de Salida',
+  btnDownload: 'Descargar Imagen',
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias y Documentación',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/es/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/es/docs/Web/API/CanvasRenderingContext2D',
+    },
+    {
+      name: 'W3C: HTML Canvas 2D Context',
+      url: 'https://www.w3.org/TR/2dcontext/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'La Herramienta Definitiva para Mockups Rápidos',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Cuando nos encontramos en las fases tempranas de conceptualización o maquetación estructural de un sitio web (wireframing), rara vez disponemos del contenido fotográfico final. Las dimensiones vacías pueden distorsionar la visualización global del producto y ocultar errores críticos de espaciado o proporciones. Un generador de imágenes placeholder resuelve de golpe este contratiempo, permitiendo inyectar áreas coloreadas rigurosamente dimensionadas de forma instantánea.',
+    },
+    {
+      type: 'tip',
+      title: 'Diseño sin Fricciones',
+      html: 'Integrar un espacio de 1200x800 píxeles exactamente es imperativo cuando construyes CSS Grids. Al descargar los bloques de relleno evitas inyectar CSS extra o scripts de terceros en tu código temporal.',
+    },
+    {
+      type: 'title',
+      text: 'La Importancia de Prescindir de Servicios Externos',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Una práctica recurrente del ecosistema frontend consiste en vincular servicios como <code>via.placeholder.com</code> o similares directamente en los atributos <code>src</code> del HTML. Si bien resulta teóricamente ágil mediante parámetros URL, posee profundos efectos secundarios que un programador meticuloso evitaría a toda costa.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Insertar un dominio remoto en cada etiqueta de carga de una página en desarrollo incrementa la cantidad de peticiones DNS, penaliza los sistemas de hot-reloading de Vite, Gulp o Webpack y expone accidentalmente trazas en ramas que eventualmente acaban en la nube. Al usar esta utilidad y generar la imagen en tu formato preferido (WebP, PNG o JPEG), centralizas tu prototipo completamente en modo localhost.',
+    },
+    {
+      type: 'title',
+      text: 'Características Fundamentales del Algoritmo del Generador',
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Resolución Pixel Perfect:</strong> HTML5 Canvas nativo asegura que el lienzo exportado corresponde aritméticamente a las coordenadas estipuladas por el usuario.',
+        '<strong>Autoscaling Tipográfico:</strong> En el modo Automático, la dimensión de la fuente calcula el área perimetral y el número de caracteres para acoplar con elegancia el texto a lo largo y ancho sin provocar <em>overflows</em> indeseados.',
+        '<strong>Fusión Hexadecimal:</strong> Control de estado bidireccional entre selectores de ecosistema nativo HTML e inputs mecanografiados garantizando contrastes precisos dictados por la paleta del UI/UX de tu Figma o Penpot original.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'El Arte Oculto del Wireframing Técnico',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'No existe proyecto monolítico ni micro frontends que no pase por etapas de cimentación, especialmente frente a clientes exigentes o Product Managers con una visión férrea. Facilitar iteraciones gráficas ágiles sin arrastrar la sobrecarga de <em>assets</em> finalizados separa al desarrollador veloz del atascado. Este generador exprime directamente la API <code>toDataURL()</code> moderna de JS en tu máquina local para brindar un resultado a la altura del mercado industrial sin procesamientos intermedios dudosos.',
+    },
+  ],
+};

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

@@ -0,0 +1,176 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { PlaceholderGeneratorUI } from '../ui';
+
+const slug = 'generateur-images-placeholder';
+const title = "Générateur d'Images Placeholder. Maquettes Web Rapides en Ligne";
+const description =
+  "Créez des images de remplissage personnalisées pour vos designs web. Ajustez la résolution, le fond, le texte et exportez en PNG, WebP ou JPEG en quelques millisecondes.";
+
+const faqData = [
+  {
+    question: "Qu'est-ce qu'une image placeholder ?",
+    answer:
+      "Une image placeholder ou de remplissage est un graphique temporaire utilisé en design web et en maquettage pour réserver l'espace où ira une image définitive. Elles aident à visualiser la structure d'une page avant d'avoir le contenu final.",
+  },
+  {
+    question: "Puis-je utiliser n'importe quelle résolution dans le générateur ?",
+    answer:
+      "Oui, vous pouvez saisir n'importe quelle valeur numérique pour la largeur et la hauteur. Le générateur créera un canevas avec les dimensions exactes demandées, parfait pour des grilles strictes ou des bannières publicitaires spécifiques.",
+  },
+  {
+    question: 'Dans quel format les images sont-elles téléchargées ?',
+    answer:
+      "Par défaut, les images sont générées en WebP pour une compression optimale, mais vous pouvez choisir de les télécharger en format PNG pour conserver la qualité maximale sans perte, ou JPEG pour la compatibilité traditionnelle.",
+  },
+  {
+    question: 'Est-ce traité sur un serveur ?',
+    answer:
+      "Non, tout le rendu de l'image est généré instantanément dans la mémoire virtuelle (Canvas) de votre propre navigateur. C'est instantané et ne nécessite pas l'envoi de données sur le réseau.",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Définir les dimensions',
+    text: "Saisissez les valeurs de largeur et de hauteur directement ou cliquez sur l'un des presets (FHD, HD, Instagram, etc.) pour les remplir automatiquement.",
+  },
+  {
+    name: 'Configurer les couleurs et le texte',
+    text: 'Choisissez la couleur de fond et de texte en utilisant les sélecteurs natifs ou en tapant un code hexadécimal. Optionnellement, ajoutez du texte personnalisé pour remplacer le label de dimensions par défaut.',
+  },
+  {
+    name: 'Sélectionner la typographie et le format',
+    text: 'Choisissez la famille typographique et la taille de police. Sélectionnez le format de sortie (WebP, PNG ou JPEG) selon vos besoins.',
+  },
+  {
+    name: "Télécharger l'image",
+    text: "Cliquez sur le bouton Télécharger pour sauvegarder le placeholder généré directement sur votre appareil.",
+  },
+];
+
+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: PlaceholderGeneratorUI = {
+  labelDimensions: 'Dimensions Rapides',
+  labelWidth: 'Largeur (px)',
+  labelHeight: 'Hauteur (px)',
+  labelBgColor: 'Fond',
+  labelTextColor: 'Texte',
+  labelCustomText: 'Texte Personnalisé (Optionnel)',
+  placeholderCustomText: 'Ex: Bannière Hero',
+  labelFontFamily: 'Typographie',
+  labelFontSize: 'Taille de Base',
+  fontSizeAuto: 'Automatique',
+  labelFormat: 'Format de Sortie',
+  btnDownload: "Télécharger l'Image",
+};
+
+export const content: ToolLocaleContent<PlaceholderGeneratorUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références et Documentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: HTMLCanvasElement.toDataURL()',
+      url: 'https://developer.mozilla.org/fr/docs/Web/API/HTMLCanvasElement/toDataURL',
+    },
+    {
+      name: 'MDN Web Docs: CanvasRenderingContext2D',
+      url: 'https://developer.mozilla.org/fr/docs/Web/API/CanvasRenderingContext2D',
+    },
+    {
+      name: 'W3C: HTML Canvas 2D Context',
+      url: 'https://www.w3.org/TR/2dcontext/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: "L'Outil Définitif pour des Maquettes Rapides",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Lors des premières phases de conceptualisation ou de maquettage structurel d'un site web (wireframing), nous disposons rarement du contenu photographique final. Les dimensions vides peuvent fausser la visualisation globale du produit et masquer des erreurs critiques d'espacement ou de proportions. Un générateur d'images placeholder résout instantanément ce problème, permettant d'injecter des zones colorées rigoureusement dimensionnées.",
+    },
+    {
+      type: 'tip',
+      title: 'Design sans Friction',
+      html: "Intégrer un espace de 1200x800 pixels exactement est impératif lors de la construction de CSS Grids. En téléchargeant les blocs de remplissage, vous évitez d'injecter du CSS supplémentaire ou des scripts tiers dans votre code temporaire.",
+    },
+    {
+      type: 'title',
+      text: "L'Importance d'Éviter les Services Externes",
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Une pratique récurrente dans l'écosystème frontend consiste à lier des services comme <code>via.placeholder.com</code> ou similaires directement dans les attributs <code>src</code> du HTML. Bien que théoriquement agile via des paramètres URL, cela présente de profonds effets secondaires qu'un développeur méticuleux éviterait à tout prix.",
+    },
+    {
+      type: 'paragraph',
+      html: "Insérer un domaine distant dans chaque balise d'image d'une page en développement augmente les requêtes DNS, pénalise les systèmes de hot-reloading de Vite, Gulp ou Webpack et expose accidentellement des traces dans des branches qui finissent dans le cloud. En utilisant cet outil et en générant l'image dans votre format préféré (WebP, PNG ou JPEG), vous centralisez votre prototype entièrement en mode localhost.",
+    },
+    {
+      type: 'title',
+      text: "Caractéristiques Fondamentales de l'Algorithme du Générateur",
+      level: 3,
+    },
+    {
+      type: 'list',
+      items: [
+        "<strong>Résolution Pixel Perfect :</strong> HTML5 Canvas natif garantit que le canevas exporté correspond arithmétiquement aux coordonnées stipulées par l'utilisateur.",
+        "<strong>Autoscaling Typographique :</strong> En mode Automatique, la taille de la police calcule l'aire périmétrique et le nombre de caractères pour adapter élégamment le texte sans provoquer d'<em>overflows</em> indésirables.",
+        '<strong>Fusion Hexadécimale :</strong> Contrôle d\'état bidirectionnel entre les sélecteurs natifs HTML et les inputs typés, garantissant des contrastes précis dictés par la palette UI/UX de votre Figma ou Penpot original.',
+      ],
+    },
+    {
+      type: 'title',
+      text: "L'Art Caché du Wireframing Technique",
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Il n'existe aucun projet monolithique ni micro frontend qui ne passe pas par des étapes de fondation, surtout face à des clients exigeants ou des Product Managers avec une vision de fer. Faciliter des itérations graphiques agiles sans traîner la surcharge d'<em>assets</em> finalisés sépare le développeur rapide du développeur bloqué. Ce générateur exploite directement l'API moderne JS <code>toDataURL()</code> sur votre machine locale pour offrir un résultat à la hauteur du marché industriel sans traitement intermédiaire douteux.",
+    },
+  ],
+};

package/src/tool/placeholderGenerator/index.ts

@@ -0,0 +1,34 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import PlaceholderGeneratorComponent from './component.astro';
+import PlaceholderGeneratorSEO from './seo.astro';
+import PlaceholderGeneratorBibliography from './bibliography.astro';
+
+import type { PlaceholderGeneratorUI } from './ui';
+
+export type PlaceholderGeneratorLocaleContent = ToolLocaleContent<PlaceholderGeneratorUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const placeholderGenerator: DeveloperToolEntry<PlaceholderGeneratorUI> = {
+  id: 'placeholder-generator',
+  icons: {
+    bg: 'mdi:image-outline',
+    fg: 'mdi:image-size-select-actual',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { PlaceholderGeneratorComponent, PlaceholderGeneratorSEO, PlaceholderGeneratorBibliography };
+
+export const PLACEHOLDER_GENERATOR_TOOL: ToolDefinition = {
+  entry: placeholderGenerator,
+  Component: PlaceholderGeneratorComponent,
+  SEOComponent: PlaceholderGeneratorSEO,
+  BibliographyComponent: PlaceholderGeneratorBibliography,
+};

package/src/tool/placeholderGenerator/seo.astro

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

package/src/tool/placeholderGenerator/ui.ts

@@ -0,0 +1,14 @@
+export interface PlaceholderGeneratorUI extends Record<string, string> {
+  labelDimensions: string;
+  labelWidth: string;
+  labelHeight: string;
+  labelBgColor: string;
+  labelTextColor: string;
+  labelCustomText: string;
+  placeholderCustomText: string;
+  labelFontFamily: string;
+  labelFontSize: string;
+  fontSizeAuto: string;
+  labelFormat: string;
+  btnDownload: string;
+}

package/src/tool/promptLibrary/bibliography.astro

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