@alliance-droid/svelte-docs-system 0.0.1

package/docs/es/index.md

@@ -0,0 +1,41 @@
+---
+title: Inicio de Documentación
+description: Bienvenido al Sistema de Documentación de SvelteKit
+author: Andrew
+date: 2026-02-05
+---
+
+# Bienvenido al sistema de documentación
+
+Esta es la página de inicio de su sitio de documentación. Demuestra el sistema de enrutamiento de markdown en acción.
+
+## Características
+
+- **Enrutamiento automático** desde archivos markdown
+- **Soporte de rutas anidadas** (organizar documentos en carpetas)
+- **Metadatos de frontmatter** (título, autor, fecha)
+- **Estilo profesional** listo para usar
+- **Fácil de personalizar** y extender
+
+## Comenzar
+
+Consulte la [Guía de configuración](/docs/es/setup) para comenzar.
+
+## Estructura del proyecto
+
+```
+docs/
+├── index.md                 (Este archivo)
+├── setup.md                (Guía de inicio)
+├── routing.md              (Cómo funciona el enrutamiento)
+├── api/
+│   ├── overview.md         (Descripción general de la API)
+│   └── examples.md         (Ejemplos de API)
+└── guides/
+    └── advanced.md         (Temas avanzados)
+```
+
+Cada archivo markdown se convierte automáticamente en una ruta:
+- `docs/setup.md` → `/docs/es/setup`
+- `docs/api/overview.md` → `/docs/es/api/overview`
+- `docs/guides/advanced.md` → `/docs/es/guides/advanced`

package/docs/fr/index.md

@@ -0,0 +1,41 @@
+---
+title: Accueil de la Documentation
+description: Bienvenue dans le système de documentation SvelteKit
+author: Andrew
+date: 2026-02-05
+---
+
+# Bienvenue dans le système de documentation
+
+Ceci est la page d'accueil de votre site de documentation. Elle démontre le système de routage markdown en action.
+
+## Fonctionnalités
+
+- **Routage automatique** à partir des fichiers markdown
+- **Support des chemins imbriqués** (organisez les documents dans des dossiers)
+- **Métadonnées frontmatter** (titre, auteur, date)
+- **Stylisation professionnelle** prête à l'emploi
+- **Facile à personnaliser** et à étendre
+
+## Commencer
+
+Consultez le [Guide d'installation](/docs/fr/setup) pour commencer.
+
+## Structure du projet
+
+```
+docs/
+├── index.md                 (Ce fichier)
+├── setup.md                (Guide de démarrage)
+├── routing.md              (Fonctionnement du routage)
+├── api/
+│   ├── overview.md         (Aperçu de l'API)
+│   └── examples.md         (Exemples d'API)
+└── guides/
+    └── advanced.md         (Sujets avancés)
+```
+
+Chaque fichier markdown devient automatiquement une route :
+- `docs/setup.md` → `/docs/fr/setup`
+- `docs/api/overview.md` → `/docs/fr/api/overview`
+- `docs/guides/advanced.md` → `/docs/fr/guides/advanced`

package/docs/ja/index.md

@@ -0,0 +1,41 @@
+---
+title: ドキュメントホーム
+description: SvelteKit ドキュメントシステムへようこそ
+author: Andrew
+date: 2026-02-05
+---
+
+# ドキュメントシステムへようこそ
+
+これはドキュメントサイトのホームページです。マークダウンルーティングシステムの動作を示しています。
+
+## 機能
+
+- **マークダウンファイルからの自動ルーティング**
+- **ネストされたパスのサポート** (フォルダ内にドキュメントを整理)
+- **フロントマターメタデータ** (タイトル、著者、日付)
+- **プロフェッショナルなスタイリング** (すぐに使用可能)
+- **簡単にカスタマイズ** して拡張可能
+
+## 始める
+
+[セットアップガイド](/docs/ja/setup) をご覧ください。
+
+## プロジェクト構造
+
+```
+docs/
+├── index.md                 (このファイル)
+├── setup.md                (スタートガイド)
+├── routing.md              (ルーティングの仕組み)
+├── api/
+│   ├── overview.md         (API概要)
+│   └── examples.md         (API例)
+└── guides/
+    └── advanced.md         (高度なトピック)
+```
+
+各マークダウンファイルは自動的にルートになります:
+- `docs/setup.md` → `/docs/ja/setup`
+- `docs/api/overview.md` → `/docs/ja/api/overview`
+- `docs/guides/advanced.md` → `/docs/ja/guides/advanced`

package/package.json

@@ -0,0 +1,40 @@
+{
+	"name": "@alliance-droid/svelte-docs-system",
+	"version": "0.0.1",
+	"type": "module",
+	"bin": {
+		"svelte-docs-init": "./bin/init.js"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && pagefind",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"test": "vitest",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/adapter-static": "^3.0.10",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@testing-library/svelte": "^5.3.1",
+		"@testing-library/user-event": "^14.6.1",
+		"autoprefixer": "^10.4.24",
+		"happy-dom": "^20.5.0",
+		"jsdom": "^28.0.0",
+		"pagefind": "^1.4.0",
+		"postcss": "^8.5.6",
+		"svelte": "^5.48.2",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18"
+	},
+	"dependencies": {
+		"gray-matter": "^4.0.3",
+		"marked": "^17.0.1"
+	}
+}

package/pagefind.toml

@@ -0,0 +1,8 @@
+# Pagefind Search Configuration
+site = "build"
+bundle_size = 20000
+keep_index_url = true
+merging_strategy = "merge_smaller_into_larger"
+indexing = { comment_strings = false }
+root_selector = "main"
+exclude_selectors = ["nav", "aside"]

package/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    autoprefixer: {},
+  },
+};

