HTML to Stronglify Transformer

Convert static HTML content to Hugo/Stronglify dynamic templates with minimal structural changes.

Input

Any HTML file (e.g., test-1.html, landing-page.html, skill-detail.html)

Output

Improved HTML file named [original]-mejorado.html

Examples:

• •test-1.html → test-1-mejorado.html
• •landing.html → landing-mejorado.html
• •page.html → page-mejorado.html

What Gets Changed

1. Content to Hugo Variables (PRIMARY GOAL)

• •Convert static heading content (H1-H6) to $templateParams variables
• •Transform static paragraphs to $templateParams variables
• •Convert static lists into {{ range }} loops
• •Transform rich text blocks (multiple paragraphs, mixed HTML) to {{ $templateParams.content | safeHTML }}
• •Make content dynamic and reusable through Hugo templating

2. Preserve Everything Else (CRITICAL)

• •Keep HTML structure exactly as-is (all <div>, <span>, etc.)
• •Keep all CSS classes (Tailwind, custom classes)
• •Keep all HTML attributes (id, data-*, onclick, etc.)
• •Keep all existing Hugo syntax ({{ partial }}, {{ $var }}, {{ range }})
• •Keep all JavaScript (function calls, event handlers)
• •Keep all styling and layout (no structural changes)

Transformation Rules

Content to Hugo Variables

Headings (H1-H6):

<!-- Before -->
<h1 class="font-display font-800 text-[26px] lg:text-[32px] tracking-tight text-ink-strong leading-tight">
  audit/core-web-vitals-check
</h1>

<!-- After -->
<h1 class="font-display font-800 text-[26px] lg:text-[32px] tracking-tight text-ink-strong leading-tight">
  {{ $templateParams.title_h1 }}
</h1>

Variable naming convention:

• •Pattern: $templateParams.{descriptive_name}
• •Use lowercase, underscores for spaces
• •Examples: title_h1, subtitle_hero, description_main, title_2_requisitos

Lists (UL/OL):

<!-- Before -->
<section>
  <h2>Requisitos</h2>
  <ul>
    <li>API Key de Google PageSpeed Insights (gratuita)</li>
    <li>Node.js 18+ o Python 3.10+</li>
    <li>Conexión a internet para las consultas API</li>
  </ul>
</section>

<!-- After -->
<section>
  <h2>{{ $templateParams.title_2_requisitos }}</h2>
  <ul>
{{ range $element := $templateParams.requisitos_list }}
    <li>{{ $element.title }}</li>
{{ end }}
  </ul>
</section>

Range loop pattern:

• •{{ range $element := $templateParams.{list_name} }}
• •Access item with {{ $element.title }} or {{ $element.name }}
• •Always close with {{ end }}

Rich Text Content (safeHTML):

<!-- Before -->
<article>
  <p>hola esto es un texto largo <a href="">link</a></p>
  <p>Otro párrafo con <strong>texto en negrita</strong> y más contenido.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</article>

<!-- After -->
<article>
  {{ $templateParams.content | safeHTML }}
</article>

When to use safeHTML:

• •Blog post content
• •Long descriptions with HTML formatting (links, bold, italic, etc.)
• •Content from WYSIWYG editors
• •Multiple paragraphs with mixed HTML elements
• •Replace entire content blocks, not individual elements

safeHTML pattern:

• •{{ $templateParams.content | safeHTML }}
• •{{ $templateParams.body_text | safeHTML }}
• •{{ $templateParams.article_content | safeHTML }}

Hugo Variables Preservation

Always preserve:

• •{{ partial "header.html" . }}
• •{{ $templateParams.title }}
• •{{ range $items }}
• •{{ .Params.field }}

Keep exact syntax and spacing.

Processing Workflow

1. •Read input HTML file - Get filename (e.g., test-1.html)
2. •Identify static content - Find headings (H1-H6), paragraphs, lists
3. •Convert to Hugo variables - Replace static text with $templateParams variables
4. •Preserve everything else - Keep HTML structure, classes, attributes, Hugo syntax
5. •Generate output file - Save as [filename]-mejorado.html with minimal changes

File Naming Convention

Input → Output:

• •test-1.html → test-1-mejorado.html
• •landing-page.html → landing-page-mejorado.html
• •skill-detail.html → skill-detail-mejorado.html
• •index.html → index-mejorado.html

Always:

• •Use original filename as base
• •Add -mejorado suffix before .html
• •Keep same directory location

What NOT to Change

❌ Do NOT modify (CRITICAL):

• •HTML tags/structure (<div>, <span>, etc. stay exactly as-is)
• •Tailwind CSS classes
• •Any CSS classes
• •Hugo template variables {{ }}
• •Data attributes (data-*)
• •JavaScript (onclick, function names, etc.)
• •IDs and other attributes
• •Component structure
• •Visual layout
• •HTML comments
• •DOCTYPE, <html>, <head>, <body> (don't add if not present)

✅ ONLY modify:

• •Static text in headings → {{ $templateParams.title_* }}
• •Static text in paragraphs (simple) → {{ $templateParams.description_* }}
• •Static text in badges/labels → {{ $templateParams.badge_* }}
• •Static lists (<ul><li>) → {{ range }} loops with $templateParams.*_list
• •Rich text content blocks (multiple paragraphs, mixed HTML) → {{ $templateParams.content | safeHTML }}

Quick Examples

Heading (keep all classes):

<!-- Before -->
<h1 class="font-display font-800 text-[32px]">audit/core-web-vitals-check</h1>

<!-- After -->
<h1 class="font-display font-800 text-[32px]">{{ $templateParams.title_h1 }}</h1>

Paragraph (keep all classes):

<!-- Before -->
<p class="text-muted text-[15px]">Automatiza auditorías de Core Web Vitals...</p>

<!-- After -->
<p class="text-muted text-[15px]">{{ $templateParams.description_main }}</p>

List (keep structure, convert content):

<!-- Before -->
<ul>
  <li>API Key de Google PageSpeed Insights</li>
  <li>Node.js 18+ o Python 3.10+</li>
</ul>

<!-- After -->
<ul>
{{ range $element := $templateParams.requisitos_list }}
  <li>{{ $element.title }}</li>
{{ end }}
</ul>

Rich Text Content (safeHTML):

<!-- Before -->
<article>
  <p>Texto con <a href="">link</a> y <strong>negrita</strong></p>
  <p>Otro párrafo</p>
</article>

<!-- After -->
<article>
  {{ $templateParams.content | safeHTML }}
</article>

Hugo Syntax: Preserve existing {{ partial "header.html" . }} exactly

Advanced Transformations

For complete before/after examples, see references/transformations.md:

• •Static headings to Hugo variables
• •Static paragraphs to Hugo variables
• •Static badges/labels to Hugo variables
• •Static lists to {{ range }} loops
• •Rich text content to {{ safeHTML }}
• •Multi-section content transformation
• •Hugo variable preservation examples