@knowcode/doc-builder 1.9.1 → 1.9.2

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 (43) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/README.md +1 -0
  3. package/html/README.html +150 -33
  4. package/html/css/notion-style.css +394 -13
  5. package/html/documentation-index.html +128 -10
  6. package/html/guides/authentication-default-change.html +131 -7
  7. package/html/guides/authentication-guide.html +142 -19
  8. package/html/guides/claude-workflow-guide.html +138 -22
  9. package/html/guides/documentation-standards.html +134 -11
  10. package/html/guides/html-embedding-guide.html +450 -0
  11. package/html/guides/image-modal-guide.html +133 -10
  12. package/html/guides/phosphor-icons-guide.html +151 -27
  13. package/html/guides/private-directory-authentication.html +131 -7
  14. package/html/guides/public-site-deployment.html +131 -7
  15. package/html/guides/search-engine-verification-guide.html +131 -7
  16. package/html/guides/seo-guide.html +131 -7
  17. package/html/guides/seo-optimization-guide.html +160 -38
  18. package/html/guides/troubleshooting-guide.html +142 -19
  19. package/html/guides/windows-setup-guide.html +162 -38
  20. package/html/image-modal-test.html +126 -8
  21. package/html/index.html +150 -33
  22. package/html/js/auth.js +118 -39
  23. package/html/js/main.js +259 -25
  24. package/html/private/cache-control-anti-pattern.html +136 -12
  25. package/html/private/launch/README.html +145 -15
  26. package/html/private/launch/auth-cleanup-summary.html +154 -24
  27. package/html/private/launch/bubble-plugin-specification.html +137 -7
  28. package/html/private/launch/go-to-market-strategy.html +139 -9
  29. package/html/private/launch/launch-announcements.html +153 -24
  30. package/html/private/launch/vercel-deployment-auth-setup.html +139 -9
  31. package/html/private/next-steps-walkthrough.html +138 -14
  32. package/html/private/supabase-auth-implementation-completed.html +144 -21
  33. package/html/private/supabase-auth-implementation-plan.html +137 -14
  34. package/html/private/supabase-auth-integration-plan.html +143 -21
  35. package/html/private/supabase-auth-setup-guide.html +140 -16
  36. package/html/private/test-private-doc.html +131 -7
  37. package/html/private/user-management-tooling.html +131 -7
  38. package/html/prompts/markdown-document-standards.html +135 -12
  39. package/html/sitemap.xml +58 -46
  40. package/html/vercel-cli-setup-guide.html +129 -11
  41. package/html/vercel-first-time-setup-guide.html +126 -8
  42. package/lib/config.js +2 -0
  43. package/package.json +1 -1
package/html/guides/authentication-guide.html CHANGED
@@ -3,14 +3,41 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Beautiful documentation with the least effort possible">
7
- <title>Authentication Guide for @knowcode/doc-builder - @knowcode/doc-builder</title>
6
+ <meta name="description" content="&gt; 🎉 Update v1.8.2: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.">
7
+ <title>Authentication Guide for @knowcode/doc-builder</title>
8
+
9
+ <meta name="author" content="Lindsay Smith">
10
+ <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, supabase, authentication">
11
+ <meta name="robots" content="index, follow">
12
+ <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/authentication-guide.html">
13
+
14
+ <!-- Open Graph / Facebook -->
15
+ <meta property="og:type" content="article">
16
+ <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/authentication-guide.html">
17
+ <meta property="og:title" content="Authentication Guide for @knowcode/doc-builder">
18
+ <meta property="og:description" content="&gt; 🎉 Update v1.8.2: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.">
19
+ <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
20
+ <meta property="og:site_name" content="@knowcode/doc-builder">
21
+ <meta property="og:locale" content="en_US">
22
+
23
+ <!-- Twitter Card -->
24
+ <meta name="twitter:card" content="summary_large_image">
25
+ <meta name="twitter:site" content="@planbbackups">
26
+ <meta name="twitter:creator" content="@planbbackups">
27
+ <meta name="twitter:title" content="Authentication Guide for @knowcode/doc-builder">
28
+ <meta name="twitter:description" content="&gt; 🎉 Update v1.8.2: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.">
29
+ <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
30
+
31
+ <!-- Custom Meta Tags -->
32
+ <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
33
+ <meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
8
34
 
