@kenjura/ursa 0.76.0 → 0.77.0

package/meta/{default-template.html → templates/default-template/index.html}

@@ -16,6 +16,12 @@
                 <button class="widget-button" data-widget="recent-activity" data-widget-side="left" aria-label="Recent Activity" title="Recent Activity">
                     <span class="widget-icon">🕒</span>
                 </button>
+                <button class="widget-button" data-widget="suggested" data-widget-side="left" aria-label="Suggested Content" title="Suggested Content">
+                    <span class="widget-icon">⭐</span>
+                </button>
+            </div>
+            <div id="ursa-update-indicator" class="ursa-update-indicator" style="display:none;" title="Updating...">
+                <div class="ursa-spinner"></div>
             </div>
         </div>
 
@@ -55,6 +61,15 @@
                 <!-- Populated by JavaScript -->
             </div>
         </div>
+        <div id="widget-content-suggested" class="widget-content" data-widget="suggested">
+            <div class="widget-header">
+                <span class="widget-header-title">Suggested</span>
+                <button class="widget-close-btn" aria-label="Close">✕</button>
+            </div>
+            <div class="suggested-content-list">
+                <!-- Populated by JavaScript -->
+            </div>
+        </div>
     </div>
 
     <!-- Widget dropdown panel for RIGHT-side widgets -->

package/meta/{menu.js → templates/default-template/menu.js}

