@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'tipografia-musical';
+const title = 'Escalador de Tipografía Musical. Calculadora de Escala Modular';
+const description =
+  'Herramienta online gratuita para crear jerarquías visuales armónicas con escalas modulares basadas en proporciones musicales. Genera variables CSS listas para tu diseño web.';
+
+const faqData = [
+  {
+    question: '¿Qué es una escala modular tipográfica?',
+    answer:
+      'Es un método para determinar tamaños de fuente basados en una proporción matemática constante. Al igual que en la música, donde las notas guardan relaciones armónicas, la escala modular crea una jerarquía visual equilibrada y predecible.',
+  },
+  {
+    question: '¿Por qué usar intervalos musicales para el diseño?',
+    answer:
+      'Los intervalos musicales son proporciones que el cerebro humano percibe como armónicas. Al aplicarlas al tamaño de los textos, logras una estructura visual que se siente correcta y profesional, sin elegir tamaños al azar.',
+  },
+  {
+    question: '¿Qué es el Número de Oro en tipografía?',
+    answer:
+      'Es la proporción 1.618, llamada Proporción Áurea. Se utiliza para crear escalas muy dramáticas y elegantes, donde cada paso en la jerarquía crece de forma exponencial. Perfecta para portafolios o sitios de arte.',
+  },
+  {
+    question: '¿Cómo implemento la escala en mi archivo CSS?',
+    answer:
+      'La herramienta genera variables CSS (tokens) con formato :root { --step-N: Xrem; }. Cópialos en tu archivo CSS principal y úsalos con var(--step-N) para mantener la consistencia tipográfica en todo el sitio.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Definir tamaño base',
+    text: 'Introduce el tamaño de fuente para el cuerpo de texto (normalmente 16px) que servirá como nota fundamental de tu escala.',
+  },
+  {
+    name: 'Elegir el intervalo',
+    text: 'Selecciona una proporción musical para determinar cuánto espacio habrá entre los diferentes niveles de encabezados.',
+  },
+  {
+    name: 'Previsualizar jerarquía',
+    text: 'Observa cómo se comportan los niveles tipográficos en tiempo real para verificar que la armonía visual encaja con tu proyecto.',
+  },
+  {
+    name: 'Exportar código',
+    text: 'Pulsa Copiar Variables CSS para obtener el bloque listo para pegar directamente en tu flujo de trabajo.',
+  },
+];
+
+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: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'es',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Configuración',
+  labelBaseSize: 'Tamaño Base (px)',
+  hintBaseSize: 'El tamaño de tu texto de párrafo (normalmente 16px).',
+  labelRatio: 'Escala Musical (Ratio)',
+  hintRatio: 'Determina cuánto crece el tamaño en cada paso.',
+  labelCalculated: 'Valores Calculados',
+  labelPreview: 'Previsualización',
+  btnCopyCss: 'Copiar Variables CSS',
+  feedbackCopied: '¡Variables copiadas al portapapeles!',
+  previewText: 'Tipografía Musical',
+  previewSubtext: 'Una escala armónica perfecta para tu diseño.',
+  ratioSecundaMenor: 'Segunda Menor',
+  ratioSegundaMayor: 'Segunda Mayor',
+  ratioTerceraMenor: 'Tercera Menor',
+  ratioTerceraMayor: 'Tercera Mayor',
+  ratioCuartaPerfecta: 'Cuarta Perfecta',
+  ratioCuartaAumentada: 'Cuarta Aumentada',
+  ratioQuintaPerfecta: 'Quinta Perfecta',
+  ratioProporcionAurea: 'Proporción Áurea',
+  ratioSextaMayor: 'Sexta Mayor',
+  ratioSeptimaMenor: 'Séptima Menor',
+  ratioSeptimaMayor: 'Séptima Mayor',
+  ratioOctava: 'Octava',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Preguntas Frecuentes',
+  faq: faqData,
+  bibliographyTitle: 'Referencias',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'La armonía invisible del diseño web',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'El <strong>Escalador de Tipografía Musical</strong> aplica la matemática de los intervalos musicales al diseño tipográfico. Al igual que una composición musical se rige por proporciones precisas, un diseño sólido se beneficia de una estructura matemática que relaciona todos los tamaños entre sí.',
+    },
+    {
+      type: 'title',
+      text: 'Cómo funciona la escala modular',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'La fórmula',
+      html: '<p>La progresión es simple: <code>Tamaño = Base × Ratio<sup>n</sup></code>. El paso 0 es tu texto base. El paso 1 es un subtítulo pequeño. El paso 4 o 5 podría ser tu H1 principal. La misma constante multiplicativa (el ratio) garantiza que todas las relaciones sean consistentes.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Por qué "Musical"',
+      html: '<p>Los pitagóricos descubrieron que dividir una cuerda en proporciones simples (1:2, 2:3, 3:4) producía sonidos consonantes. Estos intervalos, octava, quinta perfecta y cuarta perfecta, son exactamente los ratios tipográficos. Estás componiendo música visual.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Eligiendo el ratio adecuado',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Para interfaces densas (dashboards, tablas) usa ratios pequeños como <code>1.125</code> o <code>1.2</code>. Para sitios editoriales o portafolios, usa ratios más expresivos como <code>1.5</code> o <code>1.618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'No uses la escala solo para <code>font-size</code>. Las mismas variables CSS funcionan para <code>margin</code>, <code>padding</code> y <code>gap</code>. Cuando el espacio en blanco sigue la misma progresión matemática que el texto, el diseño alcanza un nivel de cohesión que todos sienten pero pocos pueden explicar.',
+    },
+  ],
+};

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

