@knowcode/doc-builder 1.3.15 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,31 @@ 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.4.0] - 2025-07-20
+
+### Added
+- **Tooltip functionality restored** - Added summary extraction from markdown files
+- Tooltips now appear on hover for navigation items showing content preview
+- `extractSummary()` function looks for Overview/Summary sections or first paragraph
+- Summaries are collected in first pass and added as `data-tooltip` attributes
+
+### Fixed
+- **CSS layout restored to match original** - Reverted all layout changes to original values
+- Header height restored to 64px (was 56px)
+- Main wrapper uses margin-top approach (not absolute positioning)
+- Content uses original padding values (var(--space-6) var(--space-8))
+- Content-inner uses centered layout (margin: 0 auto)
+- Navigation padding restored to all sides
+
+### Removed
+- Removed unused style.css file - only notion-style.css is used
+- Eliminated dual CSS file confusion
+
+### Technical Details
+- Summary extraction matches original build.js implementation
+- Navigation generation passes summaries through recursive renderSection calls
+- Tooltips use same CSS implementation as original with fixed positioning
+
 ## [1.3.14] - 2025-07-20
 
 ### Fixed

package/assets/css/notion-style.css

@@ -125,7 +125,7 @@
   /* Layout */
   --container-padding-mobile: 20px;
   --container-padding-desktop: 40px;
-  --header-height: 56px;
+  --header-height: 64px;
   --breadcrumb-height: 40px;
   --sidebar-width: 280px;
 }
