@knowcode/doc-builder 1.1.4 → 1.1.6

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.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
+- Clear explanation of Vercel URLs after deployment
+- Shows permanent production URL (e.g., gasworld.vercel.app)
+- Explains the difference between production and preview URLs
+- Better post-deployment messaging
+
+### Improved
+- Deployment success message now shows both URLs clearly
+- Production URL is highlighted as the one to share
+- Preview URL is explained as deployment-specific
+
 ## [1.1.4] - 2025-01-19
 
 ### Fixed

package/cli.js

@@ -319,7 +319,28 @@ ${chalk.yellow('Troubleshooting:')}
       // Default to production deployment
       const isProduction = options.prod !== false;  // Default true unless explicitly --no-prod
       const url = await deployToVercel(config, isProduction);
-      spinner.succeed(`Deployed successfully! ${chalk.cyan(url)}`);
+      spinner.succeed(`Deployed successfully!`);
+      
+      // Extract project name from URL
+      const projectName = url.match(/https:\/\/([^-]+)/)?.[1] || 'your-project';
+      
+      console.log(chalk.green('\n✅ Deployment Complete!\n'));
+      
+      if (isProduction) {
+        console.log(chalk.yellow('🌐 Your documentation is live at:'));
+        console.log(chalk.cyan.bold(`   ${projectName}.vercel.app`) + chalk.gray(' (Production URL - share this!)'));
+        console.log();
+        console.log(chalk.gray('This deployment also created a unique preview URL:'));
+        console.log(chalk.gray(`   ${url}`));
+        console.log(chalk.gray('   (This URL is specific to this deployment)'));
+      } else {
+        console.log(chalk.yellow('🔍 Preview deployment created at:'));
+        console.log(chalk.cyan(`   ${url}`));
+        console.log();
+        console.log(chalk.gray('To deploy to production, run:'));
+        console.log(chalk.gray('   npx @knowcode/doc-builder deploy'));
+      }
+      console.log();
       
     } catch (error) {
       spinner.fail('Deployment failed');
@@ -510,7 +531,19 @@ program
       
       // Default to production deployment
       const url = await deployToVercel(config, true);
-      deploySpinner.succeed(`Deployed successfully! ${chalk.cyan(url)}`);
+      deploySpinner.succeed(`Deployed successfully!`);
+      
+      // Extract project name from URL
+      const projectName = url.match(/https:\/\/([^-]+)/)?.[1] || 'your-project';
+      
+      console.log(chalk.green('\n✅ Deployment Complete!\n'));
+      console.log(chalk.yellow('🌐 Your documentation is live at:'));
+      console.log(chalk.cyan.bold(`   ${projectName}.vercel.app`) + chalk.gray(' (Production URL - share this!)'));
+      console.log();
+      console.log(chalk.gray('This deployment also created a unique preview URL:'));
+      console.log(chalk.gray(`   ${url}`));
+      console.log(chalk.gray('   (This URL is specific to this deployment)'));
+      console.log();
       
     } catch (error) {
       console.error(chalk.red('\nError: ' + error.message));

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';

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 });
@@ -181,7 +201,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 +335,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,21 +363,57 @@ 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);

package/package.json

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