htmlboard 0.2.0 → 0.3.0

package/src/server.js

@@ -3,6 +3,7 @@ import net from 'node:net';
 import fs from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { loadDesignsManifest } from './designs.js';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
@@ -31,210 +32,12 @@ const MIME_TYPES = {
   '.mp4': 'video/mp4'
 };
 
-const IGNORED_DIRS = new Set([
-  'node_modules',
-  '.git',
-  '.github',
-  'dist',
-  'build',
-  '.vscode',
-  '.idea',
-  '.gemini',
-  '.agents'
-]);
-
-/**
- * Extract <title> content from HTML text if available
- */
-function extractTitleFromHtml(content, fallbackName) {
-  const match = content.match(/<title[^>]*>([^<]+)<\/title>/i);
-  if (match && match[1]?.trim()) {
-    return match[1].trim();
-  }
-  return fallbackName
-    .replace(/\.html$/i, '')
-    .replace(/[-_]/g, ' ')
-    .replace(/\b\w/g, (c) => c.toUpperCase());
-}
-
-/** Default frame size for each category */
-const CATEGORY_SIZES = {
-  mobile: [390, 844],
-  tablet: [768, 1024],
-  components: [720, 600],
-  desktop: [1280, 800],
-  responsive: [1200, 800]
-};
-
-/**
- * Guess an artboard's category from words in its path, then from its width
- */
-export function inferCategory(file, width) {
-  const lower = file.toLowerCase();
-  if (/mobile|phone|iphone/.test(lower)) return 'mobile';
-  if (/tablet|ipad/.test(lower)) return 'tablet';
-  if (/component|\bui\b|atomic/.test(lower)) return 'components';
-  if (/desktop|laptop|screen/.test(lower)) return 'desktop';
-  if (width) {
-    if (width <= 480) return 'mobile';
-    if (width <= 1024) return 'tablet';
-    return 'desktop';
-  }
-  return 'responsive';
-}
-
-function slugify(text) {
-  return String(text).toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-    .replace(/[^a-z0-9]+/g, '-').replace(/^-+|-+$/g, '');
-}
-
 /** True when target is base itself or inside it */
 function isInside(base, target) {
   const rel = path.relative(base, target);
   return rel === '' || (!rel.startsWith('..') && !path.isAbsolute(rel));
 }
 
-/**
- * Scan target directory recursively for HTML files to auto-discover
- */
-export function discoverDesigns(baseDir) {
-  const artboards = [];
-
-  function scan(currentDir, relativePath = '') {
-    let entries;
-    try {
-      entries = fs.readdirSync(currentDir, { withFileTypes: true });
-    } catch {
-      return;
-    }
-
-    for (const entry of entries) {
-      if (entry.name.startsWith('.') && entry.name !== '.') continue;
-      if (IGNORED_DIRS.has(entry.name)) continue;
-
-      const fullPath = path.join(currentDir, entry.name);
-      const relPath = relativePath ? path.join(relativePath, entry.name) : entry.name;
-
-      if (entry.isDirectory()) {
-        scan(fullPath, relPath);
-      } else if (entry.isFile() && entry.name.toLowerCase().endsWith('.html')) {
-        let title = '';
-        let fileContent = '';
-        try {
-          fileContent = fs.readFileSync(fullPath, 'utf8');
-          title = extractTitleFromHtml(fileContent, entry.name);
-        } catch {
-          title = entry.name;
-        }
-
-        const category = inferCategory(relPath);
-        const [width, height] = CATEGORY_SIZES[category];
-
-        const sectionName = relativePath ? relativePath.replace(/[\\/]/g, ' / ') : 'Root Designs';
-
-        artboards.push({
-          id: slugify(relPath.replace(/\.html$/i, '')),
-          title,
-          file: relPath.replace(/\\/g, '/'),
-          category,
-          width,
-          height,
-          sectionName,
-          tags: [category]
-        });
-      }
-    }
-  }
-
-  scan(baseDir);
-
-  // Group into sections
-  const sectionsMap = new Map();
-  for (const board of artboards) {
-    const sName = board.sectionName;
-    if (!sectionsMap.has(sName)) {
-      sectionsMap.set(sName, {
-        id: sName.toLowerCase().replace(/[^a-z0-9]+/g, '-'),
-        name: sName,
-        description: `HTML artboards discovered in ${sName}`,
-        artboards: []
-      });
-    }
-    const { sectionName, ...rest } = board;
-    sectionsMap.get(sName).artboards.push(rest);
-  }
-
-  const projectName = path.basename(path.resolve(baseDir)) || 'Design Explorer';
-
-  return {
-    title: projectName,
-    description: 'Auto-discovered HTML artboards in workspace',
-    autoDiscovered: true,
-    sections: Array.from(sectionsMap.values())
-  };
-}
-
-/**
- * Fill in what a manifest may leave out, so the explorer always gets
- * `sections[].{id, name, artboards[].{id, title, file, category}}`.
- * Accepts the short form too: `sections[].title` and `sections[].designs[]`
- * with only `{ file, title, width, height }`.
- * `prefix` is prepended to every file (the designs folder relative to the served root).
- */
-export function normalizeManifest(manifest, prefix = '') {
-  const usedIds = new Set();
-  const uniqueId = (wanted) => {
-    let id = wanted || 'artboard';
-    for (let n = 2; usedIds.has(id); n++) id = `${wanted}-${n}`;
-    usedIds.add(id);
-    return id;
-  };
-
-  const sections = (Array.isArray(manifest.sections) ? manifest.sections : []).map((section, i) => {
-    const name = section.name ?? section.title ?? `Section ${i + 1}`;
-    const boards = section.artboards ?? section.designs ?? [];
-    return {
-      ...section,
-      id: section.id ?? (slugify(name) || `section-${i + 1}`),
-      name,
-      artboards: boards.filter((board) => board && board.file).map((board) => {
-        const file = prefix ? path.posix.join(prefix, board.file) : board.file;
-        return {
-          ...board,
-          id: uniqueId(board.id ?? slugify(board.file.replace(/\.html?(?=$|\?)/i, ''))),
-          title: board.title ?? board.file,
-          file,
-          category: board.category ?? inferCategory(board.file.split('?')[0], board.width)
-        };
-      })
-    };
-  });
-
-  return { ...manifest, sections };
-}
-
-/**
- * Load designs configuration from designs.json or auto-discover.
- * With `rootDir` (a folder containing baseDir), artboard paths are given relative to it.
- */
-export function loadDesignsManifest(baseDir, rootDir = baseDir) {
-  const prefix = path.relative(rootDir, baseDir).split(path.sep).join('/');
-  const configPath = path.join(baseDir, 'designs.json');
-  if (fs.existsSync(configPath)) {
-    try {
-      const raw = fs.readFileSync(configPath, 'utf8');
-      const data = JSON.parse(raw);
-      return {
-        ...normalizeManifest(data, prefix),
-        autoDiscovered: false
-      };
-    } catch (err) {
-      console.warn(`[htmlboard] Failed parsing designs.json: ${err.message}. Falling back to auto-discovery.`);
-    }
-  }
-  return normalizeManifest(discoverDesigns(baseDir), prefix);
-}
-
 /** Folders the watcher leaves alone: hidden ones (.git, .vscode, …) and dependencies */
 const skipWatching = (name) => name.startsWith('.') || name === 'node_modules';
 

