### Development Server

Source: https://github.com/flagflow/website/blob/main/README.md

Starts the development server for the FlagFlow documentation website. This command clones the repository, installs dependencies, and runs the development server, typically accessible at http://localhost:5173.

```bash
git clone https://github.com/flagflow/website.git
cd website
npm install
npm run dev
```

--------------------------------

### Development and Build Commands

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Commands for starting the development server, building for production, and previewing the build locally. These are essential for the development lifecycle of the SvelteKit project.

```bash
npm run dev
npm run build
npm run preview
npm run preview:static
```

--------------------------------

### Example Registry Entry

Source: https://github.com/flagflow/website/blob/main/README.md

An example of how to register a new documentation page within the site's registry. This entry defines the path, title, description, and grouping for a specific documentation page.

```typescript
{
  path: '/docs/installation/docker',
  title: 'Docker Installation',
  description: 'Deploy FlagFlow using Docker and Docker Compose',
  group: 'Installation'
}
```

--------------------------------

### Document Registry Example

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

An example of how documentation pages are defined in the central registry (`src/docs/_registry.ts`). This includes metadata like title, description, and grouping for each documentation page.

```typescript
export const registry = {
  '/docs/getting-started': {
    title: 'Getting Started',
    description: 'Learn how to set up and start using Flagflow.',
    keywords: 'getting started, setup, installation',
    group: 'Introduction'
  },
  // ... other documentation entries
};
```

--------------------------------

### Contributing Workflow

Source: https://github.com/flagflow/website/blob/main/README.md

A step-by-step guide for contributing to the FlagFlow website project, including forking, branching, making changes, testing, committing, and opening a pull request.

```shell
1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/amazing-docs`)
3. **Make** your changes following the existing patterns
4. **Test** your changes (`npm run all`)
5. **Commit** your changes (`git commit -m 'Add amazing documentation'`)
6. **Push** to the branch (`git push origin feature/amazing-docs`)
7. **Open** a Pull Request
```

--------------------------------

### Adding a New Documentation Page

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

A step-by-step guide on how to add new documentation pages. This involves updating the document registry (`src/docs/_registry.ts`) and creating a corresponding Svelte component in the `src/docs/` directory.

```markdown
1. **Update Registry**: Add an entry to `src/docs/_registry.ts` with the page's title, description, and keywords.
2. **Create Component**: Create a new Svelte file (e.g., `src/docs/new-feature.svelte`) that contains the documentation content.
3. **Automatic Routing**: The route for the new page (e.g., `/docs/new-feature`) will be automatically generated and included in the sitemap.
```

--------------------------------

### Production Build

Source: https://github.com/flagflow/website/blob/main/README.md

Builds the FlagFlow documentation website for production deployment. The output is typically placed in the 'docs/' directory. It also includes a command to preview the production build locally.

```bash
npm run build
npm run preview
```

--------------------------------

### SvelteKit Static Site Generation Configuration

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Configuration details for SvelteKit's static site generation using `@sveltejs/adapter-static`. It highlights the prerendering of all routes and the single bundle strategy for optimized loading.

```javascript
export const prerender = true;
```

--------------------------------

### Configuration Files Overview

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Lists the primary configuration files used in the project and their purpose: `svelte.config.js` for SvelteKit, `vite.config.ts` for Vite, `tailwind.config.ts` for Tailwind CSS, and `vitest.config.ts` for Vitest.

```markdown
- `svelte.config.js`: SvelteKit configuration, including the static adapter.
- `vite.config.ts`: Vite configuration, including image tools and circular dependency checking.
- `tailwind.config.ts`: Tailwind CSS configuration.
- `vitest.config.ts`: Vitest testing configuration.
```

--------------------------------

### SvelteKit Project Structure

Source: https://github.com/flagflow/website/blob/main/README.md

Illustrates the typical project structure for a SvelteKit application, as used by the FlagFlow documentation website. It highlights key directories like 'src/components', 'src/docs', 'src/lib', and 'src/routes'.

```svelte
src/
├── components/           # Reusable Svelte components
│   ├── docs/            # Documentation-specific components
│   └── CodeBlock.svelte # Syntax-highlighted code blocks
├── docs/                # Documentation content (Svelte components)
│   ├── installation/    # Installation guides
│   ├── user-management/ # Authentication & permissions
│   ├── typescript/      # TypeScript integration
│   ├── migration/       # Backup, migration, restore
│   ├── flags/          # Flag types and organization
│   └── get_started.svelte # Main getting started guide
├── lib/                # Shared utilities and components
├── routes/             # SvelteKit routing
└── app.html           # HTML template
```

--------------------------------

### Eager Loading Documentation Components

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Demonstrates the use of `import.meta.glob` for eagerly loading documentation components. This approach ensures that all documentation components are available without dynamic imports at runtime, potentially improving initial load performance.

```javascript
// Example in a SvelteKit load function or similar:
const docs = import.meta.glob('$docs/**/*.svelte');

