@jjlmoya/utils-creative 1.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (71) hide show
  1. package/package.json +64 -0
  2. package/src/category/i18n/en.ts +9 -0
  3. package/src/category/i18n/es.ts +9 -0
  4. package/src/category/i18n/fr.ts +9 -0
  5. package/src/category/index.ts +34 -0
  6. package/src/category/seo.astro +15 -0
  7. package/src/components/PreviewNavSidebar.astro +116 -0
  8. package/src/components/PreviewToolbar.astro +143 -0
  9. package/src/data.ts +6 -0
  10. package/src/env.d.ts +5 -0
  11. package/src/index.ts +27 -0
  12. package/src/layouts/PreviewLayout.astro +117 -0
  13. package/src/pages/[locale]/[slug].astro +146 -0
  14. package/src/pages/[locale].astro +251 -0
  15. package/src/pages/index.astro +4 -0
  16. package/src/tests/faq_count.test.ts +19 -0
  17. package/src/tests/locale_completeness.test.ts +42 -0
  18. package/src/tests/mocks/astro_mock.js +2 -0
  19. package/src/tests/no_h1_in_components.test.ts +48 -0
  20. package/src/tests/seo_length.test.ts +22 -0
  21. package/src/tests/tool_validation.test.ts +17 -0
  22. package/src/tool/bead-pattern-generator/bibliography.astro +18 -0
  23. package/src/tool/bead-pattern-generator/component.astro +372 -0
  24. package/src/tool/bead-pattern-generator/i18n/en.ts +61 -0
  25. package/src/tool/bead-pattern-generator/i18n/es.ts +68 -0
  26. package/src/tool/bead-pattern-generator/i18n/fr.ts +61 -0
  27. package/src/tool/bead-pattern-generator/index.ts +37 -0
  28. package/src/tool/bead-pattern-generator/seo.astro +14 -0
  29. package/src/tool/bead-pattern-generator/style.css +511 -0
  30. package/src/tool/dice-roller/bibliography.astro +17 -0
  31. package/src/tool/dice-roller/component.astro +230 -0
  32. package/src/tool/dice-roller/i18n/en.ts +87 -0
  33. package/src/tool/dice-roller/i18n/es.ts +89 -0
  34. package/src/tool/dice-roller/i18n/fr.ts +87 -0
  35. package/src/tool/dice-roller/index.ts +37 -0
  36. package/src/tool/dice-roller/seo.astro +14 -0
  37. package/src/tool/dice-roller/style.css +482 -0
  38. package/src/tool/excuse-generator/bibliography.astro +18 -0
  39. package/src/tool/excuse-generator/component.astro +140 -0
  40. package/src/tool/excuse-generator/i18n/en.ts +80 -0
  41. package/src/tool/excuse-generator/i18n/es.ts +84 -0
  42. package/src/tool/excuse-generator/i18n/fr.ts +80 -0
  43. package/src/tool/excuse-generator/index.ts +42 -0
  44. package/src/tool/excuse-generator/seo.astro +14 -0
  45. package/src/tool/excuse-generator/style.css +316 -0
  46. package/src/tool/fortune-cookie/bibliography.astro +18 -0
  47. package/src/tool/fortune-cookie/component.astro +299 -0
  48. package/src/tool/fortune-cookie/i18n/en.ts +85 -0
  49. package/src/tool/fortune-cookie/i18n/es.ts +90 -0
  50. package/src/tool/fortune-cookie/i18n/fr.ts +85 -0
  51. package/src/tool/fortune-cookie/index.ts +40 -0
  52. package/src/tool/fortune-cookie/seo.astro +14 -0
  53. package/src/tool/fortune-cookie/style.css +332 -0
  54. package/src/tool/synesthesia-painter/bibliography.astro +17 -0
  55. package/src/tool/synesthesia-painter/component.astro +110 -0
  56. package/src/tool/synesthesia-painter/i18n/en.ts +80 -0
  57. package/src/tool/synesthesia-painter/i18n/es.ts +82 -0
  58. package/src/tool/synesthesia-painter/i18n/fr.ts +80 -0
  59. package/src/tool/synesthesia-painter/index.ts +39 -0
  60. package/src/tool/synesthesia-painter/seo.astro +14 -0
  61. package/src/tool/synesthesia-painter/style.css +234 -0
  62. package/src/tool/zalgo-generator/bibliography.astro +18 -0
  63. package/src/tool/zalgo-generator/component.astro +195 -0
  64. package/src/tool/zalgo-generator/i18n/en.ts +60 -0
  65. package/src/tool/zalgo-generator/i18n/es.ts +67 -0
  66. package/src/tool/zalgo-generator/i18n/fr.ts +60 -0
  67. package/src/tool/zalgo-generator/index.ts +38 -0
  68. package/src/tool/zalgo-generator/seo.astro +14 -0
  69. package/src/tool/zalgo-generator/style.css +558 -0
  70. package/src/tools.ts +4 -0
  71. package/src/types.ts +72 -0
