--- version: "1.0" date: "2025-01-15" author: "DWS Foldsite Team" title: "Template Recipes" description: "Ready-to-use examples for common Foldsite patterns" summary: "Complete, working examples for building blogs, photo galleries, documentation sites, and more with Foldsite." quick_tips: - "All recipes are complete and ready to use - just copy and customize" - "Recipes demonstrate real-world patterns used in production Foldsites" - "Mix and match components from different recipes" --- # Template Recipes Ready-to-use templates and patterns for common Foldsite use cases. Copy these examples and customize them for your needs. ## Recipe Collection ### Blog Site Complete blog setup with recent posts, tag filtering, and related content. ### Photo Gallery Beautiful image galleries with EXIF data, breadcrumbs, and responsive layout. ### Documentation Site Hierarchical documentation with navigation, breadcrumbs, and sibling pages. ### Portfolio Site Project showcase with custom layouts per project. --- ## Recipe 1: Personal Blog A complete blog with post listings, tags, and related posts. ### Directory Structure ``` my-blog/ ├── content/ │ ├── index.md │ ├── about.md │ └── posts/ │ ├── 2024-01-15-first-post.md │ ├── 2024-02-20-python-tips.md │ └── 2024-03-10-web-development.md ├── templates/ │ ├── base.html │ ├── index.html │ ├── __file.md.html │ └── posts/ │ ├── __file.md.html │ └── __folder.md.html └── styles/ ├── base.css └── posts/ └── __file.md.css ``` ### Post Frontmatter Format ```markdown --- title: "My First Blog Post" date: "2024-01-15" author: "Your Name" tags: ["python", "tutorial", "beginners"] description: "A brief introduction to Python for beginners" --- # Your content here... ``` ### Template: `base.html` ```html {% if metadata and metadata.title %}{{ metadata.title }} - {% endif %}My Blog {% for style in styles %} {% endfor %}

``` ### Template: `index.html` (Homepage) ```html

Welcome to My Blog

Thoughts on coding, life, and everything in between.

{{ metadata.date }} {% if metadata.author %} by {{ metadata.author }} {% endif %}

{% if metadata.tags %}

{% for tag in metadata.tags %} {{ tag }} {% endfor %}

{% endif %} {% endif %}

``` ### Template: `posts/__folder.md.html` (Post Index) ```html

All Posts

{{ get_recent_posts(limit=1000, folder='posts')|length }} posts and counting

{% for post in get_recent_posts(limit=100, folder='posts') %}

{% if post.metadata.description %}

{% endif %} {% if post.metadata.tags %}

{% for tag in post.metadata.tags %} {{ tag }} {% endfor %}

{% endif %}

{% endfor %}

``` --- ## Recipe 2: Photo Gallery Beautiful, responsive photo galleries with EXIF data extraction. ### Directory Structure ``` photo-site/ ├── content/ │ ├── index.md │ └── galleries/ │ ├── vacation-2024/ │ │ ├── IMG_001.jpg │ │ ├── IMG_002.jpg │ │ └── IMG_003.jpg │ └── family/ │ └── photos... ├── templates/ │ ├── base.html │ └── galleries/ │ └── __folder.image.html └── styles/ ├── base.css └── galleries/ └── __folder.image.css ``` ### Template: `galleries/__folder.image.html` ```html

{% set photos = get_folder_contents(currentPath)|selectattr('categories', 'contains', 'image') %}

{{ photos|list|length }} photos

