Markdown Section Framework

A minimal, no-build, portable system for rendering beautiful, animated, and/or parallax-enabled HTML sites from Markdown files—using simple reference-style directives.

---

🚀 Features

• No build step: Just open HTML files in your browser or serve them statically.

• Live Markdown editing preview (for editor/demo page).

• Page-per-markdown: Each .html loads a .md file with the same name.

• Directives for animation/parallax:

  • Animate.css classes (fadeIn, bounceIn, delays, etc.)
  • Rellax.js for parallax/scroll effects
  • Custom classes/styles via simple reference-style syntax

• Theme toggle: Light/Dark mode with one click.

• Easy extensibility: Add more effect helpers with minimal code changes.

---

🗂️ Project Structure

index.html            # Main site page
about.html            # Example subpage
index.md              # Markdown content for index.html
about.md              # Markdown for about.html
main.js               # Entry point
utils.js              # Utility helpers
mdParser.js           # Markdown parser & directive logic
mdRenderer.js         # Rendering & effect helpers (Animate.css, Rellax, etc.)
styles.css            # Main CSS (layout, typography, sections)

---

🛠️ Getting Started

1. Download or clone this repo.

2. Open any .html file in your browser, or use a static server (for fetch to work):

   python3 -m http.server

3. To create new pages:

   • Copy index.html → about.html
   • Create a matching about.md (your Markdown content)
   • That’s it! about.html will automatically load and render about.md.

---

✍️ Authoring Markdown with Directives

Directives let you add effects, animation, parallax, icons, and more using reference-style Markdown links.

Section Example

---
[callout]: animate "fadeInUp delay-1s style=background:#ffe"
## Animated Callout

This section fades in and uses a custom background color.
---

Parallax Example

---
[hero]: rellax "fadeIn style=color:white; background:hero.jpg;"
# Parallax Hero

Scroll down for more!
---

Combined Example

---
[feature]: parallax "fadeInLeft speed=2"
## Feature Section

This section slides in and scrolls at a different speed.
---

---

🎨 Theme Switching

A floating button (bottom left) toggles dark/light theme. Theme is saved in localStorage and follows system preference by default.

---

🧑‍💻 Advanced: Adding New Effects

To support new classes/effects (e.g., lax.js, GSAP, etc.):

1. Add a new applyLaxClasses helper to mdRenderer.js.
2. Call your new helper from mdParser.js’s directiveToAttrs in the right blocks.
3. Done—your pipeline is fully pluggable!

---

🤝 Contributing

Pull requests and suggestions welcome! All effect helpers should be pure functions: take a class array, return a new class array. All code should be modular, readable, and DRY.

---

📄 License

MIT

---

🙏 Credits

• Animate.css
• Rellax.js
• Marked
• Jákup Michaelsen

---

Enjoy building expressive, beautiful markdown-driven sites! Questions or ideas? Open an issue or start a discussion.