@alliance-droid/svelte-docs-system 0.0.1

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

@@ -0,0 +1,148 @@
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Unit tests for Breadcrumbs component
+ * Tests breadcrumb navigation structure and routing
+ */
+
+describe('Breadcrumbs Component', () => {
+  describe('Breadcrumb Items', () => {
+    it('should accept array of breadcrumb items', () => {
+      const items = [
+        { label: 'Home', href: '/' },
+        { label: 'Docs', href: '/docs' },
+        { label: 'API', href: '/docs/api' }
+      ];
+      expect(Array.isArray(items)).toBe(true);
+      expect(items.length).toBe(3);
+    });
+
+    it('should require label for each item', () => {
+      const item = { label: 'Documentation', href: '/docs' };
+      expect(item.label).toBeDefined();
+      expect(typeof item.label).toBe('string');
+    });
+
+    it('should require href for navigation links', () => {
+      const item = { label: 'API', href: '/api' };
+      expect(item.href).toBeDefined();
+      expect(typeof item.href).toBe('string');
+    });
+
+    it('should handle home item', () => {
+      const homeItem = { label: 'Home', href: '/' };
+      expect(homeItem.href).toBe('/');
+    });
+  });
+
+  describe('Breadcrumb Structure', () => {
+    it('should maintain breadcrumb order', () => {
+      const breadcrumbs = [
+        { label: 'Home', href: '/' },
+        { label: 'Products', href: '/products' },
+        { label: 'Books', href: '/products/books' },
+        { label: 'JavaScript Guide' }
+      ];
+      expect(breadcrumbs[0].label).toBe('Home');
+      expect(breadcrumbs[breadcrumbs.length - 1].label).toBe('JavaScript Guide');
+    });
+
+    it('should support single breadcrumb', () => {
+      const items = [{ label: 'Home', href: '/' }];
+      expect(items.length).toBe(1);
+    });
+
+    it('should support current page as last item without link', () => {
+      const items = [
+        { label: 'Home', href: '/' },
+        { label: 'Current Page' }
+      ];
+      const lastItem = items[items.length - 1];
+      expect('href' in lastItem).toBe(false);
+    });
+  });
+
+  describe('Navigation', () => {
+    it('should have proper href attributes', () => {
+      const item = { label: 'Docs', href: '/docs' };
+      expect(item.href).toMatch(/^\//);
+    });
+
+    it('should support absolute URLs', () => {
+      const item = { label: 'External', href: 'https://example.com' };
+      expect(item.href).toContain('http');
+    });
+
+    it('should support relative paths', () => {
+      const item = { label: 'Sibling', href: '../other' };
+      expect(item.href).toContain('..');
+    });
+  });
+
+  describe('Separators', () => {
+    it('should have separators between items', () => {
+      const separator = '/';
+      expect(typeof separator).toBe('string');
+    });
+
+    it('should not show separator after last item', () => {
+      const items = [
+        { label: 'Home', href: '/' },
+        { label: 'Current' }
+      ];
+      const showSeparator = (index: number) => index < items.length - 1;
+      expect(showSeparator(0)).toBe(true);
+      expect(showSeparator(1)).toBe(false);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should have nav ARIA landmark', () => {
+      const role = 'navigation';
+      expect(role).toBe('navigation');
+    });
+
+    it('should have proper ARIA attributes', () => {
+      const ariaLabel = 'Breadcrumb navigation';
+      expect(ariaLabel).toBeTruthy();
+    });
+
+    it('should mark current page as current', () => {
+      const ariaCurrent = 'page';
+      expect(ariaCurrent).toBe('page');
+    });
+
+    it('should have proper link semantics', () => {
+      const link = { label: 'Docs', href: '/docs' };
+      expect(link.href).toBeTruthy();
+      expect(link.label).toBeTruthy();
+    });
+  });
+
+  describe('Styling', () => {
+    it('should support custom classes', () => {
+      const customClass = 'text-sm text-gray-600';
+      expect(customClass).toContain('text-');
+    });
+
+    it('should support active/current state styling', () => {
+      const activeClass = 'text-gray-900 font-semibold';
+      expect(activeClass).toBeTruthy();
+    });
+
+    it('should be responsive', () => {
+      const isResponsive = true;
+      expect(isResponsive).toBe(true);
+    });
+  });
+
+  describe('Schema/Structured Data', () => {
+    it('should support breadcrumbList schema', () => {
+      const schema = {
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList'
+      };
+      expect(schema['@type']).toBe('BreadcrumbList');
+    });
+  });
+});

package/src/lib/components/Callout.svelte

@@ -0,0 +1,60 @@
+<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/src/lib/components/Callout.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+
+/**
+ * Unit tests for Callout component
+ * Tests component structure and prop handling
+ */
+
+describe('Callout Component', () => {
+  describe('Props', () => {
+    it('should have default variant as info', () => {
+      const defaultVariant = 'info';
+      expect(['info', 'warning', 'success', 'error']).toContain(defaultVariant);
+    });
+
+    it('should accept valid variants', () => {
+      const validVariants = ['info', 'warning', 'success', 'error'];
+      validVariants.forEach((variant) => {
+        expect(validVariants).toContain(variant);
+      });
+    });
+
+    it('should accept optional title', () => {
+      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);
+    });
+  });
+
+  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('should have all required properties for each variant', () => {
+      Object.entries(variantConfig).forEach(([variant, config]) => {
+        expect(config).toHaveProperty('bgColor');
+        expect(config).toHaveProperty('borderColor');
+        expect(config).toHaveProperty('textColor');
+        expect(config).toHaveProperty('iconClass');
+        expect(config.bgColor).toBeTruthy();
+        expect(config.borderColor).toBeTruthy();
+        expect(config.textColor).toBeTruthy();
+        expect(config.iconClass).toBeTruthy();
+      });
+    });
+
+    it('should use 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('should include dark mode classes', () => {
+      Object.values(variantConfig).forEach((config) => {
+        expect(config.bgColor).toMatch(/dark:/);
+        expect(config.borderColor).toMatch(/dark:/);
+        expect(config.textColor).toMatch(/dark:/);
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should support icon from FontAwesome', () => {
+      const iconClass = 'fa-solid fa-circle-info text-blue-500';
+      expect(iconClass).toMatch(/fa-(solid|regular|light|brands)/);
+    });
+  });
+});

