--- 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!*