@knowcode/doc-builder 1.1.5 → 1.1.7

package/CHANGELOG.md

@@ -5,6 +5,36 @@ 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.1.7] - 2025-07-19
+
+### Fixed
+- Fixed CSS and JS assets not loading on deployed Vercel sites
+- Changed all asset paths from relative to absolute URLs (/css/, /js/)
+- Fixed missing styling on deployed documentation
+- Corrected asset path resolution for Vercel's static hosting
+
+### Changed
+- All HTML templates now use absolute paths for CSS and JS files
+- Logo links now use absolute paths for consistent navigation
+- Index.html generation uses absolute asset paths
+
+## [1.1.6] - 2025-01-19
+
+### Fixed
+- Fixed missing CSS and JS styling in deployed documentation
+- Corrected relative paths for assets (css/style.css instead of ./css/style.css)
+- Added proper styling to fallback index.html
+- Enhanced index.html with beautiful grid layout when no README exists
+
+### Added
+- Cache headers for CSS and JS files in vercel.json
+- Proper meta tags and viewport settings in generated index files
+- Beautiful card-based layout for documentation listing
+
+### Improved
+- Index.html now uses the same Notion-inspired styling as other pages
+- Better visual consistency across all generated pages
+
 ## [1.1.5] - 2025-01-19
 
 ### Added

package/lib/core-builder.js