// To get a specific component:
// const component = await docs['$docs/getting-started.svelte']();
```

--------------------------------

### Utility and Pipeline Commands

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Utility commands for generating the sitemap, running the complete development pipeline (format, lint, type check, sitemap, build), and performing a clean reinstallation of node_modules. These streamline development and maintenance tasks.

```bash
npm run sitemap:generate
npm run all
npm run npm:reinstall
```

--------------------------------

### Build Output Directory

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Specifies that production builds are output to the `docs/` directory, which is configured for hosting on platforms like GitHub Pages. The output is minified and tree-shaken, with sourcemaps disabled for production.

```javascript
// svelte.config.js snippet related to output directory
const config = {
  kit: {
    adapter: adapter({
      pages: 'docs',
      assets: 'docs',
      // ...
    })
  }
};
```

--------------------------------

### Dynamic Route Generation Logic

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Illustrates the dynamic route generation in SvelteKit (`src/routes/docs/[...slug]/+page.ts`). This file uses the document registry to automatically create routes for all documentation pages.

```typescript
import { registry } from '$docs/_registry';
import { error } from '@sveltejs/kit';

export async function load({ params }) {
  const slug = '/' + params.slug.join('/');
  const docEntry = registry[slug];

  if (!docEntry) {
    throw error(404, 'Documentation page not found');
  }

  // Dynamically import the Svelte component for the page
  const componentModule = await import(`$docs/${slug.substring(1)}.svelte`);

  return {
    ...docEntry,
    component: componentModule.default
  };
}
```

--------------------------------

### Code Formatting Hints

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Provides specific hints for code formatting, such as avoiding unnecessary curly braces for single-line commands and not using dynamic `import()` statements.

```markdown
- Avoid using curly braces `{}` if not needed for single-line commands within blocks.
- Do not use dynamic `import()`.
```

--------------------------------

### Testing Commands

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Commands to execute tests using Vitest, including options for running tests with a UI. These are crucial for verifying the functionality and stability of the application.

```bash
npm test
npm run test:ui
```

--------------------------------

### Development Scripts

Source: https://github.com/flagflow/website/blob/main/README.md

A collection of npm scripts for managing the development workflow of the FlagFlow documentation website. This includes formatting, linting, type checking, testing, and building the site.

```bash
# Development
npm run dev              # Start dev server with hot reload
npm run preview          # Preview production build locally
npm run preview:static   # Preview using serve

# Building
npm run build           # Build for production (outputs to docs/)
npm run all            # Full pipeline: format, lint, typecheck, sitemap, build

# Code Quality
npm run format:check   # Check code formatting
npm run format:fix     # Fix code formatting
npm run lint:check     # Lint code
npm run lint:fix       # Fix linting issues
npm run ts:check       # TypeScript type checking

# Testing
npm test              # Run tests
npm run test:ui       # Run tests with UI

# Utilities
npm run sitemap:generate  # Generate sitemap.xml
npm run npm:reinstall    # Clean reinstall dependencies
```

--------------------------------

### Image Optimization with Vite

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Guidelines for using `vite-imagetools` for image optimization. It advises against inline images and suggests marking image sizes in variable names (e.g., `image800`, `image400`) for clarity and performance.

```javascript
// Example usage in a Svelte component:
<script>
  import image400 from '$lib/assets/hero-image.png?w=400';
  import image800 from '$lib/assets/hero-image.png?w=800';
