@knowcode/doc-builder 1.1.12 → 1.2.1

package/CHANGELOG.md

@@ -5,6 +5,69 @@ 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.2.1] - 2025-07-19
+
+### Added
+- **Auto-generated README.md** - System now automatically creates a helpful placeholder README.md when missing
+- Comprehensive placeholder content with getting started guide and documentation standards
+- Clear instructions for users on how to customize their documentation
+- Built-in Mermaid diagram example in generated README
+- Documentation structure recommendations and best practices
+
+### Fixed
+- **Eliminated ugly file listing** on index page when no README exists
+- Improved first-time user experience with welcoming placeholder content
+- Better guidance for documentation creation and organization
+
+### Changed
+- Simplified deployment logic - removed complex HTML file listing generation
+- Build process now checks and creates README.md before scanning files
+- Deploy process simplified since README.html will always exist
+
+### Technical Improvements
+- Added `createPlaceholderReadme()` function to core-builder.js
+- Integrated README generation into main build workflow
+- Enhanced build logging to show when placeholder is generated
+- Exported new function for potential external usage
+
+## [1.2.0] - 2025-07-19
+
+### Added (MAJOR FEATURE RELEASE)
+- **Complete feature parity** with original JUNO documentation system
+- **Preview banner** with dismissible functionality and localStorage
+- **Breadcrumb navigation** automatically generated from URL structure
+- **Advanced sidebar** with filter/search functionality
+- **Hierarchical navigation** with collapsible folders and proper icons
+- **Rich tooltip system** with folder descriptions and hover information
+- **Resize handle** for adjustable sidebar width
+- **Icon mapping** for different content types and folders
+- **Folder descriptions** for better UX and navigation
+- **Logical folder ordering** (strategic content first, technical content later)
+
+### Enhanced Navigation Features
+- **Smart folder detection** and hierarchical structuring
+- **Active section auto-expansion** for current page context
+- **Collapsible navigation sections** with smooth animations
+- **File type icons** (documents, folders, special content types)
+- **Improved file naming** and title generation
+- **README.md as folder overviews** with proper linking
+- **Filter/search** through navigation items
+
+### Layout Improvements
+- **Complete layout restructure** matching original design
+- **Fixed positioning** for banner, breadcrumbs, and sidebar
+- **Responsive design** with mobile-friendly collapsible layout
+- **Proper content area** with max-width and centered layout
+- **Smooth transitions** and hover effects throughout
+- **Dark mode support** for all new components
+
+### Technical Enhancements
+- **Rich HTML structure** with semantic navigation
+- **CSS Grid and Flexbox** layout system
+- **Modern CSS variables** and consistent spacing
+- **Optimized mobile experience** with adaptive layouts
+- **Performance optimized** animations and transitions
+
 ## [1.1.12] - 2025-07-19
 
 ### Fixed (MAJOR)

package/assets/css/notion-style.css

@@ -372,32 +372,194 @@ pre code {
   font-size: var(--text-sm);
 }
 
-/* Layout Container */
-.container {
+/* Preview Banner */
+.preview-banner {
+  background: var(--color-accent-yellow-bg);
+  border-bottom: 1px solid var(--color-accent-yellow);
+  color: var(--color-text-primary);
+  padding: var(--space-2) 0;
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  transition: transform var(--duration-normal);
+}
+
+.preview-banner.hidden {
+  transform: translateY(-100%);
+}
+
+.banner-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 0 var(--space-4);
+}
+
+.banner-icon {
+  color: var(--color-accent-yellow);
+  font-size: var(--text-sm);
+}
+
+.banner-text {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.banner-dismiss {
+  background: none;
+  border: none;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  padding: var(--space-1);
+  margin-left: auto;
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-fast);
+}
+
+.banner-dismiss:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+/* Breadcrumbs */
+.breadcrumbs {
+  background: var(--color-bg-default);
+  border-bottom: 1px solid var(--color-border-default);
+  padding: var(--space-2) 0;
+  position: fixed;
+  top: calc(var(--header-height) + 3.5rem);
+  left: 0;
+  right: 0;
+  z-index: 900;
+  transition: top var(--duration-normal);
+}
+
+.breadcrumbs.banner-visible {
+  top: calc(var(--header-height) + 3.5rem);
+}
+
+.breadcrumbs:not(.banner-visible) {
+  top: var(--header-height);
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  padding: var(--space-1) var(--space-2);
+  border-radius: var(--radius-sm);
+  transition: all var(--duration-fast);
+}
+
+.breadcrumb-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.breadcrumb-item.current {
+  color: var(--color-text-primary);
+  font-weight: var(--font-medium);
+}
+
+.breadcrumb-separator {
+  color: var(--color-text-tertiary);
+  font-size: var(--text-xs);
+  margin: 0 var(--space-1);
+}
+
+/* Main Wrapper */
+.main-wrapper {
   display: flex;
-  height: calc(100vh - var(--header-height));
+  height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
+  margin-top: calc(var(--header-height) + var(--breadcrumb-height));
   overflow: hidden;
 }
 
