Add comprehensive blog demo showcasing advanced content management features
- 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
This commit is contained in:
159
demos/blog/index.html
Normal file
159
demos/blog/index.html
Normal file
@@ -0,0 +1,159 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title class="">The Forager's Journal - Wild Mushroom Adventures</title>
|
||||
<meta name="description" content="Expert guides to mushroom foraging, identification, and sustainable harvesting practices from an experienced mycophile.">
|
||||
<link href="style.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<header class="site-header">
|
||||
<div class="container">
|
||||
<h1 class="site-title insertr">🍄 The Forager's Journal</h1>
|
||||
<p class="site-tagline insertr">Wild Mushroom Adventures & Foraging Wisdom</p>
|
||||
<nav class="main-nav">
|
||||
<a href="#" class="nav-link insertr">Home</a>
|
||||
<a href="#guides" class="nav-link insertr">Field Guides</a>
|
||||
<a href="#recipes" class="nav-link insertr">Recipes</a>
|
||||
<a href="#safety" class="nav-link insertr">Safety</a>
|
||||
<a href="#" class="nav-link insertr-gate">Edit</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<article class="featured-post">
|
||||
<h2 class="insertr">Welcome to the Wild World of Mushroom Foraging</h2>
|
||||
<div class="insertr insertr-add">
|
||||
<p class="lead">After twenty years of wandering through forests with my basket and field guide, I've learned that mushroom foraging is much more than hunting for dinner—it's about connecting with nature, understanding ecosystems, and developing a deep respect for the fungal kingdom that quietly sustains our world.</p>
|
||||
|
||||
<p>Whether you're a complete beginner wondering where to start or an experienced forager looking to expand your knowledge, this journal chronicles my adventures, discoveries, and hard-learned lessons from the forest floor.</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="blog-posts" id="recent-posts">
|
||||
<div class="container">
|
||||
<h2 class="section-title insertr">Recent Adventures</h2>
|
||||
|
||||
<div class="insertr-add post-grid">
|
||||
<article class="blog-post-preview">
|
||||
<img src="https://images.unsplash.com/photo-1699896706993-fe9226cfc027?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1740" alt="Chanterelle mushrooms in forest setting" class="post-image">
|
||||
<div class="post-content">
|
||||
<h3 class="post-title insertr">Golden Treasures: A Guide to Foraging Chanterelles</h3>
|
||||
<p class="post-excerpt insertr">Discover the secrets to finding these golden beauties, from perfect habitat identification to sustainable harvesting techniques that ensure future seasons of abundance.</p>
|
||||
<div class="post-meta">
|
||||
<span class="post-date insertr">March 15, 2024</span>
|
||||
<span class="post-category insertr">Field Guide</span>
|
||||
</div>
|
||||
<a href="chanterelles.html" class="read-more insertr">Read Full Guide →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="blog-post-preview">
|
||||
<img src="https://images.unsplash.com/photo-1570197788417-0e82375c9371?w=400&h=250&fit=crop" alt="Shiitake mushrooms growing on log" class="post-image">
|
||||
<div class="post-content">
|
||||
<h3 class="post-title insertr">Spring Safety: Avoiding Dangerous Look-Alikes</h3>
|
||||
<p class="post-excerpt insertr">Spring brings excitement for new growth, but also increased risk. Learn to distinguish between safe edibles and their potentially deadly twins with confidence.</p>
|
||||
<div class="post-meta">
|
||||
<span class="post-date insertr">March 8, 2024</span>
|
||||
<span class="post-category insertr">Safety</span>
|
||||
</div>
|
||||
<a href="spring-safety.html" class="read-more insertr">Essential Reading →</a>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="blog-post-preview">
|
||||
<img src="https://images.unsplash.com/photo-1601574422784-7756746094fc?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=928" alt="Various wild mushrooms in wicker basket" class="post-image">
|
||||
<div class="post-content">
|
||||
<h3 class="post-title insertr">From Forest to Table: Wild Mushroom Risotto</h3>
|
||||
<p class="post-excerpt insertr">Transform your morning's harvest into an elegant dinner with this technique-focused risotto recipe that celebrates the unique flavors of wild fungi.</p>
|
||||
<div class="post-meta">
|
||||
<span class="post-date insertr">February 28, 2024</span>
|
||||
<span class="post-category insertr">Recipes</span>
|
||||
</div>
|
||||
<a href="wild-mushroom-risotto.html" class="read-more insertr">Get Recipe →</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="knowledge-base" id="guides">
|
||||
<div class="container">
|
||||
<h2 class="section-title insertr">Essential Knowledge</h2>
|
||||
<div class="knowledge-grid">
|
||||
<div class="knowledge-card">
|
||||
<h3 class="insertr">🔍 Identification Guide</h3>
|
||||
<div class="insertr-content">
|
||||
<p>Master the art of proper mushroom identification with detailed guides covering:</p>
|
||||
<ul>
|
||||
<li>Spore print techniques</li>
|
||||
<li>Key identifying features</li>
|
||||
<li>Seasonal availability charts</li>
|
||||
<li>Habitat preferences</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="knowledge-card">
|
||||
<h3 class="insertr">⚠️ Safety First</h3>
|
||||
<div class="insertr-content">
|
||||
<p>Foraging safely requires knowledge and caution. Essential safety topics include:</p>
|
||||
<ul>
|
||||
<li>The cardinal rule: when in doubt, don't</li>
|
||||
<li>Common toxic look-alikes</li>
|
||||
<li>Proper preparation methods</li>
|
||||
<li>Emergency procedures</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="knowledge-card">
|
||||
<h3 class="insertr">🌱 Sustainable Practices</h3>
|
||||
<div class="insertr-content">
|
||||
<p>Responsible foraging ensures mushrooms for future generations:</p>
|
||||
<ul>
|
||||
<li>Leave no trace principles</li>
|
||||
<li>Proper harvesting techniques</li>
|
||||
<li>Spore dispersal considerations</li>
|
||||
<li>Ecosystem preservation</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4 class="insertr">About the Author</h4>
|
||||
<div class="insertr-content">
|
||||
<p>Elena Rodriguez is a certified mycologist and foraging instructor with over two decades of experience. She leads workshops across the Pacific Northwest and has discovered three new species of forest fungi.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 class="insertr">Safety Disclaimer</h4>
|
||||
<div class="insertr-content">
|
||||
<p>Never consume any wild mushroom without absolute certainty of identification. This blog is for educational purposes only. Always consult multiple expert sources and consider taking guided forays before attempting to forage on your own.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4 class="insertr">Connect</h4>
|
||||
<p class="insertr">Follow along on social media for daily finds and seasonal updates.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-bottom">
|
||||
<p class="insertr">© 2024 The Forager's Journal. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user