npm - @knowcode/doc-builder - Versions diffs - 1.1.5 → 1.1.6 - Mend

@knowcode/doc-builder 1.1.5 → 1.1.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -5,6 +5,23 @@ 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

package/lib/core-builder.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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