357 lines
8.4 KiB
Markdown
357 lines
8.4 KiB
Markdown
---
|
|
version: "1.0"
|
|
date: "2025-01-15"
|
|
author: "DWS Foldsite Team"
|
|
title: "Explore Foldsites"
|
|
description: "Real-world Foldsite examples and inspiration"
|
|
summary: "Discover websites built with Foldsite - from personal blogs to photo portfolios and documentation sites."
|
|
quick_tips:
|
|
- "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](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:
|
|
```markdown
|
|
#### 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:
|
|
|
|
```bash
|
|
# 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](theme-gallery.md).
|
|
|
|
## 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](recipes/)** - Template code you can copy
|
|
- **[Theme Gallery](theme-gallery.md)** - Downloadable themes
|
|
- **[Templates Guide](templates/)** - Learn the system
|
|
- **[Support](support.md)** - Get help building your site
|
|
|
|
**Ready to build?** [Get Started](index.md#quick-start)
|
|
|
|
*Remember: Every great Foldsite started as an empty folder. Your site could be featured here next!*
|