@mgks/docmd 0.1.3 → 0.2.0

package/src/assets/js/docmd-image-lightbox.js

@@ -1,6 +1,4 @@
-/**
- * docmd-image-lightbox.js - Simple lightbox implementation for docmd images
- */
+// docmd-image-lightbox.js - Simple lightbox implementation for docmd images
 
 document.addEventListener('DOMContentLoaded', function() {
   // Create lightbox elements

package/src/assets/js/docmd-main.js

@@ -0,0 +1,97 @@
+/**
+ * docmd-main.js
+ * Main client-side script for docmd UI interactions.
+ * Handles:
+ * 1. Light/Dark theme toggling and persistence.
+ * 2. Sidebar expand/collapse functionality and persistence.
+ * 3. Tabs container interaction.
+ */
+
+// --- 1. Theme Toggle Logic ---
+function initializeThemeToggle() {
+  const themeToggleButton = document.getElementById('theme-toggle-button');
+
+  // Function to apply the theme to the body and save preference
+  const applyTheme = (theme, isInitial = false) => {
+    document.body.setAttribute('data-theme', theme);
+    if (!isInitial) {
+      localStorage.setItem('docmd-theme', theme);
+    }
+  };
+
+  // Set the initial theme on page load
+  const storedTheme = localStorage.getItem('docmd-theme');
+  const initialTheme = storedTheme || document.body.getAttribute('data-theme') || 'light';
+  applyTheme(initialTheme, true);
+
+  // Add click listener to the toggle button
+  if (themeToggleButton) {
+    themeToggleButton.addEventListener('click', () => {
+      const currentTheme = document.body.getAttribute('data-theme');
+      const newTheme = currentTheme.includes('dark') 
+        ? currentTheme.replace('dark', 'light') 
+        : currentTheme.replace('light', 'dark');
+      applyTheme(newTheme);
+    });
+  }
+}
+
+// --- 2. Sidebar Collapse Logic ---
+function initializeSidebarToggle() {
+  const toggleButton = document.getElementById('sidebar-toggle-button');
+  const body = document.body;
+
+  // Only run if the sidebar is configured to be collapsible
+  if (!body.classList.contains('sidebar-collapsible') || !toggleButton) {
+    return;
+  }
+
+  // Set initial state from localStorage or config default
+  const defaultConfigCollapsed = body.dataset.defaultCollapsed === 'true';
+  let isCollapsed = localStorage.getItem('docmd-sidebar-collapsed');
+  
+  if (isCollapsed === null) {
+    isCollapsed = defaultConfigCollapsed;
+  } else {
+    isCollapsed = isCollapsed === 'true';
+  }
+
+  if (isCollapsed) {
+    body.classList.add('sidebar-collapsed');
+  }
+
+  // Add click listener to the toggle button
+  toggleButton.addEventListener('click', () => {
+    body.classList.toggle('sidebar-collapsed');
+    const currentlyCollapsed = body.classList.contains('sidebar-collapsed');
+    localStorage.setItem('docmd-sidebar-collapsed', currentlyCollapsed);
+  });
+}
+
+// --- 3. Tabs Container Logic ---
+function initializeTabs() {
+  document.querySelectorAll('.docmd-tabs').forEach(tabsContainer => {
+    const navItems = tabsContainer.querySelectorAll('.docmd-tabs-nav-item');
+    const tabPanes = tabsContainer.querySelectorAll('.docmd-tab-pane');
+
+    navItems.forEach((navItem, index) => {
+      navItem.addEventListener('click', () => {
+        navItems.forEach(item => item.classList.remove('active'));
+        tabPanes.forEach(pane => pane.classList.remove('active'));
+
+        navItem.classList.add('active');
+        if(tabPanes[index]) {
+            tabPanes[index].classList.add('active');
+        }
+      });
+    });
+  });
+}
+
+
+// --- Main Execution ---
+document.addEventListener('DOMContentLoaded', () => {
+  initializeThemeToggle();
+  initializeSidebarToggle();
+  initializeTabs();
+});

package/src/commands/build.js

@@ -211,7 +211,7 @@ async function buildSite(configPath, options = { isDev: false, preserve: false,
       const depth = outputHtmlPath.split(path.sep).length - 1;
       const relativePathToRoot = depth > 0 ? '../'.repeat(depth) : './';
 
-      const { frontmatter: pageFrontmatter, htmlContent, headings } = await processMarkdownFile(filePath, { isDev: options.isDev });
+      const { frontmatter: pageFrontmatter, htmlContent, headings } = await processMarkdownFile(filePath, { isDev: options.isDev }, config);
       
       // Special handling for no-style pages
       let finalHtmlContent = htmlContent;

package/src/commands/dev.js

@@ -44,6 +44,9 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
   let paths = resolveConfigPaths(config);
 
   // docmd's internal templates and assets (for live dev of docmd itself)
+  const DOCMD_COMMANDS_DIR = path.resolve(__dirname, '..', 'commands');
+  const DOCMD_CORE_DIR = path.resolve(__dirname, '..', 'core');
+  const DOCMD_PLUGINS_DIR = path.resolve(__dirname, '..', 'plugins');
   const DOCMD_TEMPLATES_DIR = path.resolve(__dirname, '..', 'templates');
   const DOCMD_ASSETS_DIR = path.resolve(__dirname, '..', 'assets');
 
@@ -199,13 +202,13 @@ async function startDevServer(configPathOption, options = { preserve: false }) {
   }
 
   // Add internal paths for docmd development (not shown to end users)
-  const internalPaths = [DOCMD_TEMPLATES_DIR, DOCMD_ASSETS_DIR];
+  const internalPaths = [DOCMD_TEMPLATES_DIR, DOCMD_ASSETS_DIR, DOCMD_COMMANDS_DIR, DOCMD_CORE_DIR, DOCMD_PLUGINS_DIR];
   
   // Only in development environments, we might want to watch internal files too
   if (process.env.DOCMD_DEV === 'true') {
     watchedPaths.push(...internalPaths);
   }
-
+  
   console.log(`👀 Watching for changes in:`);
   console.log(`    - Source: ${formatPathForDisplay(paths.srcDirToWatch, CWD)}`);
   console.log(`    - Config: ${formatPathForDisplay(paths.configFileToWatch, CWD)}`);

package/src/commands/init.js

@@ -22,11 +22,18 @@ module.exports = {
   srcDir: 'docs',       // Source directory for Markdown files
   outputDir: 'site',    // Directory for generated static site
 
+  // Sidebar Configuration
+  sidebar: {
+    collapsible: true,        // or false to disable
+    defaultCollapsed: false,  // or true to start collapsed
+  },
+
   // Theme Configuration
   theme: {
     name: 'sky',            // Themes: 'default', 'sky'
     defaultMode: 'light',   // Initial color mode: 'light' or 'dark'
     enableModeToggle: true, // Show UI button to toggle light/dark modes
+    positionMode: 'bottom', // 'top' or 'bottom' for the theme toggle
     customCss: [            // Array of paths to custom CSS files
       // '/assets/css/custom.css', // Custom TOC styles
     ]
@@ -35,8 +42,12 @@ module.exports = {
   // Custom JavaScript Files
   customJs: [  // Array of paths to custom JS files, loaded at end of body
     // '/assets/js/custom-script.js', // Paths relative to outputDir root
+    '/assets/js/docmd-image-lightbox.js', // Image lightbox functionality
   ],
 
+  // Content Processing
+  autoTitleFromH1: true, // Set to true to automatically use the first H1 as page title
+
   // Plugins Configuration
   // Plugins are configured here. docmd will look for these keys.
   plugins: {
@@ -85,11 +96,20 @@ module.exports = {
           { title: 'Documentation', path: 'https://docmd.mgks.dev', icon: 'scroll', external: true },
           { title: 'Installation', path: 'https://docmd.mgks.dev/getting-started/installation', icon: 'download', external: true },
           { title: 'Basic Usage', path: 'https://docmd.mgks.dev/getting-started/basic-usage', icon: 'play', external: true },
+          { title: 'Content', path: 'https://docmd.mgks.dev/content', icon: 'layout-template', external: true },
         ],
       },
       // External links:
       { title: 'GitHub', path: 'https://github.com/mgks/docmd', icon: 'github', external: true },
-  ],
+      { title: 'Support the Project', path: 'https://github.com/sponsors/mgks', icon: 'heart', external: true },
+    ],
+
+  // Sponsor Ribbon Configuration
+  Sponsor: {
+    enabled: false,
+    title: 'Support docmd',
+    link: 'https://github.com/sponsors/mgks',
+  },
 
   // Footer Configuration
   // Markdown is supported here.