@@ -59,7 +59,7 @@ function processMarkdownContent(content) {
 // Generate HTML from template
 function generateHTML(title, content, navigation, currentPath = '', config = {}) {
   const depth = currentPath.split('/').filter(p => p).length;
-  const relativePath = depth > 0 ? '../'.repeat(depth) : './';
+  const relativePath = depth > 0 ? '../'.repeat(depth) : '';
   
   const siteName = config.siteName || 'Documentation';
   const siteDescription = config.siteDescription || 'Documentation site';
@@ -82,7 +82,8 @@ function generateHTML(title, content, navigation, currentPath = '', config = {})
     <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
     
     <!-- Styles -->
-    <link rel="stylesheet" href="${relativePath}css/notion-style.css">
+    <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>">
@@ -91,7 +92,7 @@ function generateHTML(title, content, navigation, currentPath = '', config = {})
     <!-- Header -->
     <header class="header">
         <div class="header-content">
-            <a href="${relativePath}index.html" class="logo">${siteName}</a>
+            <a href="/index.html" class="logo">${siteName}</a>
             
             <div class="header-actions">
                 <div class="deployment-info">
@@ -138,8 +139,8 @@ function generateHTML(title, content, navigation, currentPath = '', config = {})
     </div>
     
     <!-- Scripts -->
-    <script src="${relativePath}js/main.js"></script>
-    ${config.features?.authentication ? `<script src="${relativePath}js/auth.js"></script>` : ''}
+    <script src="/js/main.js"></script>
+    ${config.features?.authentication ? `<script src="/js/auth.js"></script>` : ''}
 </body>
 </html>`;
 }

package/lib/deploy.js

@@ -66,7 +66,27 @@ async function setupVercelProject(config) {
     "installCommand": "",
     "framework": null,
     "cleanUrls": true,
-    "trailingSlash": false
+    "trailingSlash": false,
+    "headers": [
+      {
+        "source": "/css/(.*)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000, immutable"
+          }
+        ]
+      },
+      {
+        "source": "/js/(.*)",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "public, max-age=31536000, immutable"
+          }
+        ]
+      }
+    ]
   };
   
   fs.writeJsonSync(vercelConfigPath, vercelConfig, { spaces: 2 });
@@ -166,6 +186,17 @@ async function deployToVercel(config, isProd = false) {
     throw new Error(`Output directory ${outputPath} does not exist. Run 'doc-builder build' first.`);
   }
   
+  // Check if CSS files exist
+  const cssPath = path.join(outputPath, 'css', 'style.css');
+  if (!fs.existsSync(cssPath)) {
+    console.log(chalk.yellow('\n⚠️  Warning: CSS files not found in output directory!'));
+    console.log(chalk.yellow('   Your documentation may appear without styling.'));
+    console.log(chalk.cyan('\n💡 To fix this:'));
+    console.log(chalk.white('   1. Update to latest version: ') + chalk.gray('npm update @knowcode/doc-builder'));
+    console.log(chalk.white('   2. Rebuild your docs: ') + chalk.gray('npx @knowcode/doc-builder build'));
+    console.log(chalk.white('   3. Then deploy again: ') + chalk.gray('npx @knowcode/doc-builder deploy\n'));
+  }
+  
   // Simple deployment message
   console.log(chalk.blue('\n🚀 Starting deployment to Vercel...'));
   console.log(chalk.gray('This will take a few seconds...\n'));
@@ -181,7 +212,27 @@ async function deployToVercel(config, isProd = false) {
       "installCommand": "",
       "framework": null,
       "cleanUrls": true,
-      "trailingSlash": false
+      "trailingSlash": false,
+      "headers": [
+        {
+          "source": "/css/(.*)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public, max-age=31536000, immutable"
+            }
+          ]
+        },
+        {
+          "source": "/js/(.*)",
+          "headers": [
+            {
+              "key": "Cache-Control",
+              "value": "public, max-age=31536000, immutable"
+            }
+          ]
+        }
+      ]
     };
     fs.writeJsonSync(vercelConfigPath, vercelConfig, { spaces: 2 });
   }
@@ -295,15 +346,20 @@ async function prepareDeployment(config) {
   if (!fs.existsSync(indexPath)) {
     const readmePath = path.join(outputDir, 'README.html');
     if (fs.existsSync(readmePath)) {
-      // Create redirect to README.html
+      // Create redirect to README.html with proper styling
       const redirectHtml = `<!DOCTYPE html>
 <html>
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="refresh" content="0; url=README.html">
   <title>Redirecting...</title>
+  <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
-  <p>Redirecting to <a href="README.html">documentation</a>...</p>
+  <div style="text-align: center; margin-top: 50px;">
+    <p>Redirecting to <a href="README.html">documentation</a>...</p>
+  </div>
 </body>
 </html>`;
       fs.writeFileSync(indexPath, redirectHtml);
@@ -318,25 +374,62 @@ async function prepareDeployment(config) {
         const indexHtml = `<!DOCTYPE html>
 <html>
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Documentation</title>
-  <style>
-    body { font-family: -apple-system, sans-serif; max-width: 800px; margin: 40px auto; padding: 0 20px; }
-    h1 { color: #333; }
-    ul { list-style: none; padding: 0; }
-    li { margin: 10px 0; }
-    a { color: #0066cc; text-decoration: none; }
-    a:hover { text-decoration: underline; }
-  </style>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="stylesheet" href="/css/style.css">
+  <link rel="stylesheet" href="/css/notion-style.css">
 </head>
 <body>
-  <h1>Documentation</h1>
-  <ul>
-    ${htmlFiles.map(file => `<li><a href="${file}">${file.replace('.html', '')}</a></li>`).join('\n    ')}
-  </ul>
+  <div class="navigation">
+    <div class="nav-header">
+      <h2>${config.siteName || 'Documentation'}</h2>
+    </div>
+    <nav>
+      <ul>
+        ${htmlFiles.map(file => {
+          const name = file.replace('.html', '').replace(/-/g, ' ');
+          const capitalizedName = name.split(' ').map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1)
+          ).join(' ');
+          return `<li><a href="${file}"><i class="fas fa-file"></i> ${capitalizedName}</a></li>`;
+        }).join('\n        ')}
+      </ul>
+    </nav>
+  </div>
+  <div class="content">
+    <div class="header">
+      <h1 style="text-align: center; margin: 50px 0;">📚 Documentation</h1>
+    </div>
+    <div class="main-content">
+      <div class="doc-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; padding: 20px;">
+        ${htmlFiles.map(file => {
+          const name = file.replace('.html', '').replace(/-/g, ' ');
+          const capitalizedName = name.split(' ').map(word => 
+            word.charAt(0).toUpperCase() + word.slice(1)
+          ).join(' ');
+          return `
+        <a href="${file}" class="doc-card" style="display: block; padding: 20px; border: 1px solid #e1e4e8; border-radius: 8px; text-decoration: none; color: inherit; transition: all 0.2s;">
+          <h3 style="margin: 0 0 10px 0; color: #0366d6;"><i class="fas fa-file-alt"></i> ${capitalizedName}</h3>
+          <p style="margin: 0; color: #586069; font-size: 14px;">Click to view this documentation</p>
+        </a>`;
+        }).join('')}
+      </div>
+    </div>
+  </div>
+  <script src="/js/main.js"></script>
+  <style>
+    .doc-card:hover {
+      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+      transform: translateY(-2px);
+    }
+  </style>
 </body>
 </html>`;
         fs.writeFileSync(indexPath, indexHtml);
         console.log(chalk.green('✅ Created index.html with file listing'));
+        console.log(chalk.yellow('📌 Remember to rebuild before deploying to see styling!'));
       }
     }
   }

package/package.json

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