@mgks/docmd 0.1.4 → 0.2.1

package/src/core/html-generator.js

@@ -1,51 +1,57 @@
-// src/core/html-generator.js
+//
+
 const ejs = require('ejs');
 const path = require('path');
 const fs = require('fs-extra');
-const { mdInstance } = require('./file-processor'); // Import mdInstance for footer
+const { createMarkdownItInstance } = require('./file-processor');
 const { generateSeoMetaTags } = require('../plugins/seo');
 const { generateAnalyticsScripts } = require('../plugins/analytics');
-const { renderIcon } = require('./icon-renderer'); // Import icon renderer
+const { renderIcon } = require('./icon-renderer');
+
+// Create a markdown instance for inline rendering
+let mdInstance = null;
+
+let themeInitScript = '';
+(async () => {
+    const themeInitPath = path.join(__dirname, '..', 'templates', 'partials', 'theme-init.js');
+    if (await fs.pathExists(themeInitPath)) {
+        const scriptContent = await fs.readFile(themeInitPath, 'utf8');
+        themeInitScript = `<script>${scriptContent}</script>`;
+    }
+})();
 
 async function processPluginHooks(config, pageData, relativePathToRoot) {
     let metaTagsHtml = '';
     let faviconLinkHtml = '';
-    let themeCssLinkHtml = ''; // For theme.name CSS file
-    let pluginStylesHtml = ''; // For plugin-specific CSS
+    let themeCssLinkHtml = '';
+    let pluginStylesHtml = '';
     let pluginHeadScriptsHtml = '';
     let pluginBodyScriptsHtml = '';
 
-    // 1. Favicon (built-in handling)
+    // Favicon (built-in handling)
     if (config.favicon) {
         const faviconPath = config.favicon.startsWith('/') ? config.favicon.substring(1) : config.favicon;
         faviconLinkHtml = `<link rel="shortcut icon" href="${relativePathToRoot}${faviconPath}" type="image/x-icon">\n`;
     }
 
-    // 2. Theme CSS (built-in handling for theme.name)
+    // Theme CSS (built-in handling for theme.name)
     if (config.theme && config.theme.name && config.theme.name !== 'default') {
-        // Assumes theme CSS files are like 'docmd-theme-yourthemename.css' in assets/css
         const themeCssPath = `assets/css/docmd-theme-${config.theme.name}.css`;
-        // Check if theme file exists before linking (optional, good practice)
-        // For now, assume it will exist if specified.
         themeCssLinkHtml = `  <link rel="stylesheet" href="${relativePathToRoot}${themeCssPath}">\n`;
     }
 
-
-    // 3. SEO Plugin (if configured)
+    // SEO Plugin (if configured)
     if (config.plugins?.seo) {
         metaTagsHtml += generateSeoMetaTags(config, pageData, relativePathToRoot);
     }
 
-    // 4. Analytics Plugin (if configured)
+    // Analytics Plugin (if configured)
     if (config.plugins?.analytics) {
         const analyticsScripts = generateAnalyticsScripts(config, pageData);
         pluginHeadScriptsHtml += analyticsScripts.headScriptsHtml;
         pluginBodyScriptsHtml += analyticsScripts.bodyScriptsHtml;
     }
 
-    // Future: Loop through a more generic plugin array if you evolve the system
-    // for (const plugin of config.activePlugins) { /* plugin.runHook('meta', ...) */ }
-
     return {
         metaTagsHtml,
         faviconLinkHtml,
@@ -58,33 +64,32 @@ async function processPluginHooks(config, pageData, relativePathToRoot) {
 
 async function generateHtmlPage(templateData) {
     const {
-        content, pageTitle, siteTitle, navigationHtml,
+        content, siteTitle, navigationHtml,
         relativePathToRoot, config, frontmatter, outputPath,
         prevPage, nextPage, currentPagePath, headings
     } = templateData;
 
+    const pageTitle = frontmatter.title;
+
     // Process plugins to get their HTML contributions
     const pluginOutputs = await processPluginHooks(
         config,
-        { frontmatter, outputPath }, // pageData object
+        { frontmatter, outputPath },
         relativePathToRoot
     );
 
     let footerHtml = '';
     if (config.footer) {
+        // Initialize mdInstance if not already done
+        if (!mdInstance) {
+            mdInstance = createMarkdownItInstance(config);
+        }
         footerHtml = mdInstance.renderInline(config.footer);
     }
 
-    // Determine which template to use based on frontmatter
     let templateName = 'layout.ejs';
     if (frontmatter.noStyle === true) {
         templateName = 'no-style.ejs';
-        
-        // For no-style pages, ensure we're passing the raw HTML content
-        // without any additional processing or escaping
-        if (content.includes('&lt;') || content.includes('&gt;')) {
-            console.warn(`⚠️ Warning: HTML content in no-style page appears to be escaped. This may cause rendering issues.`);
-        }
     }
 
     const layoutTemplatePath = path.join(__dirname, '..', 'templates', templateName);
@@ -93,42 +98,47 @@ async function generateHtmlPage(templateData) {
     }
     const layoutTemplate = await fs.readFile(layoutTemplatePath, 'utf8');
 
-    // Determine if this is an active page for TOC display
-    // The currentPagePath exists and has content
     const isActivePage = currentPagePath && content && content.trim().length > 0;
 
     const ejsData = {
         content,
-        pageTitle: frontmatter.title || pageTitle || 'Untitled', // Ensure pageTitle is robust
-        description: frontmatter.description, // Used by layout if no SEO plugin overrides
+        pageTitle,
+        themeInitScript,
+        description: frontmatter.description,
         siteTitle,
         navigationHtml,
         defaultMode: config.theme?.defaultMode || 'light',
         relativePathToRoot,
         logo: config.logo,
+        sidebarConfig: { 
+            collapsible: config.sidebar?.collapsible ?? false,
+            defaultCollapsed: config.sidebar?.defaultCollapsed ?? false,
+        },
         theme: config.theme,
         customCssFiles: config.theme?.customCss || [],
         customJsFiles: config.customJs || [],
+        sponsor: config.sponsor,
         footer: config.footer,
         footerHtml,
         renderIcon,
         prevPage,
         nextPage,
-        currentPagePath, // Pass the current page path for active state detection
-        headings: headings || [], // Pass headings for TOC, default to empty array if not provided
-        isActivePage, // Flag to determine if TOC should be shown
-        frontmatter, // Pass the entire frontmatter for no-style template
-        ...pluginOutputs, // Spread all plugin generated HTML strings
+        currentPagePath,
+        headings: headings || [],
+        isActivePage,
+        frontmatter,
+        config: config,
+        ...pluginOutputs,
     };
 
     try {
         return ejs.render(layoutTemplate, ejsData, {
-            filename: layoutTemplatePath // Add filename for proper include resolution
+            filename: layoutTemplatePath
         });
     } catch (e) {
         console.error(`❌ Error rendering EJS template for ${outputPath}: ${e.message}`);
-        console.error("EJS Data:", JSON.stringify(ejsData, null, 2).substring(0, 1000) + "..."); // Log partial data
-        throw e; // Re-throw to stop build
+        console.error("EJS Data:", JSON.stringify(ejsData, null, 2).substring(0, 1000) + "...");
+        throw e;
     }
 }
 
@@ -139,17 +149,16 @@ async function generateNavigationHtml(navItems, currentPagePath, relativePathToR
     }
     const navTemplate = await fs.readFile(navTemplatePath, 'utf8');
 
-    // Make renderIcon available to the EJS template
     const ejsHelpers = { renderIcon };
 
     return ejs.render(navTemplate, {
         navItems,
         currentPagePath,
         relativePathToRoot,
-        config, // Pass full config if needed by nav (e.g. for base path)
+        config,
         ...ejsHelpers
     }, {
-        filename: navTemplatePath // Add filename for proper include resolution
+        filename: navTemplatePath
     });
 }
 

package/src/core/icon-renderer.js

@@ -1,5 +1,6 @@
-// src/core/icon-renderer.js
-const lucideStatic = require('lucide-static'); // Access the raw icon data
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+const lucideStatic = require('lucide-static');
 
 // On first load, log debug information about a specific icon to understand its structure
 let debugRun = false;

package/src/plugins/analytics.js

@@ -1,4 +1,8 @@
-// src/plugins/analytics.js
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/*
+ * Generate analytics scripts for a page
+ */
 
 function generateAnalyticsScripts(config, pageData) {
     let headScriptsHtml = '';

package/src/plugins/seo.js

@@ -1,65 +1,117 @@
-// src/plugins/seo.js
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/*
+ * Generate SEO meta tags for a page
+ */
+
 function generateSeoMetaTags(config, pageData, relativePathToRoot) {
-    let metaTagsHtml = '';
-    const { frontmatter, outputPath } = pageData;
-  
-    if (frontmatter.noindex) {
-      metaTagsHtml += '  <meta name="robots" content="noindex">\n';
-      return metaTagsHtml; // No other SEO tags if noindex
-    }
-  
-    const siteTitle = config.siteTitle;
-    const pageTitle = frontmatter.title || 'Untitled'; // Ensure pageTitle is always defined
-    const description = frontmatter.description || config.plugins?.seo?.defaultDescription || '';
-  
-    // Construct pageUrl - ensure siteUrl in config has no trailing slash
-    const siteUrl = config.siteUrl ? config.siteUrl.replace(/\/$/, '') : '';
-    const pageSegment = outputPath.replace(/index\.html$/, '').replace(/\.html$/, '');
-    const pageUrl = `${siteUrl}${pageSegment.startsWith('/') ? pageSegment : '/' + pageSegment}`;
-  
-    metaTagsHtml += `  <meta name="description" content="${description}">\n`;
-  
-    // Open Graph
-    metaTagsHtml += `  <meta property="og:title" content="${pageTitle} | ${siteTitle}">\n`;
-    metaTagsHtml += `  <meta property="og:description" content="${description}">\n`;
-    metaTagsHtml += `  <meta property="og:url" content="${pageUrl}">\n`;
-    metaTagsHtml += `  <meta property="og:site_name" content="${config.plugins?.seo?.openGraph?.siteName || siteTitle}">\n`;
-  
-    const ogImage = frontmatter.image || frontmatter.ogImage || config.plugins?.seo?.openGraph?.defaultImage;
-    if (ogImage) {
-      const ogImageUrl = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage.startsWith('/') ? ogImage : '/' + ogImage}`;
-      metaTagsHtml += `  <meta property="og:image" content="${ogImageUrl}">\n`;
-    }
-    metaTagsHtml += `  <meta property="og:type" content="${frontmatter.ogType || 'website'}">\n`;
-  
-    // Twitter Card
-    const twitterCardType = frontmatter.twitterCard || config.plugins?.seo?.twitter?.cardType || 'summary';
-    metaTagsHtml += `  <meta name="twitter:card" content="${twitterCardType}">\n`;
-    if (config.plugins?.seo?.twitter?.siteUsername) {
-      metaTagsHtml += `  <meta name="twitter:site" content="${config.plugins.seo.twitter.siteUsername}">\n`;
-    }
-    const twitterCreator = frontmatter.twitterCreator || config.plugins?.seo?.twitter?.creatorUsername;
-    if (twitterCreator) {
-      metaTagsHtml += `  <meta name="twitter:creator" content="${twitterCreator}">\n`;
-    }
-    // Twitter title, description, image often fallback to OG tags if not explicitly set by Twitter.
-    // For explicitness:
-    metaTagsHtml += `  <meta name="twitter:title" content="${pageTitle} | ${siteTitle}">\n`;
-    metaTagsHtml += `  <meta name="twitter:description" content="${description}">\n`;
-    if (ogImage) { // Re-use ogImage for twitter:image if not specified differently
-      const twitterImageUrl = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage.startsWith('/') ? ogImage : '/' + ogImage}`;
-      metaTagsHtml += `  <meta name="twitter:image" content="${twitterImageUrl}">\n`;
-    }
-  
-  
-    // Keywords (optional, less impact nowadays)
-    if (frontmatter.keywords) {
-      const keywordsString = Array.isArray(frontmatter.keywords) ? frontmatter.keywords.join(', ') : frontmatter.keywords;
-      metaTagsHtml += `  <meta name="keywords" content="${keywordsString}">\n`;
+  let metaTagsHtml = '';
+  const { frontmatter, outputPath } = pageData;
+  const seoFrontmatter = frontmatter.seo || {}; // Use nested seo object, fallback to empty
+
+  if (frontmatter.noindex || seoFrontmatter.noindex) {
+    metaTagsHtml += '  <meta name="robots" content="noindex">\n';
+    return metaTagsHtml; // No other SEO tags if noindex
+  }
+
+  const siteTitle = config.siteTitle;
+  const pageTitle = frontmatter.title || 'Untitled';
+  const description = seoFrontmatter.description || frontmatter.description || config.plugins?.seo?.defaultDescription || '';
+
+  const siteUrl = config.siteUrl ? config.siteUrl.replace(/\/$/, '') : '';
+  const pageSegment = outputPath.replace(/index\.html$/, '').replace(/\.html$/, '');
+  const pageUrl = `${siteUrl}${pageSegment.startsWith('/') ? pageSegment : '/' + pageSegment}`;
+
+  metaTagsHtml += `  <meta name="description" content="${description}">\n`;
+
+  const canonicalUrl = seoFrontmatter.permalink || frontmatter.permalink || seoFrontmatter.canonicalUrl || frontmatter.canonicalUrl || pageUrl;
+  metaTagsHtml += `  <link rel="canonical" href="${canonicalUrl}">\n`;
+
+  // Open Graph
+  metaTagsHtml += `  <meta property="og:title" content="${pageTitle} | ${siteTitle}">\n`;
+  metaTagsHtml += `  <meta property="og:description" content="${description}">\n`;
+  metaTagsHtml += `  <meta property="og:url" content="${pageUrl}">\n`;
+  metaTagsHtml += `  <meta property="og:site_name" content="${config.plugins?.seo?.openGraph?.siteName || siteTitle}">\n`;
+
+  const ogImage = seoFrontmatter.image || frontmatter.image || seoFrontmatter.ogImage || frontmatter.ogImage || config.plugins?.seo?.openGraph?.defaultImage;
+  if (ogImage) {
+    const ogImageUrl = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage.startsWith('/') ? ogImage : '/' + ogImage}`;
+    metaTagsHtml += `  <meta property="og:image" content="${ogImageUrl}">\n`;
+  }
+  metaTagsHtml += `  <meta property="og:type" content="${seoFrontmatter.ogType || frontmatter.ogType || 'website'}">\n`;
+
+  // Twitter Card
+  const twitterCardType = seoFrontmatter.twitterCard || frontmatter.twitterCard || config.plugins?.seo?.twitter?.cardType || 'summary';
+  metaTagsHtml += `  <meta name="twitter:card" content="${twitterCardType}">\n`;
+  if (config.plugins?.seo?.twitter?.siteUsername) {
+    metaTagsHtml += `  <meta name="twitter:site" content="${config.plugins.seo.twitter.siteUsername}">\n`;
+  }
+  const twitterCreator = seoFrontmatter.twitterCreator || frontmatter.twitterCreator || config.plugins?.seo?.twitter?.creatorUsername;
+  if (twitterCreator) {
+    metaTagsHtml += `  <meta name="twitter:creator" content="${twitterCreator}">\n`;
+  }
+  metaTagsHtml += `  <meta name="twitter:title" content="${pageTitle} | ${siteTitle}">\n`;
+  metaTagsHtml += `  <meta name="twitter:description" content="${description}">\n`;
+  if (ogImage) {
+    const twitterImageUrl = ogImage.startsWith('http') ? ogImage : `${siteUrl}${ogImage.startsWith('/') ? ogImage : '/' + ogImage}`;
+    metaTagsHtml += `  <meta name="twitter:image" content="${twitterImageUrl}">\n`;
+  }
+
+  // Keywords
+  const keywords = seoFrontmatter.keywords || frontmatter.keywords;
+  if (keywords) {
+    const keywordsString = Array.isArray(keywords) ? keywords.join(', ') : keywords;
+    metaTagsHtml += `  <meta name="keywords" content="${keywordsString}">\n`;
+  }
+
+  // LD+JSON Structured Data
+  const ldJsonConfig = seoFrontmatter.ldJson || frontmatter.ldJson;
+  if (ldJsonConfig) {
+    try {
+      const baseLdJson = {
+        '@context': 'https://schema.org',
+        '@type': 'Article',
+        mainEntityOfPage: {
+          '@type': 'WebPage',
+          '@id': canonicalUrl,
+        },
+        headline: pageTitle,
+        description: description,
+        url: canonicalUrl,
+      };
+
+      if (config.siteTitle) {
+        baseLdJson.publisher = {
+          '@type': 'Organization',
+          name: config.siteTitle,
+        };
+        if (config.logo?.light) {
+          baseLdJson.publisher.logo = {
+            '@type': 'ImageObject',
+            url: `${siteUrl}${config.logo.light.startsWith('/') ? config.logo.light : '/' + config.logo.light}`
+          };
+        }
+      }
+      
+      if (ogImage) {
+        baseLdJson.image = `${siteUrl}${ogImage.startsWith('/') ? ogImage : '/' + ogImage}`;
+      }
+
+      const finalLdJson = typeof ldJsonConfig === 'object' 
+        ? { ...baseLdJson, ...ldJsonConfig } 
+        : baseLdJson;
+
+      metaTagsHtml += `  <script type="application/ld+json">\n`;
+      metaTagsHtml += `    ${JSON.stringify(finalLdJson, null, 2)}\n`;
+      metaTagsHtml += `  </script>\n`;
+    } catch (e) {
+      console.error(`❌ Error generating LD+JSON for page: ${outputPath}`);
+      console.error(`   Could not stringify the ldJson object. Please check its structure in the frontmatter.`);
+      console.error(`   ${e.message}`);
     }
-  
-  
-    return metaTagsHtml;
   }
-  
-  module.exports = { generateSeoMetaTags };
+
+  return metaTagsHtml;
+}
+
+module.exports = { generateSeoMetaTags };

package/src/plugins/sitemap.js

@@ -1,3 +1,9 @@
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/*
+ * Generate sitemap.xml in the output directory root
+ */
+
 const fs = require('fs-extra');
 const path = require('path');
 

package/src/templates/layout.ejs

@@ -13,9 +13,13 @@
 
     <%- faviconLinkHtml || '' %> <%# Favicon %>
 
+    <%- themeInitScript %>
+
     <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css">
 
-    <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-highlight-<%= defaultMode === 'dark' ? 'dark' : 'light' %>.css" id="highlight-theme">
+    <% if (config.theme?.codeHighlight !== false) { %>
+        <link rel="stylesheet" id="highlight-theme" href="<%= relativePathToRoot %>assets/css/docmd-highlight-<%= defaultMode === 'dark' ? 'dark' : 'light' %>.css" data-base-href="<%= relativePathToRoot %>assets/css/">
+    <% } %>
 
     <%- themeCssLinkHtml || '' %> <%# For theme.name specific CSS %>
 
@@ -27,7 +31,9 @@
 
     <%- pluginHeadScriptsHtml || '' %> <%# Plugin specific head scripts (e.g., Analytics) %>
 </head>
-<body data-theme="<%= defaultMode %>">
+<body class="<%= sidebarConfig.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible' %>"
+    data-theme="<%= defaultMode %>" data-default-collapsed="<%= sidebarConfig.defaultCollapsed %>"
+    data-copy-code-enabled="<%= config.copyCode === true %>">
     <aside class="sidebar">
         <div class="sidebar-header">
             <% if (logo && logo.light && logo.dark) { %>
@@ -40,7 +46,7 @@
             <% } %>
         </div>
         <%- navigationHtml %>
-        <% if (theme && theme.enableModeToggle) { %>
+        <% if (theme && theme.enableModeToggle && theme.positionMode !== 'top') { %>
           <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
             <%# renderIcon is available in the global EJS scope from html-generator %>
             <%- renderIcon('sun', { class: 'icon-sun' }) %>
@@ -49,9 +55,25 @@
         <% } %>
     </aside>
     <div class="main-content-wrapper">
-        <header class="page-header">
-            <h1><%= pageTitle %></h1>
-        </header>
+        <div class="page-header">
+            <div class="header-left">
+                <% if (sidebarConfig.collapsible) { %>
+                <button id="sidebar-toggle-button" class="sidebar-toggle-button" aria-label="Toggle Sidebar">
+                    <%- renderIcon('panel-left-close') %>
+                </button>
+                <% } %>
+                <h1><%= pageTitle %></h1>
+            </div>
+            <% if (theme && theme.enableModeToggle && theme.positionMode === 'top') { %>
+            <div class="header-right">
+                <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button theme-toggle-header">
+                    <%# renderIcon is available in the global EJS scope from html-generator %>
+                    <%- renderIcon('sun', { class: 'icon-sun' }) %>
+                    <%- renderIcon('moon', { class: 'icon-moon' }) %>
+                </button>
+            </div>
+            <% } %>
+        </div>
         <main class="content-area">
             <div class="content-layout">
                 <div class="main-content">
@@ -106,11 +128,21 @@
         </footer>
     </div>
 
-    <script src="<%= relativePathToRoot %>assets/js/docmd-theme-toggle.js"></script>
+    <script src="<%= relativePathToRoot %>assets/js/docmd-main.js"></script>
+
     <% (customJsFiles || []).forEach(jsFile => { %>
       <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
     <% }); %>
 
-    <%- pluginBodyScriptsHtml || '' %> <%# Plugin specific body scripts %>
+    <%- pluginBodyScriptsHtml || '' %>
+    
+    <% if (sponsor && sponsor.enabled) { %>
+    <div class="sponsor-ribbon">
+        <a href="<%= sponsor.link %>" target="_blank" rel="noopener noreferrer" class="sponsor-link">
+            <%- renderIcon('heart', { class: 'sponsor-icon' }) %>
+            <span class="sponsor-text"><%= sponsor.title %></span>
+        </a>
+    </div>
+    <% } %>
 </body>
 </html>

package/src/templates/no-style.ejs

@@ -16,6 +16,10 @@
         <%- faviconLinkHtml || '' %>
     <% } %>
 
+    <% if (frontmatter.components?.themeMode !== false) { %>
+        <%- themeInitScript %>
+    <% } %>
+
     <% if (frontmatter.components?.css !== false) { %>
         <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css">
         <% if (frontmatter.components?.highlight !== false) { %>
@@ -45,7 +49,16 @@
         <%- frontmatter.customHead %>
     <% } %>
 </head>
-<body<% if (frontmatter.components?.theme !== false) { %> data-theme="<%= defaultMode %>"<% } %><% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %>>
+<body
+    <%
+    if (frontmatter.components?.theme !== false) {
+        %> data-theme="<%= defaultMode %>"<%
+    }
+    %><%
+    if (frontmatter.bodyClass) {
+        %> class="<%= frontmatter.bodyClass %>"<%
+    }
+    %> data-copy-code-enabled="<%= config.copyCode === true %>">
     <% if (frontmatter.components?.layout === true || frontmatter.components?.layout === 'full') { %>
         <div class="main-content-wrapper">
             <% if (frontmatter.components?.header !== false) { %>
@@ -136,18 +149,22 @@
         <%- content %>
     <% } %>
 
-    <% if (frontmatter.components?.scripts !== false) { %>
-        <% if (frontmatter.components?.themeToggle !== false) { %>
-            <script src="<%= relativePathToRoot %>assets/js/docmd-theme-toggle.js"></script>
+    <% if (frontmatter.components?.scripts === true) { %>
+        <% if (frontmatter.components?.mainScripts === true) { %>
+            <script src="<%= relativePathToRoot %>assets/js/docmd-main.js"></script>
+        <% } %>
+        
+        <% if (frontmatter.components?.lightbox === true && frontmatter.components?.mainScripts === true) { %>
+            <script src="<%= relativePathToRoot %>assets/js/docmd-image-lightbox.js"></script>
         <% } %>
         
-        <% if (frontmatter.components?.customJs !== false && customJsFiles && customJsFiles.length > 0) { %>
+        <% if (frontmatter.components?.customJs === true && customJsFiles && customJsFiles.length > 0) { %>
             <% customJsFiles.forEach(jsFile => { %>
                 <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
             <% }); %>
         <% } %>
         
-        <% if (frontmatter.components?.pluginBodyScripts !== false) { %>
+        <% if (frontmatter.components?.pluginBodyScripts === true) { %>
             <%- pluginBodyScriptsHtml || '' %>
         <% } %>
     <% } %>

package/src/templates/partials/theme-init.js

@@ -0,0 +1,26 @@
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/*
+ * Initialize the theme from localStorage
+ */
+
+(function() {
+    try {
+      const storedTheme = localStorage.getItem('docmd-theme');
+      if (storedTheme) {
+        document.documentElement.setAttribute('data-theme', storedTheme);
+        
+        // Also update highlight CSS link to match the stored theme
+        const highlightThemeLink = document.getElementById('highlight-theme');
+        if (highlightThemeLink) {
+          const baseHref = highlightThemeLink.getAttribute('data-base-href');
+          if (baseHref) {
+            const newHref = baseHref + `docmd-highlight-${storedTheme}.css`;
+            highlightThemeLink.setAttribute('href', newHref);
+          }
+        }
+      }
+    } catch (e) {
+      console.error('Error applying theme from localStorage', e);
+    }
+})();