foldsite/docs/content/explore.md

version, date, author, title, description, summary, quick_tips

version	date	author	title	description	summary	quick_tips
1.0	2025-01-15	DWS Foldsite Team	Explore Foldsites	Real-world Foldsite examples and inspiration	Discover websites built with Foldsite - from personal blogs to photo portfolios and documentation sites.	Real sites provide the best learning examples View source to see how they're built Steal ideas (with attribution) and make them your own

Explore Foldsites

See what people are building with Foldsite. These real-world examples demonstrate different approaches, designs, and use cases.

Featured Sites

Personal Sites & Blogs

Tanishq Dubey's Site

URL: https://tanishq.page Type: Personal blog + photo gallery Highlights:

• Clean, minimal design
• Mix of blog posts and photo galleries
• Breadcrumb navigation
• Responsive layout

What you can learn:

• How to combine blog and gallery in one site
• Sidebar navigation pattern
• Photo organization by folders

---

Documentation Sites

Foldsite Documentation

URL: (This site!) Type: Product documentation Highlights:

• Hierarchical content organization
• Sibling page navigation
• Code examples with syntax highlighting
• Comprehensive frontmatter usage

What you can learn:

• Documentation site structure
• Template organization
• Content hierarchy best practices

---

Community Showcase

This section is community-curated. Add your site below!

How to Add Your Site

Built something with Foldsite? Share it with the community!

To add your site:

1. Fork the Foldsite repository
2. Edit docs/content/explore.md
3. Add your site using this template:

#### Your Site Name
**URL:** https://your-site.com
**Type:** Blog / Portfolio / Gallery / Docs / Other
**Highlights:**
- Key feature 1
- Key feature 2
- Key feature 3

**What makes it special:**
Brief description of unique aspects or interesting implementation details.

4. Submit a pull request

Guidelines:

• Your site must be publicly accessible
• Must be built with Foldsite
• Keep description concise
• No commercial promotion (personal/hobby sites only)
• Family-friendly content

---

Inspiration Gallery

Blog Designs

Minimalist Blog

• Clean typography
• Lots of whitespace
• Focus on content
• Tag-based navigation

Magazine Style

• Grid layout
• Featured images
• Multi-column
• Category sections

Tech Blog

• Syntax highlighting
• Code-focused
• Dark mode
• Technical diagrams

Photo Galleries

Travel Photography

• Location-based organization
• EXIF data display
• Lightbox viewing
• Map integration (possible)

Portfolio Site

• Project-based galleries
• About/contact pages
• Custom landing page
• Client testimonials

Photo Blog

• Mix of photos and text
• Chronological posts
• Photo series
• Behind-the-scenes content

Documentation Styles

API Reference

• Code examples
• Parameter tables
• Return value documentation
• Search functionality

User Guide

• Step-by-step tutorials
• Screenshots/diagrams
• Prerequisites sections
• Troubleshooting guides

Knowledge Base

• FAQ style
• Search by category
• Related articles
• Quick answers

Design Patterns

Common patterns seen across successful Foldsites:

Navigation

Sidebar Navigation (Like example_site)

┌─────────────┬──────────────────────────┐
│             │                          │
│  Sidebar    │  Main Content            │
│  Nav        │                          │
│             │                          │
│  - Home     │  Page content here...    │
│  - About    │                          │
│  - Blog     │                          │
│  - Photos   │                          │
│             │                          │
└─────────────┴──────────────────────────┘

Top Navigation

┌────────────────────────────────────────┐
│ Logo    Home  About  Blog  Contact     │
├────────────────────────────────────────┤
│                                        │
│  Main Content                          │
│                                        │
└────────────────────────────────────────┘

Breadcrumb Navigation

Home / Blog / 2024 / My Post

────────────────────────────────────────
Post Content

Layouts

Single Column

• Best for reading
• Focus on content
• Mobile-friendly by default

Two Column

• Content + sidebar
• Related posts/navigation
• Additional information

Grid

• Photo galleries
• Post previews
• Portfolio items

Learning from Examples

View Source

All Foldsites are just HTML, CSS, and markdown. View source to learn:

1. Right-click → View Page Source - See rendered HTML
2. Check /styles/ URLs - View CSS files
3. Look at URL structure - Understand content organization

Clone and Experiment

For open source Foldsites:

# Clone repository
git clone https://github.com/user/their-site.git

# Copy their templates
cp -r their-site/templates my-site/templates

# Customize and make it your own

Adaptation Guidelines

Do:

• Study patterns and techniques
• Adapt ideas to your needs
• Give credit for inspiration
• Make it your own

Don't:

• Copy entire sites wholesale
• Use someone else's content
• Steal unique designs exactly
• Claim others' work as yours

Themes & Templates

Official Examples

example_site/ (in repository)

• Typical blog/gallery site
• Shows common patterns
• Breadcrumb navigation
• Sidebar layout

Community Themes

Coming soon! Community-contributed themes will be listed here.

Want to contribute a theme? See Theme Gallery.

Case Studies

From Idea to Site

Case Study 1: Personal Blog

Goal: Simple blog to share thoughts Time: 2 hours Approach:

1. Started with example_site templates
2. Customized colors and fonts
3. Added personal branding
4. Deployed to GitHub Pages

Lessons learned:

• Start simple, iterate
• Templates cascade saves time
• Custom homepage makes it special

---

Case Study 2: Photography Portfolio

Goal: Showcase travel photography Time: 4 hours Approach:

1. Organized photos by location/trip
2. Used __folder.image.html template
3. Added EXIF data display
4. Integrated lightbox library

Lessons learned:

• Folder structure = site structure
• EXIF data adds context
• Thumbnail generation is automatic

---

Case Study 3: Project Documentation

Goal: Document open source project Time: 6 hours Approach:

1. Mirrored code structure in content
2. Created hierarchical docs
3. Added code examples
4. Set up sibling navigation

Lessons learned:

• Mirror mental model in folders
• Breadcrumbs essential for deep hierarchies
• Code blocks need good syntax highlighting

Tips from the Community

"Start with one template and iterate. Don't try to build everything at once." — Early Foldsite user

"The folder structure IS the site structure. Once I understood that, everything clicked." — Documentation writer

"Use hidden files (___) for drafts. Game changer for my workflow." — Blogger

"Template helpers like get_recent_posts() saved me so much time. No database needed!" — Former WordPress user

Your Site Here

Built something with Foldsite? We'd love to feature it!

Submission criteria:

• Publicly accessible
• Built with Foldsite
• Demonstrates interesting pattern or design
• Well-executed (doesn't have to be perfect!)

How to submit:

1. Open issue on GitHub with "Showcase" label
2. Include URL, description, and what makes it special
3. We'll review and add to this page

Explore More

• Recipes - Template code you can copy
• Theme Gallery - Downloadable themes
• Templates Guide - Learn the system
• Support - Get help building your site

Ready to build? Get Started

Remember: Every great Foldsite started as an empty folder. Your site could be featured here next!