@@ -0,0 +1,179 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { MusicalTypographyUI } from '../ui';
+
+const slug = 'typographie-musicale';
+const title = 'Échelle de Typographie Musicale. Calculateur d\'Échelle Modulaire';
+const description =
+  'Outil en ligne gratuit pour créer des hiérarchies visuelles harmonieuses avec des échelles modulaires basées sur des proportions musicales. Génère des variables CSS prêtes à l\'emploi.';
+
+const faqData = [
+  {
+    question: "Qu'est-ce qu'une échelle modulaire typographique ?",
+    answer:
+      "C'est une méthode pour déterminer les tailles de police basées sur un ratio mathématique constant. Comme en musique, où les notes ont des relations harmoniques, l'échelle modulaire crée une hiérarchie visuelle équilibrée et prévisible.",
+  },
+  {
+    question: 'Pourquoi utiliser des intervalles musicaux pour le design ?',
+    answer:
+      "Les intervalles musicaux sont des proportions que le cerveau humain perçoit comme harmonieuses. Les appliquer aux tailles de texte crée une structure visuelle qui semble correcte et professionnelle, plutôt que de choisir des tailles au hasard.",
+  },
+  {
+    question: "Qu'est-ce que le Nombre d'Or en typographie ?",
+    answer:
+      "C'est la proportion 1,618, connue sous le nom de Section Dorée. Elle crée des échelles très dramatiques et élégantes où chaque étape de la hiérarchie croît de façon exponentielle. Parfaite pour les portfolios ou sites artistiques.",
+  },
+  {
+    question: 'Comment implémenter l\'échelle dans mon fichier CSS ?',
+    answer:
+      "L'outil génère des variables CSS (tokens) au format :root { --step-N: Xrem; }. Copiez-les dans votre fichier CSS principal et utilisez-les avec var(--step-N) pour maintenir la cohérence typographique sur tout votre site.",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Définir la taille de base',
+    text: "Entrez la taille de police pour votre corps de texte (généralement 16px) qui servira de note fondamentale de votre échelle.",
+  },
+  {
+    name: "Choisir l'intervalle",
+    text: "Sélectionnez une proportion musicale pour déterminer l'espace entre les différents niveaux de titres.",
+  },
+  {
+    name: 'Prévisualiser la hiérarchie',
+    text: "Observez comment les niveaux typographiques se comportent en temps réel pour vérifier que l'harmonie visuelle convient à votre projet.",
+  },
+  {
+    name: 'Exporter le code',
+    text: "Cliquez sur Copier variables CSS pour obtenir le bloc prêt à coller directement dans votre flux de travail.",
+  },
+];
+
+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: 'DesignApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Configuration',
+  labelBaseSize: 'Taille de base (px)',
+  hintBaseSize: 'La taille de votre texte de paragraphe (généralement 16px).',
+  labelRatio: 'Échelle musicale (Ratio)',
+  hintRatio: "Détermine combien la taille augmente à chaque étape.",
+  labelCalculated: 'Valeurs calculées',
+  labelPreview: 'Aperçu',
+  btnCopyCss: 'Copier variables CSS',
+  feedbackCopied: 'Variables copiées dans le presse-papiers !',
+  previewText: 'Typographie Musicale',
+  previewSubtext: 'Une échelle harmonique parfaite pour votre design.',
+  ratioSecundaMenor: 'Seconde Mineure',
+  ratioSegundaMayor: 'Seconde Majeure',
+  ratioTerceraMenor: 'Tierce Mineure',
+  ratioTerceraMayor: 'Tierce Majeure',
+  ratioCuartaPerfecta: 'Quarte Juste',
+  ratioCuartaAumentada: 'Quarte Augmentée',
+  ratioQuintaPerfecta: 'Quinte Juste',
+  ratioProporcionAurea: 'Section Dorée',
+  ratioSextaMayor: 'Sixte Majeure',
+  ratioSeptimaMenor: 'Septième Mineure',
+  ratioSeptimaMayor: 'Septième Majeure',
+  ratioOctava: 'Octave',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Références',
+  bibliography: [
+    {
+      name: 'Bringhurst, R. The Elements of Typographic Style',
+      url: 'https://en.wikipedia.org/wiki/The_Elements_of_Typographic_Style',
+    },
+    {
+      name: 'Brown, T. More Meaningful Typography. A List Apart',
+      url: 'https://alistapart.com/article/more-meaningful-typography/',
+    },
+    {
+      name: 'Physics of Music. Musical Intervals and Scales',
+      url: 'https://es.scribd.com/document/199729396/Physics-of-Music-Notes',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: "L'harmonie invisible du design web",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "L'<strong>Échelle de Typographie Musicale</strong> applique les mathématiques des intervalles musicaux au design typographique. Tout comme une composition musicale est régie par des proportions précises, un design visuel solide bénéficie d'une structure mathématique qui relie toutes les tailles entre elles.",
+    },
+    {
+      type: 'title',
+      text: "Comment fonctionne l'échelle modulaire",
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'La formule',
+      html: '<p>La progression est simple : <code>Taille = Base × Ratio<sup>n</sup></code>. L\'étape 0 est votre texte de base. L\'étape 1 est un petit sous-titre. L\'étape 4 ou 5 pourrait être votre H1 principal. La même constante multiplicative garantit que toutes les relations sont cohérentes.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Pourquoi "Musical"',
+      html: "<p>Les Pythagoriciens ont découvert que diviser une corde en proportions simples (1:2, 2:3, 3:4) produisait des sons consonants. Ces intervalles, octave, quinte juste et quarte juste, sont exactement les ratios typographiques. Vous composez de la musique visuelle.</p>",
+    },
+    {
+      type: 'title',
+      text: 'Choisir le bon ratio',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Pour les interfaces denses (tableaux de bord, tableaux), utilisez de petits ratios comme <code>1,125</code> ou <code>1,2</code>. Pour les sites éditoriaux ou portfolios, utilisez des ratios plus expressifs comme <code>1,5</code> ou <code>1,618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: "Ne limitez pas l'échelle au seul <code>font-size</code>. Les mêmes variables CSS fonctionnent pour <code>margin</code>, <code>padding</code> et <code>gap</code>. Quand les espaces blancs suivent la même progression mathématique que le texte, le design atteint un niveau de cohésion que tout le monde ressent mais que peu peuvent expliquer.",
+    },
+  ],
+};

