docs refactor
All checks were successful
All checks were successful
This commit is contained in:
356
docs/content/explore.md
Normal file
356
docs/content/explore.md
Normal file
@ -0,0 +1,356 @@
|
||||
---
|
||||
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!*
|
||||
Reference in New Issue
Block a user