@knowcode/doc-builder 1.5.1 → 1.5.2

package/.claude/settings.local.json

@@ -23,7 +23,8 @@
       "Bash(npm:*)",
       "Bash(vercel project:*)",
       "Bash(vercel alias:*)",
-      "Bash(find:*)"
+      "Bash(find:*)",
+      "Bash(diff:*)"
     ],
     "deny": []
   }

package/CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.5.2] - 2025-07-22
+
+### Added
+- Floating menu button for mobile devices that appears when scrolling down
+- Scroll detection to show/hide floating menu button based on scroll position
+- Smooth animations and transitions for floating button appearance
+- Icon changes between hamburger and close based on sidebar state
+
+### Fixed
+- Fixed mobile menu inaccessibility when scrolled down the page
+- Menu toggle button in header was scrolling off-screen, preventing sidebar access
+- Mobile users can now always access the navigation menu regardless of scroll position
+
+### Background
+- Users reported being unable to open the sidebar menu on mobile when scrolled down
+- Implemented floating action button (FAB) pattern common in mobile apps
+- Button appears when user scrolls past the header and disappears when scrolling back up
+
 ## [1.5.1] - 2025-07-21
 
 ### Added

package/README.md

@@ -139,14 +139,6 @@ module.exports = {
 };
 ```
 
-## Presets
-
-Use the `notion-inspired` preset for a clean, modern documentation style:
-
-```bash
-npx @knowcode/doc-builder build --preset notion-inspired
-```
-
 ## Commands
 
 ### set-production-url

package/assets/css/notion-style.css

@@ -1578,6 +1578,62 @@ tr:hover {
 
 /* Remove custom positioning variables - tooltips always go right */
 
+/* Floating Menu Button */
+.floating-menu-toggle {
+  position: fixed;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-accent-blue);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  cursor: pointer;
+  z-index: 1001; /* Above sidebar */
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
+  transition: all var(--duration-normal) var(--easing-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.floating-menu-toggle.visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.floating-menu-toggle:hover {
+  transform: scale(1.1) translateY(0);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.floating-menu-toggle:active {
+  transform: scale(0.95) translateY(0);
+}
+
+.floating-menu-toggle i {
+  transition: transform var(--duration-fast) var(--easing-out);
+}
+
+.floating-menu-toggle:hover i {
+  transform: rotate(90deg);
+}
+
+/* Dark mode styles for floating button */
+.dark-mode .floating-menu-toggle {
+  background: var(--color-accent-blue);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode .floating-menu-toggle:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
   /* Disable tooltips on mobile to prevent overlap issues */

package/assets/js/main.js

@@ -518,6 +518,92 @@ if (menuToggle) {
   });
 }
 
+// Floating Menu Button for Mobile
+function initFloatingMenuButton() {
+  // Only initialize on mobile
+  if (window.innerWidth > 768) return;
+  
+  // Check if button already exists
+  if (document.getElementById('floating-menu-toggle')) return;
+  
+  // Create floating button
+  const floatingButton = document.createElement('button');
+  floatingButton.id = 'floating-menu-toggle';
+  floatingButton.className = 'floating-menu-toggle';
+  floatingButton.setAttribute('aria-label', 'Toggle menu');
+  floatingButton.innerHTML = '<i class="fas fa-bars"></i>';
+  floatingButton.style.display = 'none'; // Hidden by default
+  
+  // Add to body
+  document.body.appendChild(floatingButton);
+  
+  // Toggle sidebar on click
+  floatingButton.addEventListener('click', () => {
+    sidebar.classList.toggle('open');
+    // Update icon based on state
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  // Show/hide based on scroll position
+  let scrollTimeout;
+  
+  window.addEventListener('scroll', () => {
+    clearTimeout(scrollTimeout);
+    scrollTimeout = setTimeout(() => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const headerHeight = document.querySelector('.header')?.offsetHeight || 64;
+      
+      // Show floating button when scrolled past header
+      if (scrollTop > headerHeight + 50) {
+        floatingButton.style.display = 'flex';
+        // Add slight delay for smooth appearance
+        setTimeout(() => {
+          floatingButton.classList.add('visible');
+        }, 10);
+      } else {
+        floatingButton.classList.remove('visible');
+        // Hide after transition completes
+        setTimeout(() => {
+          if (!floatingButton.classList.contains('visible')) {
+            floatingButton.style.display = 'none';
+          }
+        }, 300);
+      }
+    }, 100);
+  });
+  
+  // Update icon when sidebar state changes from other sources
+  const observer = new MutationObserver(() => {
+    const icon = floatingButton.querySelector('i');
+    if (sidebar.classList.contains('open')) {
+      icon.className = 'fas fa-times';
+    } else {
+      icon.className = 'fas fa-bars';
+    }
+  });
+  
+  observer.observe(sidebar, {
+    attributes: true,
+    attributeFilter: ['class']
+  });
+}
+
+// Initialize floating button on load and resize
+document.addEventListener('DOMContentLoaded', initFloatingMenuButton);
+window.addEventListener('resize', () => {
+  const existingButton = document.getElementById('floating-menu-toggle');
+  if (window.innerWidth > 768 && existingButton) {
+    existingButton.remove();
+  } else if (window.innerWidth <= 768 && !existingButton) {
+    initFloatingMenuButton();
+  }
+});
+
 // Prevent sidebar from closing when clicking nav items
 // Only close when clicking outside the sidebar or the close button
 document.addEventListener('click', (e) => {

package/html/README.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.468Z",
-  "dateModified": "2025-07-21T20:39:06.468Z",
+  "datePublished": "2025-07-22T05:55:46.703Z",
+  "dateModified": "2025-07-22T05:55:46.703Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
                 </div>
                 
                 
@@ -142,7 +142,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item active" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -152,6 +151,7 @@
         </a>
         <div class="nav-content" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>

package/html/claude-workflow-guide.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.478Z",
-  "dateModified": "2025-07-21T20:39:06.478Z",
+  "datePublished": "2025-07-21T20:43:20.146Z",
+  "dateModified": "2025-07-21T20:43:20.146Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/claude-workflow-guide.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 21, 2025, 08:43 PM UTC</span>
                 </div>
                 
                 

package/html/css/notion-style.css

@@ -1578,6 +1578,62 @@ tr:hover {
 
 /* Remove custom positioning variables - tooltips always go right */
 
+/* Floating Menu Button */
+.floating-menu-toggle {
+  position: fixed;
+  bottom: var(--space-6);
+  right: var(--space-6);
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--color-accent-blue);
+  color: white;
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.25rem;
+  cursor: pointer;
+  z-index: 1001; /* Above sidebar */
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
+  transition: all var(--duration-normal) var(--easing-out);
+  -webkit-tap-highlight-color: transparent;
+}
+
+.floating-menu-toggle.visible {
+  opacity: 1;
+  transform: scale(1) translateY(0);
+}
+
+.floating-menu-toggle:hover {
+  transform: scale(1.1) translateY(0);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
+}
+
+.floating-menu-toggle:active {
+  transform: scale(0.95) translateY(0);
+}
+
+.floating-menu-toggle i {
+  transition: transform var(--duration-fast) var(--easing-out);
+}
+
+.floating-menu-toggle:hover i {
+  transform: rotate(90deg);
+}
+
+/* Dark mode styles for floating button */
+.dark-mode .floating-menu-toggle {
+  background: var(--color-accent-blue);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.dark-mode .floating-menu-toggle:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 3px 6px rgba(0, 0, 0, 0.3);
+}
+
 /* Mobile adjustments */
 @media (max-width: 768px) {
   /* Disable tooltips on mobile to prevent overlap issues */

package/html/documentation-index.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.481Z",
-  "dateModified": "2025-07-21T20:39:06.481Z",
+  "datePublished": "2025-07-22T05:55:46.714Z",
+  "dateModified": "2025-07-22T05:55:46.714Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
@@ -92,7 +92,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
                 </div>
                 
                 
@@ -142,7 +142,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item active" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -152,6 +151,7 @@
         </a>
         <div class="nav-content collapsed" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>

package/html/guides/authentication-guide.html

@@ -58,8 +58,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-21T20:39:06.483Z",
-  "dateModified": "2025-07-21T20:39:06.483Z",
+  "datePublished": "2025-07-22T05:55:46.716Z",
+  "dateModified": "2025-07-22T05:55:46.716Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
@@ -98,7 +98,7 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.5.0">Last updated: Jul 21, 2025, 08:39 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.5.1">Last updated: Jul 22, 2025, 05:55 AM UTC</span>
                 </div>
                 
                 
@@ -148,7 +148,6 @@
         </a>
         <div class="nav-content" >
         <a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
-        <a href="/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
         <a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing and configuring the Vercel CLI across different operating systems and environments."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
         <a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide provides a detailed explanation of every prompt you&#039;ll encounter during the first-time Vercel setup process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
@@ -158,6 +157,7 @@
         </a>
         <div class="nav-content" id="nav-guides-1">
         <a href="/guides/authentication-guide.html" class="nav-item active" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
+        <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>