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

package/dist/components/Documentation.svelte

@@ -0,0 +1,639 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { renderMarkdown } from '../utils/markdown.js';
+	
+	interface DocFile {
+		slug: string;
+		path: string;
+		title: string;
+		description?: string;
+		order?: number;
+	}
+	
+	interface DocFolder {
+		name: string;
+		slug: string;
+		files: DocFile[];
+		folders: DocFolder[];
+		order?: number;
+	}
+	
+	interface Props {
+		structure: DocFolder;
+		baseRoute?: string;
+		currentSlug?: string;
+		class?: string;
+	}
+	
+	let {
+		structure,
+		baseRoute = '/documentation',
+		currentSlug = '',
+		class: className = ''
+	}: Props = $props();
+	
+	let content = $state('');
+	let metadata = $state<Record<string, any>>({});
+	let loading = $state(true);
+	let error = $state<string | null>(null);
+	let sidebarOpen = $state(false);
+	let searchQuery = $state('');
+	
+	function getAllDocs(folder: DocFolder): DocFile[] {
+		let docs: DocFile[] = [...folder.files];
+		for (const subFolder of folder.folders) {
+			docs = docs.concat(getAllDocs(subFolder));
+		}
+		return docs;
+	}
+	
+	const filteredStructure = $derived(() => {
+		if (!searchQuery.trim()) return structure;
+		
+		const query = searchQuery.toLowerCase();
+		
+		function filterFolder(folder: DocFolder): DocFolder {
+			const filteredFiles = folder.files.filter(f => 
+				f.title.toLowerCase().includes(query) ||
+				f.slug.toLowerCase().includes(query)
+			);
+			
+			const filteredFolders = folder.folders
+				.map(filterFolder)
+				.filter(f => f.files.length > 0 || f.folders.length > 0);
+			
+			return {
+				...folder,
+				files: filteredFiles,
+				folders: filteredFolders
+			};
+		}
+		
+		return filterFolder(structure);
+	});
+	
+	function findDoc(folder: DocFolder, slug: string): DocFile | null {
+		for (const file of folder.files) {
+			if (file.slug === slug) return file;
+		}
+		for (const subFolder of folder.folders) {
+			const found = findDoc(subFolder, slug);
+			if (found) return found;
+		}
+		return null;
+	}
+	
+	function getFirstDoc(folder: DocFolder): DocFile | null {
+		if (folder.files.length > 0) return folder.files[0];
+		for (const subFolder of folder.folders) {
+			const found = getFirstDoc(subFolder);
+			if (found) return found;
+		}
+		return null;
+	}
+	
+	async function loadContent(slug: string) {
+		loading = true;
+		error = null;
+		
+		try {
+			const targetSlug = slug || getFirstDoc(structure)?.slug || '';
+			const doc = findDoc(structure, targetSlug);
+			
+			if (!doc) {
+				error = 'Document not found';
+				loading = false;
+				return;
+			}
+			
+			const response = await fetch(`/docs/${targetSlug}.md`);
+			if (!response.ok) {
+				throw new Error('Failed to load document');
+			}
+			
+			const markdown = await response.text();
+			const result = renderMarkdown(markdown);
+			
+			content = result.html;
+			metadata = result.metadata;
+		} catch (e) {
+			error = e instanceof Error ? e.message : 'Failed to load document';
+		} finally {
+			loading = false;
+		}
+	}
+	
+	$effect(() => {
+		loadContent(currentSlug);
+	});
+	
+	function isActive(slug: string): boolean {
+		return currentSlug === slug;
+	}
+	
+	function toggleSidebar() {
+		sidebarOpen = !sidebarOpen;
+	}
+	
+	function closeSidebar() {
+		sidebarOpen = false;
+	}
+</script>
+
+<div class="docs-wrapper {className}">
+	<!-- Mobile toggle button - moves with sidebar -->
+	<button 
+		class="docs-toggle"
+		class:sidebar-open={sidebarOpen}
+		onclick={toggleSidebar}
+		aria-label="Toggle navigation"
+	>
+		{#if sidebarOpen}
+			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<path d="M18 6 6 18"></path>
+				<path d="m6 6 12 12"></path>
+			</svg>
+		{:else}
+			<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+				<line x1="3" y1="12" x2="21" y2="12"></line>
+				<line x1="3" y1="6" x2="21" y2="6"></line>
+				<line x1="3" y1="18" x2="21" y2="18"></line>
+			</svg>
+		{/if}
+	</button>
+
+	<!-- Overlay -->
+	{#if sidebarOpen}
+		<button 
+			class="docs-overlay"
+			onclick={closeSidebar}
+			aria-label="Close navigation"
+		></button>
+	{/if}
+
+	<!-- Sidebar -->
+	<aside class="docs-sidebar" class:open={sidebarOpen}>
+		<div class="docs-sidebar-inner">
+			<!-- Search -->
+			<div class="docs-search">
+				<div class="docs-search-wrapper">
+					<svg class="docs-search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+						<circle cx="11" cy="11" r="8"></circle>
+						<path d="m21 21-4.3-4.3"></path>
+					</svg>
+					<input
+						type="text"
+						placeholder="Search docs..."
+						bind:value={searchQuery}
+						class="docs-search-input"
+					/>
+					{#if searchQuery}
+						<button 
+							class="docs-search-clear"
+							onclick={() => searchQuery = ''}
+							aria-label="Clear search"
+						>
+							<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+								<path d="M18 6 6 18"></path>
+								<path d="m6 6 12 12"></path>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+			
+			<!-- Navigation -->
+			<nav class="docs-nav">
+				{#snippet renderFolder(folder: DocFolder, depth: number = 0)}
+					{#if folder.files.length > 0 || folder.folders.length > 0}
+						{#if depth > 0}
+							<div class="docs-nav-section">
+								<h3 class="docs-nav-heading">{folder.name}</h3>
+							</div>
+						{/if}
+						
+						<ul class="docs-nav-list">
+							{#each folder.files as file}
+								<li>
+									<a 
+										href="{baseRoute}/{file.slug}"
+										class="docs-nav-link"
+										class:active={isActive(file.slug)}
+										onclick={closeSidebar}
+									>
+										{file.title}
+									</a>
+								</li>
+							{/each}
+						</ul>
+						
+						{#each folder.folders as subFolder}
+							{@render renderFolder(subFolder, depth + 1)}
+						{/each}
+					{/if}
+				{/snippet}
+				
+				{@render renderFolder(filteredStructure(), 0)}
+				
+				{#if searchQuery && filteredStructure().files.length === 0 && filteredStructure().folders.length === 0}
+					<p class="docs-no-results">No results found</p>
+				{/if}
+			</nav>
+		</div>
+	</aside>
+
+	<!-- Main content -->
+	<main class="docs-content">
+		{#if loading}
+			<div class="docs-loading">
+				<div class="docs-spinner"></div>
+				<p>Loading...</p>
+			</div>
+		{:else if error}
+			<div class="docs-error">
+				<h2>Error</h2>
+				<p>{error}</p>
+			</div>
+		{:else}
+			<article class="docs-article">
+				{@html content}
+			</article>
+		{/if}
+	</main>
+</div>
+
+<style>
+	.docs-wrapper {
+		display: flex;
+		min-height: 100vh;
+		position: relative;
+		background: var(--color-background, #0a0a0f);
+	}
+	
+	/* Toggle button - moves with sidebar */
+	.docs-toggle {
+		display: none;
+		position: fixed;
+		top: 3.5rem;
+		left: 1rem;
+		z-index: 50;
+		width: 2.5rem;
+		height: 2.5rem;
+		align-items: center;
+		justify-content: center;
+		background: transparent;
+		border: none;
+		color: var(--color-foreground-secondary, #a1a1aa);
+		cursor: pointer;
+		transition: left 0.2s ease, color 0.15s;
+	}
+	
+	.docs-toggle.sidebar-open {
+		left: calc(280px + 0.5rem);
+	}
+	
+	.docs-toggle:hover {
+		color: var(--color-foreground, #e5e5e5);
+	}
+	
+	/* Overlay */
+	.docs-overlay {
+		display: none;
+		position: fixed;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.6);
+		z-index: 30;
+		border: none;
+		cursor: pointer;
+	}
+	
+	/* Sidebar */
+	.docs-sidebar {
+		width: 280px;
+		flex-shrink: 0;
+		background: var(--color-surface, #1a1a2e);
+		border-right: 1px solid var(--color-border, #2a2a3e);
+		position: sticky;
+		top: 0;
+		height: 100vh;
+	}
+	
+	.docs-sidebar-inner {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		overflow: hidden;
+	}
+	
+	/* Search */
+	.docs-search {
+		padding: 1rem;
+		border-bottom: 1px solid var(--color-border, #2a2a3e);
+		flex-shrink: 0;
+	}
+	
+	.docs-search-wrapper {
+		position: relative;
+		display: flex;
+		align-items: center;
+	}
+	
+	.docs-search-icon {
+		position: absolute;
+		left: 0.75rem;
+		color: var(--color-foreground-tertiary, #6b7280);
+		pointer-events: none;
+	}
+	
+	.docs-search-input {
+		width: 100%;
+		padding: 0.5rem 2rem 0.5rem 2.25rem;
+		border: 1px solid var(--color-border, #2a2a3e);
+		border-radius: 0.5rem;
+		background: var(--color-background, #0a0a0f);
+		color: var(--color-foreground, #e5e5e5);
+		font-size: 0.875rem;
+		outline: none;
+		transition: border-color 0.15s;
+	}
+	
+	.docs-search-input:focus {
+		border-color: var(--color-primary, #60a5fa);
+	}
+	
+	.docs-search-input::placeholder {
+		color: var(--color-foreground-tertiary, #6b7280);
+	}
+	
+	.docs-search-clear {
+		position: absolute;
+		right: 0.5rem;
+		padding: 0.25rem;
+		background: transparent;
+		border: none;
+		cursor: pointer;
+		color: var(--color-foreground-tertiary, #6b7280);
+		border-radius: 0.25rem;
+	}
+	
+	.docs-search-clear:hover {
+		color: var(--color-foreground, #e5e5e5);
+	}
+	
+	/* Navigation */
+	.docs-nav {
+		flex: 1;
+		overflow-y: auto;
+		padding: 1rem;
+	}
+	
+	.docs-nav-section {
+		margin-top: 1.5rem;
+	}
+	
+	.docs-nav-section:first-child {
+		margin-top: 0;
+	}
+	
+	.docs-nav-heading {
+		font-size: 0.75rem;
+		font-weight: 600;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		color: var(--color-foreground-tertiary, #6b7280);
+		margin-bottom: 0.5rem;
+		padding: 0 0.75rem;
+	}
+	
+	.docs-nav-list {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+	
+	.docs-nav-link {
+		display: block;
+		padding: 0.5rem 0.75rem;
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+		color: var(--color-foreground-secondary, #a1a1aa);
+		text-decoration: none;
+		transition: all 0.15s;
+	}
+	
+	.docs-nav-link:hover {
+		background: var(--color-surface-hover, #252538);
+		color: var(--color-foreground, #e5e5e5);
+	}
+	
+	.docs-nav-link.active {
+		background: var(--color-primary, #60a5fa);
+		color: white;
+	}
+	
+	.docs-no-results {
+		padding: 1rem;
+		text-align: center;
+		color: var(--color-foreground-tertiary, #6b7280);
+		font-size: 0.875rem;
+	}
+	
+	/* Content */
+	.docs-content {
+		flex: 1;
+		min-width: 0;
+		padding: 2rem 3rem;
+		max-width: 900px;
+		overflow-y: auto;
+	}
+	
+	.docs-loading,
+	.docs-error {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 4rem;
+		color: var(--color-foreground-tertiary, #6b7280);
+	}
+	
+	.docs-spinner {
+		width: 2rem;
+		height: 2rem;
+		border: 2px solid var(--color-border, #2a2a3e);
+		border-top-color: var(--color-primary, #60a5fa);
+		border-radius: 50%;
+		animation: spin 0.8s linear infinite;
+	}
+	
+	@keyframes spin {
+		to { transform: rotate(360deg); }
+	}
+	
+	.docs-error h2 {
+		color: var(--color-danger, #ef4444);
+		margin-bottom: 0.5rem;
+	}
+	
+	/* Article styles */
+	.docs-article {
+		color: var(--color-foreground, #e5e5e5);
+		line-height: 1.75;
+	}
+	
+	.docs-article :global(h1) {
+		font-size: 2rem;
+		font-weight: 700;
+		margin-bottom: 1rem;
+		color: var(--color-foreground, #f5f5f5);
+	}
+	
+	.docs-article :global(h2) {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-top: 2.5rem;
+		margin-bottom: 1rem;
+		padding-bottom: 0.5rem;
+		border-bottom: 1px solid var(--color-border, #2a2a3e);
+		color: var(--color-foreground, #f5f5f5);
+	}
+	
+	.docs-article :global(h3) {
+		font-size: 1.25rem;
+		font-weight: 600;
+		margin-top: 2rem;
+		margin-bottom: 0.75rem;
+		color: var(--color-foreground, #f5f5f5);
+	}
+	
+	.docs-article :global(p) {
+		margin-bottom: 1.25rem;
+	}
+	
+	.docs-article :global(a) {
+		color: var(--color-primary, #60a5fa);
+		text-decoration: none;
+	}
+	
+	.docs-article :global(a:hover) {
+		text-decoration: underline;
+	}
+	
+	.docs-article :global(code) {
+		font-family: ui-monospace, monospace;
+		font-size: 0.875em;
+		background: var(--color-surface, #1a1a2e);
+		padding: 0.125rem 0.375rem;
+		border-radius: 0.25rem;
+	}
+	
+	.docs-article :global(pre) {
+		background: var(--color-surface, #1a1a2e);
+		color: #e2e8f0;
+		padding: 1rem;
+		border-radius: 0.5rem;
+		overflow-x: auto;
+		margin: 1.5rem 0;
+		border: 1px solid var(--color-border, #2a2a3e);
+	}
+	
+	.docs-article :global(pre code) {
+		background: transparent;
+		padding: 0;
+		font-size: 0.875rem;
+	}
+	
+	.docs-article :global(ul),
+	.docs-article :global(ol) {
+		margin-bottom: 1.25rem;
+		padding-left: 1.5rem;
+	}
+	
+	.docs-article :global(li) {
+		margin-bottom: 0.5rem;
+	}
+	
+	.docs-article :global(blockquote) {
+		border-left: 4px solid var(--color-primary, #60a5fa);
+		padding-left: 1rem;
+		margin: 1.5rem 0;
+		color: var(--color-foreground-secondary, #a1a1aa);
+		font-style: italic;
+	}
+	
+	.docs-article :global(table) {
+		width: 100%;
+		border-collapse: collapse;
+		margin: 1.5rem 0;
+	}
+	
+	.docs-article :global(th),
+	.docs-article :global(td) {
+		padding: 0.75rem;
+		border: 1px solid var(--color-border, #2a2a3e);
+		text-align: left;
+	}
+	
+	.docs-article :global(th) {
+		background: var(--color-surface, #1a1a2e);
+		font-weight: 600;
+	}
+	
+	/* Mobile responsive */
+	@media (max-width: 768px) {
+		.docs-toggle {
+			display: flex;
+		}
+		
+		.docs-overlay {
+			display: block;
+		}
+		
+		.docs-sidebar {
+			position: fixed;
+			left: 0;
+			top: 0;
+			bottom: 0;
+			z-index: 40;
+			transform: translateX(-100%);
+			transition: transform 0.2s ease;
+			padding-top: var(--docs-header-height, 2.5rem);
+		}
+		
+		.docs-sidebar.open {
+			transform: translateX(0);
+		}
+		
+		.docs-content {
+			padding: 1rem;
+			padding-top: 4rem;
+		}
+		
+		.docs-article :global(h1) {
+			font-size: 1.5rem;
+		}
+		
+		.docs-article :global(h2) {
+			font-size: 1.25rem;
+		}
+		
+		.docs-article :global(h3) {
+			font-size: 1.1rem;
+		}
+		
+		.docs-article :global(pre) {
+			font-size: 0.8rem;
+			padding: 0.75rem;
+		}
+		
+		.docs-article :global(table) {
+			font-size: 0.875rem;
+		}
+		
+		.docs-article :global(th),
+		.docs-article :global(td) {
+			padding: 0.5rem;
+		}
+	}
+</style>

package/dist/components/Footer.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    copyright?: string;
+    links?: {
+        label: string;
+        href: string;
+    }[];
+};
+declare const Footer: import("svelte").Component<$$ComponentProps, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/Image.svelte.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Image component with caption support
+ * Provides responsive images with optional captions and alt text
+ */
+interface Props {
+    src: string;
+    alt: string;
+    caption?: string;
+    width?: number;
+    height?: number;
+    zoomable?: boolean;
+}
+declare const Image: import("svelte").Component<Props, {}, "">;
+type Image = ReturnType<typeof Image>;
+export default Image;

package/{src/lib → dist}/components/Navbar.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import { theme } from '$lib/stores/theme';
-  import { sidebarOpen } from '$lib/stores/nav';
-  import { version } from '$lib/stores/version';
-  import { i18n } from '$lib/stores/i18n';
+  import { theme } from '../stores/theme';
+  import { sidebarOpen } from '../stores/nav';
+  import { version } from '../stores/version';
+  import { i18n } from '../stores/i18n';
   import { onMount } from 'svelte';
 
   let { 

package/dist/components/Navbar.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    title?: string;
+    logo?: string | null;
+    onLogoClick?: () => void;
+    onVersionChange?: (version: string) => void;
+    onLanguageChange?: (language: string) => void;
+};
+declare const Navbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type Navbar = ReturnType<typeof Navbar>;
+export default Navbar;

package/{src/lib → dist}/components/Search.svelte

@@ -8,8 +8,8 @@
 		initPagefind,
 		updateSearch,
 		clearSearch
-	} from '$lib/stores/search';
-	import { highlightSearchTerms, extractExcerpt } from '$lib/utils/highlight';
+	} from '../stores/search';
+	import { highlightSearchTerms, extractExcerpt } from '../utils/highlight';
 
 	interface Props {
 		showResults?: boolean;

package/dist/components/Search.svelte.d.ts

@@ -0,0 +1,6 @@
+interface Props {
+    showResults?: boolean;
+}
+declare const Search: import("svelte").Component<Props, {}, "">;
+type Search = ReturnType<typeof Search>;
+export default Search;

package/{template-starter/src/lib → dist}/components/Sidebar.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { NavSection, NavItem } from '$lib/stores/nav';
-  import { sidebarOpen } from '$lib/stores/nav';
+  import type { NavSection, NavItem } from '../stores/nav';
+  import { sidebarOpen } from '../stores/nav';
 
   let {
     sections = [] as NavSection[],