html-presentations

HTML Presentations

Convert a markdown spec file into an HTML presentation using the Poimandres-themed template.

Files

• Template: {SKILLBASE}/template/index.html
• Example spec: {SKILLBASE}/examples/spec.md
• Build script: {SKILLBASE}/scripts/create_standalone.sh

Instructions

1. Read the spec markdown file (e.g., spec.md)

2. Read the template at {SKILLBASE}/template/index.html

3. Parse the spec file:

   • Split on * * * to get individual slides
   • # Title = title slide (use <h1>)
   • ## Heading = slide heading (use <h2>)
   • - item = bullet list (use <ul><li>)
   • **bold** = emphasis (use <span class="accent"> or <span class="green">)
   • > quote = blockquote (use <blockquote class="quote">)
   • <img src="..."> = image (keep as-is, add class="shadow" if appropriate)
   • ```mermaid ``` = mermaid diagram (wrap in <div class="mermaid-wrapper"><pre class="mermaid">)
   • <!-- image gallery - VERTICAL --> = split images into separate slides (one per slide)
   • <!-- comment --> = other layout hints (e.g., <!-- big quote -->)

4. Generate HTML slides:

   • Each slide is a <section class="slide"> (add centered class for title/image slides)
   • Preserve the template's head section (styles, scripts, mermaid config)
   • Preserve the navigation and script at the bottom

5. Write output to index.html in the same directory as the spec, offer to open it using Bash for the user

6. OPTIONAL Create standalone shareable HTML:

   • Run the build script to embed all PNG images as base64 data URIs
   • Output: FOLDERNAME-standalone.html (e.g., 2026-01-05-luciq-presentation-standalone.html)
   • Creates a single self-contained file (~2-3MB) that opens in any browser

   {SKILLBASE}/scripts/create_standalone.sh /path/to/presentation/folder
   

Slide Type Examples

Title Slide

<section class="slide centered">
  <h1>Presentation Title</h1>
  <p class="subtitle">Subtitle here</p>
</section>