{# Show sibling galleries #} {% set sibling_folders = get_sibling_content_folders(currentPath) %} {% if sibling_folders %} {% endif %}

{% for photo in photos|list|sort(attribute='date_created', reverse=True) %}

{{ photo.name }} — {% if photo.metadata.exif.DateTimeOriginal %} {{ photo.metadata.exif.DateTimeOriginal }} {% endif %} {% if photo.metadata.exif.Model %} {{ photo.metadata.exif.Model }} {% endif %} {% if photo.metadata.exif.LensModel %} {{ photo.metadata.exif.LensModel }} {% endif %}

{% endfor %}

{# Optional: Include a lightbox library #} ``` ### Styles: `galleries/__folder.image.css` ```css .photo-gallery { max-width: 1400px; margin: 0 auto; padding: 2rem; } .gallery-header { margin-bottom: 3rem; text-align: center; } .breadcrumbs { font-size: 0.9rem; color: #666; margin-bottom: 1rem; } .breadcrumbs a { color: #0066cc; text-decoration: none; } .photo-count { color: #888; font-size: 0.95rem; } .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; margin-top: 2rem; } .photo-item { position: relative; margin: 0; overflow: hidden; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s, box-shadow 0.2s; } .photo-item:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); } .photo-link { display: block; line-height: 0; } .photo-item img { width: 100%; height: auto; display: block; } .photo-caption { padding: 0.75rem; background: white; font-size: 0.85rem; color: #666; } .photo-caption time { display: block; margin-bottom: 0.25rem; } .gallery-nav { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid #eee; } .gallery-nav a { display: inline-block; margin: 0.5rem; padding: 0.5rem 1rem; background: #f5f5f5; border-radius: 4px; text-decoration: none; color: #333; } .gallery-nav a:hover { background: #e5e5e5; } @media (max-width: 768px) { .photo-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; } } ``` --- ## Recipe 3: Documentation Site Hierarchical documentation with navigation and search. ### Directory Structure ``` docs-site/ ├── content/ │ ├── index.md │ ├── getting-started/ │ │ ├── installation.md │ │ ├── configuration.md │ │ └── quickstart.md │ ├── guides/ │ │ ├── basics.md │ │ └── advanced.md │ └── api/ │ ├── overview.md │ └── reference.md ├── templates/ │ ├── base.html │ ├── index.html │ └── __file.md.html └── styles/ └── base.css ``` ### Template: `__file.md.html` (Documentation Page) ```html

Documentation

Getting Started

Guides

API Reference

{# Show sibling pages automatically #} {% set siblings = get_sibling_content_files(currentPath) %} {% if siblings|length > 1 %} {% endif %}

{% if metadata and metadata.title %}

{% endif %} {{ content|safe }}

``` --- ## Recipe 4: Portfolio Site Showcase projects with custom layouts. ### Template: Portfolio Homepage ```html

{{ metadata.description if metadata else "Designer & Developer" }}

Featured Projects

{% for folder_name, folder_path in get_sibling_content_folders('projects') %} {% set project_files = get_folder_contents(folder_path) %} {% set cover_image = project_files|selectattr('categories', 'contains', 'image')|first %} {% if cover_image %} ${{ folder_name }}$ {% endif %}

{% endfor %}

``` --- ## Mixing Recipes You can combine elements from different recipes: ### Blog + Gallery Add photo galleries to a blog site by including the gallery template in your blog's template directory. ### Documentation + Blog Add a `/blog` section to documentation by including blog templates alongside docs templates. ### Portfolio + Blog Showcase projects and share thoughts by combining portfolio and blog patterns. ## Customization Tips 1. **Start with one recipe** - Get it working before adding complexity 2. **Modify styles first** - Change colors, fonts, spacing to match your brand 3. **Adjust layouts gradually** - Start with structure, refine as you go 4. **Add features incrementally** - Don't try to implement everything at once ## Next Steps - **[Template System](../templates/)** - Understanding how templates work - **[Template Helpers](../templates/template-helpers.md)** - Complete API reference - **[Styles Guide](../styles/)** - Styling your site - **[Explore Foldsites](../explore.md)** - See real examples Copy these recipes, make them your own, and build something amazing!

Welcome to My Blog

Recent Posts

{{ post.title }}

{{ metadata.title }}

All Posts

{{ post.title }}

{{ currentPath.split('/')[-1]|replace('-', ' ')|title }}

{{ metadata.title }}

{{ metadata.title if metadata else "My Portfolio" }}

Featured Projects

{{ folder_name|replace('-', ' ')|title }}