@alliance-droid/svelte-docs-system 0.0.1

package/docs/en/guides/common-setups.md

@@ -0,0 +1,651 @@
+---
+title: Common Setup Patterns
+description: Copy-paste examples for common documentation use cases
+author: Andrew
+date: 2026-02-05
+---
+
+# Common Setup Patterns
+
+Ready-to-use examples for common documentation patterns and use cases.
+
+## 1. API Documentation Site
+
+Perfect for documenting REST APIs, GraphQL endpoints, and SDKs.
+
+### Project Structure
+
+```
+docs/
+├── index.md                    # Welcome
+├── getting-started/
+│   ├── index.md               # Overview
+│   ├── installation.md        # How to install
+│   └── authentication.md      # Auth setup
+├── api/
+│   ├── index.md               # API overview
+│   ├── endpoints.md           # All endpoints
+│   ├── authentication.md      # Auth methods
+│   └── errors.md              # Error handling
+└── examples/
+    ├── javascript.md          # JS examples
+    ├── python.md              # Python examples
+    └── curl.md                # cURL examples
+```
+
+### Navigation Setup
+
+```svelte
+<script lang="ts">
+  import type { NavSection } from '$lib/stores/nav';
+
+  const sections: NavSection[] = [
+    {
+      title: 'Getting Started',
+      items: [
+        { label: 'Welcome', href: '/docs' },
+        { label: 'Installation', href: '/docs/getting-started/installation' },
+        { label: 'Authentication', href: '/docs/getting-started/authentication' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      items: [
+        { label: 'Overview', href: '/docs/api' },
+        { label: 'Endpoints', href: '/docs/api/endpoints' },
+        {
+          label: 'Methods',
+          href: '/docs/api/methods',
+          children: [
+            { label: 'GET', href: '/docs/api/methods/get' },
+            { label: 'POST', href: '/docs/api/methods/post' },
+            { label: 'PUT', href: '/docs/api/methods/put' },
+            { label: 'DELETE', href: '/docs/api/methods/delete' },
+          ],
+        },
+      ],
+    },
+    {
+      title: 'Examples',
+      items: [
+        { label: 'JavaScript', href: '/docs/examples/javascript' },
+        { label: 'Python', href: '/docs/examples/python' },
+        { label: 'cURL', href: '/docs/examples/curl' },
+      ],
+    },
+  ];
+</script>
+```
+
+### Example Page: API Endpoint
+
+```markdown
+---
+title: Users Endpoint
+description: User management API endpoints
+---
+
+# Users Endpoint
+
+Manage users in your application.
+
+## Get All Users
+
+```
+GET /api/v1/users
+```
+
+**Query Parameters:**
+
+| Name | Type | Required | Description |
+|------|------|----------|-------------|
+| limit | number | No | Max results (default: 50) |
+| offset | number | No | Results offset (default: 0) |
+| sort | string | No | Sort field (default: created) |
+
+**Response:**
+
+```json
+{
+  "data": [
+    {
+      "id": "usr_123",
+      "name": "John Doe",
+      "email": "john@example.com",
+      "created": "2026-02-01T12:00:00Z"
+    }
+  ],
+  "meta": {
+    "total": 42,
+    "limit": 50,
+    "offset": 0
+  }
+}
+```
+
+## Get User by ID
+
+```
+GET /api/v1/users/{id}
+```
+
+**Path Parameters:**
+
+| Name | Type | Description |
+|------|------|-------------|
+| id | string | User ID |
+
+**Response:**
+
+```json
+{
+  "id": "usr_123",
+  "name": "John Doe",
+  "email": "john@example.com",
+  "created": "2026-02-01T12:00:00Z"
+}
+```
+
+## Create User
+
+```
+POST /api/v1/users
+```
+
+**Request Body:**
+
+```json
+{
+  "name": "Jane Doe",
+  "email": "jane@example.com"
+}
+```
+
+**Response:** 201 Created
+
+```json
+{
+  "id": "usr_456",
+  "name": "Jane Doe",
+  "email": "jane@example.com",
+  "created": "2026-02-05T10:30:00Z"
+}
+```
+```
+
+## 2. Product Documentation
+
+For SaaS products, tools, and software documentation.
+
+### Project Structure
+
+```
+docs/
+├── index.md                    # Product overview
+├── onboarding/
+│   ├── index.md               # Onboarding guide
+│   ├── signup.md              # How to sign up
+│   ├── first-project.md       # Create first project
+│   └── team-setup.md          # Add team members
+├── features/
+│   ├── dashboard.md           # Dashboard guide
+│   ├── projects.md            # Project management
+│   ├── collaboration.md       # Team collaboration
+│   ├── integrations.md        # Third-party integrations
+│   └── analytics.md           # Analytics & reporting
+├── administration/
+│   ├── organization.md        # Org settings
+│   ├── billing.md             # Billing & plans
+│   ├── security.md            # Security settings
+│   └── audit-logs.md          # Activity logs
+├── troubleshooting.md         # Common issues
+└── api/
+    ├── index.md               # API reference
+    ├── authentication.md      # API auth
+    └── endpoints.md           # Available endpoints
+```
+
+### Navigation Setup
+
+```svelte
+<script lang="ts">
+  import type { NavSection } from '$lib/stores/nav';
+
+  const sections: NavSection[] = [
+    {
+      title: 'Getting Started',
+      items: [
+        { label: 'Welcome', href: '/docs', icon: 'home' },
+        { label: 'Sign Up', href: '/docs/onboarding/signup', icon: 'user-plus' },
+        { label: 'Create Project', href: '/docs/onboarding/first-project', icon: 'folder-plus' },
+      ],
+    },
+    {
+      title: 'Features',
+      items: [
+        { label: 'Dashboard', href: '/docs/features/dashboard' },
+        { label: 'Projects', href: '/docs/features/projects' },
+        { label: 'Collaboration', href: '/docs/features/collaboration' },
+        { label: 'Integrations', href: '/docs/features/integrations' },
+        { label: 'Analytics', href: '/docs/features/analytics' },
+      ],
+    },
+    {
+      title: 'Administration',
+      items: [
+        { label: 'Settings', href: '/docs/administration/organization' },
+        { label: 'Billing', href: '/docs/administration/billing' },
+        { label: 'Security', href: '/docs/administration/security' },
+        { label: 'Audit Logs', href: '/docs/administration/audit-logs' },
+      ],
+    },
+    {
+      title: 'Developer',
+      items: [
+        { label: 'API Reference', href: '/docs/api' },
+        { label: 'Integrations', href: '/docs/features/integrations' },
+        { label: 'SDKs', href: '/docs/api/sdks' },
+      ],
+    },
+    {
+      title: 'Help',
+      items: [
+        { label: 'Troubleshooting', href: '/docs/troubleshooting', icon: 'wrench' },
+        { label: 'FAQ', href: '/docs/faq', icon: 'circle-question' },
+      ],
+    },
+  ];
+</script>
+```
+
+### Example Page: Feature Guide
+
+```markdown
+---
+title: Dashboard Overview
+description: Understand your dashboard and key metrics
+---
+
+# Dashboard Overview
+
+Your dashboard provides a centralized view of your project activity and key metrics.
+
+## Dashboard Layout
+
+The dashboard consists of three main sections:
+
+### 1. Overview Cards
+
+At the top, you'll see key metrics:
+- **Active Projects** - Number of projects you're working on
+- **Team Members** - Size of your team
+- **Recent Activity** - Last updated dates
+- **API Usage** - Current month's API calls
+
+### 2. Recent Activity
+
+A timeline showing recent events in your projects:
+- New team members added
+- Files uploaded
+- Comments made
+- Projects updated
+
+### 3. Usage Charts
+
+Visual representation of:
+- API call trends
+- Storage usage
+- Team activity over time
+- Feature usage stats
+
+## Customizing Your Dashboard
+
+Click "Customize" in the top-right to add or remove cards.
+
+Available widgets:
+- **Projects Widget** - Quick access to projects
+- **Team Widget** - Team member status
+- **Analytics Widget** - Usage trends
+- **Activity Widget** - Recent changes
+- **Alerts Widget** - Important notifications
+```
+
+## 3. Blog/Content Site
+
+For blogs, news, and long-form content.
+
+### Project Structure
+
+```
+docs/
+├── index.md                    # Blog home
+├── posts/
+│   ├── 2026-02-05-new-features.md
+│   ├── 2026-02-01-tutorial-getting-started.md
+│   ├── 2026-01-28-announcement.md
+│   └── 2025-12-15-year-in-review.md
+├── categories/
+│   ├── announcements.md        # Announcements posts
+│   ├── tutorials.md            # How-to guides
+│   └── releases.md             # Release notes
+├── authors/
+│   └── andrew.md               # Author bio
+└── archive/
+    ├── 2025.md                 # 2025 posts
+    └── 2024.md                 # 2024 posts
+```
+
+### Navigation Setup
+
+```svelte
+<script lang="ts">
+  import type { NavSection } from '$lib/stores/nav';
+
+  const sections: NavSection[] = [
+    {
+      title: 'Blog',
+      items: [
+        { label: 'Latest', href: '/blog', icon: 'newspaper' },
+        { label: 'Announcements', href: '/blog/categories/announcements' },
+        { label: 'Tutorials', href: '/blog/categories/tutorials' },
+        { label: 'Releases', href: '/blog/categories/releases' },
+      ],
+    },
+    {
+      title: 'Archive',
+      items: [
+        { label: '2026', href: '/blog/archive/2026' },
+        { label: '2025', href: '/blog/archive/2025' },
+        { label: '2024', href: '/blog/archive/2024' },
+      ],
+    },
+  ];
+</script>
+```
+
+### Blog Post Template
+
+```markdown
+---
+title: Getting Started with Our Product
+description: Learn how to get started in 5 minutes
+author: Andrew
+date: 2026-02-05
+category: tutorials
+tags: [tutorial, beginner, getting-started]
+---
+
+# Getting Started with Our Product
+
+Learn how to get started in 5 minutes.
+
+## Step 1: Sign Up
+
+Visit our [signup page](/signup) and create an account.
+
+## Step 2: Create Your First Project
+
+Once logged in, click "New Project" and follow the wizard.
+
+## Step 3: Install the SDK
+
+Install our SDK in your project:
+
+```bash
+npm install our-package
+```
+
+## Step 4: Configure
+
+Create a configuration file:
+
+```javascript
+import { init } from 'our-package';
+
+init({
+  apiKey: 'your-api-key',
+  environment: 'production',
+});
+```
+
+## Next Steps
+
+- [Explore Features](/docs/features)
+- [View API Reference](/docs/api)
+- [Join Our Community](https://community.example.com)
+```
+
+## 4. Multi-Language Documentation
+
+For projects that support multiple languages.
+
+### Project Structure
+
+```
+docs/
+├── en/                         # English
+│   ├── index.md
+│   ├── setup.md
+│   └── api/
+├── es/                         # Spanish
+│   ├── index.md
+│   ├── setup.md
+│   └── api/
+├── fr/                         # French
+│   ├── index.md
+│   ├── setup.md
+│   └── api/
+└── de/                         # German
+    ├── index.md
+    ├── setup.md
+    └── api/
+```
+
+### Language Switcher in Navbar
+
+```svelte
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  let languages = [
+    { code: 'en', name: 'English' },
+    { code: 'es', name: 'Español' },
+    { code: 'fr', name: 'Français' },
+    { code: 'de', name: 'Deutsch' },
+  ];
+
+  function switchLanguage(lang: string) {
+    const currentPath = $page.url.pathname.replace(/^\/docs\/[a-z]{2}/, '');
+    window.location.href = `/docs/${lang}${currentPath}`;
+  }
+</script>
+
+<select onchange={(e) => switchLanguage(e.currentTarget.value)}>
+  {#each languages as lang}
+    <option value={lang.code}>{lang.name}</option>
+  {/each}
+</select>
+```
+
+## 5. Open Source Project Documentation
+
+For libraries, frameworks, and tools.
+
+### Project Structure
+
+```
+docs/
+├── index.md                    # Overview
+├── getting-started/
+│   ├── installation.md
+│   ├── first-example.md
+│   └── configuration.md
+├── guide/
+│   ├── core-concepts.md
+│   ├── advanced-usage.md
+│   └── performance.md
+├── api/
+│   ├── classes.md
+│   ├── functions.md
+│   ├── types.md
+│   └── hooks.md
+├── examples/
+│   ├── basic.md
+│   ├── advanced.md
+│   └── real-world.md
+├── contributing/
+│   ├── setup.md
+│   ├── testing.md
+│   └── pull-requests.md
+└── faq.md
+```
+
+### Navigation Setup
+
+```svelte
+<script lang="ts">
+  import type { NavSection } from '$lib/stores/nav';
+
+  const sections: NavSection[] = [
+    {
+      title: 'Getting Started',
+      items: [
+        { label: 'Welcome', href: '/docs' },
+        { label: 'Installation', href: '/docs/getting-started/installation' },
+        { label: 'First Example', href: '/docs/getting-started/first-example' },
+      ],
+    },
+    {
+      title: 'Guide',
+      items: [
+        { label: 'Core Concepts', href: '/docs/guide/core-concepts' },
+        { label: 'Advanced Usage', href: '/docs/guide/advanced-usage' },
+        { label: 'Performance', href: '/docs/guide/performance' },
+      ],
+    },
+    {
+      title: 'API Reference',
+      items: [
+        { label: 'Classes', href: '/docs/api/classes' },
+        { label: 'Functions', href: '/docs/api/functions' },
+        { label: 'Types', href: '/docs/api/types' },
+        { label: 'Hooks', href: '/docs/api/hooks' },
+      ],
+    },
+    {
+      title: 'Examples',
+      items: [
+        { label: 'Basic', href: '/docs/examples/basic' },
+        { label: 'Advanced', href: '/docs/examples/advanced' },
+        { label: 'Real-World', href: '/docs/examples/real-world' },
+      ],
+    },
+    {
+      title: 'Contributing',
+      items: [
+        { label: 'Setup', href: '/docs/contributing/setup' },
+        { label: 'Testing', href: '/docs/contributing/testing' },
+        { label: 'Pull Requests', href: '/docs/contributing/pull-requests' },
+      ],
+    },
+  ];
+</script>
+```
+
+## 6. Internal Knowledge Base
+
+For team documentation and internal processes.
+
+### Project Structure
+
+```
+docs/
+├── index.md                    # Knowledge base home
+├── team/
+│   ├── onboarding.md           # New employee checklist
+│   ├── roles.md                # Team roles & responsibilities
+│   └── communication.md        # Communication guidelines
+├── processes/
+│   ├── development.md          # Development workflow
+│   ├── deployment.md           # How to deploy
+│   └── incident-response.md    # Incident response
+├── standards/
+│   ├── code-style.md           # Code style guide
+│   ├── documentation.md        # Doc standards
+│   └── security.md             # Security practices
+├── systems/
+│   ├── infrastructure.md       # Infrastructure overview
+│   ├── databases.md            # Database schemas
+│   └── api.md                  # Internal API
+└── tools/
+    ├── monitoring.md           # Monitoring & alerting
+    ├── logging.md              # Log aggregation
+    └── backups.md              # Backup procedures
+```
+
+---
+
+## Quick Copy-Paste Navigation
+
+Choose your documentation type and copy this navigation:
+
+### For API Docs
+```typescript
+{
+  title: 'Getting Started',
+  items: [
+    { label: 'Welcome', href: '/docs' },
+    { label: 'Installation', href: '/docs/installation' },
+    { label: 'Authentication', href: '/docs/auth' },
+  ],
+},
+{
+  title: 'API Reference',
+  items: [
+    { label: 'Endpoints', href: '/docs/api' },
+    { label: 'Errors', href: '/docs/errors' },
+  ],
+}
+```
+
+### For Product Docs
+```typescript
+{
+  title: 'Getting Started',
+  items: [
+    { label: 'Welcome', href: '/docs' },
+    { label: 'Sign Up', href: '/docs/signup' },
+    { label: 'First Steps', href: '/docs/first-steps' },
+  ],
+},
+{
+  title: 'Features',
+  items: [
+    { label: 'Dashboard', href: '/docs/dashboard' },
+    { label: 'Settings', href: '/docs/settings' },
+  ],
+}
+```
+
+### For Blog
+```typescript
+{
+  title: 'Blog',
+  items: [
+    { label: 'Latest', href: '/blog' },
+    { label: 'Archive', href: '/blog/archive' },
+  ],
+}
+```
+
+---
+
+## Next Steps
+
+1. Choose your documentation type
+2. Copy the project structure
+3. Create your markdown files
+4. Customize navigation to match
+5. Deploy with your preferred platform
+
+See [Integration Guide](/docs/getting-started/integration) for deployment options.