package/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,68 @@
+<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/src/lib/components/CodeBlock.test.ts

@@ -0,0 +1,133 @@
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Unit tests for CodeBlock component
+ * Tests code formatting and syntax highlighting
+ */
+
+describe('CodeBlock Component', () => {
+  describe('Code Input', () => {
+    it('should accept code as string', () => {
+      const code = 'console.log("hello")';
+      expect(typeof code).toBe('string');
+    });
+
+    it('should accept empty code string', () => {
+      const code = '';
+      expect(code.length).toBe(0);
+    });
+
+    it('should preserve whitespace and indentation', () => {
+      const code = `function example() {
+  return true;
+}`;
+      expect(code).toContain('  ');
+      expect(code).toContain('\n');
+    });
+
+    it('should handle special characters', () => {
+      const code = 'const str = "hello<world>&friends";';
+      expect(code).toContain('<');
+      expect(code).toContain('>');
+      expect(code).toContain('&');
+    });
+  });
+
+  describe('Language Detection', () => {
+    it('should support common programming languages', () => {
+      const languages = ['javascript', 'typescript', 'python', 'rust', 'bash', 'json', 'html', 'css'];
+      languages.forEach((lang) => {
+        expect(typeof lang).toBe('string');
+        expect(lang.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('should accept language as prop', () => {
+      const language = 'typescript';
+      expect(typeof language).toBe('string');
+    });
+
+    it('should default to plain text if language not provided', () => {
+      const defaultLanguage = 'plaintext';
+      expect(defaultLanguage).toBeDefined();
+    });
+
+    it('should detect language from code fence', () => {
+      const fence = '```javascript';
+      const match = fence.match(/```(\w+)?/);
+      expect(match).toBeTruthy();
+      if (match && match[1]) {
+        expect(match[1]).toBe('javascript');
+      }
+    });
+  });
+
+  describe('Syntax Highlighting', () => {
+    it('should apply syntax highlighting tokens', () => {
+      const token = {
+        type: 'keyword',
+        content: 'function',
+        class: 'hljs-keyword'
+      };
+      expect(token.type).toBeDefined();
+      expect(token.content).toBeDefined();
+      expect(token.class).toBeTruthy();
+    });
+
+    it('should support dark mode highlighting', () => {
+      const colorSchemes = ['light', 'dark'];
+      colorSchemes.forEach((scheme) => {
+        expect(['light', 'dark']).toContain(scheme);
+      });
+    });
+  });
+
+  describe('Copy Button', () => {
+    it('should have copy functionality', () => {
+      const hasCopyButton = true;
+      expect(hasCopyButton).toBe(true);
+    });
+
+    it('should copy entire code block', () => {
+      const code = 'const x = 42;';
+      const copied = code;
+      expect(copied).toBe(code);
+    });
+  });
+
+  describe('Line Numbers', () => {
+    it('should support optional line numbers', () => {
+      const showLineNumbers = true;
+      expect(typeof showLineNumbers).toBe('boolean');
+    });
+
+    it('should number lines correctly', () => {
+      const lines = [
+        'line 1',
+        'line 2',
+        'line 3'
+      ];
+      lines.forEach((line, index) => {
+        expect(index + 1).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('should be keyboard accessible', () => {
+      const canCopyWithKeyboard = true;
+      expect(canCopyWithKeyboard).toBe(true);
+    });
+
+    it('should have proper ARIA labels', () => {
+      const ariaLabel = 'Code block, javascript';
+      expect(ariaLabel).toBeTruthy();
+      expect(typeof ariaLabel).toBe('string');
+    });
+
+    it('should announce copy feedback to screen readers', () => {
+      const announcement = 'Code copied to clipboard';
+      expect(announcement).toBeTruthy();
+    });
+  });
+});

package/src/lib/components/DocLayout.svelte

@@ -0,0 +1,84 @@
+<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/src/lib/components/Footer.svelte

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