Joakim
4874849f80
- Implement complete mushroom foraging blog with chanterelles article - Add rich demonstration of .insertr and .insertr-add functionality - Include comprehensive documentation for future .insertr-content vision - Update project styling and configuration to support blog demo - Enhance engine and API handlers for improved content management
133 lines
4.9 KiB
Markdown
133 lines
4.9 KiB
Markdown
# 🍄 The Forager's Journal - Mushroom Blog Demo
|
|
|
|
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
|
|
|
|
1. **Start the development server**:
|
|
```bash
|
|
just dev
|
|
```
|
|
|
|
2. **Visit the blog**:
|
|
```
|
|
http://localhost:8080/sites/blog/
|
|
```
|
|
|
|
3. **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
|
|
```html
|
|
<!-- 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:
|
|
|
|
1. **Seamless Rich Text Editing**: Click anywhere in article content to edit
|
|
2. **Structure Management**: Drag-and-drop reordering of content blocks
|
|
3. **Media Integration**: Easy image insertion and gallery management
|
|
4. **SEO Optimization**: Built-in tools for metadata and content optimization
|
|
5. **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.* |