@knowcode/doc-builder 1.7.6 → 1.8.1

package/html/index.html

@@ -46,6 +46,39 @@
     <link rel="stylesheet" href="/css/notion-style.css">
     
     
+    <!-- Hide content until auth check -->
+    <style>
+      body { 
+        visibility: hidden; 
+        opacity: 0; 
+        transition: opacity 0.3s ease;
+      }
+      body.authenticated { 
+        visibility: visible; 
+        opacity: 1; 
+      }
+      /* Show login/logout pages immediately */
+      body.auth-page {
+        visibility: visible;
+        opacity: 1;
+      }
+      /* Style auth button consistently */
+      .auth-btn {
+        background: none;
+        border: none;
+        color: var(--text-secondary);
+        cursor: pointer;
+        padding: 0.5rem;
+        border-radius: 0.5rem;
+        transition: all 0.2s;
+        font-size: 1.1rem;
+      }
+      .auth-btn:hover {
+        background: var(--bg-secondary);
+        color: var(--text-primary);
+      }
+    </style>
+    
     
     <!-- 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>">
@@ -65,8 +98,8 @@
     "name": "Knowcode Ltd",
     "url": "https://knowcode.tech"
   },
-  "datePublished": "2025-07-25T13:49:06.502Z",
-  "dateModified": "2025-07-25T13:49:06.502Z",
+  "datePublished": "2025-07-26T10:20:52.365Z",
+  "dateModified": "2025-07-26T10:20:52.365Z",
   "mainEntityOfPage": {
     "@type": "WebPage",
     "@id": "https://doc-builder-delta.vercel.app/README.html"
@@ -99,10 +132,14 @@
             
             <div class="header-actions">
                 <div class="deployment-info">
-                    <span class="deployment-date" title="Built with doc-builder v1.7.5">Last updated: Jul 25, 2025, 01:49 PM UTC</span>
+                    <span class="deployment-date" title="Built with doc-builder v1.8.0">Last updated: Jul 26, 2025, 10:20 AM UTC</span>
                 </div>
                 
                 
+                <a href="../login.html" class="auth-btn" title="Login/Logout">
+                    <i class="fas fa-sign-in-alt"></i>
+                </a>
+                
                 
                 <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
                     <i class="fas fa-moon"></i>
@@ -158,31 +195,17 @@
         </a>
         <div class="nav-content" id="nav-guides-1">
         <a href="/guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="fas fa-file-alt"></i> Authentication Default Change</a>
-        <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="🚨 This authentication method has been REMOVED in version 2.0.0 due to serious security flaws."><i class="fas fa-file-alt"></i> Authentication Guide</a>
-        <a href="/guides/cache-control-anti-pattern.html" class="nav-item" data-tooltip="Cache Control Anti-Pattern: Why Aggressive Cache-Busting is Bad for Documentation Sites."><i class="fas fa-file-alt"></i> Cache Control Anti Pattern</a>
+        <a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="fas fa-file-alt"></i> Authentication Guide</a>
         <a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
         <a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
-        <a href="/guides/next-steps-walkthrough.html" class="nav-item" data-tooltip="Now that we&#039;ve implemented Supabase authentication, let&#039;s walk through testing the implementation and preparing for deployment."><i class="fas fa-file-alt"></i> Next Steps Walkthrough</a>
         <a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
+        <a href="/guides/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="fas fa-file-alt"></i> Private Directory Authentication</a>
         <a href="/guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="fas fa-file-alt"></i> Public Site Deployment</a>
         <a href="/guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="fas fa-file-alt"></i> Search Engine Verification Guide</a>
         <a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
         <a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
-        <a href="/guides/supabase-auth-implementation-plan.html" class="nav-item" data-tooltip="Supabase Auth Implementation Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Implementation Plan</a>
-        <a href="/guides/supabase-auth-integration-plan.html" class="nav-item" data-tooltip="Supabase Authentication Integration Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Integration Plan</a>
-        <a href="/guides/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder now supports enterprise-grade authentication through Supabase, replacing the previous insecure basic authentication."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
         <a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a>
-        <a href="/guides/vercel-deployment-auth-setup.html" class="nav-item" data-tooltip="Vercel Deployment Authentication Setup Guide."><i class="fas fa-file-alt"></i> Vercel Deployment Auth Setup</a>
         <a href="/guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
-      <div class="nav-section" data-level="1">
-        <a class="nav-title collapsible expanded" href="/launch/README.html" data-target="nav-launch-1" >
-          <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
-        </a>
-        <div class="nav-content" id="nav-launch-1">
-        <a href="/launch/README.html" class="nav-item" data-tooltip="This directory contains all documentation related to the commercial launch of @knowcode/doc-builder, including go-to-market strategy, platform..."><i class="fas fa-file-alt"></i> Launch Overview</a>
-        <a href="/launch/bubble-plugin-specification.html" class="nav-item" data-tooltip="This document outlines the technical specification for creating a Bubble.io plugin that integrates @knowcode/doc-builder, enabling Bubble developers..."><i class="fas fa-file-alt"></i> Bubble Plugin Specification</a>
-        <a href="/launch/go-to-market-strategy.html" class="nav-item" data-tooltip="Go-to-Market Strategy &amp; Product Launch Plan."><i class="fas fa-file-alt"></i> Go To Market Strategy</a>
-        <a href="/launch/launch-announcements.html" class="nav-item" data-tooltip="This document contains ready-to-use announcement templates for launching @knowcode/doc-builder across various platforms and channels."><i class="fas fa-file-alt"></i> Launch Announcements</a></div></div>
             </nav>
             <div class="resize-handle"></div>
         </aside>
@@ -442,6 +465,7 @@ docBuilder.build({
     };
     </script>
     <script src="/js/main.js"></script>
-    
+    <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
+    <script src="/js/auth.js"></script>
 </body>
 </html>

package/html/js/auth.js

@@ -1,10 +1,7 @@
+
 /**
- * Simple Client-Side Authentication for Documentation
- * This runs on every page load to check authentication
- * 
- * IMPORTANT: This is a basic authentication system suitable for
- * protecting documentation from casual access. For production
- * use with sensitive data, implement server-side authentication.
+ * Supabase Authentication for Documentation Site
+ * Generated by @knowcode/doc-builder
  */
 
 (function() {
@@ -12,56 +9,138 @@
     
     // Skip auth check on login and logout pages
     const currentPage = window.location.pathname;
-    if (currentPage === '/login.html' || currentPage === '/logout.html' || currentPage.includes('login') || currentPage.includes('logout')) {
+    if (currentPage === '/login.html' || currentPage === '/logout.html' || 
+        currentPage.includes('login') || currentPage.includes('logout')) {
         return;
     }
     
-    // Check if user is authenticated
-    function isAuthenticated() {
-        const authToken = getCookie('doc-auth');
-        if (!authToken) return false;
-        
+    // Initialize Supabase client
+    const { createClient } = supabase;
+    const supabaseClient = createClient('https://placeholder.supabase.co', 'placeholder-key', {
+        auth: {
+            persistSession: true,
+            autoRefreshToken: true,
+            detectSessionInUrl: true
+        }
+    });
+    
+    // Check authentication and site access
+    async function checkAuth() {
         try {
-            // Simple token validation - just check if it exists and has expected format
-            // The actual validation happens server-side (or in login page for static sites)
-            const decoded = atob(authToken);
-            return decoded && decoded.includes(':');
+            // Check if current page is in private directory
+            const currentPath = window.location.pathname;
+            const isPrivatePage = currentPath.includes('/private/');
+            
+            // Get current user session
+            const { data: { user }, error: userError } = await supabaseClient.auth.getUser();
+            
+            if (userError || !user) {
+                // Only redirect if we're on a private page
+                if (isPrivatePage) {
+                    redirectToLogin();
+                } else {
+                    // Public page, just show it
+                    document.body.classList.add('authenticated'); // Use same class to show body
+                    updateAuthButton(false);
+                }
+                return;
+            }
+            
+            // Check if user has access to this site
+            const { data: access, error: accessError } = await supabaseClient
+                .from('docbuilder_access')
+                .select('*')
+                .eq('user_id', user.id)
+                .eq('site_id', 'placeholder-site-id')
+                .single();
+            
+            if (accessError || !access) {
+                if (isPrivatePage) {
+                    showAccessDenied();
+                } else {
+                    // Public page, just show it
+                    document.body.classList.add('authenticated');
+                    updateAuthButton(false);
+                }
+                return;
+            }
+            
+            // User is authenticated and has access
+            console.log('User authenticated and authorized');
+            document.body.classList.add('authenticated');
+            updateAuthButton(true);
+            
         } catch (error) {
-            return false;
+            console.error('Auth check failed:', error);
+            if (window.location.pathname.includes('/private/')) {
+                redirectToLogin();
+            } else {
+                // Public page, show it anyway
+                document.body.classList.add('authenticated');
+                updateAuthButton(false);
+            }
         }
     }
     
-    // Get cookie value
-    function getCookie(name) {
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) return parts.pop().split(';').shift();
-        return null;
-    }
-    
-    // Redirect to login if not authenticated
+    // Redirect to login page
     function redirectToLogin() {
         const currentUrl = window.location.pathname + window.location.search;
         const loginUrl = '/login.html' + (currentUrl !== '/' ? '?redirect=' + encodeURIComponent(currentUrl) : '');
         window.location.href = loginUrl;
     }
     
-    // Check authentication on page load
-    if (!isAuthenticated()) {
-        redirectToLogin();
+    // Show access denied message
+    function showAccessDenied() {
+        document.body.classList.add('authenticated'); // Show the body
+        document.body.innerHTML = `
+            <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Inter, sans-serif;">
+                <div style="text-align: center; max-width: 400px;">
+                    <h1 style="color: #ef4444; margin-bottom: 1rem;">Access Denied</h1>
+                    <p style="color: #6b7280; margin-bottom: 2rem;">You don't have permission to view this documentation site.</p>
+                    <a href="/login.html" style="background: #3b82f6; color: white; padding: 0.75rem 1.5rem; border-radius: 0.5rem; text-decoration: none;">Try Different Account</a>
+                </div>
+            </div>
+        `;
     }
     
-    // Add logout functionality to logout buttons
+    // Function to update auth button
+    function updateAuthButton(isAuthenticated) {
+        const authBtn = document.querySelector('.auth-btn');
+        if (authBtn) {
+            const icon = authBtn.querySelector('i');
+            if (icon) {
+                if (isAuthenticated) {
+                    icon.className = 'fas fa-sign-out-alt';
+                    authBtn.title = 'Logout';
+                    authBtn.href = '/logout.html';
+                } else {
+                    icon.className = 'fas fa-sign-in-alt';
+                    authBtn.title = 'Login';
+                    authBtn.href = '/login.html';
+                }
+            }
+        }
+    }
+    
+    // Add auth button functionality
     document.addEventListener('DOMContentLoaded', function() {
-        const logoutLinks = document.querySelectorAll('a[href*="logout"]');
-        logoutLinks.forEach(link => {
-            link.addEventListener('click', function(e) {
-                e.preventDefault();
-                // Clear auth cookie
-                document.cookie = 'doc-auth=; path=/; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-                window.location.href = '/logout.html';
+        const authBtn = document.querySelector('.auth-btn');
+        if (authBtn) {
+            authBtn.addEventListener('click', async function(e) {
+                // Check if we're logged in
+                const { data: { user } } = await supabaseClient.auth.getUser();
+                if (user) {
+                    // Logged in - sign out
+                    e.preventDefault();
+                    await supabaseClient.auth.signOut();
+                    window.location.href = '/logout.html';
+                }
+                // If not logged in, normal navigation to login page will occur
             });
-        });
+        }
     });
     
-})();
+    // Run auth check
+    checkAuth();
+    
+})();

package/html/js/main.js

@@ -665,12 +665,16 @@ document.addEventListener('click', (e) => {
 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
   anchor.addEventListener('click', function (e) {
     e.preventDefault();
-    const target = document.querySelector(this.getAttribute('href'));
-    if (target) {
-      target.scrollIntoView({
-        behavior: 'smooth',
-        block: 'start'
-      });
+    const href = this.getAttribute('href');
+    // Skip if href is just '#' (prevents querySelector error)
+    if (href && href !== '#') {
+      const target = document.querySelector(href);
+      if (target) {
+        target.scrollIntoView({
+          behavior: 'smooth',
+          block: 'start'
+        });
+      }
     }
   });
 });

package/html/login.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Login - Test Documentation</title>
+    <title>Login - @knowcode/doc-builder</title>
     <link rel="stylesheet" href="css/notion-style.css">
     <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
 </head>
 <body class="auth-page">
     <div class="auth-container">
         <div class="auth-box">
-            <h1>Login to Test Documentation</h1>
+            <h1>Login to @knowcode/doc-builder</h1>
             <form id="login-form">
                 <div class="form-group">
                     <label for="email">Email</label>
@@ -32,7 +32,7 @@
     <script>
         // Initialize Supabase
         const { createClient } = supabase;
-        const supabaseClient = createClient('https://xcihhnfcitjrwbynxmka.supabase.co', 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InhjaWhobmZjaXRqcndieW54bWthIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTM0Mzc2MzcsImV4cCI6MjA2OTAxMzYzN30.zvWp3JFIR8fBIiwuFF5gqOR_Kxb42baZS5fsBz60XOY');
+        const supabaseClient = createClient('https://placeholder.supabase.co', 'placeholder-key');
         
         // Handle login form
         document.getElementById('login-form').addEventListener('submit', async function(e) {
@@ -56,7 +56,7 @@
                     .from('docbuilder_access')
                     .select('*')
                     .eq('user_id', data.user.id)
-                    .eq('site_id', '4d8a53bf-dcdd-48c0-98e0-cd1451518735')
+                    .eq('site_id', 'placeholder-site-id')
                     .single();
                 
                 if (accessError || !access) {

package/html/logout.html

@@ -3,14 +3,14 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Logged Out - Test Documentation</title>
+    <title>Logged Out - @knowcode/doc-builder</title>
     <link rel="stylesheet" href="css/notion-style.css">
 </head>
 <body class="auth-page">
     <div class="auth-container">
         <div class="auth-box">
             <h1>You have been logged out</h1>
-            <p>Thank you for using Test Documentation.</p>
+            <p>Thank you for using @knowcode/doc-builder.</p>
             <a href="login.html" class="auth-button">Login Again</a>
         </div>
     </div>