package/src/tool/musicalTypography/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import MusicalTypographyComponent from './component.astro';
+import MusicalTypographySEO from './seo.astro';
+import MusicalTypographyBibliography from './bibliography.astro';
+import type { MusicalTypographyUI } from './ui';
+
+export type MusicalTypographyLocaleContent = ToolLocaleContent<MusicalTypographyUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const musicalTypography: DeveloperToolEntry<MusicalTypographyUI> = {
+  id: 'musical-typography',
+  icons: {
+    bg: 'mdi:music-note',
+    fg: 'mdi:format-size',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { MusicalTypographyComponent, MusicalTypographySEO, MusicalTypographyBibliography };
+
+export const MUSICAL_TYPOGRAPHY_TOOL: ToolDefinition = {
+  entry: musicalTypography,
+  Component: MusicalTypographyComponent,
+  SEOComponent: MusicalTypographySEO,
+  BibliographyComponent: MusicalTypographyBibliography,
+};

package/src/tool/musicalTypography/seo.astro

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

package/src/tool/musicalTypography/ui.ts

@@ -0,0 +1,25 @@
+export interface MusicalTypographyUI extends Record<string, string> {
+  labelConfig: string;
+  labelBaseSize: string;
+  hintBaseSize: string;
+  labelRatio: string;
+  hintRatio: string;
+  labelCalculated: string;
+  labelPreview: string;
+  btnCopyCss: string;
+  feedbackCopied: string;
+  previewText: string;
+  previewSubtext: string;
+  ratioSecundaMenor: string;
+  ratioSegundaMayor: string;
+  ratioTerceraMenor: string;
+  ratioTerceraMayor: string;
+  ratioCuartaPerfecta: string;
+  ratioCuartaAumentada: string;
+  ratioQuintaPerfecta: string;
+  ratioProporcionAurea: string;
+  ratioSextaMayor: string;
+  ratioSeptimaMenor: string;
+  ratioSeptimaMayor: string;
+  ratioOctava: string;
+}

package/src/tool/placeholderGenerator/bibliography.astro

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