Features Demo

Explore all the powerful features MarkoPress has to offer

# Features Demo

Welcome to the MarkoPress features showcase! This page demonstrates all the powerful features available in MarkoPress.

# 🎯 Core Features

# 1. Plugin System

MarkoPress has a powerful plugin system that allows you to extend functionality:

✅ Blog Index Plugin - Automatically generates blog listing pages
✅ Sidenav Plugin - Auto-generates sidebar navigation from content structure
✅ TOC Plugin - Creates table of contents from markdown headers
🚧 Search Plugin - Coming soon
🚧 RSS Feeds Plugin - Coming soon

# 2. Content Modules

Organize your content into logical modules:

Pages - General pages like Home, About, Contact
Docs - Documentation with sidebar navigation
Blog - Blog posts with date-based ordering

# 3. EnhanceModules Architecture

Plugins can enhance content modules with metadata:

// Plugins add enhancements like this:
blogModule.enhance('blogPosts', sortedPosts);
blogModule.enhance('blogConfig', config);

# 📝 Markdown Features

# Syntax Highlighting

// Your code is beautifully highlighted
function greet(name) {
  return `Hello, ${name}!`;
}

# Custom Containers

TIP

Pro tip: Use the enhanceModules hook to add custom metadata to your content!

WARNING

Warning: Make sure your plugins are compatible with your content structure.

DANGER

Important: Always test your plugins in development before deploying to production.

# Tables

Feature	Status	Description
Blog Index	✅ Done	Generates /blog route with all posts
Sidenav	✅ Done	Auto-generates from docs structure
TOC	✅ Done	Extracts from markdown headers
Search	🚧 Planned	Full-text search capability
RSS	🚧 Planned	Feed generation for blogs

# Task Lists

[x] Implement enhanceModules architecture
[x] Create Blog Index plugin
[x] Create Sidenav plugin
[x] Create TOC plugin
[ ] Implement Search plugin
[ ] Implement RSS Feeds plugin

# 🎨 Theming System

MarkoPress includes a flexible theming system with:

Slot-based overrides - Override any theme component
Design system - Built-in design tokens for easy customization
CSS Variables - Full control over colors, spacing, typography
Dark mode - Automatic dark mode support

# Available Slots

<div data-marko-tag="0"></div>     <div data-marko-tag="1"></div>  <!-- After <head> opens -->
<div data-marko-tag="2"></div>     <!-- After <body> opens -->
<div data-marko-tag="3"></div>  <div data-marko-tag="4"></div> <div data-marko-tag="5"></div><div data-marko-tag="6"></div>   <!-- End of navbar -->
<!-- ... and many more! -->

# 🚀 Performance

Static Site Generation - Blazing fast static HTML
Automatic Optimization - Optimized builds by default
Lazy Loading - Components load only when needed
Tree Shaking - Unused code is eliminated

# 📦 What’s Next?

Check out these links to see the features in action:

Blog Index - See the auto-generated blog listing
Documentation - Explore docs with sidebar and TOC
Plugins Guide - Learn how to create your own plugins

This demo page showcases the power and flexibility of MarkoPress. Built with ❤️ using Marko.js v6