@alliance-droid/svelte-docs-system 0.0.1

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

@@ -0,0 +1,248 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import {
+		query,
+		results,
+		loading,
+		resultCount,
+		initPagefind,
+		updateSearch,
+		clearSearch
+	} from '$lib/stores/search';
+	import { highlightSearchTerms, extractExcerpt } from '$lib/utils/highlight';
+
+	interface Props {
+		showResults?: boolean;
+	}
+
+	let { showResults = true }: Props = $props();
+
+	let searchInput: HTMLInputElement | undefined;
+	let isInitialized = $state(false);
+	let searchError = $state<string | null>(null);
+	let isDropdownOpen = $state(false);
+
+	onMount(async () => {
+		try {
+			await initPagefind();
+			isInitialized = true;
+		} catch (error) {
+			console.error('Failed to initialize search:', error);
+			searchError = 'Failed to initialize search';
+		}
+	});
+
+	async function handleSearch(e: Event) {
+		const target = e.target as HTMLInputElement;
+		const searchQuery = target.value;
+
+		try {
+			searchError = null;
+			await updateSearch(searchQuery);
+		} catch (error) {
+			console.error('Search error:', error);
+			searchError = 'Search failed. Please try again.';
+		}
+	}
+
+	function handleClear() {
+		clearSearch();
+		if (searchInput) {
+			searchInput.focus();
+		}
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			handleClear();
+			isDropdownOpen = false;
+		}
+	}
+
+	function handleFocus() {
+		isDropdownOpen = true;
+	}
+
+	function handleBlur(e: FocusEvent) {
+		// Only close dropdown if focus moves outside the search container
+		const target = e.relatedTarget as HTMLElement;
+		if (!target || !target.closest('[data-search-container]')) {
+			setTimeout(() => {
+				isDropdownOpen = false;
+			}, 100);
+		}
+	}
+</script>
+
+<div class="relative w-full" data-search-container>
+	<!-- Search Input -->
+	<div class="relative">
+		<input
+			bind:this={searchInput}
+			type="text"
+			placeholder="Search documentation..."
+			value={$query}
+			oninput={handleSearch}
+			onkeydown={handleKeyDown}
+			onfocus={handleFocus}
+			onblur={handleBlur}
+			disabled={!isInitialized}
+			class="w-full rounded-lg border border-gray-300 bg-white px-4 py-2 pl-10 text-sm text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder-gray-400 disabled:opacity-50 transition-all"
+			aria-label="Search documentation"
+		/>
+
+		<!-- Search Icon -->
+		<div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+			{#if $loading}
+				<svg
+					class="h-4 w-4 animate-spin text-gray-400"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+				>
+					<circle
+						class="opacity-25"
+						cx="12"
+						cy="12"
+						r="10"
+						stroke="currentColor"
+						stroke-width="4"
+					></circle>
+					<path
+						class="opacity-75"
+						fill="currentColor"
+						d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+					></path>
+				</svg>
+			{:else}
+				<svg
+					class="h-4 w-4 text-gray-400"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
+				>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+					/>
+				</svg>
+			{/if}
+		</div>
+
+		<!-- Clear Button -->
+		{#if $query}
+			<button
+				onclick={handleClear}
+				class="absolute inset-y-0 right-0 pr-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+				aria-label="Clear search"
+			>
+				<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+					<path
+						fill-rule="evenodd"
+						d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</div>
+
+	<!-- Error Message -->
+	{#if searchError}
+		<div class="mt-2 rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/20 dark:text-red-400">
+			{searchError}
+		</div>
+	{/if}
+
+	<!-- Search Results -->
+	{#if showResults && isDropdownOpen && ($query || $results.length > 0)}
+		<div class="absolute top-full left-0 right-0 mt-2 max-h-96 overflow-y-auto rounded-lg border border-gray-300 bg-white shadow-lg dark:border-gray-600 dark:bg-gray-800 z-50">
+			{#if $loading}
+				<div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+					<div class="inline-block">
+						<svg
+							class="h-5 w-5 animate-spin"
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+						>
+							<circle
+								class="opacity-25"
+								cx="12"
+								cy="12"
+								r="10"
+								stroke="currentColor"
+								stroke-width="4"
+							></circle>
+							<path
+								class="opacity-75"
+								fill="currentColor"
+								d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+							></path>
+						</svg>
+					</div>
+				</div>
+			{:else if $results.length === 0 && $query}
+				<div class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">
+					No results found for "<strong>{$query}</strong>"
+				</div>
+			{:else if $results.length > 0}
+				<div class="divide-y divide-gray-200 dark:divide-gray-700">
+					{#each $results as result (result.id)}
+						<a
+							href={result.url}
+							class="block px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+						>
+							<div class="font-semibold text-gray-900 dark:text-gray-100">
+								{@html highlightSearchTerms(result.title, $query)}
+							</div>
+							{#if result.excerpt || result.content}
+								<div class="mt-1 text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+									{@html highlightSearchTerms(
+										extractExcerpt(result.content || result.excerpt || '', $query, 200),
+										$query
+									)}
+								</div>
+							{/if}
+							<div class="mt-2 text-xs text-gray-500 dark:text-gray-500">
+								{result.url}
+							</div>
+						</a>
+					{/each}
+				</div>
+
+				{#if $resultCount > 0}
+					<div class="border-t border-gray-200 bg-gray-50 px-4 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-700/50 dark:text-gray-400">
+						{$resultCount} result{$resultCount !== 1 ? 's' : ''} found
+					</div>
+				{/if}
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	:global(.line-clamp-2) {
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		line-clamp: 2;
+		overflow: hidden;
+	}
+
+	:global(mark) {
+		background-color: #fef3c7;
+		color: #92400e;
+		font-weight: 500;
+		padding: 0 0.125rem;
+		border-radius: 0.125rem;
+	}
+
+	:global(.dark mark) {
+		background-color: #78350f;
+		color: #fef3c7;
+	}
+</style>

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

@@ -0,0 +1,110 @@
+<script lang="ts">
+  import type { NavSection, NavItem } from '$lib/stores/nav';
+  import { sidebarOpen } from '$lib/stores/nav';
+
+  let {
+    sections = [] as NavSection[],
+    currentPath = '',
+    onNavigate = () => {},
+  }: {
+    sections?: NavSection[];
+    currentPath?: string;
+    onNavigate?: (path: string) => void;
+  } = $props();
+
+  function handleNavClick(path: string) {
+    onNavigate(path);
+    sidebarOpen.set(false);
+  }
+
+  function isActive(href: string | undefined): boolean {
+    if (!href) return false;
+    return currentPath === href || currentPath.startsWith(href + '/');
+  }
+
+  function renderNavItem(item: NavItem) {
+    const active = isActive(item.href);
+    return {
+      label: item.label,
+      href: item.href,
+      children: item.children,
+      active,
+      icon: item.icon,
+    };
+  }
+</script>
+
+<!-- Sidebar Overlay for Mobile -->
+{#if $sidebarOpen}
+  <button
+    class="fixed inset-0 z-30 bg-black/20 md:hidden"
+    onclick={() => sidebarOpen.set(false)}
+    aria-label="Close menu"
+  ></button>
+{/if}
+
+<!-- Sidebar -->
+<aside
+  class="fixed left-0 top-16 bottom-0 w-64 overflow-y-auto border-r border-claude-border dark:border-claude-dark-border bg-white dark:bg-claude-dark-bg-secondary transition-transform md:relative md:top-0 {$sidebarOpen
+    ? 'translate-x-0'
+    : '-translate-x-full md:translate-x-0'} z-30 md:z-auto"
+>
+  <div class="p-6 space-y-8">
+    {#each sections as section (section.title)}
+      <div>
+        <h3 class="text-sm font-semibold text-claude-text dark:text-claude-dark-text uppercase tracking-wide mb-3 opacity-60">
+          {section.title}
+        </h3>
+        <nav class="space-y-2">
+          {#each section.items as item (item.label)}
+            <a
+              href={item.href || '#'}
+              onclick={(e) => {
+                if (item.href) {
+                  e.preventDefault();
+                  handleNavClick(item.href);
+                }
+              }}
+              class="block px-3 py-2 rounded-lg transition-colors {isActive(
+                item.href
+              )
+                ? 'bg-claude-accent text-white dark:bg-claude-dark-accent'
+                : 'text-claude-text dark:text-claude-dark-text hover:bg-claude-bg-secondary dark:hover:bg-claude-dark-bg'}"
+            >
+              <span class="flex items-center gap-2">
+                {#if item.icon}
+                  <span class="text-sm">{item.icon}</span>
+                {/if}
+                <span class="text-sm font-medium">{item.label}</span>
+              </span>
+            </a>
+
+            <!-- Nested Items -->
+            {#if item.children && item.children.length > 0}
+              <div class="ml-3 space-y-1 border-l border-claude-border dark:border-claude-dark-border pl-3">
+                {#each item.children as child (child.label)}
+                  <a
+                    href={child.href || '#'}
+                    onclick={(e) => {
+                      if (child.href) {
+                        e.preventDefault();
+                        handleNavClick(child.href);
+                      }
+                    }}
+                    class="block px-3 py-1 text-xs rounded transition-colors {isActive(
+                      child.href
+                    )
+                      ? 'bg-claude-accent text-white dark:bg-claude-dark-accent'
+                      : 'text-claude-text-secondary dark:text-claude-dark-text-secondary hover:text-claude-text dark:hover:text-claude-dark-text'}"
+                  >
+                    {child.label}
+                  </a>
+                {/each}
+              </div>
+            {/if}
+          {/each}
+        </nav>
+      </div>
+    {/each}
+  </div>
+</aside>

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

@@ -0,0 +1,48 @@
+<script lang="ts">
+  /**
+   * Tabs component for switching between content panels
+   * Usage:
+   * <Tabs items={[{label: 'Tab 1', content: 'Content 1'}]} />
+   */
+
+  interface TabItem {
+    label: string;
+    content?: string;
+  }
+
+  interface Props {
+    items: TabItem[];
+    defaultIndex?: number;
+  }
+
+  let { items, defaultIndex = 0 }: Props = $props();
+
+  let activeIndex = $state(0);
+
+  $effect(() => {
+    activeIndex = defaultIndex;
+  });
+</script>
+
+<div class="my-4">
+  <div class="flex border-b border-gray-200 dark:border-gray-700">
+    {#each items as item, index (index)}
+      <button
+        onclick={() => (activeIndex = index)}
+        class="px-4 py-2 font-medium transition-colors {activeIndex === index
+          ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+          : 'text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100'}"
+      >
+        {item.label}
+      </button>
+    {/each}
+  </div>
+
+  <div class="mt-4 rounded-b-lg bg-gray-50 p-4 dark:bg-gray-900/20">
+    {#if items[activeIndex]?.content}
+      <div class="prose dark:prose-invert">
+        {@html items[activeIndex].content}
+      </div>
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import Tabs from './Tabs.svelte';
+
+describe('Tabs Component', () => {
+  it('renders all tab buttons', () => {
+    const items = [
+      { label: 'Tab 1', content: 'Content 1' },
+      { label: 'Tab 2', content: 'Content 2' }
+    ];
+
+    render(Tabs, { props: { items } });
+
+    expect(screen.getByText('Tab 1')).toBeTruthy();
+    expect(screen.getByText('Tab 2')).toBeTruthy();
+  });
+});

package/template-starter/src/lib/index.ts

@@ -0,0 +1,15 @@
+// Re-export documentation components for use in your templates
+
+export { default as Callout } from './components/Callout.svelte';
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as CodeBlock } from './components/CodeBlock.svelte';
+export { default as Image } from './components/Image.svelte';
+export { default as APITable } from './components/APITable.svelte';
+export { default as Breadcrumbs } from './components/Breadcrumbs.svelte';
+export { default as Search } from './components/Search.svelte';
+
+// Re-export theme components
+export { default as DocLayout } from './components/DocLayout.svelte';
+export { default as Navbar } from './components/Navbar.svelte';
+export { default as Sidebar } from './components/Sidebar.svelte';
+export { default as Footer } from './components/Footer.svelte';

package/template-starter/src/routes/+layout.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import '../app.css';
+
+	let { children } = $props();
+</script>
+
+<svelte:window
+	on:resize={() => {
+		// Handle window resize if needed
+	}}
+/>
+
+<div class="app">
+	{@render children?.()}
+</div>
+
+<style>
+	:global(body) {
+		margin: 0;
+		padding: 0;
+	}
+
+	.app {
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+	}
+</style>

package/template-starter/src/routes/+page.svelte

@@ -0,0 +1,92 @@
+<script>
+  // Home page for documentation starter
+</script>
+
+<main class="mx-auto max-w-4xl px-6 py-12">
+  <div class="mb-12">
+    <h1 class="mb-4 text-5xl font-bold">Documentation Starter</h1>
+    <p class="mb-6 text-xl text-gray-600">
+      Welcome to your documentation site built with Svelte Docs System.
+    </p>
+    <p class="text-lg text-gray-500">
+      Edit the <code class="rounded bg-gray-100 px-2 py-1 font-mono">docs/</code> folder to add your documentation content.
+    </p>
+  </div>
+
+  <section class="mb-12">
+    <h2 class="mb-4 text-3xl font-bold">Getting Started</h2>
+    <div class="space-y-4">
+      <div class="rounded-lg border border-gray-200 p-6">
+        <h3 class="mb-2 font-semibold">📝 Add Documentation</h3>
+        <p class="text-gray-600">Create markdown files in the <code class="font-mono">docs/</code> folder and they'll automatically be added to your site.</p>
+      </div>
+      <div class="rounded-lg border border-gray-200 p-6">
+        <h3 class="mb-2 font-semibold">⚙️ Configure Navigation</h3>
+        <p class="text-gray-600">Edit <code class="font-mono">docs/_config.json</code> to customize the sidebar navigation structure.</p>
+      </div>
+      <div class="rounded-lg border border-gray-200 p-6">
+        <h3 class="mb-2 font-semibold">🎨 Customize Styling</h3>
+        <p class="text-gray-600">Update <code class="font-mono">tailwind.config.ts</code> and CSS files to match your brand.</p>
+      </div>
+    </div>
+  </section>
+
+  <section class="mb-12">
+    <h2 class="mb-4 text-3xl font-bold">Available Scripts</h2>
+    <ul class="space-y-2 text-gray-700">
+      <li><code class="font-mono">npm run dev</code> - Start development server</li>
+      <li><code class="font-mono">npm run build</code> - Build for production</li>
+      <li><code class="font-mono">npm run preview</code> - Preview production build</li>
+      <li><code class="font-mono">npm run check</code> - Type check and lint</li>
+    </ul>
+  </section>
+
+  <section>
+    <h2 class="mb-4 text-3xl font-bold">Learn More</h2>
+    <p class="text-gray-700">
+      Check the documentation in the <code class="font-mono">docs/</code> folder to learn how to use all available features.
+    </p>
+  </section>
+</main>
+
+<style>
+  :global(body) {
+    background-color: white;
+    color: #333;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  }
+
+  :global(.dark) :global(body) {
+    background-color: #030712;
+    color: #f3f4f6;
+  }
+
+  main {
+    max-width: 56rem;
+    margin: 0 auto;
+  }
+
+  h1 {
+    color: #111827;
+  }
+
+  :global(.dark) h1 {
+    color: white;
+  }
+
+  h2 {
+    color: #111827;
+  }
+
+  :global(.dark) h2 {
+    color: white;
+  }
+
+  code {
+    color: #dc2626;
+  }
+
+  :global(.dark) code {
+    color: #fca5a5;
+  }
+</style>

package/template-starter/svelte.config.js

@@ -0,0 +1,17 @@
+import adapter from '@sveltejs/adapter-static';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+  kit: {
+    adapter: adapter({
+      pages: 'build',
+      assets: 'build',
+      fallback: 'index.html'
+    }),
+    prerender: {
+      entries: ['*']
+    }
+  }
+};
+
+export default config;

package/template-starter/tailwind.config.ts

@@ -0,0 +1,17 @@
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    extend: {
+      colors: {
+        'docs': {
+          'primary': '#3b82f6',
+          'dark': '#1f2937',
+          'light': '#f9fafb',
+          'border': '#e5e7eb'
+        }
+      }
+    }
+  },
+  plugins: [],
+  darkMode: 'class'
+};

package/template-starter/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true
+  }
+}

package/template-starter/vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});