@@ -11,7 +11,7 @@ document.addEventListener('DOMContentLoaded', () => {
     const navMain = document.querySelector('nav#nav-main');
     const navMainTop = document.querySelector('nav#nav-main-top');
     const menuPosition = document.body.dataset.menuPosition || 'top';
-    
+
     // If menu position is top (default), handle differently
     if (menuPosition === 'top') {
         initTopMenu();

package/meta/templates/default-template/sectionify.js

@@ -0,0 +1,46 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const article = document.querySelector('article#main-content');
+    if (!article) return;
+
+    const children = Array.from(article.children);
+    let sections = [];
+    let currentSection = document.createElement('section');
+    currentSection.classList.add('sectionOuter');
+
+    for (let i = 0; i < children.length; i++) {
+        const el = children[i];
+        // Skip breadcrumb nav — it stays outside sections
+        if (el.classList && el.classList.contains('breadcrumbs')) continue;
+        if (el.tagName === 'H1' && currentSection.childNodes.length > 0) {
+            sections.push(currentSection);
+            currentSection = document.createElement('section');
+            currentSection.classList.add('sectionOuter');
+        }
+        currentSection.appendChild(el);
+    }
+    if (currentSection.childNodes.length > 0) {
+        sections.push(currentSection);
+    }
+
+    // Preserve breadcrumb nav before clearing
+    const breadcrumbs = article.querySelector('.breadcrumbs');
+
+    // Remove all existing children
+    while (article.firstChild) {
+        article.removeChild(article.firstChild);
+    }
+
+    // Re-insert breadcrumbs at the top, outside any section
+    if (breadcrumbs) {
+        article.appendChild(breadcrumbs);
+    }
+
+    // Append new sections
+    sections.forEach(section => article.appendChild(section));
+    
+
+    // Optional: Add section numbers or other decorations
+    Array.from(article.querySelectorAll('section.sectionOuter')).forEach((section, index) => {
+        section.style.setProperty('--section-index', index + 1);
+    });
+});

package/meta/{widgets.js → templates/default-template/widgets.js}

@@ -111,6 +111,10 @@ class WidgetManager {
     
     // Initialize recent activity widget
     this.initRecentActivityWidget();
+    
+    // Track current page view and initialize suggested content widget
+    this.trackPageView();
+    this.initSuggestedWidget();
 
     // Restore saved widget states from localStorage
     this.restoreState();
@@ -567,6 +571,128 @@ class WidgetManager {
     if (months < 12) return `${months}mo ago`;
     return `${years}y ago`;
   }
+
+  /**
+   * Track current page view in localStorage.
+   * Stores a map of URL → { count, lastVisit, title }
+   */
+  trackPageView() {
+    const url = window.location.pathname;
+    // Skip tracking for index/home pages to keep suggestions more focused
+    if (url === '/' || url === '/index.html') return;
+    
+    const STORAGE_KEY = 'ursa-page-views';
+    const MAX_TRACKED_PAGES = 100; // Limit storage size
+    
+    try {
+      let pageViews = {};
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (stored) {
+        pageViews = JSON.parse(stored);
+      }
+      
+      // Get page title from the document
+      const title = document.title || url;
+      
+      // Update or create entry for this page
+      if (pageViews[url]) {
+        pageViews[url].count += 1;
+        pageViews[url].lastVisit = Date.now();
+        pageViews[url].title = title;
+      } else {
+        pageViews[url] = {
+          count: 1,
+          lastVisit: Date.now(),
+          title: title
+        };
+      }
+      
+      // Prune oldest entries if we exceed the limit
+      const entries = Object.entries(pageViews);
+      if (entries.length > MAX_TRACKED_PAGES) {
+        // Sort by lastVisit and keep only the most recent
+        entries.sort((a, b) => b[1].lastVisit - a[1].lastVisit);
+        pageViews = Object.fromEntries(entries.slice(0, MAX_TRACKED_PAGES));
+      }
+      
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(pageViews));
+    } catch (e) {
+      // localStorage not available or quota exceeded
+    }
+  }
+
+  /**
+   * Initialize the Suggested Content widget.
+   * Shows frequently viewed pages based on localStorage tracking.
+   */
+  initSuggestedWidget() {
+    const container = document.querySelector('.suggested-content-list');
+    if (!container) return;
+
+    const STORAGE_KEY = 'ursa-page-views';
+    const MAX_SUGGESTIONS = 10;
+    const currentUrl = window.location.pathname;
+
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      if (!stored) {
+        container.innerHTML = '<div class="suggested-empty">Visit more pages to see suggestions</div>';
+        return;
+      }
+
+      const pageViews = JSON.parse(stored);
+      const entries = Object.entries(pageViews);
+      
+      if (entries.length === 0) {
+        container.innerHTML = '<div class="suggested-empty">Visit more pages to see suggestions</div>';
+        return;
+      }
+
+      // Filter out current page and sort by view count (descending)
+      const sorted = entries
+        .filter(([url]) => url !== currentUrl)
+        .sort((a, b) => {
+          // Primary sort: view count (descending)
+          const countDiff = b[1].count - a[1].count;
+          if (countDiff !== 0) return countDiff;
+          // Secondary sort: last visit (descending)
+          return b[1].lastVisit - a[1].lastVisit;
+        })
+        .slice(0, MAX_SUGGESTIONS);
+
+      if (sorted.length === 0) {
+        container.innerHTML = '<div class="suggested-empty">Visit more pages to see suggestions</div>';
+        return;
+      }
+
+      container.innerHTML = '';
+      const ul = document.createElement('ul');
+      ul.className = 'suggested-items';
+
+      for (const [url, data] of sorted) {
+        const li = document.createElement('li');
+        li.className = 'suggested-item';
+        
+        const a = document.createElement('a');
+        a.href = url;
+        a.className = 'suggested-link';
+        a.textContent = data.title || url;
+        
+        const meta = document.createElement('span');
+        meta.className = 'suggested-meta';
+        meta.textContent = `${data.count} view${data.count !== 1 ? 's' : ''}`;
+        meta.title = `Last visited: ${new Date(data.lastVisit).toLocaleString()}`;
+        
+        li.appendChild(a);
+        li.appendChild(meta);
+        ul.appendChild(li);
+      }
+
+      container.appendChild(ul);
+    } catch (e) {
+      container.innerHTML = '<div class="suggested-empty">Unable to load suggestions</div>';
+    }
+  }
 }
 
 // Initialize widgets when DOM is ready

package/package.json

@@ -2,7 +2,7 @@
   "name": "@kenjura/ursa",
   "author": "Andrew London <andrew@kenjura.com>",
   "type": "module",