</script>

<img src={image400} alt="Small version" />
<img src={image800} alt="Large version" />
```

--------------------------------

### Script Execution with Node.js

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Explains the use of `node --run` for executing scripts defined in the `package.json` file. This is a modern way to run npm scripts.

```bash
node --run dev
node --run build
```

--------------------------------

### SEO and HTML Head Management Component

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Details the `HtmlHeader` component (`src/components/HtmlHeader.svelte`) used for centralized SEO and HTML head management. It handles page titles, meta descriptions, Open Graph tags, and Twitter Card metadata with default fallbacks.

```svelte
<!-- src/components/HtmlHeader.svelte -->
<script>
  export let title;
  export let description = 'Default description for Flagflow.';
  export let keywords = 'feature flags, flagflow, management';
</script>

<svelte:head>
  <title>{title} • FlagFlow</title>
  <meta name="description" content="{description}" />
  <meta property="og:title" content="{title} • FlagFlow" />
  <meta property="og:description" content="{description}" />
  <meta name="twitter:title" content="{title} • FlagFlow" />
  <meta name="twitter:description" content="{description}" />
  <meta name="keywords" content="{keywords}" />
</svelte:head>
```

--------------------------------

### Version Injection

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Details on how the application version is injected using the `__APP_VERSION__` global variable, typically populated from the `package.json` during the build process.

```javascript
// Example in a Svelte component or script:
console.log(`App Version: ${__APP_VERSION__}`);
```

--------------------------------

### Code Quality and Formatting Commands

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Commands to ensure code quality through TypeScript type checking, Prettier formatting checks and fixes, and ESLint linting checks and fixes. These commands help maintain a consistent and error-free codebase.

```bash
npm run ts:check
npm run format:check
npm run format:fix
npm run lint:check
npm run lint:fix
```

--------------------------------

### Document Loader Functionality

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Describes the role of the document loader (`src/lib/documentPage.ts`) in matching slugs to registry entries and dynamically importing the corresponding Svelte components. This enables the component-based content architecture.

```javascript
// src/lib/documentPage.ts
// This file contains logic to load documentation pages based on slugs and the registry.
```

--------------------------------

### Robots.txt Configuration

Source: https://github.com/flagflow/website/blob/main/static/robots.txt

This snippet defines the crawling rules for the Flagflow website. It specifies that all user agents are allowed to access the site and provides the location of the sitemap for better indexing.

```robots.txt
User-agent: *
Allow: /

Sitemap: https://flagflow.net/sitemap.xml
```

--------------------------------

### SvelteKit Path Aliases Configuration

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Configuration of path aliases in `svelte.config.js` for easier module resolution. Aliases like `$components`, `$lib`, `$routes`, and `$types` improve code organization and readability.

```javascript
// svelte.config.js
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  kit: {
    adapter: adapter({
      pages: 'docs',
      assets: 'docs',
      fallback: null
    }),
    alias: {
      $components: 'src/components',
      $lib: 'src/lib',
      $routes: 'src/routes',
      $types: 'src/types'
    }
  }
};
```

--------------------------------

### TypeScript Integration Features

Source: https://github.com/flagflow/website/blob/main/README.md

Details the TypeScript integration aspects within the FlagFlow documentation. This includes schema generation, hash-based validation, Zod runtime validation, and the overall benefits of type safety in the codebase.

```typescript
// Schema generation
// Hash-based validation
// Zod runtime validation
// Type safety features
```

--------------------------------

### Flowbite and Tailwind CSS Integration

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Information on the use of Flowbite for UI components and Tailwind CSS for styling. This combination provides a robust and efficient way to build the user interface.

```javascript
// tailwind.config.ts
import type { Config } from 'tailwindcss';

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')
  ]
} satisfies Config;
```

--------------------------------

### Node.js Version Requirement

Source: https://github.com/flagflow/website/blob/main/CLAUDE.md

Specifies that Node.js version 22 or higher is required for this project, as indicated in the `engines` field of the `package.json` file.

```json
{
  "name": "flagflow-website",
  "version": "1.0.0",
  "engines": {
    "node": ">=22.0.0"
  }
  // ... other package.json fields
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.