@@ -469,17 +469,15 @@ pre code {
 
 /* Main Wrapper */
 .main-wrapper {
-  position: absolute;
-  top: calc(var(--header-height) + var(--breadcrumb-height));
-  left: 0;
-  right: 0;
-  bottom: 0;
   display: flex;
+  height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
+  margin-top: calc(var(--header-height) + var(--breadcrumb-height));
   overflow: hidden;
 }
 
 .main-wrapper.banner-visible {
-  top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
+  height: calc(100vh - var(--header-height) - var(--breadcrumb-height) - 3.5rem);
+  margin-top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
 }
 
 /* Sidebar */
@@ -530,7 +528,7 @@ pre code {
 /* Navigation */
 .navigation {
   flex: 1;
-  padding: 0 var(--space-2) var(--space-2) var(--space-2); /* No top padding */
+  padding: var(--space-2);
   overflow-y: auto;
   overflow-x: visible;
   
@@ -690,7 +688,7 @@ pre code {
 .content {
   flex: 1;
   margin-left: var(--sidebar-width);
-  padding: var(--space-2) var(--space-8) var(--space-4); /* Reduced top padding */
+  padding: var(--space-6) var(--space-8);
   overflow-y: auto;
   background: var(--color-bg-default);
   transition: margin-left var(--duration-normal);
@@ -698,7 +696,7 @@ pre code {
 
 .content-inner {
   max-width: 65rem;
-  margin: 0; /* Left aligned instead of centered */
+  margin: 0 auto;
 }
 
 /* Tables */
@@ -1032,7 +1030,7 @@ tr:hover {
   
   .content {
     margin-left: 0 !important;
-    padding: var(--space-2) var(--space-4) var(--space-4); /* Reduced top padding */
+    padding: var(--space-6) var(--space-4);
     max-width: 100%;
   }
   
@@ -1660,9 +1658,8 @@ tr:hover {
   }
   
   .main-wrapper {
-    position: relative; /* Change back to relative for mobile */
-    top: 0;
     flex-direction: column;
+    height: auto;
     min-height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
   }
   
@@ -1675,7 +1672,7 @@ tr:hover {
   
   .content {
     margin-left: 0 !important;
-    padding: var(--space-2) var(--space-4) var(--space-4); /* Reduced top padding */
+    padding: var(--space-6) var(--space-4);
     max-width: 100%;
   }
   

package/lib/core-builder.js

@@ -24,6 +24,44 @@ function escapeHtml(text) {
   return text.replace(/[&<>"']/g, m => map[m]);
 }
 
+// Extract summary from markdown content
+function extractSummary(content) {
+  // Look for ## Overview or ## Summary section
+  const overviewMatch = content.match(/##\s+(?:Overview|Summary)\s*\n([\s\S]*?)(?=\n##|$)/i);
+  if (overviewMatch) {
+    // Get first paragraph or up to 200 characters
+    const text = overviewMatch[1].trim();
+    const firstPara = text.split('\n\n')[0];
+    return firstPara.length > 200 ? firstPara.substring(0, 200) + '...' : firstPara;
+  }
+  
+  // Fallback: get first paragraph after title
+  const lines = content.split('\n');
+  let foundContent = false;
+  let summary = '';
+  
+  for (const line of lines) {
+    // Skip title lines
+    if (line.startsWith('#')) continue;
+    // Skip metadata lines
+    if (line.includes('**Generated**:') || line.includes('**Status**:') || line.includes('**Verified**:')) continue;
+    // Skip empty lines until we find content
+    if (!foundContent && line.trim() === '') continue;
+    
+    if (line.trim()) {
+      foundContent = true;
+      summary += line + ' ';
+      if (summary.length > 200) break;
+    } else if (foundContent) {
+      // Found end of first paragraph
+      break;
+    }
+  }
+  
+  summary = summary.trim();
+  return summary.length > 200 ? summary.substring(0, 200) + '...' : summary;
+}
+
 // Process markdown content
 function processMarkdownContent(content) {
   // Convert mermaid code blocks to mermaid divs with titles
@@ -194,7 +232,7 @@ const folderDescriptions = {
 };
 
 // Build navigation structure with rich functionality
-function buildNavigationStructure(files, currentFile) {
+function buildNavigationStructure(files, currentFile, summaries = {}) {
   const tree = { files: [], folders: {} };
   
   files.forEach(file => {
@@ -241,7 +279,7 @@ function buildNavigationStructure(files, currentFile) {
   };
   
   // Helper function to render a section
-  const renderSection = (folderName, folderData, level = 0, parentPath = '') => {
+  const renderSection = (folderName, folderData, level = 0, parentPath = '', summaries = {}) => {
     const icons = {
       'root': 'fas fa-home',
       'product-roadmap': 'fas fa-road',
@@ -318,8 +356,12 @@ function buildNavigationStructure(files, currentFile) {
       
       const linkPath = '/' + file.urlPath;
       
+      // Get summary for tooltip
+      const summary = summaries[file.urlPath] || '';
+      const tooltipAttr = summary ? `data-tooltip="${escapeHtml(summary)}"` : '';
+      
       html += `
-        <a href="${linkPath}" class="nav-item${isActive}"><i class="fas fa-file-alt"></i> ${title}</a>`;
+        <a href="${linkPath}" class="nav-item${isActive}" ${tooltipAttr}><i class="fas fa-file-alt"></i> ${title}</a>`;
     });
     
     html += `</div></div>`;
@@ -330,7 +372,7 @@ function buildNavigationStructure(files, currentFile) {
       .forEach(subFolder => {
         // Build the path for the subfolder including current folder
         const currentPath = parentPath ? `${parentPath}-${folderName}` : folderName;
-        html += renderSection(subFolder, folderData.folders[subFolder], level + 1, currentPath);
+        html += renderSection(subFolder, folderData.folders[subFolder], level + 1, currentPath, summaries);
       });
     
     return html;
@@ -341,14 +383,14 @@ function buildNavigationStructure(files, currentFile) {
   
   if (!hasFolders) {
     // Generate simple flat navigation for all files in root
-    return renderSection('root', { files: tree.files, folders: {} }, 0);
+    return renderSection('root', { files: tree.files, folders: {} }, 0, '', summaries);
   } else {
     // Generate hierarchical navigation
     let nav = '';
     
     // Render root files first
     if (tree.files.length > 0) {
-      nav += renderSection('root', { files: tree.files, folders: {} }, 0);
+      nav += renderSection('root', { files: tree.files, folders: {} }, 0, '', summaries);
     }
     
     // Add other top-level folders in logical order
@@ -371,7 +413,7 @@ function buildNavigationStructure(files, currentFile) {
     
     folderOrder.forEach(folderName => {
       if (tree.folders[folderName]) {
-        nav += renderSection(folderName, tree.folders[folderName], 1);
+        nav += renderSection(folderName, tree.folders[folderName], 1, '', summaries);
         delete tree.folders[folderName]; // Remove so we don't render it again
       }
     });
@@ -380,7 +422,7 @@ function buildNavigationStructure(files, currentFile) {
     Object.keys(tree.folders)
       .sort()
       .forEach(folderName => {
-        nav += renderSection(folderName, tree.folders[folderName], 1);
+        nav += renderSection(folderName, tree.folders[folderName], 1, '', summaries);
       });
     
     return nav;
@@ -388,7 +430,7 @@ function buildNavigationStructure(files, currentFile) {
 }
 
 // Process single markdown file
-async function processMarkdownFile(filePath, outputPath, allFiles, config) {
+async function processMarkdownFile(filePath, outputPath, allFiles, config, summaries = {}) {
   const content = await fs.readFile(filePath, 'utf-8');
   const fileName = path.basename(filePath, '.md');
   const relativePath = path.relative(config.docsDir, filePath);
@@ -402,7 +444,7 @@ async function processMarkdownFile(filePath, outputPath, allFiles, config) {
   const htmlContent = processMarkdownContent(content);
   
   // Build navigation
-  const navigation = buildNavigationStructure(allFiles, urlPath);
+  const navigation = buildNavigationStructure(allFiles, urlPath, summaries);
   
   // Generate full HTML
   const html = generateHTML(title, htmlContent, navigation, urlPath, config);
@@ -470,10 +512,21 @@ async function buildDocumentation(config) {
     });
   }
   
+  // First pass: collect summaries
+  console.log(chalk.blue('📊 Extracting summaries...'));
+  const summaries = {};
+  for (const file of files) {
+    const content = await fs.readFile(file.path, 'utf-8');
+    const summary = extractSummary(content);
+    if (summary) {
+      summaries[file.urlPath] = summary;
+    }
+  }
+  
   console.log(chalk.blue('📝 Processing files...'));
   for (const file of files) {
     const outputPath = path.join(outputDir, file.urlPath);
-    await processMarkdownFile(file.path, outputPath, files, config);
+    await processMarkdownFile(file.path, outputPath, files, config, summaries);
     console.log(chalk.green(`✅ Generated: ${outputPath}`));
   }
   

package/package.json

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