-  "version": "0.76.0",
+  "version": "0.77.0",
   "description": "static site generator from MD/wikitext/YML",
   "main": "lib/index.js",
   "bin": {

package/src/dev.js

@@ -33,9 +33,12 @@ import { extractImageReferences } from "./helper/imageExtractor.js";
 import { recurse } from "./helper/recursive-readdir.js";
 import { isFolderHidden, clearConfigCache } from "./helper/folderConfig.js";
 import { extractSections } from "./helper/sectionExtractor.js";
-import { getTemplates, getMenu, findAllCustomMenus, getCustomMenuForFile, getTransformedMetadata, getFooter, toTitleCase, addTrailingSlash, generateAutoIndexHtmlFromSource } from "./helper/build/index.js";
+import { getTemplates, getMenu, findAllCustomMenus, getCustomMenuForFile, getTransformedMetadata, getFooter, toTitleCase, addTrailingSlash, generateAutoIndexHtmlFromSource, copyMetaAssets } from "./helper/build/index.js";
 import { findCustomMenu, extractMenuFrontmatter, parseCustomMenu, combineAutoAndManualMenu } from "./helper/customMenu.js";
 import { getAndIncrementBuildId } from "./helper/ursaConfig.js";
+import { resolvePort } from "./helper/portUtils.js";
+import { findAllStyleCss } from "./helper/findStyleCss.js";
+import { bundleMetaTemplateAssets, generateSeparateCssTags, generateSeparateJsTags, clearMetaBundleCache } from "./helper/assetBundler.js";
 
 // Dev mode state
 const devState = {
@@ -266,6 +269,23 @@ function findNearestMenu(dirPath) {
   return null;
 }
 
+/**
+ * Find all style.css files from docroot to dirPath (all levels)
+ */
+async function findAllStyles(dirPath) {
+  const { stylePathMap, source } = devState;
+  
+  // Use a separate cache key to avoid collision with findNearestStyle
+  const cacheKey = `all:${dirPath}`;
+  if (stylePathMap.has(cacheKey)) {
+    return stylePathMap.get(cacheKey);
+  }
+  
+  const stylePaths = await findAllStyleCss(dirPath, source);
+  stylePathMap.set(cacheKey, stylePaths);
+  return stylePaths;
+}
+
 /**
  * Find the nearest style.css
  */
@@ -440,35 +460,40 @@ async function wrapInTemplate(body, title, fileMeta, urlPath, sourcePath) {
     throw new Error(`Template not found: ${requestedTemplateName || 'default-template'}`);
   }
   
-  // Find nearest style.css
+  // Find all style.css files from docroot to current dir and serve as separate tags
+  // (Serve/dev mode: separate tags per level for individual invalidation)
   let styleLink = "";
   try {
     const styleDir = sourcePath ? dirname(sourcePath) : source;
-    const cssPath = await findNearestStyle(styleDir);
-    if (cssPath) {
-      const cssUrlPath = '/' + cssPath.replace(source, '');
-      styleLink = `<link rel="stylesheet" href="${cssUrlPath}" />`;
-      
-      // Copy CSS file to output
-      const cssOutputPath = cssPath.replace(source, output);
-      const cssContent = await readFile(cssPath, 'utf8');
-      await outputFile(cssOutputPath, cssContent);
+    const cssPaths = await findAllStyles(styleDir);
+    if (cssPaths.length > 0) {
+      // Copy all CSS files to output
+      for (const cssPath of cssPaths) {
+        const cssOutputPath = cssPath.replace(source, output);
+        const cssContent = await readFile(cssPath, 'utf8');
+        await outputFile(cssOutputPath, cssContent);
+      }
+      styleLink = generateSeparateCssTags(cssPaths, source);
     }
   } catch (e) {
     // Ignore CSS errors
   }
   
-  // Find all script.js files from docroot to current dir and inline their contents
+  // Find all script.js files from docroot to current dir and serve as separate external tags
+  // (Serve/dev mode: separate tags per level for individual invalidation)
   let customScript = "";
   try {
     const scriptDir = sourcePath ? dirname(sourcePath) : source;
     const scriptPaths = await findAllScripts(scriptDir);
-    const scriptTags = [];
-    for (const scriptPath of scriptPaths) {
-      const scriptContent = await readFile(scriptPath, 'utf8');
-      scriptTags.push(`<script>\n${scriptContent}\n</script>`);
+    if (scriptPaths.length > 0) {
+      // Copy all script files to output so they can be served
+      for (const scriptPath of scriptPaths) {
+        const scriptOutputPath = scriptPath.replace(source, output);
+        const scriptContent = await readFile(scriptPath, 'utf8');
+        await outputFile(scriptOutputPath, scriptContent);
+      }
+      customScript = generateSeparateJsTags(scriptPaths, source);
     }
-    customScript = scriptTags.join('\n');
   } catch (e) {
     // Ignore script errors
   }
@@ -617,9 +642,10 @@ async function buildBackgroundCaches() {
       await findNearestStyle(dir);
     }
     
-    // 7. Pre-load templates
+    // 7. Pre-load templates and re-bundle meta assets
     console.log('   📄 Pre-loading templates...');
-    devState.templates = await getTemplates(meta);
+    const rawTemplatesBg = await getTemplates(meta);
+    devState.templates = await bundleMetaTemplateAssets(rawTemplatesBg, meta, resolve(output, 'public'), { minify: true, sourcemap: false });
     
     // 8. Build footer
     console.log('   📝 Building footer...');
@@ -724,15 +750,20 @@ export async function dev({
   console.log(`🎨 Meta: ${metaDir}`);
   console.log(`📤 Output: ${outputDir}`);
   console.log('━'.repeat(50));
-  
+
+  // Resolve port (prompt user if occupied)
+  port = await resolvePort(port);
+
   // Create output directory and copy meta files
   await mkdir(outputDir, { recursive: true });
   const publicDir = join(outputDir, 'public');
   await mkdir(publicDir, { recursive: true });
-  await copyDir(metaDir, publicDir);
+  await copyMetaAssets(metaDir, publicDir);
   
-  // Pre-load templates for immediate use
-  devState.templates = await getTemplates(metaDir);
+  // Pre-load templates and bundle meta assets (minify without obfuscation for debuggability)
+  let rawTemplates = await getTemplates(metaDir);
+  devState.templates = await bundleMetaTemplateAssets(rawTemplates, metaDir, publicDir, { minify: true, sourcemap: false });
+  console.log('📦 Meta template assets bundled');
   
   // Start server immediately
   const app = express();
@@ -950,20 +981,29 @@ export async function dev({
       devState.menuReady = false;
       await buildBackgroundCaches();
     } else if (isCssChange) {
-      // Copy CSS to output
+      // Copy CSS to output and clear style cache so next render picks up changes
+      devState.stylePathMap.clear();
       try {
         const relativePath = name.replace(sourceDir, '');
         const outputPath = join(outputDir, relativePath);
         const content = await readFile(name, 'utf8');
         await outputFile(outputPath, content);
-        console.log(`✅ Copied ${relativePath}`);
+        console.log(`✅ Copied ${relativePath} (style cache cleared)`);
       } catch (e) {
         console.error(`Error copying CSS: ${e.message}`);
       }
     } else if (isScriptChange) {
-      // Clear script cache so next render picks up changes
+      // Copy script to output and clear script cache so next render picks up changes
       devState.scriptPathMap.clear();
-      console.log(`✅ Script cache cleared for ${name}`);
+      try {
+        const relativePath = name.replace(sourceDir, '');
+        const outputPath = join(outputDir, relativePath);
+        const content = await readFile(name, 'utf8');
+        await outputFile(outputPath, content);
+        console.log(`✅ Copied ${relativePath} (script cache cleared)`);
+      } catch (e) {
+        console.error(`Error copying script: ${e.message}`);
+      }
     } else if (isComponentChange) {
       // Component files (.tsx, .jsx, .ts) may be imported by MDX files
       // Clear all MDX document caches so they re-compile with the updated component
@@ -1009,7 +1049,12 @@ export async function dev({
   // Watch meta directory for template changes
   watch(metaDir, { recursive: true }, async (evt, name) => {
     console.log(`🎨 Meta changed: ${name}`);
-    devState.templates = await getTemplates(metaDir);
+    clearMetaBundleCache();
+    const rawMetaTemplates = await getTemplates(metaDir);
+    // Re-copy meta files and re-bundle
+    const pubDir = join(outputDir, 'public');
+    await copyMetaAssets(metaDir, pubDir);
+    devState.templates = await bundleMetaTemplateAssets(rawMetaTemplates, metaDir, pubDir, { minify: true, sourcemap: false });
     broadcast('reload', { file: name });
   });