@jjlmoya/utils-developer 1.2.0

package/src/tool/musicalTypography/component.astro

@@ -0,0 +1,480 @@
+---
+import type { KnownLocale } from '../../types';
+import type { MusicalTypographyUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as MusicalTypographyUI;
+
+const RATIO_KEYS = [
+  { key: 'ratioSecundaMenor', value: 1.067 },
+  { key: 'ratioSegundaMayor', value: 1.125 },
+  { key: 'ratioTerceraMenor', value: 1.2 },
+  { key: 'ratioTerceraMayor', value: 1.25 },
+  { key: 'ratioCuartaPerfecta', value: 1.333 },
+  { key: 'ratioCuartaAumentada', value: 1.414 },
+  { key: 'ratioQuintaPerfecta', value: 1.5 },
+  { key: 'ratioProporcionAurea', value: 1.618 },
+  { key: 'ratioSextaMayor', value: 1.667 },
+  { key: 'ratioSeptimaMenor', value: 1.778 },
+  { key: 'ratioSeptimaMayor', value: 1.875 },
+  { key: 'ratioOctava', value: 2.0 },
+] as const;
+
+const ratios = RATIO_KEYS.map((r) => ({ name: t[r.key] ?? r.key, value: r.value }));
+---
+
+<div class="mt-root" id="mt-root" data-i18n={JSON.stringify(t)}>
+  <div class="mt-grid">
+    <div class="mt-card">
+      <div class="mt-card-header">
+        <h2 class="mt-card-title">{t.labelConfig}</h2>
+      </div>
+      <div class="mt-card-body">
+        <div class="mt-field">
+          <label class="mt-label" for="mt-base-size">{t.labelBaseSize}</label>
+          <div class="mt-input-wrap">
+            <input
+              class="mt-input"
+              type="number"
+              id="mt-base-size"
+              value="16"
+              min="8"
+              max="32"
+            />
+            <span class="mt-input-suffix">px</span>
+          </div>
+          <p class="mt-hint">{t.hintBaseSize}</p>
+        </div>
+
+        <div class="mt-field">
+          <label class="mt-label" for="mt-ratio-select">{t.labelRatio}</label>
+          <select class="mt-select" id="mt-ratio-select">
+            {
+              ratios.map((r) => (
+                <option value={r.value} selected={r.value === 1.5}>
+                  {r.name} ({r.value.toFixed(3)})
+                </option>
+              ))
+            }
+          </select>
+          <p class="mt-hint">{t.hintRatio}</p>
+        </div>
+
+        <div class="mt-calc-box">
+          <h3 class="mt-calc-title">{t.labelCalculated}</h3>
+          <div id="mt-scale-preview" class="mt-scale-list"></div>
+        </div>
+      </div>
+    </div>
+
+    <div class="mt-card mt-card-preview">
+      <div class="mt-card-header mt-card-header-preview">
+        <h2 class="mt-card-title">{t.labelPreview}</h2>
+      </div>
+      <div class="mt-card-body mt-preview-body">
+        <div class="mt-preview-scroll-wrap">
+          <div id="mt-type-preview" class="mt-preview-scroll"></div>
+        </div>
+
+        <div class="mt-copy-section">
+          <button class="mt-copy-btn" id="mt-copy-btn">
+            {t.btnCopyCss}
+          </button>
+          <p id="mt-feedback" class="mt-feedback">{t.feedbackCopied}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  type ScaleItem = { level: number; size: number; rem: number };
+  type UI = { previewText: string; previewSubtext: string; feedbackCopied: string; [k: string]: string };
+  type Refs = {
+    baseSize: HTMLInputElement;
+    ratioSelect: HTMLSelectElement;
+    scalePreview: HTMLElement;
+    typePreview: HTMLElement;
+    copyBtn: HTMLElement;
+    feedback: HTMLElement;
+  };
+
+  const LEVELS = [-2, -1, 0, 1, 2, 3, 4, 5];
+
+  function calcScale(base: number, ratio: number): ScaleItem[] {
+    return LEVELS.map((level) => {
+      const size = base * Math.pow(ratio, level);
+      return { level, size, rem: size / 16 };
+    });
+  }
+
+  function buildScaleRow(item: ScaleItem): string {
+    const cls = item.level === 0 ? ' mt-scale-base' : '';
+    return '<div class="mt-scale-row' + cls + '"><span>step-' + item.level + '</span>' +
+      '<span>' + item.size.toFixed(2) + 'px\u00a0/\u00a0' + item.rem.toFixed(3) + 'rem</span></div>';
+  }
+
+  function buildSubText(item: ScaleItem, subtext: string): string {
+    if (item.level < 2) return '';
+    return '<p class="mt-sub" style="font-size:' + Math.max(12, item.size * 0.45).toFixed(1) + 'px">' + subtext + '</p>';
+  }
+
+  function buildPreviewRow(item: ScaleItem, previewText: string, subtext: string): string {
+    return '<div class="mt-prev-item">' +
+      '<div class="mt-prev-meta"><span>Step ' + item.level + '</span>' +
+      '<span>' + item.size.toFixed(1) + 'px</span></div>' +
+      '<p class="mt-prev-text" style="font-size:' + item.size.toFixed(2) + 'px;line-height:1.1">' +
+      previewText + '</p>' + buildSubText(item, subtext) + '</div>';
+  }
+
+  function updateUI(refs: Refs, t: UI): void {
+    const base = parseFloat(refs.baseSize.value) || 16;
+    const ratio = parseFloat(refs.ratioSelect.value) || 1.5;
+    const scale = calcScale(base, ratio);
+    refs.scalePreview.innerHTML = scale.slice().reverse().map(buildScaleRow).join('');
+    refs.typePreview.innerHTML = scale.slice().reverse()
+      .map((item) => buildPreviewRow(item, t.previewText, t.previewSubtext))
+      .join('');
+  }
+
+  function generateCSS(refs: Refs): string {
+    const base = parseFloat(refs.baseSize.value) || 16;
+    const ratio = parseFloat(refs.ratioSelect.value) || 1.5;
+    const scale = calcScale(base, ratio);
+    let css = '\n:root {\n  --ratio: ' + ratio + ';\n';
+    scale.forEach((item) => { css += '  --step-' + item.level + ': ' + item.rem.toFixed(3) + 'rem;\n'; });
+    return css + '}\n';
+  }
+
+  function bindCopy(refs: Refs): void {
+    refs.copyBtn.addEventListener('click', () => {
+      const css = generateCSS(refs);
+      navigator.clipboard.writeText(css).then(() => {
+        refs.feedback.style.opacity = '1';
+        setTimeout(() => { refs.feedback.style.opacity = '0'; }, 3000);
+      });
+    });
+  }
+
+  function getRefs(root: HTMLElement): Refs {
+    return {
+      baseSize: root.querySelector<HTMLInputElement>('#mt-base-size')!,
+      ratioSelect: root.querySelector<HTMLSelectElement>('#mt-ratio-select')!,
+      scalePreview: root.querySelector<HTMLElement>('#mt-scale-preview')!,
+      typePreview: root.querySelector<HTMLElement>('#mt-type-preview')!,
+      copyBtn: root.querySelector<HTMLElement>('#mt-copy-btn')!,
+      feedback: root.querySelector<HTMLElement>('#mt-feedback')!,
+    };
+  }
+
+  function init(): void {
+    const root = document.getElementById('mt-root');
+    if (!root) return;
+    const t = JSON.parse(root.dataset.i18n ?? '{}') as UI;
+    const refs = getRefs(root as HTMLElement);
+    const upd = () => updateUI(refs, t);
+    refs.baseSize.addEventListener('input', upd);
+    refs.ratioSelect.addEventListener('change', upd);
+    bindCopy(refs);
+    upd();
+  }
+
+  init();
+</script>
+
+<style>
+  .mt-root {
+    --mt-card-bg: #fff;
+    --mt-border: #e2e8f0;
+    --mt-text: #1e293b;
+    --mt-muted: #64748b;
+    --mt-accent: #6366f1;
+    --mt-accent-bg: rgba(99, 102, 241, 0.08);
+    --mt-input-bg: #f8fafc;
+    --mt-input-border: #e2e8f0;
+    --mt-calc-bg: rgba(99, 102, 241, 0.05);
+    --mt-calc-border: rgba(99, 102, 241, 0.15);
+    --mt-preview-bg: #f8fafc;
+    --mt-base-color: #6366f1;
+    --mt-btn-bg: #4f46e5;
+    --mt-btn-hover: #4338ca;
+    --mt-feedback-color: #059669;
+  }
+
+  :global(.theme-dark) .mt-root {
+    --mt-card-bg: #1e293b;
+    --mt-border: #334155;
+    --mt-text: #f1f5f9;
+    --mt-muted: #94a3b8;
+    --mt-input-bg: #0f172a;
+    --mt-input-border: #475569;
+    --mt-calc-bg: rgba(99, 102, 241, 0.1);
+    --mt-calc-border: rgba(99, 102, 241, 0.25);
+    --mt-preview-bg: rgba(15, 23, 42, 0.5);
+    --mt-base-color: #818cf8;
+    --mt-btn-bg: #4f46e5;
+    --mt-btn-hover: #6366f1;
+    --mt-feedback-color: #34d399;
+  }
+
+  .mt-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  @media (max-width: 640px) {
+    .mt-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .mt-card {
+    background: var(--mt-card-bg);
+    border: 1px solid var(--mt-border);
+    border-radius: 1rem;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+    overflow: hidden;
+  }
+
+  .mt-card-header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid var(--mt-border);
+  }
+
+  .mt-card-header-preview {
+    background: rgba(236, 72, 153, 0.04);
+  }
+
+  :global(.theme-dark) .mt-card-header-preview {
+    background: rgba(236, 72, 153, 0.08);
+  }
+
+  .mt-card-title {
+    font-size: 1.125rem;
+    font-weight: 700;
+    color: var(--mt-text);
+    margin: 0;
+  }
+
+  .mt-card-body {
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .mt-preview-body {
+    flex: 1;
+  }
+
+  .mt-card-preview {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .mt-label {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--mt-text);
+    margin-bottom: 0.5rem;
+  }
+
+  .mt-input-wrap {
+    position: relative;
+  }
+
+  .mt-input,
+  .mt-select {
+    display: block;
+    width: 100%;
+    padding: 0.625rem 0.75rem;
+    background: var(--mt-input-bg);
+    border: 1px solid var(--mt-input-border);
+    border-radius: 0.625rem;
+    color: var(--mt-text);
+    font-size: 0.875rem;
+    box-sizing: border-box;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+    transition: border-color 0.15s, box-shadow 0.15s;
+  }
+
+  .mt-input {
+    padding-right: 2.5rem;
+  }
+
+  .mt-input:focus,
+  .mt-select:focus {
+    outline: 2px solid var(--mt-accent);
+    outline-offset: 2px;
+    border-color: var(--mt-accent);
+  }
+
+  .mt-input-suffix {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    font-size: 0.875rem;
+    color: var(--mt-muted);
+    pointer-events: none;
+  }
+
+  .mt-hint {
+    margin: 0.375rem 0 0;
+    font-size: 0.75rem;
+    color: var(--mt-muted);
+  }
+
+  .mt-calc-box {
+    background: var(--mt-calc-bg);
+    border: 1px solid var(--mt-calc-border);
+    border-radius: 0.75rem;
+    padding: 1rem;
+  }
+
+  .mt-calc-title {
+    font-size: 0.6875rem;
+    font-weight: 700;
+    color: var(--mt-accent);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    margin: 0 0 0.75rem;
+  }
+
+  .mt-scale-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  :global(.mt-scale-row) {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.8125rem;
+    color: var(--mt-muted);
+    padding: 0.125rem 0;
+  }
+
+  :global(.mt-scale-base) {
+    color: var(--mt-base-color);
+    font-weight: 700;
+    background: var(--mt-accent-bg);
+    border-radius: 0.25rem;
+    padding: 0.125rem 0.375rem;
+    margin: 0 -0.375rem;
+  }
+
+  .mt-preview-scroll-wrap {
+    background: var(--mt-preview-bg);
+    border: 1px solid var(--mt-border);
+    border-radius: 0.75rem;
+    height: 18rem;
+    overflow: hidden;
+    position: relative;
+  }
+
+  .mt-preview-scroll {
+    position: absolute;
+    inset: 0;
+    padding: 1rem;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .mt-preview-scroll::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  .mt-preview-scroll::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .mt-preview-scroll::-webkit-scrollbar-thumb {
+    background: rgba(148, 163, 184, 0.3);
+    border-radius: 9999px;
+  }
+
+  :global(.mt-prev-item) {
+    border-bottom: 1px solid var(--mt-border);
+    padding-bottom: 1rem;
+  }
+
+  :global(.mt-prev-meta) {
+    display: flex;
+    align-items: baseline;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+    font-size: 0.75rem;
+    color: var(--mt-muted);
+  }
+
+  :global(.mt-prev-text) {
+    font-weight: 700;
+    color: var(--mt-text);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+
+  :global(.mt-sub) {
+    color: var(--mt-muted);
+    margin: 0.25rem 0 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.4;
+  }
+
+  .mt-copy-section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .mt-copy-btn {
+    width: 100%;
+    padding: 0.75rem 1.5rem;
+    background: var(--mt-btn-bg);
+    color: #fff;
+    border: none;
+    border-radius: 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 700;
+    cursor: pointer;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
+    transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
+  }
+
+  .mt-copy-btn:hover {
+    background: var(--mt-btn-hover);
+    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
+  }
+
+  .mt-copy-btn:active {
+    transform: scale(0.98);
+  }
+
+  .mt-feedback {
+    text-align: center;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--mt-feedback-color);
+    opacity: 0;
+    transition: opacity 0.3s;
+    margin: 0;
+  }
+</style>

package/src/tool/musicalTypography/i18n/en.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 = 'musical-typography';
+const title = 'Musical Typography Scale. Modular Scale Calculator';
+const description =
+  'Free online tool to create harmonious visual hierarchies using modular scales based on musical proportions. Generates ready-to-use CSS variables for your web design.';
+
+const faqData = [
+  {
+    question: 'What is a typographic modular scale?',
+    answer:
+      'It is a method for determining font sizes based on a constant mathematical ratio. Just like in music, where notes have harmonic relationships, the modular scale creates a balanced and predictable visual hierarchy.',
+  },
+  {
+    question: 'Why use musical intervals for design?',
+    answer:
+      'Musical intervals are proportions that the human brain perceives as harmonious. Applying them to text sizes creates a visual structure that feels correct and professional, rather than choosing sizes at random.',
+  },
+  {
+    question: 'What is the Golden Ratio in typography?',
+    answer:
+      'It is the proportion 1.618, known as the Golden Section. It creates very dramatic and elegant scales where each step in the hierarchy grows exponentially. Perfect for portfolio or art-focused websites.',
+  },
+  {
+    question: 'How do I implement the scale in my CSS file?',
+    answer:
+      'The tool generates CSS variables (tokens) in :root { --step-N: Xrem; } format. Copy them into your main CSS file and use them with var(--step-N) to maintain typographic consistency across your site.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Set the base size',
+    text: 'Enter the font size for your body text (usually 16px) which will serve as the fundamental note of your scale.',
+  },
+  {
+    name: 'Choose the interval',
+    text: 'Select a musical proportion to determine how much space there is between different heading levels.',
+  },
+  {
+    name: 'Preview the hierarchy',
+    text: 'Watch how the typographic levels behave in real time to verify the visual harmony fits your project.',
+  },
+  {
+    name: 'Export the code',
+    text: 'Click Copy CSS Variables to get the block ready to paste directly into your workflow.',
+  },
+];
+
+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: 'en',
+};
+
+const ui: MusicalTypographyUI = {
+  labelConfig: 'Configuration',
+  labelBaseSize: 'Base Size (px)',
+  hintBaseSize: 'Your paragraph text size (usually 16px).',
+  labelRatio: 'Musical Scale (Ratio)',
+  hintRatio: 'Determines how much the size grows at each step.',
+  labelCalculated: 'Calculated Values',
+  labelPreview: 'Preview',
+  btnCopyCss: 'Copy CSS Variables',
+  feedbackCopied: 'Variables copied to clipboard!',
+  previewText: 'Musical Typography',
+  previewSubtext: 'A perfect harmonic scale for your design.',
+  ratioSecundaMenor: 'Minor Second',
+  ratioSegundaMayor: 'Major Second',
+  ratioTerceraMenor: 'Minor Third',
+  ratioTerceraMayor: 'Major Third',
+  ratioCuartaPerfecta: 'Perfect Fourth',
+  ratioCuartaAumentada: 'Augmented Fourth',
+  ratioQuintaPerfecta: 'Perfect Fifth',
+  ratioProporcionAurea: 'Golden Ratio',
+  ratioSextaMayor: 'Major Sixth',
+  ratioSeptimaMenor: 'Minor Seventh',
+  ratioSeptimaMayor: 'Major Seventh',
+  ratioOctava: 'Octave',
+};
+
+export const content: ToolLocaleContent<MusicalTypographyUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References',
+  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: 'The invisible harmony of web design',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'The <strong>Musical Typography Scale</strong> applies the mathematics of musical intervals to typographic design. Just as a musical composition is governed by precise proportions, a solid visual design benefits from a mathematical structure that relates all sizes to each other.',
+    },
+    {
+      type: 'title',
+      text: 'How the modular scale works',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'The formula',
+      html: '<p>The progression is simple: <code>Size = Base × Ratio<sup>n</sup></code>. Step 0 is your base text. Step 1 is a small subtitle. Step 4 or 5 could be your main H1. The same multiplying constant (the ratio) ensures all relationships are consistent.</p>',
+    },
+    {
+      type: 'card',
+      title: 'Why "Musical"',
+      html: '<p>The Pythagoreans discovered that dividing a string in simple proportions (1:2, 2:3, 3:4) produced consonant sounds. These intervals, octave, perfect fifth and perfect fourth, are exactly the typographic ratios. You are composing visual music.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Choosing the right ratio',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'For dense interfaces (dashboards, tables) use small ratios like <code>1.125</code> or <code>1.2</code>. For editorial or portfolio sites, use more expressive ratios like <code>1.5</code> or <code>1.618</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Don\'t limit the scale to <code>font-size</code> only. The same CSS variables work for <code>margin</code>, <code>padding</code> and <code>gap</code>. When whitespace follows the same mathematical progression as the text, the design achieves a level of cohesion that everyone feels but few can explain.',
+    },
+  ],
+};