9
35
  <!-- Fonts -->
10
36
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
11
37
 
12
38
  <!-- Icons -->
13
39
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
40
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
14
41
 
15
42
  <!-- Mermaid -->
16
43
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
@@ -18,8 +45,90 @@
18
45
  <!-- Styles -->
19
46
  <link rel="stylesheet" href="/css/notion-style.css">
20
47
 
48
+
49
+ <!-- Hide content until auth check -->
50
+ <style>
51
+ body {
52
+ visibility: hidden;
53
+ opacity: 0;
54
+ transition: opacity 0.3s ease;
55
+ }
56
+ body.authenticated {
57
+ visibility: visible;
58
+ opacity: 1;
59
+ }
60
+ /* Show login/logout pages immediately */
61
+ body.auth-page {
62
+ visibility: visible;
63
+ opacity: 1;
64
+ }
65
+ /* Style auth button consistently */
66
+ .auth-btn {
67
+ background: none;
68
+ border: none;
69
+ color: var(--text-secondary);
70
+ cursor: pointer;
71
+ padding: 0.5rem;
72
+ border-radius: 0.5rem;
73
+ transition: all 0.2s;
74
+ font-size: 1.1rem;
75
+ }
76
+ .auth-btn:hover {
77
+ background: var(--bg-secondary);
78
+ color: var(--text-primary);
79
+ }
80
+ </style>
81
+
82
+
21
83
  <!-- Favicon -->
22
- <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>">
84
+ <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>">
85
+
86
+ <script type="application/ld+json">
87
+ {
88
+ "@context": "https://schema.org",
89
+ "@type": "TechArticle",
90
+ "headline": "Authentication Guide for @knowcode/doc-builder",
91
+ "description": "> 🎉 Update v1.8.2: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.",
92
+ "author": {
93
+ "@type": "Person",
94
+ "name": "Lindsay Smith"
95
+ },
96
+ "publisher": {
97
+ "@type": "Organization",
98
+ "name": "Knowcode Ltd",
99
+ "url": "https://knowcode.tech"
100
+ },
101
+ "datePublished": "2025-07-28T10:31:53.188Z",
102
+ "dateModified": "2025-07-28T10:31:53.188Z",
103
+ "mainEntityOfPage": {
104
+ "@type": "WebPage",
105
+ "@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
106
+ },
107
+ "breadcrumb": {
108
+ "@type": "BreadcrumbList",
109
+ "itemListElement": [
110
+ {
111
+ "@type": "ListItem",
112
+ "position": 1,
113
+ "name": "@knowcode/doc-builder",
114
+ "item": "https://doc-builder-delta.vercel.app"
115
+ },
116
+ {
117
+ "@type": "ListItem",
118
+ "position": 2,
119
+ "name": "Guides",
120
+ "item": "https://doc-builder-delta.vercel.app/guides/"
121
+ },
122
+ {
123
+ "@type": "ListItem",
124
+ "position": 3,
125
+ "name": "Authentication Guide",
126
+ "item": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
127
+ }
128
+ ]
129
+ }
130
+ }
131
+ </script>
23
132
  </head>
24
133
  <body>
25
134
  <!-- Header -->
@@ -29,10 +138,14 @@
29
138
 
30
139
  <div class="header-actions">
31
140
  <div class="deployment-info">
32
- <span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
141
+ <span class="deployment-date" title="Built with doc-builder v1.9.1">Last updated: Jul 28, 2025, 10:31 AM UTC</span>
33
142
  </div>
34
143
 
35
144
 
145
+ <a href="../../login.html" class="auth-btn" title="Login/Logout">
146
+ <i class="fas fa-sign-in-alt"></i>
147
+ </a>
148
+
36
149
 
37
150
  <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
38
151
  <i class="fas fa-moon"></i>
@@ -92,6 +205,7 @@
92
205
  <a href="/guides/authentication-guide.html" class="nav-item active" 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>
93
206
  <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>
94
207
  <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>
208
+ <a href="/guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="fas fa-file-alt"></i> Html Embedding Guide</a>
95
209
  <a href="/guides/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="fas fa-file-alt"></i> Image Modal Guide</a>
96
210
  <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>
97
211
  <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>
@@ -101,7 +215,7 @@
101
215
  <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>
102
216
  <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>
103
217
  <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>
