@alliance-droid/svelte-docs-system 0.0.2 → 0.1.0

package/template-starter/src/lib/components/Breadcrumbs.svelte

@@ -1,85 +0,0 @@
-<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>

package/template-starter/src/lib/components/Breadcrumbs.test.ts

@@ -1,82 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for Breadcrumbs component
- * Tests component configuration and prop handling
- */
-
-describe('Breadcrumbs Component', () => {
-  describe('Props', () => {
-    it('renders all breadcrumb items', () => {
-      const items = [
-        { label: 'Home', href: '/' },
-        { label: 'Docs', href: '/docs' },
-        { label: 'API' }
-      ];
-
-      expect(items.length).toBe(3);
-      expect(items[0].label).toBe('Home');
-      expect(items[1].label).toBe('Docs');
-      expect(items[2].label).toBe('API');
-    });
-
-    it('should accept items array prop', () => {
-      const items = [
-        { label: 'Home', href: '/' },
-        { label: 'Section', href: '/section' }
-      ];
-      expect(Array.isArray(items)).toBe(true);
-      expect(items.length).toBeGreaterThan(0);
-    });
-
-    it('should handle breadcrumb items with and without href', () => {
-      const items = [
-        { label: 'Home', href: '/' },
-        { label: 'Current Page' } // No href for current page
-      ];
-      expect(items[0].href).toBeDefined();
-      expect(items[1].href).toBeUndefined();
-    });
-
-    it('should display correct breadcrumb text', () => {
-      const items = [
-        { label: 'Docs', href: '/docs' },
-        { label: 'Guides', href: '/docs/guides' },
-        { label: 'Getting Started' }
-      ];
-      const labels = items.map((item) => item.label);
-      expect(labels).toContain('Docs');
-      expect(labels).toContain('Guides');
-      expect(labels).toContain('Getting Started');
-    });
-  });
-
-  describe('Functionality', () => {
-    it('should have separator between items', () => {
-      const separatorConfig = {
-        text: '/',
-        ariaLabel: 'separator'
-      };
-      expect(separatorConfig.text).toBeTruthy();
-      expect(separatorConfig.ariaLabel).toBeTruthy();
-    });
-
-    it('should mark last item as current page', () => {
-      const items = [
-        { label: 'Home', href: '/' },
-        { label: 'Documentation' } // Last item, no href
-      ];
-      const lastItem = items[items.length - 1];
-      expect(lastItem.href).toBeUndefined();
-    });
-
-    it('should be accessible with proper structure', () => {
-      const items = [
-        { label: 'Home', href: '/' },
-        { label: 'Docs', href: '/docs' },
-        { label: 'API' }
-      ];
-      expect(items.every((item) => item.label)).toBe(true);
-    });
-  });
-});