package/src/app.css

@@ -0,0 +1,119 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* Claude Code Aesthetic Styling */
+
+@layer base {
+  :root {
+    color-scheme: light;
+    --background: #ffffff;
+    --foreground: #1a1a1a;
+    --secondary: #565656;
+    --border: #ececec;
+    --accent: #0066cc;
+  }
+
+  :root.dark {
+    color-scheme: dark;
+    --background: #1a1a1a;
+    --foreground: #ffffff;
+    --secondary: #b0b0b0;
+    --border: #3a3a3a;
+    --accent: #4d94ff;
+  }
+
+  html {
+    @apply antialiased scroll-smooth;
+  }
+
+  body {
+    @apply bg-white dark:bg-claude-dark-bg text-claude-text dark:text-claude-dark-text transition-colors;
+  }
+}
+
+@layer components {
+  .doc-container {
+    @apply max-w-7xl mx-auto;
+  }
+
+  .doc-content {
+    @apply prose dark:prose-invert max-w-none;
+  }
+
+  .btn-primary {
+    @apply px-4 py-2 rounded-lg bg-claude-accent dark:bg-claude-dark-accent text-white font-medium hover:bg-claude-accent-hover dark:hover:bg-claude-dark-accent-hover transition-colors;
+  }
+
+  .btn-secondary {
+    @apply px-4 py-2 rounded-lg bg-claude-bg-secondary dark:bg-claude-dark-bg-secondary text-claude-text dark:text-claude-dark-text border border-claude-border dark:border-claude-dark-border hover:bg-claude-border dark:hover:bg-claude-dark-border transition-colors;
+  }
+
+  .card {
+    @apply rounded-lg border border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary p-6 transition-colors;
+  }
+
+  /* Doc content styling */
+  .doc-content h1 {
+    @apply text-4xl font-bold mb-6 mt-0 text-claude-text dark:text-claude-dark-text;
+  }
+
+  .doc-content h2 {
+    @apply text-2xl font-bold mb-4 mt-8 text-claude-text dark:text-claude-dark-text;
+  }
+
+  .doc-content h3 {
+    @apply text-xl font-bold mb-3 mt-6 text-claude-text dark:text-claude-dark-text;
+  }
+
+  .doc-content p {
+    @apply mb-4 text-claude-text dark:text-claude-dark-text leading-relaxed;
+  }
+
+  .doc-content a {
+    @apply text-claude-accent dark:text-claude-dark-accent hover:underline;
+  }
+
+  .doc-content code {
+    @apply bg-claude-bg-secondary dark:bg-claude-dark-bg-secondary px-2 py-1 rounded text-sm font-mono;
+  }
+
+  .doc-content pre {
+    @apply bg-claude-bg-secondary dark:bg-claude-dark-bg-secondary p-4 rounded-lg overflow-x-auto mb-4;
+  }
+
+  .doc-content pre code {
+    @apply bg-transparent p-0;
+  }
+
+  .doc-content ul,
+  .doc-content ol {
+    @apply mb-4 ml-6 space-y-2;
+  }
+
+  .doc-content li {
+    @apply text-claude-text dark:text-claude-dark-text;
+  }
+
+  .doc-content blockquote {
+    @apply border-l-4 border-claude-accent dark:border-claude-dark-accent pl-4 py-2 text-claude-text-secondary dark:text-claude-dark-text-secondary italic;
+  }
+
+  .doc-content table {
+    @apply w-full border-collapse mb-4;
+  }
+
+  .doc-content th,
+  .doc-content td {
+    @apply border border-claude-border dark:border-claude-dark-border px-4 py-2 text-left;
+  }
+
+  .doc-content th {
+    @apply bg-claude-bg-secondary dark:bg-claude-dark-bg-secondary font-bold;
+  }
+}
+
+/* Smooth dark mode transitions */
+* {
+  @apply transition-colors duration-200;
+}

