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

package/README.md

@@ -1,42 +1,174 @@
-# sv
+# @alliance-droid/svelte-docs-system
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+Drop-in documentation system for SvelteKit. Just add markdown files.
 
-## Creating a project
+## Quick Start
 
-If you're seeing this, you've probably already done this step. Congrats!
+### 1. Install
 
-```sh
-# create a new project
-npx sv create my-app
+```bash
+npm install @alliance-droid/svelte-docs-system
 ```
 
-To recreate this project with the same configuration:
+### 2. Add the Vite plugin
 
-```sh
-# recreate this project
-npx sv create --template minimal --types ts --no-install svelte-docs-system
+```ts
+// vite.config.ts
+import { sveltekit } from '@sveltejs/kit/vite';
+import { svelteDocsPlugin } from '@alliance-droid/svelte-docs-system/plugin';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  plugins: [
+    svelteDocsPlugin({
+      docsPath: './docs',           // Where your markdown files live
+      route: '/documentation'       // URL route for docs
+    }),
+    sveltekit()
+  ]
+});
+```
+
+### 3. Create the route
+
+```svelte
+<!-- src/routes/documentation/[...slug]/+page.svelte -->
+<script lang="ts">
+  import { Documentation } from '@alliance-droid/svelte-docs-system';
+  import { docsStructure } from 'virtual:svelte-docs';
+  import { page } from '$app/stores';
+  
+  // Get slug from URL params
+  const slug = $derived($page.params.slug || '');
+</script>
+
+<Documentation 
+  structure={docsStructure} 
+  currentSlug={slug}
+  baseRoute="/documentation"
+/>
+```
+
+### 4. Add markdown files
+
+Create a `docs/` folder in your project root:
+
+```
+docs/
+├── getting-started.md
+├── installation.md
+├── guides/
+│   ├── basics.md
+│   └── advanced.md
+└── api/
+    ├── overview.md
+    └── reference.md
+```
+
+### 5. Done!
+
+Visit `/documentation` to see your docs. The sidebar auto-generates from your folder structure.
+
+---
+
+## Markdown Frontmatter
+
+Add metadata to your markdown files:
+
+```markdown
+---
+title: Getting Started
+description: Learn how to get started
+order: 1
+---
+
+# Getting Started
+
+Your content here...
 ```
 
-## Developing
+- `title` - Page title (falls back to first H1 or filename)
+- `description` - Meta description
+- `order` - Sort order in sidebar (lower = higher)
+
+---
+
+## Customization
+
+### Using your project's layout
 
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+The `Documentation` component is just a regular Svelte component. It inherits your project's `+layout.svelte` automatically.
 
-```sh
-npm run dev
+### Custom styling
 
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
+Override CSS variables:
+
+```css
+:root {
+  --color-surface: #ffffff;
+  --color-surface-hover: #f3f4f6;
+  --color-foreground: #111827;
+  --color-foreground-secondary: #374151;
+  --color-foreground-tertiary: #6b7280;
+  --color-border: #e5e7eb;
+  --color-primary: #0ea5e9;
+}
 ```
 
-## Building
+### Static file serving
+
+Make sure your `docs/` folder is served as static files. Add to `svelte.config.js`:
 
-To create a production version of your app:
+```js
+import adapter from '@sveltejs/adapter-static';
 
-```sh
-npm run build
+export default {
+  kit: {
+    adapter: adapter({
+      fallback: 'index.html'
+    }),
+    prerender: {
+      handleMissingId: 'warn'
+    }
+  }
+};
 ```
 