104
- <div class="nav-section" data-level="1">
218
+ <div class="nav-section private-nav" data-level="1">
105
219
  <a class="nav-title collapsible" href="#" data-target="nav-private-1" >
106
220
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
107
221
  </a>
@@ -114,7 +228,7 @@
114
228
  <a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
115
229
  <a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a>
116
230
  <a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="fas fa-file-alt"></i> User Management Tooling</a></div></div>
117
- <div class="nav-section" data-level="2">
231
+ <div class="nav-section private-nav" data-level="2">
118
232
  <a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
119
233
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
120
234
  </a>
@@ -140,21 +254,20 @@
140
254
  <div class="content-inner">
141
255
  <h1>Authentication Guide for @knowcode/doc-builder</h1>
142
256
  <blockquote>
143
- <p><strong>🎉 Update v1.8.2</strong>: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.</p>
257
+ <p><strong><i class="ph ph-confetti" aria-label="party"></i> Update v1.8.2</strong>: Supabase credentials are now automatically configured! No manual setup needed - just enable authentication and add users to the database.</p>
144
258
  </blockquote>
145
259
  <h2>Overview</h2>
146
260
  <p>@knowcode/doc-builder supports enterprise-grade authentication through <strong>Supabase</strong> - a secure, scalable authentication platform. This guide explains how to protect your documentation with proper user authentication and access control.</p>
147
261
  <h2>Why Supabase?</h2>
148
262
  <ul>
149
- <li>🔐 <strong>Enterprise Security</strong>: JWT tokens, bcrypt password hashing, Row Level Security</li>
150
- <li>👥 <strong>Multi-User Support</strong>: Unlimited users with fine-grained access control</li>
263
+ <li><i class="ph ph-lock-key" aria-label="secure"></i> <strong>Enterprise Security</strong>: JWT tokens, bcrypt password hashing, Row Level Security</li>
264
+ <li><i class="ph ph-users" aria-label="team"></i> <strong>Multi-User Support</strong>: Unlimited users with fine-grained access control</li>
151
265
  <li>🌍 <strong>Scalable</strong>: Built on PostgreSQL, handles millions of users</li>
152
- <li>🔄 <strong>Real-time</strong>: Live updates when permissions change</li>
153
- <li>💰 <strong>Generous Free Tier</strong>: 50,000 monthly active users free</li>
266
+ <li><i class="ph ph-arrows-clockwise" aria-label="refresh"></i> <strong>Real-time</strong>: Live updates when permissions change</li>
267
+ <li><i class="ph ph-money" aria-label="money"></i> <strong>Generous Free Tier</strong>: 50,000 monthly active users free</li>
154
268
  </ul>
155
269
  <h2>How It Works</h2>
156
270
  <div class="mermaid-wrapper">
157
- <div class="mermaid-title">Diagram</div>
158
271
  <div class="mermaid">graph TD
159
272
  A[User visits page] --> B{Has JWT Token?}
160
273
  B -->|No| C[Redirect to login]
@@ -271,12 +384,12 @@ npx @knowcode/doc-builder auth:list-users --site-id xxx
271
384
  <h2>Security Features</h2>
272
385
  <h3>What Supabase Provides</h3>
273
386
  <ul>
274
- <li>✅ <strong>JWT Authentication</strong>: Industry-standard secure tokens</li>
275
- <li>✅ <strong>Password Hashing</strong>: bcrypt with salt</li>
276
- <li>✅ <strong>Row Level Security</strong>: Database-level access control</li>
277
- <li>✅ <strong>Session Management</strong>: Automatic token refresh</li>
278
- <li>✅ <strong>Multi-Factor Auth</strong>: Optional 2FA support</li>
279
- <li>✅ <strong>OAuth Providers</strong>: Google, GitHub, etc. (optional)</li>
387
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>JWT Authentication</strong>: Industry-standard secure tokens</li>
388
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Password Hashing</strong>: bcrypt with salt</li>
389
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Row Level Security</strong>: Database-level access control</li>
390
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Session Management</strong>: Automatic token refresh</li>
391
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Multi-Factor Auth</strong>: Optional 2FA support</li>
392
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>OAuth Providers</strong>: Google, GitHub, etc. (optional)</li>
280
393
  </ul>
281
394
  <h3>Security Best Practices</h3>