package/src/templates/{artboards/desktop.html → 01-screens/01-desktop.html}

@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Desktop Dashboard</title>
+  <meta name="description" content="Main analytics dashboard with sidebar, metric cards, and charts">
+  <meta name="htmlboard" content="width=1280, height=820">
   <style>
     * {
       box-sizing: border-box;

package/src/templates/{artboards/mobile.html → 01-screens/02-mobile.html}

@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mobile Feed Screen</title>
+  <meta name="description" content="Smartphone screen with balance card, quick actions, and transaction feed">
+  <meta name="htmlboard" content="width=390, height=844">
   <style>
     * {
       box-sizing: border-box;

package/src/templates/{artboards/components.html → 02-components/01-ui-kit.html}

@@ -4,6 +4,8 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Component Library Preview</title>
+  <meta name="description" content="Buttons, inputs, badges, cards, and interactive elements">
+  <meta name="htmlboard" content="width=780, height=720, category=components">
   <style>
     * {
       box-sizing: border-box;

package/src/templates/designs.json

@@ -1,50 +0,0 @@
-{
-  "title": "Design Exploration Canvas",
-  "description": "Infinite canvas and artboard explorer for HTML designs and components",
-  "sections": [
-    {
-      "id": "screens",
-      "name": "Screen Layouts",
-      "description": "Full page layouts across mobile and desktop viewports",
-      "artboards": [
-        {
-          "id": "desktop-dashboard",
-          "title": "Desktop Dashboard",
-          "description": "Main analytics dashboard with sidebar, metric cards, and charts",
-          "file": "artboards/desktop.html",
-          "width": 1280,
-          "height": 820,
-          "category": "desktop",
-          "tags": ["desktop", "dashboard", "analytics", "dark-mode"]
-        },
-        {
-          "id": "mobile-app",
-          "title": "Mobile App Feed",
-          "description": "Smartphone screen with balance card, quick actions, and transaction feed",
-          "file": "artboards/mobile.html",
-          "width": 390,
-          "height": 844,
-          "category": "mobile",
-          "tags": ["mobile", "ios", "feed", "finance"]
-        }
-      ]
-    },
-    {
-      "id": "components",
-      "name": "Component Library",
-      "description": "Reusable atomic UI blocks and design system primitives",
-      "artboards": [
-        {
-          "id": "ui-primitives",
-          "title": "UI Component Kit",
-          "description": "Buttons, inputs, badges, cards, and interactive elements",
-          "file": "artboards/components.html",
-          "width": 780,
-          "height": 720,
-          "category": "components",
-          "tags": ["design-system", "buttons", "badges", "inputs"]
-        }
-      ]
-    }
-  ]
-}