package/template-starter/src/lib/components/Callout.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  /**
-   * Callout component for documentation
-   * Displays alert boxes with different variants: info, warning, success, error
-   */
-
-  type Variant = 'info' | 'warning' | 'success' | 'error';
-
-  interface Props {
-    variant?: Variant;
-    title?: string;
-  }
-
-  let { variant = 'info', title, children }: Props & { children?: any } = $props();
-
-  const variantConfig: Record<Variant, { bgColor: string; borderColor: string; textColor: string; iconClass: string }> = {
-    info: {
-      bgColor: 'bg-blue-50 dark:bg-blue-900/20',
-      borderColor: 'border-blue-200 dark:border-blue-700',
-      textColor: 'text-blue-900 dark:text-blue-100',
-      iconClass: 'fa-circle-info text-blue-500'
-    },
-    warning: {
-      bgColor: 'bg-amber-50 dark:bg-amber-900/20',
-      borderColor: 'border-amber-200 dark:border-amber-700',
-      textColor: 'text-amber-900 dark:text-amber-100',
-      iconClass: 'fa-triangle-exclamation text-amber-500'
-    },
-    success: {
-      bgColor: 'bg-green-50 dark:bg-green-900/20',
-      borderColor: 'border-green-200 dark:border-green-700',
-      textColor: 'text-green-900 dark:text-green-100',
-      iconClass: 'fa-circle-check text-green-500'
-    },
-    error: {
-      bgColor: 'bg-red-50 dark:bg-red-900/20',
-      borderColor: 'border-red-200 dark:border-red-700',
-      textColor: 'text-red-900 dark:text-red-100',
-      iconClass: 'fa-circle-xmark text-red-500'
-    }
-  };
-
-  const config = $derived(variantConfig[variant]);
-</script>
-
-<div class="my-4 rounded-lg border-l-4 p-4 {config.bgColor} {config.borderColor} {config.textColor}">
-  <div class="flex items-start gap-3">
-    <i class="fa-solid {config.iconClass} mt-0.5 flex-shrink-0"></i>
-    <div class="flex-1">
-      {#if title}
-        <h4 class="font-semibold">{title}</h4>
-      {/if}
-      <div class="text-sm">
-        {#if children}
-          {@render children()}
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>

package/template-starter/src/lib/components/Callout.test.ts

@@ -1,91 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for Callout component
- * Tests component configuration and prop handling
- */
-
-describe('Callout Component', () => {
-  describe('Variant Configuration', () => {
-    const variantConfig = {
-      info: {
-        bgColor: 'bg-blue-50 dark:bg-blue-900/20',
-        borderColor: 'border-blue-200 dark:border-blue-700',
-        textColor: 'text-blue-900 dark:text-blue-100',
-        iconClass: 'fa-circle-info text-blue-500'
-      },
-      warning: {
-        bgColor: 'bg-amber-50 dark:bg-amber-900/20',
-        borderColor: 'border-amber-200 dark:border-amber-700',
-        textColor: 'text-amber-900 dark:text-amber-100',
-        iconClass: 'fa-triangle-exclamation text-amber-500'
-      },
-      success: {
-        bgColor: 'bg-green-50 dark:bg-green-900/20',
-        borderColor: 'border-green-200 dark:border-green-700',
-        textColor: 'text-green-900 dark:text-green-100',
-        iconClass: 'fa-circle-check text-green-500'
-      },
-      error: {
-        bgColor: 'bg-red-50 dark:bg-red-900/20',
-        borderColor: 'border-red-200 dark:border-red-700',
-        textColor: 'text-red-900 dark:text-red-100',
-        iconClass: 'fa-circle-xmark text-red-500'
-      }
-    };
-
-    it('renders with info variant by default', () => {
-      expect(variantConfig.info).toBeDefined();
-      expect(variantConfig.info.bgColor).toBe('bg-blue-50 dark:bg-blue-900/20');
-      expect(variantConfig.info.iconClass).toContain('circle-info');
-    });
-
-    it('supports all variant types', () => {
-      const variants = ['info', 'warning', 'success', 'error'] as const;
-      variants.forEach((variant) => {
-        expect(variantConfig[variant]).toBeDefined();
-        expect(variantConfig[variant].bgColor).toBeTruthy();
-        expect(variantConfig[variant].borderColor).toBeTruthy();
-        expect(variantConfig[variant].textColor).toBeTruthy();
-        expect(variantConfig[variant].iconClass).toBeTruthy();
-      });
-    });
-
-    it('has correct icon classes for each variant', () => {
-      expect(variantConfig.info.iconClass).toContain('circle-info');
-      expect(variantConfig.warning.iconClass).toContain('triangle-exclamation');
-      expect(variantConfig.success.iconClass).toContain('circle-check');
-      expect(variantConfig.error.iconClass).toContain('circle-xmark');
-    });
-
-    it('includes dark mode support in all styles', () => {
-      Object.values(variantConfig).forEach((config) => {
-        expect(config.bgColor).toMatch(/dark:/);
-        expect(config.borderColor).toMatch(/dark:/);
-        expect(config.textColor).toMatch(/dark:/);
-      });
-    });
-  });
-
-  describe('Props', () => {
-    it('should accept optional title prop', () => {
-      const props = {
-        title: 'Important Note',
-        variant: 'info' as const
-      };
-      expect(props.title).toBeDefined();
-      expect(typeof props.title).toBe('string');
-    });
-
-    it('should accept children slot', () => {
-      const hasChildren = true;
-      expect(hasChildren).toBe(true);
-    });
-
-    it('should accept variant prop', () => {
-      const validVariants = ['info', 'warning', 'success', 'error'] as const;
-      const variant: typeof validVariants[number] = 'warning';
-      expect(validVariants).toContain(variant);
-    });
-  });
-});

package/template-starter/src/lib/components/CodeBlock.svelte

@@ -1,68 +0,0 @@
-<script lang="ts">
-  /**
-   * CodeBlock component with copy button
-   * Shows code with optional language label
-   */
-
-  interface Props {
-    code: string;
-    language?: string;
-    filename?: string;
-  }
-
-  let { code, language = 'plaintext', filename }: Props = $props();
-
-  let copied = $state(false);
-
-  function copyToClipboard() {
-    navigator.clipboard.writeText(code);
-    copied = true;
-    setTimeout(() => {
-      copied = false;
-    }, 2000);
-  }
-</script>
-
-<div class="my-4 overflow-hidden rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900">
-  {#if filename}
-    <div class="flex items-center justify-between bg-gray-200 px-4 py-2 dark:bg-gray-800">
-      <span class="text-sm font-mono font-semibold text-gray-700 dark:text-gray-300">{filename}</span>
-      {#if language}
-        <span class="text-xs text-gray-600 dark:text-gray-400">{language}</span>
-      {/if}
-    </div>
-  {/if}
-
-  <div class="relative">
-    <button
-      onclick={copyToClipboard}
-      class="absolute right-2 top-2 rounded bg-gray-300 px-3 py-1 text-xs font-semibold text-gray-700 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition-colors"
-    >
-      {#if copied}
-        <i class="fa-solid fa-check mr-1"></i>Copied!
-      {:else}
-        <i class="fa-solid fa-copy mr-1"></i>Copy
-      {/if}
-    </button>
-
-    <pre class="overflow-x-auto p-4 font-mono text-sm text-gray-800 dark:text-gray-100"><code>{code}</code></pre>
-  </div>
-</div>
-
-<style>
-  pre {
-    background-color: transparent;
-    padding: 1rem;
-    overflow-x: auto;
-  }
-
-  code {
-    font-family: 'Courier New', monospace;
-    font-size: 0.875rem;
-    color: #1f2937;
-  }
-
-  :global(.dark) code {
-    color: #f3f4f6;
-  }
-</style>

package/template-starter/src/lib/components/CodeBlock.test.ts

@@ -1,62 +0,0 @@
-import { describe, it, expect } from 'vitest';
-
-/**
- * Unit tests for CodeBlock component
- * Tests component configuration and prop handling
- */
-
-describe('CodeBlock Component', () => {
-  describe('Props', () => {
-    it('renders code content', () => {
-      const code = 'console.log("Hello");';
-      expect(code).toContain('Hello');
-    });
-
-    it('should accept code prop', () => {
-      const code = 'const x = 42;';
-      expect(typeof code).toBe('string');
-      expect(code).toBeTruthy();
-    });
-
-    it('should accept optional language prop', () => {
-      const language = 'javascript';
-      expect(['plaintext', 'javascript', 'typescript', 'python', 'html', 'css']).toContain(language);
-    });
-
-    it('should accept optional filename prop', () => {
-      const filename = 'example.js';
-      expect(typeof filename).toBe('string');
-      expect(filename).toMatch(/\.\w+$/);
-    });
-
-    it('should have default language as plaintext', () => {
-      const defaultLanguage = 'plaintext';
-      expect(defaultLanguage).toBe('plaintext');
-    });
-  });
-
-  describe('Functionality', () => {
-    it('should support copy to clipboard functionality', () => {
-      const code = 'console.log("test");';
-      expect(code).toBeTruthy();
-      // Copy functionality is client-side only
-    });
-
-    it('should handle code with special characters', () => {
-      const code = 'const obj = { key: "value" };';
-      expect(code).toContain('key');
-      expect(code).toContain('value');
-    });
-
-    it('should display filename and language', () => {
-      const props = {
-        code: 'import React from "react";',
-        language: 'jsx',
-        filename: 'App.jsx'
-      };
-      expect(props.filename).toBe('App.jsx');
-      expect(props.language).toBe('jsx');
-      expect(props.code).toBeTruthy();
-    });
-  });
-});

package/template-starter/src/lib/components/DocLayout.svelte

@@ -1,84 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte';
-  import { theme } from '$lib/stores/theme';
-  import Navbar from './Navbar.svelte';
-  import Sidebar from './Sidebar.svelte';
-  import Footer from './Footer.svelte';
-  import type { NavSection } from '$lib/stores/nav';
-
-  let {
-    title = 'Documentation',
-    logo = null,
-    sections = [] as NavSection[],
-    copyright = '© 2026 Documentation System',
-    footerLinks = [] as { label: string; href: string }[],
-    children,
-  }: {
-    title?: string;
-    logo?: string | null;
-    sections?: NavSection[];
-    copyright?: string;
-    footerLinks?: { label: string; href: string }[];
-    children: any;
-  } = $props();
-
-  let currentPath = $state('/');
-  let isMounted = $state(false);
-
-  onMount(() => {
-    // Initialize theme on mount
-    const storedTheme = localStorage.getItem('theme') as 'light' | 'dark' | null;
-    if (storedTheme) {
-      theme.set(storedTheme);
-    } else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      theme.set('dark');
-    }
-
-    isMounted = true;
-
-    // Update currentPath
-    currentPath = window.location.pathname;
-
-    // Listen to route changes
-    const handleNavigation = () => {
-      currentPath = window.location.pathname;
-    };
-
-    window.addEventListener('popstate', handleNavigation);
-    return () => {
-      window.removeEventListener('popstate', handleNavigation);
-    };
-  });
-
-  function handleNavigate(path: string) {
-    currentPath = path;
-    window.history.pushState(null, '', path);
-  }
-
-  function handleLogoClick() {
-    handleNavigate('/');
-  }
-</script>
-
-<div class="min-h-screen flex flex-col bg-white dark:bg-claude-dark-bg text-claude-text dark:text-claude-dark-text transition-colors">
-  <!-- Navbar -->
-  <Navbar {title} {logo} onLogoClick={handleLogoClick} />
-
-  <!-- Main Content Area -->
-  <div class="flex flex-1 overflow-hidden">
-    <!-- Sidebar -->
-    <Sidebar {sections} {currentPath} onNavigate={handleNavigate} />
-
-    <!-- Main Content -->
-    <main class="flex-1 overflow-y-auto">
-      <div class="doc-container max-w-4xl mx-auto px-4 sm:px-6 py-8">
-        <article class="doc-content">
-          {@render children()}
-        </article>
-      </div>
-    </main>
-  </div>
-
-  <!-- Footer -->
-  <Footer {copyright} links={footerLinks} />
-</div>

package/template-starter/src/lib/components/Footer.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  let {
-    copyright = '© 2026 Documentation System',
-    links = [] as { label: string; href: string }[],
-  }: {
-    copyright?: string;
-    links?: { label: string; href: string }[];
-  } = $props();
-</script>
-
-<footer class="border-t border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary mt-12">
-  <div class="doc-container px-4 sm:px-6 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
-      <!-- About Section -->
-      <div>
-        <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">About</h3>
-        <p class="text-sm text-claude-text-secondary dark:text-claude-dark-text-secondary">
-          Professional documentation system built with SvelteKit and Tailwind CSS.
-        </p>
-      </div>
-
-      <!-- Links Section -->
-      {#if links.length > 0}
-        <div>
-          <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">Resources</h3>
-          <ul class="space-y-2">
-            {#each links as link (link.label)}
-              <li>
-                <a
-                  href={link.href}
-                  class="text-sm text-claude-accent dark:text-claude-dark-accent hover:underline transition-colors"
-                >
-                  {link.label}
-                </a>
-              </li>
-            {/each}
-          </ul>
-        </div>
-      {/if}
-
-      <!-- Social / Contact -->
-      <div>
-        <h3 class="font-semibold text-claude-text dark:text-claude-dark-text mb-4">Connect</h3>
-        <div class="flex gap-4">
-          <a
-            href="https://github.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-accent dark:hover:text-claude-dark-accent transition-colors"
-            aria-label="GitHub"
-          >
-            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.01 12.01 0 0024 12c0-6.63-5.37-12-12-12z" />
-            </svg>
-          </a>
-          <a
-            href="https://twitter.com"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-accent dark:hover:text-claude-dark-accent transition-colors"
-            aria-label="Twitter"
-          >
-            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
-              <path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417a9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z" />
-            </svg>
-          </a>
-        </div>
-      </div>
-    </div>
-
-    <!-- Copyright -->
-    <div class="border-t border-claude-border dark:border-claude-dark-border pt-8">
-      <p class="text-sm text-claude-text-secondary dark:text-claude-dark-text-secondary text-center">
-        {copyright}
-      </p>
-    </div>
-  </div>
-</footer>