A complete blog demonstration showcasing how .insertr-content could work for long-form content management. This demo features a mushroom foraging enthusiast's blog with rich content about wild mushroom identification, foraging techniques, and sustainable harvesting practices.

What This Demo Showcases

Current Insertr Features

Individual Element Editing (.insertr): Page titles, navigation links, dates, categories, tags
Collection Management (.insertr-add): Blog post previews, related links, knowledge cards
Real-time Persistence: All content changes are saved to the database
Perfect Style Preservation: All custom CSS styling is maintained during editing

Future `.insertr-content` Vision

Rich Text Editing: Long-form article content with sophisticated formatting
Content Structure Management: Headings, paragraphs, lists, blockquotes, media
Blog-specific Features: SEO metadata, reading time, author bios, content relationships

Demo Content

Main Pages

index.html - Blog homepage with featured content and post previews
chanterelles.html - Complete article about chanterelle mushroom foraging
insertr.yaml - Configuration file with content types and settings

Content Highlights

Expert Knowledge: 20+ years of foraging experience from "Elena Rodriguez"
Safety Focus: Emphasis on safe identification and sustainable practices
Rich Media: High-quality nature photography and detailed descriptions
Engaging Writing: Educational content that's accessible to beginners

Accessing the Demo

Start the development server:
```
just dev
```
Visit the blog:
```
http://localhost:8080/sites/blog/
```
Try editing content:
- Click the "Edit" button in the top-right corner
- Click on any element with the .insertr class to edit
- Notice how changes persist across page reloads

Technical Implementation

Insertr Classes Used

`.insertr` - Individual Elements

Page titles and headings
Navigation links and buttons
Metadata (dates, categories, tags)
Author information
Individual paragraphs in footer sections

`.insertr-add` - Collections

Blog post previews grid
Related article links
Knowledge base cards
Tag collections

`.insertr-content` - Long-form Content (Future)

Article body content
Author biographies
Rich text sections with complex formatting

Content Structure

<!-- Current: Individual elements -->
<h1 class="insertr">Editable Title</h1>
<p class="insertr">Editable paragraph</p>

<!-- Current: Collections -->
<div class="insertr-add blog-posts">
  <article>...</article>
  <article>...</article>
</div>

<!-- Future: Rich content blocks -->
<div class="insertr-content">
  <h2>Sophisticated Formatting</h2>
  <p>With <strong>rich text</strong> editing...</p>
  <blockquote>Author quotes and citations</blockquote>
  <ul><li>Complex lists and structures</li></ul>
</div>

Styling Approach

The demo uses a nature-inspired design system:

Color Palette: Forest greens, warm creams, mushroom browns, golden accents
Typography: Georgia serif for readability with nature-themed hierarchy
Layout: Responsive grid system with clean, article-focused design
Components: Reusable cards, buttons, and content blocks

Content Strategy

Target Audience

Beginner Foragers: Safety-first approach with detailed guidance
Experienced Enthusiasts: Advanced techniques and expert insights
Nature Lovers: Environmental consciousness and ecosystem preservation

Content Types

Field Guides: Identification and habitat information
Safety Articles: Risk mitigation and emergency procedures
Recipes: From forest to table culinary content
Conservation: Sustainable harvesting and ecological awareness

Future Enhancements

When .insertr-content is implemented, this demo will showcase:

Seamless Rich Text Editing: Click anywhere in article content to edit
Structure Management: Drag-and-drop reordering of content blocks
Media Integration: Easy image insertion and gallery management
SEO Optimization: Built-in tools for metadata and content optimization
Publishing Workflow: Draft/review/publish states for content management

Educational Value

This demo serves as a reference for:

Content Creators: How rich CMS features can work with static sites
Developers: Integration patterns for .insertr-content implementation
Designers: Style preservation and responsive design with CMS functionality
Site Owners: The power of combining static site performance with dynamic content management

This demo represents the vision for how Insertr can evolve to handle complex content while maintaining its core principles of zero configuration and perfect style preservation.

README.md

🍄 The Forager's Journal - Mushroom Blog Demo