@alliance-droid/svelte-docs-system 0.0.1

package/docs/en/index.md

@@ -0,0 +1,243 @@
+---
+title: Documentation Home
+description: Complete guide to the SvelteKit Documentation System
+author: Andrew
+date: 2026-02-05
+---
+
+# SvelteKit Documentation System
+
+Welcome to the complete documentation for the SvelteKit Documentation System. This is a production-ready documentation platform built with SvelteKit and Svelte 5.
+
+## Quick Start
+
+Get your documentation site running in minutes:
+
+1. **[Integration Guide](/docs/getting-started/integration)** - Add to your existing SvelteKit project
+2. **[Setup Guide](/docs/setup)** - Initial setup and configuration
+3. **[Component Reference](/docs/components)** - All available components with examples
+
+## Key Features
+
+- ✅ **Folder-based routing** - Markdown files become routes automatically
+- ✅ **Professional theme** - Claude Code aesthetic with dark mode
+- ✅ **Responsive design** - Mobile, tablet, and desktop support
+- ✅ **Full-text search** - Find content instantly (Pagefind)
+- ✅ **Dark mode** - Automatic theme switching
+- ✅ **Production-ready** - Built with SvelteKit and Svelte 5
+- ✅ **Highly customizable** - Colors, layout, components
+
+## Documentation Structure
+
+### Getting Started
+
+Learn how to integrate the documentation system into your project:
+- [Integration Guide](/docs/getting-started/integration) - Add to existing SvelteKit projects
+- [Setup](/docs/setup) - Initial configuration
+
+### Core Concepts
+
+Understand how the system works:
+- [Routing](/docs/routing) - How markdown maps to routes
+- [Markdown Features](/docs/markdown) - Supported markdown syntax
+
+### Configuration
+
+Customize your documentation:
+- [Theme & Colors](/docs/config/theme-and-colors) - Change colors and appearance
+- [Navigation](/docs/config/navigation) - Organize sidebar and navbar
+
+### Components
+
+Use and customize components:
+- [Components Reference](/docs/components) - All 6 core components
+- [Component Props](/docs/components) - Detailed prop documentation
+- [Examples](/docs/components) - Copy-paste examples
+
+### Guides
+
+Learn common patterns:
+- [Common Setup Patterns](/docs/guides/common-setups) - API docs, product docs, blogs
+- [API Documentation](/docs/guides/common-setups#1-api-documentation-site)
+- [Product Documentation](/docs/guides/common-setups#2-product-documentation)
+- [Blog/Content Site](/docs/guides/common-setups#3-blogcontent-site)
+- [Multi-Language Docs](/docs/guides/common-setups#4-multi-language-documentation)
+- [Open Source Docs](/docs/guides/common-setups#5-open-source-project-documentation)
+
+### Troubleshooting
+
+Solutions to common problems:
+- [Troubleshooting Guide](/docs/troubleshooting) - Fix common issues
+- [Build Issues](/docs/troubleshooting#build--development-issues)
+- [Routing Issues](/docs/troubleshooting#routing--navigation-issues)
+- [Styling Issues](/docs/troubleshooting#styling--theme-issues)
+- [Performance Issues](/docs/troubleshooting#performance-issues)
+
+## What's Included
+
+### 6 Core Components
+
+1. **DocLayout** - Main wrapper orchestrating theme, navbar, sidebar, footer
+2. **Navbar** - Header with logo, theme toggle, version/language selectors
+3. **Sidebar** - Responsive navigation with nested items and active states
+4. **Footer** - Multi-column footer with links and social media
+5. **Callout** - Alert boxes (info, warning, success, error)
+6. **Breadcrumbs** - Current page path navigation
+
+### Additional Components
+
+- **CodeBlock** - Syntax highlighted code with copy button
+- **Tabs** - Tabbed content interface
+- **Image** - Responsive images with captions
+- **APITable** - API reference tables
+- **Search** - Full-text search interface
+
+### Stores
+
+- **theme** - Light/dark mode management
+- **nav** - Navigation structure and sidebar state
+
+## For Different Use Cases
+
+### Building API Documentation?
+Start with [API Documentation Pattern](/docs/guides/common-setups#1-api-documentation-site)
+
+### Building Product Documentation?
+Start with [Product Documentation Pattern](/docs/guides/common-setups#2-product-documentation)
+
+### Building a Blog?
+Start with [Blog Pattern](/docs/guides/common-setups#3-blogcontent-site)
+
+### Supporting Multiple Languages?
+Start with [Multi-Language Pattern](/docs/guides/common-setups#4-multi-language-documentation)
+
+### Building Open Source Docs?
+Start with [Open Source Pattern](/docs/guides/common-setups#5-open-source-project-documentation)
+
+## Technology Stack
+
+- **Framework:** SvelteKit 2.x with Svelte 5
+- **Styling:** Tailwind CSS 4
+- **Search:** Pagefind
+- **Build Tool:** Vite
+- **Language:** TypeScript
+- **Testing:** Vitest
+
+## File Structure
+
+```
+your-project/
+├── src/
+│   ├── lib/
+│   │   ├── components/    # DocLayout, Navbar, Sidebar, Footer, etc.
+│   │   └── stores/        # theme, nav stores
+│   ├── routes/
+│   │   └── docs/          # Documentation routes
+│   │       ├── +layout.svelte
+│   │       └── [...slug]/+page.svelte
+│   └── app.css            # Tailwind CSS
+├── docs/                  # Your markdown files
+│   ├── index.md
+│   ├── setup.md
+│   ├── api/
+│   │   └── overview.md
+│   └── guides/
+│       └── getting-started.md
+├── tailwind.config.ts
+└── svelte.config.js
+```
+
+## Integration in 5 Steps
+
+1. **Create docs folder** - `mkdir docs`
+2. **Create route handlers** - Copy `src/routes/docs/` files
+3. **Write markdown** - Create `.md` files in `docs/`
+4. **Configure navigation** - Define sidebar sections
+5. **Customize theme** - Edit `tailwind.config.ts` colors (optional)
+
+[See full integration guide →](/docs/getting-started/integration)
+
+## Next Steps
+
+👉 **Start here:** [Integration Guide](/docs/getting-started/integration)  
+📖 **Learn components:** [Components Reference](/docs/components)  
+🎨 **Customize theme:** [Theme Configuration](/docs/config/theme-and-colors)  
+🧭 **Setup navigation:** [Navigation Configuration](/docs/config/navigation)  
+❓ **Need help?** [Troubleshooting Guide](/docs/troubleshooting)
+
+## Examples
+
+### Basic Documentation Site
+```
+docs/
+├── index.md
+├── getting-started.md
+├── installation.md
+├── api/
+│   ├── overview.md
+│   └── reference.md
+└── faq.md
+```
+
+### Complex Documentation Site (with sections)
+```
+docs/
+├── index.md
+├── getting-started/
+│   ├── index.md
+│   ├── installation.md
+│   └── configuration.md
+├── guides/
+│   ├── integration.md
+│   ├── theming.md
+│   └── deployment.md
+├── api/
+│   ├── overview.md
+│   ├── endpoints.md
+│   └── errors.md
+└── troubleshooting.md
+```
+
+## Features in Action
+
+### Automatic Routing
+```
+docs/setup.md → /docs/setup
+docs/api/endpoints.md → /docs/api/endpoints
+docs/guides/integration.md → /docs/guides/integration
+```
+
+### Dark Mode
+Click the sun/moon icon in the navbar to toggle dark mode. Your preference is saved locally.
+
+### Responsive Sidebar
+On mobile, click the hamburger menu to show/hide the navigation sidebar. It automatically closes when you navigate.
+
+### Search
+Full-text search powered by Pagefind. Just start typing in the search box.
+
+### Active Navigation
+The current page is highlighted in the sidebar. Breadcrumbs show your location.
+
+## Community & Support
+
+- **GitHub:** [Report issues](https://github.com/andrew-org/svelte-docs-system)
+- **Discussions:** Ask questions in GitHub Discussions
+- **Contributing:** See contributing guide for how to help
+
+## Version History
+
+**v1.0.0** (February 2026)
+- Initial release with 6 core components
+- Full dark mode support
+- Responsive design
+- Search integration
+- Theme customization
+
+[See all features →](/docs/components)
+
+---
+
+**Ready to get started?** [→ Integration Guide](/docs/getting-started/integration)
+
+Questions? Check the [Troubleshooting Guide](/docs/troubleshooting) or see [Common Setup Patterns](/docs/guides/common-setups) for your use case.

package/docs/en/markdown.md

@@ -0,0 +1,102 @@
+---
+title: Markdown Features
+description: What markdown features are supported
+author: Andrew
+date: 2026-02-05
+---
+
+# Markdown Features
+
+The documentation system supports full markdown syntax with frontmatter metadata.
+
+## Frontmatter
+
+Add metadata to the top of your markdown files:
+
+```yaml
+---
+title: Page Title
+description: Short description for SEO
+author: Your Name
+date: 2026-02-05
+---
+```
+
+Supported fields:
+- `title` - Page title (appears in browser tab)
+- `description` - SEO description
+- `author` - Author name
+- `date` - Publication date
+- Custom fields - Add any key-value pairs you need
+
+## Text Formatting
+
+**Bold text** and *italic text* work as expected.
+
+You can also use `inline code` in your text.
+
+## Headings
+
+# Heading 1
+## Heading 2
+### Heading 3
+
+## Code Blocks
+
+Python example:
+
+```python
+def hello_world():
+    print("Hello, World!")
+
+hello_world()
+```
+
+JavaScript:
+
+```javascript
+function helloWorld() {
+  console.log('Hello, World!');
+}
+
+helloWorld();
+```
+
+## Lists
+
+Unordered lists:
+- Item 1
+- Item 2
+- Item 3
+
+Ordered lists:
+1. First
+2. Second
+3. Third
+
+## Blockquotes
+
+> This is a blockquote. It can contain multiple lines
+> and emphasize important information.
+
+> **Note:** Blockquotes are great for warnings and tips!
+
+## Tables
+
+| Feature | Status | Notes |
+|---------|--------|-------|
+| Routing | ✅ Done | Automatic from file structure |
+| Markdown | ✅ Done | Full syntax support |
+| Styling | ✅ Done | Professional default theme |
+
+## Links
+
+[Link to setup guide](/docs/setup)
+
+[External link](https://github.com)
+
+## Horizontal Rule
+
+---
+
+This is useful for separating sections.

package/docs/en/routing.md

@@ -0,0 +1,64 @@
+---
+title: Routing System
+description: Understanding automatic routing
+author: Andrew
+date: 2026-02-05
+---
+
+# Routing System
+
+The documentation system automatically creates routes from your markdown file structure.
+
+## How It Works
+
+1. **Folder scanning** reads all `.md` files in the `docs/` folder
+2. **Path mapping** converts file paths to URL slugs
+3. **Dynamic routing** serves the right markdown file for each URL
+
+## Examples
+
+### Single-level files
+
+```
+docs/
+├── index.md      → /docs
+├── setup.md      → /docs/setup
+├── faq.md        → /docs/faq
+```
+
+### Nested files
+
+```
+docs/
+├── api/
+│   ├── index.md       → /docs/api
+│   ├── overview.md    → /docs/api/overview
+│   └── reference.md   → /docs/api/reference
+│
+├── guides/
+│   ├── getting-started.md → /docs/guides/getting-started
+│   └── advanced.md        → /docs/guides/advanced
+```
+
+## Key Features
+
+- **No configuration needed** - just add markdown files
+- **Deep nesting** - organize with unlimited folder levels
+- **Index files** - `api/index.md` becomes `/docs/api`
+- **Slugs from filenames** - `my-guide.md` becomes `/docs/my-guide`
+
+## Special Files
+
+Files starting with underscore (`_`) are ignored:
+- `_config.json` - Reserved for navigation config
+- `_layout.svelte` - Reserved for custom layouts
+
+## Slug Generation Rules
+
+| File Path | URL Slug |
+|-----------|----------|
+| `index.md` | `/docs` |
+| `setup.md` | `/docs/setup` |
+| `api/overview.md` | `/docs/api/overview` |
+| `api/index.md` | `/docs/api` |
+| `guides/advanced.md` | `/docs/guides/advanced` |

package/docs/en/setup.md

@@ -0,0 +1,52 @@
+---
+title: Setup Guide
+description: Get started with the documentation system
+author: Andrew
+date: 2026-02-05
+---
+
+# Setup Guide
+
+This guide will walk you through setting up the documentation system.
+
+## Prerequisites
+
+- Node.js 18 or higher
+- npm, pnpm, or yarn
+
+## Installation
+
+1. Clone the repository
+2. Install dependencies:
+
+```bash
+npm install
+```
+
+3. Start the development server:
+
+```bash
+npm run dev
+```
+
+4. Open [http://localhost:5173/docs](http://localhost:5173/docs) in your browser
+
+## Project Structure
+
+The documentation system uses a simple folder structure:
+
+```
+docs/
+├── index.md           → /docs
+├── setup.md           → /docs/setup
+├── api/
+│   └── overview.md    → /docs/api/overview
+```
+
+Just create markdown files and they automatically become routes!
+
+## Next Steps
+
+- Learn about [Routing](/docs/routing)
+- Check out [Markdown Features](/docs/markdown)
+- Explore [API Examples](/docs/api/overview)