282
395
  <ol>
@@ -353,7 +466,17 @@ auth: {
353
466
  </div>
354
467
 
355
468
  <!-- Scripts -->
469
+ <script>
470
+ // Pass configuration to frontend
471
+ window.docBuilderConfig = {
472
+ features: {
473
+ showPdfDownload: true,
474
+ menuDefaultOpen: false
475
+ }
476
+ };
477
+ </script>
356
478
  <script src="/js/main.js"></script>
357
-
479
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
480
+ <script src="/js/auth.js"></script>
358
481
  </body>
359
482
  </html>
package/html/guides/claude-workflow-guide.html CHANGED
@@ -3,14 +3,41 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Beautiful documentation with the least effort possible">
7
- <title>Claude + CLAUDE.md Documentation Workflow Guide - @knowcode/doc-builder</title>
6
+ <meta name="description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
7
+ <title>Claude + CLAUDE.md Documentation Workflow Guide</title>
8
+
9
+ <meta name="author" content="Lindsay Smith">
10
+ <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, error">
11
+ <meta name="robots" content="index, follow">
12
+ <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
13
+
14
+ <!-- Open Graph / Facebook -->
15
+ <meta property="og:type" content="article">
16
+ <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
17
+ <meta property="og:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
18
+ <meta property="og:description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
19
+ <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
20
+ <meta property="og:site_name" content="@knowcode/doc-builder">
21
+ <meta property="og:locale" content="en_US">
22
+
23
+ <!-- Twitter Card -->
24
+ <meta name="twitter:card" content="summary_large_image">
25
+ <meta name="twitter:site" content="@planbbackups">
26
+ <meta name="twitter:creator" content="@planbbackups">
27
+ <meta name="twitter:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
28
+ <meta name="twitter:description" content="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...">
29
+ <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
30
+
31
+ <!-- Custom Meta Tags -->
32
+ <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
33
+ <meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
8
34
 
9
35
  <!-- Fonts -->
10
36
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
11
37
 
12
38
  <!-- Icons -->
13
39
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
40
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
14
41
 
15
42
  <!-- Mermaid -->
16
43
  <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
@@ -18,8 +45,90 @@
18
45
  <!-- Styles -->
19
46
  <link rel="stylesheet" href="/css/notion-style.css">
20
47
 
48
+
49
+ <!-- Hide content until auth check -->
50
+ <style>
51
+ body {
52
+ visibility: hidden;
53
+ opacity: 0;
54
+ transition: opacity 0.3s ease;
55
+ }
56
+ body.authenticated {
57
+ visibility: visible;
58
+ opacity: 1;
59
+ }
60
+ /* Show login/logout pages immediately */
61
+ body.auth-page {
62
+ visibility: visible;
63
+ opacity: 1;
64
+ }
65
+ /* Style auth button consistently */
66
+ .auth-btn {
67
+ background: none;
68
+ border: none;
69
+ color: var(--text-secondary);
70
+ cursor: pointer;
71
+ padding: 0.5rem;
72
+ border-radius: 0.5rem;
73
+ transition: all 0.2s;
74
+ font-size: 1.1rem;
75
+ }
76
+ .auth-btn:hover {
77
+ background: var(--bg-secondary);
78
+ color: var(--text-primary);
79
+ }
80
+ </style>
81
+
82
+
21
83
  <!-- Favicon -->
22
- <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>">
84
+ <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>">
85
+
86
+ <script type="application/ld+json">
87
+ {
88
+ "@context": "https://schema.org",
89
+ "@type": "TechArticle",
90
+ "headline": "Claude + CLAUDE.md Documentation Workflow Guide",
91
+ "description": "This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to...",
92
+ "author": {
93
+ "@type": "Person",
94
+ "name": "Lindsay Smith"
95
+ },
96
+ "publisher": {
97
+ "@type": "Organization",
98
+ "name": "Knowcode Ltd",
99
+ "url": "https://knowcode.tech"
100
+ },
101
+ "datePublished": "2025-07-28T10:31:53.192Z",
102
+ "dateModified": "2025-07-28T10:31:53.192Z",
103
+ "mainEntityOfPage": {
104
+ "@type": "WebPage",
105
+ "@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
106
+ },
107
+ "breadcrumb": {
108
+ "@type": "BreadcrumbList",
109
+ "itemListElement": [
110
+ {
111
+ "@type": "ListItem",
112
+ "position": 1,
113
+ "name": "@knowcode/doc-builder",
114
+ "item": "https://doc-builder-delta.vercel.app"
115
+ },
116
+ {
117
+ "@type": "ListItem",
118
+ "position": 2,
119
+ "name": "Guides",
120
+ "item": "https://doc-builder-delta.vercel.app/guides/"
121
+ },
122
+ {
123
+ "@type": "ListItem",
124
+ "position": 3,
125
+ "name": "Claude Workflow Guide",
126
+ "item": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
127
+ }
128
+ ]
129
+ }
130
+ }
131
+ </script>
23
132
  </head>
24
133
  <body>
25
134
  <!-- Header -->
@@ -29,10 +138,14 @@
29
138
 
30
139
  <div class="header-actions">
31
140
  <div class="deployment-info">
32
- <span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
141
+ <span class="deployment-date" title="Built with doc-builder v1.9.1">Last updated: Jul 28, 2025, 10:31 AM UTC</span>
33
142
  </div>
34
143
 
35
144
 
145
+ <a href="../../login.html" class="auth-btn" title="Login/Logout">
146
+ <i class="fas fa-sign-in-alt"></i>
147
+ </a>
148
+
36
149
 
37
150
  <button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
38
151
  <i class="fas fa-moon"></i>
@@ -92,6 +205,7 @@
92
205
  <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>
93
206
  <a href="/guides/claude-workflow-guide.html" class="nav-item active" 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>
94
207
  <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>
208
+ <a href="/guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="fas fa-file-alt"></i> Html Embedding Guide</a>
95
209
  <a href="/guides/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="fas fa-file-alt"></i> Image Modal Guide</a>
96
210
  <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>
97
211
  <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>
@@ -101,7 +215,7 @@
101
215
  <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>
102
216
  <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>
103
217
  <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>
104
- <div class="nav-section" data-level="1">
218
+ <div class="nav-section private-nav" data-level="1">
105
219
  <a class="nav-title collapsible" href="#" data-target="nav-private-1" >
106
220
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
107
221
  </a>
@@ -114,7 +228,7 @@
114
228
  <a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
115
229
  <a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a>
116
230
  <a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="fas fa-file-alt"></i> User Management Tooling</a></div></div>
117
- <div class="nav-section" data-level="2">
231
+ <div class="nav-section private-nav" data-level="2">
118
232
  <a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
119
233
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
120
234
  </a>
@@ -143,7 +257,6 @@
143
257
  <p>This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it to Vercel using the @knowcode/doc-builder tool.</p>
144
258
  <h2>Workflow Overview</h2>
145
259
  <div class="mermaid-wrapper">
146
- <div class="mermaid-title">Diagram</div>
147
260
  <div class="mermaid">graph TD
148
261
  A[Start Project] --> B[Setup CLAUDE.md]
149
262
  B --> C[Configure doc-builder]
@@ -210,7 +323,6 @@ This file provides comprehensive guidance for Claude Code when working in this p
210
323
  - Add clear labels and descriptions
211
324
  - Example:
212
325
  <div class="mermaid-wrapper">
213
- <div class="mermaid-title">Diagram</div>
214
326
  <div class="mermaid">graph TD
215
327
  A[User Request] --> B{Authentication}
216
328
  B -->|Valid| C[Process Request]
@@ -382,7 +494,7 @@ const response = await api.getData({ userId: 123 });
382
494
  <li><strong>Create working examples</strong> that can be copy-pasted</li>
383
495
  <li><strong>Add troubleshooting sections</strong> for common problems</li>
384
496
  <li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
385
- <li><strong>Mark speculated information</strong> clearly with ❓</li>
497
+ <li><strong>Mark speculated information</strong> clearly with <i class="ph ph-question" aria-label="question"></i></li>
386
498
  <li><strong>Follow the naming conventions</strong> exactly</li>
387
499
  <li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
388
500
  <li><strong>Add cross-references</strong> to related documentation</li>
@@ -481,12 +593,12 @@ For Claude to generate accurate and consistent content, include key organization
481
593
  </code></pre>
482
594
  <p>When these facts are included in your CLAUDE.md, Claude will:</p>
483
595
  <ul>
484
- <li>✅ Use correct contact information in examples</li>
485
- <li>✅ Reference the right URLs in documentation</li>
486
- <li>✅ Apply consistent author attribution</li>
487
- <li>✅ Generate accurate meta tags for SEO</li>
488
- <li>✅ Use proper organizational context</li>
489
- <li>✅ Follow established technical standards</li>
596
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use correct contact information in examples</li>
597
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Reference the right URLs in documentation</li>
598
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Apply consistent author attribution</li>
599
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Generate accurate meta tags for SEO</li>
600
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use proper organizational context</li>
601
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Follow established technical standards</li>
490
602
  </ul>
491
603
  <h3>1.3 Global CLAUDE.md Best Practices</h3>
492
604
  <p>Your global <code>~/.claude/CLAUDE.md</code> should include universal standards that apply to all projects. Here&#39;s an expanded example:</p>
@@ -543,7 +655,6 @@ For Claude to generate accurate and consistent content, include key organization
543
655
  - Group related changes in single commits
544
656
  </code></pre>
545
657
  <div class="mermaid-wrapper">
546
- <div class="mermaid-title">Diagram</div>
547
658
  <div class="mermaid">graph LR
548
659
  A[Global CLAUDE.md] --> B[Document Standards]
549
660
  A --> C[Git Workflow]
@@ -575,7 +686,6 @@ For Claude to generate accurate and consistent content, include key organization
575
686
  <h3>1.4 Benefits of Environment Facts in Documentation</h3>
576
687
  <p>Including these environmental facts in your CLAUDE.md provides several key benefits:</p>
577
688
  <div class="mermaid-wrapper">
578
- <div class="mermaid-title">Diagram</div>
579
689
  <div class="mermaid">graph TD
580
690
  A[Environment Facts in CLAUDE.md] --> B[Accurate Content]
581
691
  A --> C[Consistent Branding]
@@ -640,7 +750,6 @@ npx doc-builder init
640
750
  <h2>Step 3: Documentation Creation Workflow with Claude</h2>
641
751
  <h3>3.1 Effective Prompting Strategy</h3>
642
752
  <div class="mermaid-wrapper">
643
- <div class="mermaid-title">Diagram</div>
644
753
  <div class="mermaid">sequenceDiagram
645
754
  participant User
646
755
  participant Claude
@@ -691,7 +800,6 @@ npx doc-builder init
691
800
  <h2>Step 4: Building Documentation Site</h2>
692
801
  <h3>4.1 Development Workflow</h3>
693
802
  <div class="mermaid-wrapper">
694
- <div class="mermaid-title">Diagram</div>
695
803
  <div class="mermaid">graph LR
696
804
  A[Write Docs] --> B[Preview Locally]
697
805
  B --> C{Looks Good?}
@@ -737,7 +845,6 @@ npm run deploy:docs
737
845
  </code></pre>
738
846
  <h3>5.3 Deployment Workflow</h3>
739
847
  <div class="mermaid-wrapper">
740
- <div class="mermaid-title">Diagram</div>
741
848
  <div class="mermaid">stateDiagram-v2
742
849
  [*] --> LocalDevelopment
743
850
  LocalDevelopment --> BuildDocs: npm run build:docs
@@ -752,7 +859,6 @@ npm run deploy:docs
752
859
  <h2>Step 6: Continuous Documentation Updates</h2>
753
860
  <h3>6.1 Update Workflow</h3>
754
861
  <div class="mermaid-wrapper">
755
- <div class="mermaid-title">Diagram</div>
756
862
  <div class="mermaid">graph TD
757
863
  A[Code Changes] --> B{Docs Needed?}
758
864
  B -->|Yes| C[Update Documentation]
@@ -941,7 +1047,17 @@ The key to success is iterative refinement of your CLAUDE.md file to capture you
941
1047
  </div>
942
1048
 
943
1049
  <!-- Scripts -->
1050
+ <script>
1051
+ // Pass configuration to frontend
1052
+ window.docBuilderConfig = {
1053
+ features: {
1054
+ showPdfDownload: true,
1055
+ menuDefaultOpen: false
1056
+ }
1057
+ };
1058
+ </script>
944
1059
  <script src="/js/main.js"></script>
945
-
1060
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
1061
+ <script src="/js/auth.js"></script>
946
1062
  </body>
947
1063
  </html>