@@ -0,0 +1,67 @@
1
+ import type { ZalgoGeneratorLocaleContent } from '../index';
2
+
3
+ export const content: ZalgoGeneratorLocaleContent = {
4
+ slug: 'generador-zalgo',
5
+ title: 'Generador Zalgo',
6
+ description: 'Corrompe tus mensajes con cascadas de caracteres Unicode desbordantes.',
7
+ faqTitle: 'Preguntas Frecuentes',
8
+ bibliographyTitle: 'Bibliografía del Caos',
9
+ ui: {
10
+ title: 'Generador Zalgo',
11
+ description: 'T̸o̶d̸o̵ ̸e̴s̸t̴á̷ ̵c̵o̶r̶r̵u̸p̸t̵o̴',
12
+ inputPlaceholder: 'Escribe tu mensaje normal aquí...',
13
+ intensityLabel: 'Nivel de Corrupción',
14
+ outputLabel: 'Resultado Corrompido',
15
+ copyBtn: 'Copiar Caos',
16
+ copied: '¡Copiado!',
17
+ faqTitle: 'FAQ',
18
+ bibliographyTitle: 'Referencias'
19
+ },
20
+ seo: [
21
+ { type: 'title', text: '¿Qué es el Texto Zalgo y cómo funciona la corrupción visual?', level: 2 },
22
+ { type: 'paragraph', html: 'El Texto Zalgo es una forma de manipulación tipográfica que utiliza una característica específica del estándar Unicode: los <strong>caracteres combinados</strong>. A diferencia de los caracteres normales, estos diacríticos no ocupan espacio horizontal; se apilan verticalmente sobre la letra base, creando esa estética de "caos digital" o "terror cósmico" tan popular en la cultura de internet.' },
23
+ { type: 'title', text: 'Anatomía del Proceso', level: 3 },
24
+ { type: 'paragraph', html: 'Nuestro generador procesa cada carácter de forma independiente, inyectando ráfagas aleatorias de puntos de código Unicode en tres vectores distintos: <strong>superior</strong> (diacríticos que se apilan encima), <strong>central</strong> (que atraviesan la letra) e <strong>inferior</strong> (que cuelgan por debajo).' },
25
+ { type: 'tip', title: 'Algoritmo de Corrupción', html: 'Para cada carácter base, se calcula un <code>count = intensity × 30</code>. Ese número de diacríticos aleatorios se añaden en cada vector. A intensidad 1.5 puedes obtener hasta 45 caracteres combinados por letra.' },
26
+ { type: 'title', text: 'Etiqueta y Aplicaciones', level: 3 },
27
+ { type: 'list', items: [
28
+ '<strong>Social Media:</strong> Capta la atención en Instagram o TikTok. Perfecto para bios que buscan romper con lo convencional.',
29
+ '<strong>Storytelling horror:</strong> Dramatiza narrativas de ficción, creepypastas o simulaciones de sistemas comprometidos.',
30
+ '<strong>Accesibilidad:</strong> Cuidado — el texto Zalgo es ilegible para Screen Readers. Úsalo solo como acompañamiento visual, nunca para contenido crítico.',
31
+ '<strong>SEO:</strong> No uses Zalgo en palabras clave fundamentales (H1, meta titles). Los bots de indexación pueden fallar al normalizar estos caracteres.',
32
+ ]},
33
+ { type: 'title', text: 'El Origen: De Something Awful al Glitch Art', level: 3 },
34
+ { type: 'paragraph', html: 'Zalgo no nació como un generador, sino como una intervención en tiras cómicas clásicas. El usuario Shmorky, a mediados de los 2000, empezó a deformar personajes como Nancy o Archie, añadiendo manchas y distorsiones. La frase <strong>"He comes"</strong> sellaba el destino de estas obras, anunciando la llegada de una entidad que devoraba la realidad.' },
35
+ { type: 'paragraph', html: 'La transición al texto puro fue un descubrimiento técnico fascinante. Al identificar los caracteres combinados destinados a lenguas con diacríticos complejos, los usuarios de foros aprendieron que podían "apuñalar" las palabras originales, creando esa sensación de sangrado tipográfico tan icónica.' },
36
+ { type: 'stats', items: [
37
+ { value: '50', label: 'Diacríticos superiores disponibles', icon: 'mdi:arrow-up-bold' },
38
+ { value: '23', label: 'Modificadores centrales', icon: 'mdi:minus' },
39
+ { value: '40', label: 'Diacríticos inferiores disponibles', icon: 'mdi:arrow-down-bold' },
40
+ { value: '×30', label: 'Multiplicador de intensidad máxima', icon: 'mdi:lightning-bolt' },
41
+ ], columns: 4 },
42
+ { type: 'glossary', items: [
43
+ { term: 'Carácter combinado', definition: 'Punto de código Unicode diseñado para colocarse encima, debajo o a través de un carácter base. Se usa legítimamente en árabe, vietnamita e hindi.' },
44
+ { term: 'Diacrítico', definition: 'Marca añadida a una letra base para modificar su pronunciación o significado. Zalgo abusa de ellos para crear desbordamiento visual.' },
45
+ { term: 'Bloque Unicode', definition: 'Rango contiguo de puntos de código Unicode. Los caracteres Zalgo provienen principalmente del bloque "Combining Diacritical Marks" (U+0300–U+036F).' },
46
+ { term: 'Glitch Art', definition: 'Estética que incorpora intencionalmente errores, artefactos y corrupciones en medios digitales como técnica expresiva.' },
47
+ ]},
48
+ ],
49
+ faq: [
50
+ { question: '¿Qué es el texto Zalgo?', answer: 'Es un tipo de texto que utiliza caracteres Unicode de combinación (diacríticos) de forma excesiva. Al apilarse verticalmente, estos caracteres "desbordan" su línea original, creando un efecto visual de corrupción, desorden o terror muy popular en la cultura de internet.' },
51
+ { question: '¿Por qué el texto Zalgo se ve tan extraño?', answer: 'Se aprovecha de una característica del estándar Unicode que permite añadir marcas encima, debajo o en medio de una letra base. Como no hay un límite estricto de cuántas marcas se pueden añadir, el texto puede "invadir" párrafos superiores o inferiores.' },
52
+ { question: '¿Puedo usar este texto en redes sociales?', answer: 'Sí, la mayoría de plataformas modernas (Instagram, Twitter, Discord) soportan Unicode. Sin embargo, algunas redes o dispositivos pueden filtrar o recortar el exceso de caracteres si la intensidad es muy alta para mantener la legibilidad de la interfaz.' },
53
+ { question: '¿Cómo puedo quitar el efecto Zalgo de un texto?', answer: 'Para limpiar un texto corrupto, puedes usar la normalización de strings de JavaScript o simplemente copiarlo en un editor básico que solo admita texto plano. Nuestra herramienta es puramente creativa y no daña el contenido original.' },
54
+ ],
55
+ bibliography: [
56
+ { name: 'Unicode Standard - Combining Characters', url: 'https://www.unicode.org/standard/principles.html#Combining_Characters' },
57
+ { name: 'The Zalgo Text Phenomenon', url: 'https://knowyourmeme.com/memes/zalgo' },
58
+ { name: 'MDN - String normalization', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize' },
59
+ ],
60
+ howTo: [
61
+ { name: 'Escribir el mensaje base', text: 'Introduce el texto que quieres "corromper" en el cuadro principal de la herramienta.' },
62
+ { name: 'Ajustar la intensidad del caos', text: 'Mueve el selector para definir cuántos caracteres de combinación quieres apilar. A más intensidad, más difícil será de leer.' },
63
+ { name: 'Seleccionar la dirección del desbordamiento', text: 'Elige si quieres que la corrupción crezca hacia arriba, hacia abajo o en todas las direcciones simultáneamente.' },
64
+ { name: 'Copiar el texto resultante', text: 'Haz clic en el botón de copiar. El texto resultante incluirá todos los bytes invisibles necesarios para mantener el efecto glitch.' },
65
+ ],
66
+ schemas: []
67
+ };
@@ -0,0 +1,60 @@
1
+ import type { ZalgoGeneratorLocaleContent } from '../index';
2
+
3
+ export const content: ZalgoGeneratorLocaleContent = {
4
+ slug: 'generateur-zalgo',
5
+ title: 'Générateur Zalgo',
6
+ description: 'Corrompez vos messages avec une cascade de caractères Unicode débordants. Ajustez l\'intensité et la direction de l\'effet glitch.',
7
+ faqTitle: 'Questions Fréquemment Posées',
8
+ bibliographyTitle: 'Bibliographie du Chaos',
9
+ ui: {
10
+ title: 'Générateur Zalgo',
11
+ description: 'T̴o̴u̴t̴ ̴e̸s̶t̶ ̶c̶o̷r̵r̶o̸m̵p̶u̸',
12
+ inputPlaceholder: 'Écrivez votre message normal ici...',
13
+ intensityLabel: 'Niveau de Corruption',
14
+ outputLabel: 'Résultat Corrompu',
15
+ copyBtn: 'Copier le Chaos',
16
+ copied: 'Copié !',
17
+ faqTitle: 'FAQ',
18
+ bibliographyTitle: 'Références'
19
+ },
20
+ seo: [
21
+ { type: 'title', text: 'Qu\'est-ce que le Texte Zalgo et comment fonctionne la corruption visuelle ?', level: 2 },
22
+ { type: 'paragraph', html: 'Le texte Zalgo est une forme de manipulation typographique qui exploite une fonctionnalité spécifique de la norme Unicode : les <strong>caractères de combinaison</strong>. Contrairement aux caractères normaux, ces diacritiques ne prennent pas d\'espace horizontal — ils s\'empilent verticalement sur la lettre de base, créant ce "chaos numérique" ou cette esthétique "d\'horreur cosmique" si populaire dans la culture internet.' },
23
+ { type: 'title', text: 'Anatomie du Processus', level: 3 },
24
+ { type: 'paragraph', html: 'Notre générateur traite chaque caractère indépendamment, injectant des rafales aléatoires de points de code Unicode dans trois vecteurs distincts : <strong>supérieur</strong> (diacritiques qui s\'empilent au-dessus), <strong>médian</strong> (qui traversent la lettre) et <strong>inférieur</strong> (qui pendent en dessous).' },
25
+ { type: 'tip', title: 'Algorithme de Corruption', html: 'Pour chaque caractère de base, un calcul <code>nombre = intensité × 30</code> est effectué. Ce nombre de diacritiques aléatoires est ajouté dans chaque vecteur. À une intensité de 1,5, vous pouvez obtenir jusqu\'à 45 caractères de combinaison par lettre.' },
26
+ { type: 'title', text: 'Étiquette et Applications', level: 3 },
27
+ { type: 'list', items: [
28
+ '<strong>Réseaux Sociaux :</strong> Attirez l\'attention sur Instagram ou TikTok. Parfait pour les biographies cherchant à rompre avec la convention.',
29
+ '<strong>Narration d\'Horreur :</strong> Dramatisez des récits de fiction, des creepypastas ou des simulations de systèmes compromis.',
30
+ '<strong>Accessibilité :</strong> Attention — le texte Zalgo est illisible par les lecteurs d\'écran. Utilisez-le uniquement comme décoration visuelle, jamais pour un contenu critique.',
31
+ '<strong>SEO :</strong> N\'utilisez jamais de texte Zalgo dans vos mots-clés principaux (H1, méta-titres). Les robots d\'indexation peuvent échouer à normaliser ces caractères.',
32
+ ]},
33
+ { type: 'title', text: 'L\'Origine : De Something Awful à l\'Art Glitch', level: 3 },
34
+ { type: 'paragraph', html: 'Zalgo n\'a pas commencé comme un générateur, mais comme une intervention dans des bandes dessinées classiques. L\'utilisateur Shmorky, au milieu des années 2000, a commencé à déformer des personnages comme Nancy ou Archie, en ajoutant des taches et des distorsions. La phrase <strong>"Il arrive"</strong> (He comes) a scellé le destin de ces œuvres, annonçant l\'arrivée d\'une entité qui dévorait la réalité.' },
35
+ { type: 'glossary', items: [
36
+ { term: 'Caractère de Combinaison', definition: 'Un point de code Unicode conçu pour être placé au-dessus, en dessous ou à travers un caractère de base. Utilisé légitimement dans des langues comme l\'arabe, le vietnamien et le hindi.' },
37
+ { term: 'Diacritique', definition: 'Une marque ajoutée à une lettre de base pour modifier sa prononciation ou sa signification. Zalgo en abuse pour créer un débordement visuel.' },
38
+ { term: 'Bloc Unicode', definition: 'Une plage contiguë de points de code Unicode. Les caractères Zalgo proviennent principalement du bloc "Combining Diacritical Marks" (U+0300–U+036F).' },
39
+ { term: 'Art Glitch', definition: 'Une esthétique qui incorpore ou simule intentionnellement des erreurs, des artefacts et des corruptions dans les médias numériques comme technique expressive.' },
40
+ ]},
41
+ ],
42
+ faq: [
43
+ { question: 'Qu\'est-ce que le texte Zalgo ?', answer: 'C\'est un type de texte qui utilise excessivement les caractères de combinaison Unicode (diacritiques). Lorsqu\'ils sont empilés verticalement, ces caractères "débordent" de leur ligne d\'origine, créant un effet visuel de corruption, de désordre ou d\'horreur populaire dans la culture internet.' },
44
+ { question: 'Pourquoi le texte Zalgo a-t-il l\'air si étrange ?', answer: 'Il exploite une fonctionnalité de la norme Unicode qui permet d\'ajouter des marques au-dessus, en dessous ou à travers une lettre de base. Comme il n\'y a pas de limite stricte au nombre de marques pouvant être ajoutées, le texte peut "envahir" les lignes supérieures ou inférieures.' },
45
+ { question: 'Puis-je utiliser ce texte sur les réseaux sociaux ?', answer: 'Oui, la plupart des plateformes modernes (Instagram, Twitter, Discord) prennent en charge l\'Unicode. Cependant, certains réseaux ou appareils peuvent filtrer ou tronquer les caractères excédentaires à très haute intensité pour maintenir la lisibilité de l\'interface.' },
46
+ { question: 'Comment puis-je supprimer l\'effet Zalgo d\'un texte ?', answer: 'Pour nettoyer un texte corrompu, vous pouvez utiliser la normalisation de chaîne JavaScript ou simplement le coller dans un éditeur de texte basique qui n\'accepte que le texte brut. Notre outil est purement créatif et n\'endommage pas le contenu original.' },
47
+ ],
48
+ bibliography: [
49
+ { name: 'Norme Unicode - Caractères de Combinaison', url: 'https://www.unicode.org/standard/principles.html#Combining_Characters' },
50
+ { name: 'Le Phénomène du Texte Zalgo (Know Your Meme)', url: 'https://knowyourmeme.com/memes/zalgo' },
51
+ { name: 'MDN - Normalisation de chaîne JavaScript', url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize' },
52
+ ],
53
+ howTo: [
54
+ { name: 'Écrire le message de base', text: 'Entrez le texte que vous souhaitez "corrompre" dans la zone de texte principale.' },
55
+ { name: 'Ajuster l\'intensité du chaos', text: 'Déplacez le curseur pour définir le nombre de caractères de combinaison à empiler. Plus l\'intensité est élevée, plus il est difficile à lire.' },
56
+ { name: 'Sélectionner la direction du débordement', text: 'Choisissez si la corruption doit croître vers le haut, vers le bas ou dans toutes les directions simultanément.' },
57
+ { name: 'Copier le résultat', text: 'Cliquez sur le bouton de copie. Le texte résultant inclut tous les octets invisibles nécessaires pour maintenir l\'effet glitch.' },
58
+ ],
59
+ schemas: []
60
+ };
@@ -0,0 +1,38 @@
1
+ import type { CreativeToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
2
+ import ZalgoGeneratorComponent from './component.astro';
3
+ import ZalgoGeneratorSEO from './seo.astro';
4
+ import ZalgoGeneratorBibliography from './bibliography.astro';
5
+
6
+ export interface ZalgoGeneratorUI {
7
+ [key: string]: string;
8
+ title: string;
9
+ description: string;
10
+ inputPlaceholder: string;
11
+ intensityLabel: string;
12
+ outputLabel: string;
13
+ copyBtn: string;
14
+ copied: string;
15
+ faqTitle: string;
16
+ bibliographyTitle: string;
17
+ }
18
+
19
+ export type ZalgoGeneratorLocaleContent = ToolLocaleContent<ZalgoGeneratorUI>;
20
+
21
+ export const zalgoGenerator: CreativeToolEntry<ZalgoGeneratorUI> = {
22
+ id: 'zalgo-generator',
23
+ icons: { bg: 'mdi:skull-outline', fg: 'mdi:matrix' },
24
+ i18n: {
25
+ es: () => import('./i18n/es').then((m) => m.content),
26
+ en: () => import('./i18n/en').then((m) => m.content),
27
+ fr: () => import('./i18n/fr').then((m) => m.content),
28
+ },
29
+ };
30
+
31
+ export { ZalgoGeneratorComponent, ZalgoGeneratorSEO, ZalgoGeneratorBibliography };
32
+
33
+ export const ZALGO_GENERATOR_TOOL: ToolDefinition = {
34
+ entry: zalgoGenerator,
35
+ Component: ZalgoGeneratorComponent,
36
+ SEOComponent: ZalgoGeneratorSEO,
37
+ BibliographyComponent: ZalgoGeneratorBibliography,
38
+ };
@@ -0,0 +1,14 @@
1
+ ---
2
+ import { SEORenderer } from '@jjlmoya/utils-shared';
3
+ import { zalgoGenerator } from './index';
4
+ import type { KnownLocale } from '../../types';
5
+
6
+ interface Props {
7
+ locale?: KnownLocale;
8
+ }
9
+
10
+ const { locale = 'es' } = Astro.props;
11
+ const content = await zalgoGenerator.i18n[locale]?.();
12
+ ---
13
+
14
+ {content && <SEORenderer content={{ locale, sections: content.seo }} />}