-You can preview the production build with `npm run preview`.
+Or configure Vite to serve the docs folder:
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  server: {
+    fs: {
+      allow: ['docs']
+    }
+  }
+});
+```
+
+---
+
+## API
+
+### `Documentation` component
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `structure` | `DocFolder` | required | Docs structure from `virtual:svelte-docs` |
+| `currentSlug` | `string` | `''` | Current page slug |
+| `baseRoute` | `string` | `'/documentation'` | Base URL route |
+| `class` | `string` | `''` | Additional CSS classes |
+
+### `svelteDocsPlugin` options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `docsPath` | `string` | `'./docs'` | Path to docs folder |
+| `route` | `string` | `'/documentation'` | URL route |
+
+---
+
+## License
 
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+MIT

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

@@ -0,0 +1,21 @@
+/**
+ * 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;
+}
+declare const APITable: import("svelte").Component<Props, {}, "">;
+type APITable = ReturnType<typeof APITable>;
+export default APITable;

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

@@ -0,0 +1,14 @@
+/**
+ * Breadcrumbs navigation component
+ * Shows the current page path for easy navigation
+ */
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+interface Props {
+    items: BreadcrumbItem[];
+}
+declare const Breadcrumbs: import("svelte").Component<Props, {}, "">;
+type Breadcrumbs = ReturnType<typeof Breadcrumbs>;
+export default Breadcrumbs;

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

@@ -0,0 +1,15 @@
+/**
+ * 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;
+}
+type $$ComponentProps = Props & {
+    children?: any;
+};
+declare const Callout: import("svelte").Component<$$ComponentProps, {}, "">;
+type Callout = ReturnType<typeof Callout>;
+export default Callout;

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

@@ -0,0 +1,12 @@
+/**
+ * CodeBlock component with copy button
+ * Shows code with optional language label
+ */
+interface Props {
+    code: string;
+    language?: string;
+    filename?: string;
+}
+declare const CodeBlock: import("svelte").Component<Props, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

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

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { theme } from '$lib/stores/theme';
+  import { theme } from '../stores/theme';
   import Navbar from './Navbar.svelte';
   import Sidebar from './Sidebar.svelte';
   import Footer from './Footer.svelte';
-  import type { NavSection } from '$lib/stores/nav';
+  import type { NavSection } from '../stores/nav';
 
   let {
     title = 'Documentation',
@@ -12,6 +12,9 @@
     sections = [] as NavSection[],
     copyright = '© 2026 Documentation System',
     footerLinks = [] as { label: string; href: string }[],
+    showNavbar = true,
+    showSidebar = true,
+    showFooter = true,
     children,
   }: {
     title?: string;
@@ -19,6 +22,9 @@
     sections?: NavSection[];
     copyright?: string;
     footerLinks?: { label: string; href: string }[];
+    showNavbar?: boolean;
+    showSidebar?: boolean;
+    showFooter?: boolean;
     children: any;
   } = $props();
 
@@ -62,16 +68,20 @@
 
 <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} />
+  {#if showNavbar}
+    <Navbar {title} {logo} onLogoClick={handleLogoClick} />
+  {/if}
 
   <!-- Main Content Area -->
   <div class="flex flex-1 overflow-hidden">
     <!-- Sidebar -->
-    <Sidebar {sections} {currentPath} onNavigate={handleNavigate} />
+    {#if showSidebar}
+      <Sidebar {sections} {currentPath} onNavigate={handleNavigate} />
+    {/if}
 
     <!-- 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">
+      <div class="doc-container max-w-4xl mx-auto px-4 sm:px-6 py-8 {!showSidebar ? 'max-w-full' : ''}">
         <article class="doc-content">
           {@render children()}
         </article>
@@ -80,5 +90,7 @@
   </div>
 
   <!-- Footer -->
-  <Footer {copyright} links={footerLinks} />
+  {#if showFooter}
+    <Footer {copyright} links={footerLinks} />
+  {/if}
 </div>

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

@@ -0,0 +1,18 @@
+import type { NavSection } from '../stores/nav';
+type $$ComponentProps = {
+    title?: string;
+    logo?: string | null;
+    sections?: NavSection[];
+    copyright?: string;
+    footerLinks?: {
+        label: string;
+        href: string;
+    }[];
+    showNavbar?: boolean;
+    showSidebar?: boolean;
+    showFooter?: boolean;
+    children: any;
+};
+declare const DocLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocLayout = ReturnType<typeof DocLayout>;
+export default DocLayout;

package/dist/components/DocsPage.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import { page } from '$app/stores';
+  import Sidebar from './Sidebar.svelte';
+  import type { NavSection } from '../stores/nav';
+
+  let {
+    sections = [] as NavSection[],
+    children,
+  }: {
+    sections?: NavSection[];
+    children: any;
+  } = $props();
+
+  let currentPath = $state('/');
+
+  $effect(() => {
+    currentPath = $page.url.pathname;
+  });
+
+  async function handleNavigate(path: string) {
+    await goto(path);
+  }
+</script>
+
+<!-- Sidebar + Content Area (no outer layout) -->
+<div class="flex flex-1 overflow-hidden">
+  <!-- Sidebar Navigation -->
+  <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>

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

@@ -0,0 +1,8 @@
+import type { NavSection } from '../stores/nav';
+type $$ComponentProps = {
+    sections?: NavSection[];
+    children: any;
+};
+declare const DocsPage: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsPage = ReturnType<typeof DocsPage>;
+export default DocsPage;