-/* Navigation */
-.navigation {
+.main-wrapper.banner-visible {
+  height: calc(100vh - var(--header-height) - var(--breadcrumb-height) - 3.5rem);
+  margin-top: calc(var(--header-height) + var(--breadcrumb-height) + 3.5rem);
+}
+
+/* Sidebar */
+.sidebar {
   width: var(--sidebar-width);
   background: var(--color-bg-secondary);
   border-right: 1px solid var(--color-border-default);
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.sidebar-header {
+  padding: var(--space-3);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.filter-box {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.filter-input {
+  width: 100%;
+  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  background: var(--color-bg-default);
+  color: var(--color-text-primary);
+  font-size: var(--text-sm);
+  transition: all var(--duration-fast);
+}
+
+.filter-input:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: 0 0 0 2px var(--color-accent-blue-bg);
+}
+
+.filter-icon {
+  position: absolute;
+  right: var(--space-3);
+  color: var(--color-text-tertiary);
+  pointer-events: none;
+}
+
+/* Navigation */
+.navigation {
+  flex: 1;
   padding: var(--space-2);
   overflow-y: auto;
   overflow-x: visible;
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  height: calc(100vh - var(--header-height));
-  z-index: 100;
   
   /* Scrollbar styling */
   scrollbar-width: thin;
   scrollbar-color: var(--color-border-default) transparent;
 }
 
+.resize-handle {
+  width: 4px;
+  background: transparent;
+  cursor: col-resize;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transition: background var(--duration-fast);
+}
+
+.resize-handle:hover {
+  background: var(--color-border-focus);
+}
+
 .navigation::-webkit-scrollbar {
   width: 6px;
 }
@@ -543,15 +705,14 @@ pre code {
 
 .content {
   flex: 1;
-  margin-left: var(--sidebar-width);
   padding: var(--space-6) var(--space-8);
   overflow-y: auto;
-  height: calc(100vh - var(--header-height));
-  max-width: none;
+  background: var(--color-bg-default);
 }
 
 .content-inner {
   max-width: 65rem;
+  margin: 0 auto;
 }
 
 /* Tables */
@@ -1474,70 +1635,124 @@ tr:hover {
     display: none;
   }
   
-  .container {
+  .main-wrapper {
     flex-direction: column;
+    height: auto;
+    min-height: calc(100vh - var(--header-height) - var(--breadcrumb-height));
   }
   
-  .navigation {
-    position: relative;
+  .sidebar {
     width: 100%;
-    height: auto;
-    max-height: 200px;
-    top: 0;
-    left: 0;
+    max-height: 250px;
     border-right: none;
     border-bottom: 1px solid var(--color-border-default);
   }
   
   .content {
-    margin-left: 0;
-    height: auto;
-    min-height: calc(100vh - var(--header-height) - 200px);
+    padding: var(--space-4);
+  }
+  
+  .content-inner {
+    max-width: none;
+  }
+  
+  .preview-banner {
+    position: relative;
+    top: 0;
+  }
+  
+  .breadcrumbs {
+    position: relative;
+    top: 0;
   }
 }
 
-/* Navigation: Enhanced for all structures */
-.nav-item {
-  margin-bottom: var(--space-0-5);
+/* Navigation Sections */
+.nav-section {
+  margin-bottom: var(--space-1);
 }
 
-.nav-item .nav-link {
-  display: block;
-  padding: var(--space-1) var(--space-2);
-  color: var(--color-text-secondary);
+.nav-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-2);
+  color: var(--color-text-primary);
   text-decoration: none;
-  border-radius: var(--border-radius-md);
-  transition: all 0.2s ease;
   font-size: var(--text-sm);
-  font-weight: 400;
+  font-weight: var(--font-medium);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+  cursor: pointer;
 }
 
-.nav-item .nav-link:hover {
+.nav-title:hover {
   background: var(--color-bg-hover);
-  color: var(--color-text-primary);
 }
 
-.nav-item.active .nav-link,
-.nav-item .nav-link.active {
-  background: var(--color-accent-blue-bg);
-  color: var(--color-accent-blue);
-  font-weight: 500;
+.nav-title.collapsible {
+  position: relative;
 }
 
-/* Ensure nav sections are visible and functional */
-.nav-section {
-  margin-bottom: var(--space-1);
+.nav-title .collapse-icon {
+  transition: transform var(--duration-fast);
+  color: var(--color-text-tertiary);
+  font-size: var(--text-xs);
+}
+
+.nav-title.expanded .collapse-icon {
+  transform: rotate(90deg);
 }
 
 .nav-content {
-  padding-left: var(--space-2);
+  padding-left: var(--space-4);
+  overflow: hidden;
+  transition: max-height var(--duration-normal), opacity var(--duration-normal);
 }
 
-/* Override any conflicting styles */
-.navigation .nav-section .nav-content {
-  display: block;
+.nav-content.collapsed {
+  max-height: 0;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.navigation .nav-section .nav-content.collapsed {
-  display: none;
+.nav-content:not(.collapsed) {
+  max-height: 1000px;
+  opacity: 1;
+}
+
+/* Navigation Items */
+.nav-item {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1-5) var(--space-2);
+  color: var(--color-text-secondary);
+  text-decoration: none;
+  font-size: var(--text-sm);
+  border-radius: var(--radius-md);
+  transition: all var(--duration-fast);
+  margin-bottom: var(--space-0-5);
+}
+
+.nav-item:hover {
+  background: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.nav-item.active {
+  background: var(--color-accent-blue-bg);
+  color: var(--color-accent-blue);
+  font-weight: var(--font-medium);
+}
+
+.nav-item i {
+  color: var(--color-text-tertiary);
+  font-size: var(--text-xs);
+  width: 12px;
+  text-align: center;
+}
+
+.nav-item.active i {
+  color: var(--color-accent-blue);
 }