@knowcode/doc-builder 1.3.10 → 1.3.12

package/CHANGELOG.md

@@ -5,6 +5,39 @@ 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.3.12] - 2025-07-19
+
+### Fixed
+- Fixed tooltip positioning by using `position: fixed` to match original implementation
+- Updated tooltip JavaScript to match simpler original approach
+- Fixed content-inner wrapper already present in HTML generation
+- Improved tooltip initialization with console logging for debugging
+
+### Technical Details
+- Tooltips now use fixed positioning with CSS variables for placement
+- Simplified event handling for tooltip hover events
+- Added debug logging to help diagnose tooltip initialization issues
+- Content structure matches original with proper content-inner wrapper
+
+## [1.3.11] - 2025-07-19
+
+### Fixed
+- **CRITICAL FIX**: Removed duplicate CSS file loading that was causing style conflicts
+- Now only loads `notion-style.css` matching the original working build
+- This fixes both tooltip functionality and spacing issues
+
+### Root Cause
+- The npm package was loading both `notion-style.css` AND `style.css`
+- The `style.css` file was overriding proper styles from `notion-style.css`
+- This caused spacing conflicts and broke tooltip positioning
+- The original cybersolstice build only loads `notion-style.css`
+
+### Impact
+- Tooltips now work correctly with proper positioning
+- Navigation spacing matches the original design
+- No more CSS variable conflicts between themes
+- Consistent styling throughout the application
+
 ## [1.3.10] - 2025-07-19
 
 ### Fixed

package/assets/css/notion-style.css

@@ -690,17 +690,7 @@ pre code {
 }
 
 /* Main Content */
-.main-wrapper {
-  display: flex;
-  padding-top: calc(var(--header-height) + var(--breadcrumb-height));
-  min-height: 100vh;
-  transition: padding-top var(--duration-normal);
-}
-
-/* Adjust layout when banner is visible */
-.main-wrapper.banner-visible {
-  padding-top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
-}
+/* Removed duplicate .main-wrapper - using the one defined earlier */
 
 .content {
   flex: 1;

package/assets/js/main.js

@@ -1332,33 +1332,24 @@ function generateBreadcrumbs() {
 
 // Initialize tooltip positioning for navigation items
 function initTooltips() {
-  // Use event delegation for better performance and dynamic content support
-  const navigation = document.querySelector('.navigation');
-  if (!navigation) return;
+  const tooltipElements = document.querySelectorAll('[data-tooltip]');
+  console.log('[Tooltips] Found', tooltipElements.length, 'elements with tooltips');
   
-  navigation.addEventListener('mouseenter', function(e) {
-    const tooltipElement = e.target.closest('[data-tooltip]');
-    if (!tooltipElement) return;
-    
-    const rect = tooltipElement.getBoundingClientRect();
-    const tooltipText = tooltipElement.getAttribute('data-tooltip');
-    
-    // Position the tooltip using CSS variables
-    // Tooltip appears to the right of the element with 10px gap
-    const leftPos = rect.right + 10;
-    const topPos = rect.top + rect.height / 2;
-    
-    tooltipElement.style.setProperty('--tooltip-left', `${leftPos}px`);
-    tooltipElement.style.setProperty('--tooltip-top', `${topPos}px`);
-  }, true); // Use capture phase
-  
-  navigation.addEventListener('mouseleave', function(e) {
-    const tooltipElement = e.target.closest('[data-tooltip]');
-    if (!tooltipElement) return;
+  tooltipElements.forEach(element => {
+    element.addEventListener('mouseenter', function(e) {
+      const rect = element.getBoundingClientRect();
+      
+      // Position the tooltip using CSS variables
+      element.style.setProperty('--tooltip-left', `${rect.right + 10}px`);
+      element.style.setProperty('--tooltip-top', `${rect.top + rect.height / 2}px`);
+      console.log('[Tooltip] Positioned at:', rect.right + 10, rect.top + rect.height / 2);
+    });
     
-    tooltipElement.style.removeProperty('--tooltip-left');
-    tooltipElement.style.removeProperty('--tooltip-top');
-  }, true); // Use capture phase
+    element.addEventListener('mouseleave', function(e) {
+      element.style.removeProperty('--tooltip-left');
+      element.style.removeProperty('--tooltip-top');
+    });
+  });
 }
 
 // Initialize on DOM Load

package/lib/core-builder.js

@@ -83,7 +83,6 @@ function generateHTML(title, content, navigation, currentPath = '', config = {})
     
     <!-- Styles -->
     <link rel="stylesheet" href="/css/notion-style.css">
-    <link rel="stylesheet" href="/css/style.css">
     
     <!-- Favicon -->
     <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>📚</text></svg>">
@@ -821,7 +820,6 @@ async function createDefaultIndexPage(outputDir, config, version) {
     <title>Welcome to ${siteName}</title>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/css/notion-style.css">
-    <link rel="stylesheet" href="/css/style.css">
     <style>
       .welcome-container {
         max-width: 800px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowcode/doc-builder",
-  "version": "1.3.10",
+  "version": "1.3.12",
   "description": "Reusable documentation builder for markdown-based sites with Vercel deployment support",
   "main": "index.js",
   "bin": {