@3sln/deck 0.0.5 → 0.0.7

package/README.md

@@ -1,18 +1,18 @@
-# @3sln/deck
-
-A Vite plugin for building scalable, zero-config, Markdown-based component playgrounds and documentation sites.
+# Deck
 
 > [!WARNING]
 > This is a work-in-progress project.
 
-## Features
+Deck is a Vite-based tool for creating scalable, zero-config, Markdown-based component playgrounds and documentation sites.
+
+It uses a client-side database to index your documentation, enabling a fast initial load and powerful full-text search, even for very large projects.
+
+[deck.webm](https://github.com/user-attachments/assets/cc127ba6-202c-47f0-a982-560e05f7574d)
+
+## Documentation & Live Examples
 
-- **Scalable Backend:** Uses **IndexedDB** to index and store all documentation content on the client-side. This allows `deck` to handle hundreds or thousands of documents without a slow initial load time.
-- **Vite Plugin:** A simple Vite plugin provides a zero-config development server with hot-reloading.
-- **Static Site Generation:** A `deck-build` command generates a fully static, production-ready site from your project files.
-- **`<deck-demo>`:** A powerful custom element for embedding live, stateful, and hot-reloading component demos directly in your documentation.
-- **Reactive UI:** A modern, responsive UI with a powerful search feature and a split-screen layout for easy viewing.
-- **Configurable:** The project title and import maps for dynamic demos can be configured in your project's `package.json`.
+For a complete guide, API reference, and to see Deck in action, you can check out Deck's own
+[card Deck here](https://deck.3sln.com).
 
 ## Quick Start
 
@@ -24,6 +24,7 @@ A Vite plugin for building scalable, zero-config, Markdown-based component playg
 2.  **Configure:** In your `package.json`, add a build script and your project's configuration:
     ```json
     {
+      ...
       "scripts": {
         "dev": "vite",
         "build": "deck-build"
@@ -31,6 +32,7 @@ A Vite plugin for building scalable, zero-config, Markdown-based component playg
       "@3sln/deck": {
         "title": "My Awesome Docs"
       }
+      ...
     }
     ```
 

package/bin/build.js

@@ -4,14 +4,13 @@ import {build as viteBuild} from 'vite';
 import fs from 'fs-extra';
 import path from 'path';
 import {createRequire} from 'module';
-import { sha256, loadDeckConfig, getProjectFiles, getHtmlTemplate } from '../src/config.js';
+import { sha256, loadDeckConfig, getProjectFiles, getCardFiles, getHtmlTemplate } from '../src/config.js';
 
 const require = createRequire(import.meta.url);
 
 // --- Path Resolution ---
 const userRoot = process.cwd();
-const outDir = path.resolve(userRoot, 'out');
-const assetsDir = path.resolve(outDir, 'assets');
+// outDir is now resolved inside build()
 const deckPluginPath = require.resolve('@3sln/deck/vite-plugin');
 const deckRoot = path.dirname(deckPluginPath);
 
@@ -21,7 +20,10 @@ async function build() {
     console.log('Starting Deck build...');
 
     const config = await loadDeckConfig(userRoot);
-    const buildConfig = config.build;
+    const buildConfig = config.build || {};
+
+    const outDir = path.resolve(userRoot, buildConfig.outDir || 'out');
+    const assetsDir = path.resolve(outDir, 'assets');
 
     // Clean output directory
     await fs.emptyDir(outDir);
@@ -72,7 +74,7 @@ async function build() {
     }
 
     // Find card paths and hash content for the index
-    const cardFiles = filesToCopy.filter(file => file.endsWith('.md') || file.endsWith('.html'));
+    const cardFiles = getCardFiles(userRoot, buildConfig);
     const initialCardsData = await Promise.all(cardFiles.map(async (file) => {
         const content = await fs.readFile(path.resolve(outDir, file), 'utf-8');
         const hash = await sha256(content);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/deck",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A Vite plugin for building scalable, zero-config, Markdown-based component playgrounds and documentation sites.",
   "type": "module",
   "author": "Ray Stubbs",

package/src/config.js

@@ -49,6 +49,15 @@ export function getProjectFiles(root, config) {
     });
 }
 
+export function getCardFiles(root, config) {
+    return globSync(config.include, {
+        cwd: root,
+        ignore: config.exclude,
+        nodir: true,
+        dot: true,
+    }).filter(s => s.endsWith('.md') || s.endsWith('.html'));
+}
+
 export function getHtmlTemplate({ title, importMap, initialCardsData, pinnedCardPaths, entryFile, cssFiles = [] }) {
   return `
         <!doctype html>

package/src/deck-demo.js

@@ -856,4 +856,4 @@ class DeckDemo extends HTMLElement {
   }
 }
 
-customElements.define('deck-demo', DeckDemo);
+customElements.define('deck-demo', DeckDemo);

package/vite-plugin.js

@@ -1,6 +1,6 @@
 import fs from 'fs-extra';
 import path from 'path';
-import { sha256, loadDeckConfig, getProjectFiles, getHtmlTemplate } from './src/config.js';
+import { sha256, loadDeckConfig, getProjectFiles, getCardFiles, getHtmlTemplate } from './src/config.js';
 
 export default function deckPlugin() {
   let resolvedConfig;
@@ -122,7 +122,7 @@ export default function deckPlugin() {
 
       server.middlewares.use(async (req, res, next) => {
         if (req.url.endsWith('/')) {
-          const cardPaths = getProjectFiles(resolvedConfig.root, devConfig).map(p => `/${p}`);
+          const cardPaths = getCardFiles(resolvedConfig.root, devConfig).map(p => `/${p}`);
           const initialCardsData = await Promise.all(cardPaths.map(async (p) => {
             const content = await fs.readFile(path.join(resolvedConfig.root, p), 'utf-8');
             const hash = await sha256(content);