@mgks/docmd 0.2.0 → 0.2.2

package/src/plugins/seo.js

@@ -1,69 +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`;
-  
-    // Canonical URL - use permalink first, fall back to canonicalUrl, then default to pageUrl
-    const canonicalUrl = frontmatter.permalink || 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 = 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 class="<%= sidebarConfig.collapsible ? 'sidebar-collapsible' : 'sidebar-not-collapsible' %>" data-theme="<%= defaultMode %>" data-default-collapsed="<%= sidebarConfig.defaultCollapsed %>">
+<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) { %>

package/src/templates/navigation.ejs

@@ -1,107 +1,78 @@
-<%# src/templates/navigation.ejs %>
-
-<%# renderIcon is passed from html-generator.js %>
-
-<% 
-// Debug function - uncomment to troubleshoot paths
-function debugNavPaths(item, itemPath, currentPath, isActive, isParentActive) {
-  console.log('\nDEBUG NAV ITEM:');
-  console.log(`Title: ${item.title}`);
-  console.log(`Path: ${item.path}`);
-  console.log(`Computed item path: ${itemPath}`);
-  console.log(`Current page path: ${currentPath}`);
-  console.log(`Is directly active: ${isActive}`);
-  console.log(`Is parent active: ${isParentActive}`);
-}
-
-function renderNavItems(items, currentLevelPagePath, rootPath) { %>
+<%# navigation.ejs - Renders the sidebar navigation %>
+<nav class="sidebar-nav" aria-label="Main navigation">
   <ul>
-    <% items.forEach(item => { %>
-      <%
-        let itemHref = '#'; // Default for non-linking parents or error
-        let isCurrentPageActive = false;
-        let isActivePage = false; // For the direct page itself
-        const isExternal = item.external === true;
-        const targetBlank = isExternal ? 'target="_blank" rel="noopener noreferrer"' : '';
-        let iconHtml = '';
-        let externalLinkIconHtml = '';
-
-        if (item.icon) {
-          // Use custom class for nav icons for specific styling
-          iconHtml = renderIcon(item.icon, { class: 'nav-item-icon' });
+    <%
+      // A robust, centralized function to normalize navigation paths
+      function normalizePath(p) {
+        if (!p) return '#';
+        let path = p.replace(/\\/g, '/');
+        
+        if (path.endsWith('index.md')) {
+          path = path.slice(0, -'index.md'.length);
+        } else {
+          path = path.replace(/\.md$/, '');
         }
 
-        if (isExternal) {
-          itemHref = item.path; // Full URL for external links
-          // Use a Lucide icon like 'arrow-up-right' or 'external-link'
-          externalLinkIconHtml = renderIcon('arrow-up-right', { class: 'nav-external-icon', width: '0.8em', height: '0.8em' });
-        } else {
-          // Path normalization for internal links
-          let cleanPath = item.path.startsWith('/') ? item.path : '/' + item.path; // Ensure leading slash
+        if (!path.startsWith('/')) path = '/' + path;
 
-          // Handle paths with pretty URLs
-          if (cleanPath === '/') {
-            // Root path goes to index.html
-            itemHref = rootPath + 'index.html';
-          } else {
-            // Remove any trailing slash for consistency
-            const pathWithoutTrailingSlash = cleanPath.endsWith('/') ? cleanPath.slice(0, -1) : cleanPath;
-            
-            // For all other paths, link to the directory (pretty URL)
-            // Remove leading slash and ensure clean path
-            const cleanedPath = pathWithoutTrailingSlash.substring(1);
-            itemHref = rootPath + cleanedPath + '/';
-          }
+        if (path.length > 1 && !path.endsWith('/')) {
+          path += '/';
+        }
+        
+        // Handle root case where path might be "" after stripping index.md
+        if (path === '') path = '/';
+        
+        return path;
+      }
+
+      // Helper to check for active children recursively
+      function hasActiveChild(item, currentPagePath) {
+        if (!item.children || !Array.isArray(item.children)) return false;
+        return item.children.some(child => {
+          if (!child.path || child.external) return false;
+          const childPath = normalizePath(child.path);
+          if (currentPagePath === childPath) return true;
+          return hasActiveChild(child, currentPagePath);
+        });
+      }
 
-          // SIMPLIFIED ACTIVE STATE LOGIC - START
-          // 1. Prepare the paths for comparison
-          // The item path in the format used in the navigation config
-          const normalizedItemPath = cleanPath.substring(1) || '';
+      // Recursive function to render navigation items
+      function renderNav(items) {
+        if (!items || !Array.isArray(items)) return;
+        items.forEach(item => {
+          const isExternal = item.external || false;
+          let itemPath = item.path || '#';
           
-          // Special handling for root path
-          if (cleanPath === '/') {
-            isActivePage = currentLevelPagePath === 'index.html';
-            isCurrentPageActive = isActivePage;
-          } 
-          // Parent folder with index.md
-          else if (cleanPath.endsWith('/')) {
-            // Direct match for folder/index.html pages
-            const folderPath = cleanPath.substring(1, cleanPath.length - 1); // Remove leading / and trailing /
-            isActivePage = currentLevelPagePath === folderPath + '/';
-            isCurrentPageActive = isActivePage;
-            
-            // Check if any children are active 
-            // If current path starts with this item's path, it's a parent of the active page
-            if (!isActivePage && currentLevelPagePath.startsWith(normalizedItemPath)) {
-              isCurrentPageActive = true;
-            }
-          } 
-          // Regular page
-          else {
-            const pagePath = cleanPath.substring(1) + '/';
-            isActivePage = currentLevelPagePath === pagePath;
-            isCurrentPageActive = isActivePage;
-          }
-          // SIMPLIFIED ACTIVE STATE LOGIC - END
-        }
-      %>
-      <li class="<%= isCurrentPageActive ? 'active-parent' : '' %>">
-        <a href="<%= itemHref %>"
-           class="<%= isActivePage ? 'active' : '' %>"
-           <%- targetBlank %>>
-          <% if (iconHtml) { %><%- iconHtml %><% } %>
-          <span><%- item.title %></span> <%# Wrap title in span for styling if needed %>
-          <% if (externalLinkIconHtml) { %><%- externalLinkIconHtml %><% } %>
-        </a>
+          const normalizedItemPath = isExternal ? itemPath : normalizePath(itemPath);
 
-        <% if (item.children && item.children.length > 0) { %>
-          <%- renderNavItems(item.children, currentLevelPagePath, rootPath) %>
-        <% } %>
-      </li>
-    <% }); %>
-  </ul>
-<% } %>
+          const isActive = !isExternal && currentPagePath === normalizedItemPath;
+          const isParentOfActive = !isActive && hasActiveChild(item, currentPagePath);
+          const isCollapsible = item.children && item.collapsible;
 
-<nav class="sidebar-nav">
-  <%- renderNavItems(navItems, currentPagePath, relativePathToRoot) %>
+          const liClasses = [];
+          if (isActive) liClasses.push('active');
+          if (isParentOfActive) liClasses.push('active-parent');
+          if (isCollapsible) liClasses.push('collapsible');
+          
+          const finalHref = isExternal ? item.path : (itemPath === '#' ? '#' : (relativePathToRoot + (item.path.startsWith('/') ? item.path.substring(1) : item.path)));
+    %>
+    <li class="<%= liClasses.join(' ') %>" <%- isCollapsible ? `data-nav-id="${item.path}"` : '' %>>
+      <a href="<%- finalHref %>" class="<%- isActive ? 'active' : '' %>" <%- isExternal ? 'target="_blank" rel="noopener"' : '' %>>
+        <% if (item.icon) { %> <%- renderIcon(item.icon) %> <% } %>
+        <span class="nav-item-title"><%= item.title %></span>
+        <% if (isCollapsible) { %> <%- renderIcon('chevron-right', { class: 'collapse-icon' }) %> <% } %>
+        <% if (isExternal) { %> <%- renderIcon('external-link', { class: 'nav-external-icon' }) %> <% } %>
+      </a>
+      <% if (item.children) { %>
+        <ul class="submenu">
+          <% renderNav(item.children); %>
+        </ul>
+      <% } %>
+    </li>
+    <%
+        });
+      }
+      renderNav(navItems);
+    %>
+  </ul>
 </nav>

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);
+    }
+})();