package/src/app.d.ts

@@ -0,0 +1,13 @@
+// See https://svelte.dev/docs/kit/types#app.d.ts
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
+}
+
+export {};

package/src/app.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

package/src/lib/assets/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>

package/src/lib/components/APITable.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  /**
+   * API Reference Table component
+   * Displays API documentation in a clean, organized table format
+   */
+
+  interface Column {
+    key: string;
+    label: string;
+    width?: string;
+  }
+
+  interface Row {
+    [key: string]: string | number | boolean | null;
+  }
+
+  interface Props {
+    columns: Column[];
+    rows: Row[];
+    title?: string;
+    description?: string;
+  }
+
+  let { columns, rows, title, description }: Props = $props();
+</script>
+
+<div class="my-6">
+  {#if title}
+    <h3 class="mb-2 text-lg font-bold text-gray-900 dark:text-white">{title}</h3>
+  {/if}
+
+  {#if description}
+    <p class="mb-4 text-gray-600 dark:text-gray-400">{description}</p>
+  {/if}
+
+  <div class="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
+    <table class="w-full text-sm">
+      <thead class="bg-gray-100 dark:bg-gray-800">
+        <tr>
+          {#each columns as column}
+            <th
+              class="px-4 py-3 text-left font-semibold text-gray-900 dark:text-gray-100"
+              style={column.width ? `width: ${column.width}` : ''}
+            >
+              {column.label}
+            </th>
+          {/each}
+        </tr>
+      </thead>
+      <tbody>
+        {#each rows as row, rowIndex}
+          <tr class="border-t border-gray-200 dark:border-gray-700 {rowIndex % 2 === 0 ? 'bg-white dark:bg-gray-900' : 'bg-gray-50 dark:bg-gray-800/50'}">
+            {#each columns as column}
+              <td class="px-4 py-3 text-gray-800 dark:text-gray-300">
+                <div class="break-words font-mono text-xs">
+                  {#if typeof row[column.key] === 'boolean'}
+                    <span class="inline-block rounded bg-gray-200 px-2 py-1 dark:bg-gray-700">
+                      {row[column.key] ? 'true' : 'false'}
+                    </span>
+                  {:else if row[column.key] === null}
+                    <span class="text-gray-400 dark:text-gray-500">null</span>
+                  {:else}
+                    {row[column.key]}
+                  {/if}
+                </div>
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      </tbody>
+    </table>
+  </div>
+
+  {#if rows.length === 0}
+    <div class="py-8 text-center text-gray-500 dark:text-gray-400">
+      No data available
+    </div>
+  {/if}
+</div>
+
+<style>
+  table {
+    width: 100%;
+    border-collapse: collapse;
+  }
+
+  thead {
+    background-color: #f3f4f6;
+  }
+
+  :global(.dark) thead {
+    background-color: #1f2937;
+  }
+
+  th {
+    border-bottom: 1px solid #e5e7eb;
+    padding: 0.75rem 1rem;
+    text-align: left;
+    font-weight: 600;
+    color: #111827;
+  }
+
+  :global(.dark) th {
+    border-bottom-color: #374151;
+    color: #f3f4f6;
+  }
+
+  td {
+    border-bottom: 1px solid #e5e7eb;
+    padding: 0.75rem 1rem;
+  }
+
+  :global(.dark) td {
+    border-bottom-color: #374151;
+  }
+
+  tbody tr:last-child td {
+    border-bottom: none;
+  }
+</style>

package/src/lib/components/APITable.test.ts

@@ -0,0 +1,153 @@
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Unit tests for APITable component
+ * Tests API reference table structure and data handling
+ */
+
+describe('APITable Component', () => {
+  describe('Column Definition', () => {
+    it('should accept array of columns', () => {
+      const columns = [
+        { header: 'Name', field: 'name' },
+        { header: 'Type', field: 'type' },
+        { header: 'Description', field: 'description' }
+      ];
+      expect(Array.isArray(columns)).toBe(true);
+      expect(columns.length).toBe(3);
+    });
+
+    it('should require header for each column', () => {
+      const column = { header: 'Parameter', field: 'param' };
+      expect(column.header).toBeDefined();
+      expect(typeof column.header).toBe('string');
+    });
+
+    it('should require field property', () => {
+      const column = { header: 'Value', field: 'value' };
+      expect(column.field).toBeDefined();
+      expect(typeof column.field).toBe('string');
+    });
+  });
+
+  describe('Data Rows', () => {
+    it('should accept array of data rows', () => {
+      const data = [
+        { name: 'foo', type: 'string', description: 'A string' },
+        { name: 'bar', type: 'number', description: 'A number' }
+      ];
+      expect(Array.isArray(data)).toBe(true);
+      expect(data.length).toBe(2);
+    });
+
+    it('should handle empty data array', () => {
+      const data: any[] = [];
+      expect(data.length).toBe(0);
+    });
+
+    it('should display data in correct columns', () => {
+      const data = [{ name: 'parameter1', type: 'string' }];
+      const columns = [
+        { header: 'Name', field: 'name' },
+        { header: 'Type', field: 'type' }
+      ];
+      expect(data[0].name).toBe('parameter1');
+      expect(columns[0].field).toBe('name');
+    });
+  });
+
+  describe('Cell Content', () => {
+    it('should support text content', () => {
+      const cell = 'Simple text content';
+      expect(typeof cell).toBe('string');
+    });
+
+    it('should support HTML content', () => {
+      const cell = '<code>inline code</code>';
+      expect(cell).toContain('<code>');
+      expect(cell).toContain('</code>');
+    });
+
+    it('should support code content', () => {
+      const cell = 'User[]';
+      expect(cell).toBeTruthy();
+    });
+
+    it('should support optional properties', () => {
+      const row = {
+        name: 'optional',
+        type: 'string | undefined',
+        optional: true
+      };
+      expect(row.optional).toBe(true);
+    });
+  });
+
+  describe('Table Features', () => {
+    it('should support sortable columns', () => {
+      const column = {
+        header: 'Name',
+        field: 'name',
+        sortable: true
+      };
+      expect(column.sortable).toBe(true);
+    });
+
+    it('should support striped rows', () => {
+      const hasStriped = true;
+      expect(hasStriped).toBe(true);
+    });
+
+    it('should support column alignment', () => {
+      const alignments = ['left', 'center', 'right'];
+      alignments.forEach((align) => {
+        expect(['left', 'center', 'right']).toContain(align);
+      });
+    });
+
+    it('should support column width customization', () => {
+      const column = {
+        header: 'Name',
+        field: 'name',
+        width: '30%'
+      };
+      expect(column.width).toBe('30%');
+    });
+  });
+
+  describe('Styling', () => {
+    it('should support responsive layout', () => {
+      const isResponsive = true;
+      expect(isResponsive).toBe(true);
+    });
+
+    it('should support dark mode', () => {
+      const colorSchemes = ['light', 'dark'];
+      colorSchemes.forEach((scheme) => {
+        expect(['light', 'dark']).toContain(scheme);
+      });
+    });
+
+    it('should have proper borders', () => {
+      const tableStyle = 'border border-gray-200';
+      expect(tableStyle).toContain('border');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have table ARIA role', () => {
+      const role = 'table';
+      expect(role).toBe('table');
+    });
+
+    it('should have header row with th elements', () => {
+      const headerRole = 'columnheader';
+      expect(headerRole).toBe('columnheader');
+    });
+
+    it('should support keyboard navigation', () => {
+      const isKeyboardAccessible = true;
+      expect(isKeyboardAccessible).toBe(true);
+    });
+  });
+});

package/src/lib/components/Breadcrumbs.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+  /**
+   * Breadcrumbs navigation component
+   * Shows the current page path for easy navigation
+   */
+
+  interface BreadcrumbItem {
+    label: string;
+    href?: string;
+  }
+
+  interface Props {
+    items: BreadcrumbItem[];
+  }
+
+  let { items }: Props = $props();
+</script>
+
+<nav aria-label="Breadcrumb" class="mb-6">
+  <ol class="flex items-center gap-2 text-sm">
+    {#each items as item, index}
+      <li class="flex items-center gap-2">
+        {#if item.href && index < items.length - 1}
+          <a
+            href={item.href}
+            class="text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            {item.label}
+          </a>
+        {:else}
+          <span class={index === items.length - 1 ? 'font-semibold text-gray-900 dark:text-white' : 'text-gray-600 dark:text-gray-400'}>
+            {item.label}
+          </span>
+        {/if}
+
+        {#if index < items.length - 1}
+          <i class="fa-solid fa-chevron-right text-gray-400 dark:text-gray-500"></i>
+        {/if}
+      </li>
+    {/each}
+  </ol>
+</nav>
+
+<style>
+  nav {
+    margin-bottom: 1.5rem;
+    font-size: 0.875rem;
+  }
+
+  ol {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  a {
+    color: #2563eb;
+  }
+
+  a:hover {
+    color: #1d4ed8;
+  }
+
+  :global(.dark) a {
+    color: #60a5fa;
+  }
+
+  :global(.dark) a:hover {
+    color: #93c5fd;
+  }
+
+  span {
+    color: #4b5563;
+  }
+
+  :global(.dark) span {
+    color: #9ca3af;
+  }
+</style>