@knowcode/doc-builder 1.9.1 → 1.9.3

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 (49) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/CLAUDE.md +35 -0
  3. package/README.md +1 -0
  4. package/assets/css/notion-style.css +2 -2
  5. package/html/README.html +151 -33
  6. package/html/auth.js +4 -3
  7. package/html/css/notion-style.css +394 -13
  8. package/html/documentation-index.html +134 -10
  9. package/html/guides/authentication-default-change.html +132 -7
  10. package/html/guides/authentication-guide.html +143 -19
  11. package/html/guides/claude-workflow-guide.html +139 -22
  12. package/html/guides/documentation-standards.html +135 -11
  13. package/html/guides/html-embedding-guide.html +451 -0
  14. package/html/guides/image-modal-guide.html +134 -10
  15. package/html/guides/phosphor-icons-guide.html +152 -27
  16. package/html/guides/private-directory-authentication-troubleshooting.html +545 -0
  17. package/html/guides/private-directory-authentication.html +132 -7
  18. package/html/guides/public-site-deployment.html +132 -7
  19. package/html/guides/search-engine-verification-guide.html +132 -7
  20. package/html/guides/seo-guide.html +132 -7
  21. package/html/guides/seo-optimization-guide.html +161 -38
  22. package/html/guides/troubleshooting-guide.html +143 -19
  23. package/html/guides/windows-setup-guide.html +163 -38
  24. package/html/image-modal-test.html +127 -8
  25. package/html/index.html +151 -33
  26. package/html/js/auth.js +119 -39
  27. package/html/js/main.js +259 -25
  28. package/html/private/cache-control-anti-pattern.html +137 -12
  29. package/html/private/launch/README.html +146 -15
  30. package/html/private/launch/auth-cleanup-summary.html +155 -24
  31. package/html/private/launch/bubble-plugin-specification.html +138 -7
  32. package/html/private/launch/go-to-market-strategy.html +140 -9
  33. package/html/private/launch/launch-announcements.html +154 -24
  34. package/html/private/launch/vercel-deployment-auth-setup.html +140 -9
  35. package/html/private/next-steps-walkthrough.html +139 -14
  36. package/html/private/supabase-auth-implementation-completed.html +145 -21
  37. package/html/private/supabase-auth-implementation-plan.html +138 -14
  38. package/html/private/supabase-auth-integration-plan.html +144 -21
  39. package/html/private/supabase-auth-setup-guide.html +141 -16
  40. package/html/private/test-private-doc.html +132 -7
  41. package/html/private/user-management-tooling.html +132 -7
  42. package/html/prompts/markdown-document-standards.html +136 -12
  43. package/html/sitemap.xml +70 -46
  44. package/html/vercel-cli-setup-guide.html +130 -11
  45. package/html/vercel-first-time-setup-guide.html +127 -8
  46. package/lib/config.js +2 -0
  47. package/lib/emoji-mapper.js +2 -0
  48. package/lib/supabase-auth.js +4 -3
  49. 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-28T16:34:27.914Z",
102
+ "dateModified": "2025-07-28T16:34:27.914Z",
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.3">Last updated: Jul 28, 2025, 04:34 PM 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,16 +205,18 @@
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>
212
+ <a href="/guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="fas fa-file-alt"></i> Private Directory Authentication Troubleshooting</a>
98
213
  <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>
99
214
  <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>
100
215
  <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>
101
216
  <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
217
  <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
218
  <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">
219
+ <div class="nav-section private-nav" data-level="1">
105
220
  <a class="nav-title collapsible" href="#" data-target="nav-private-1" >
106
221
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
107
222
  </a>
@@ -114,7 +229,7 @@
114
229
  <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
230
  <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
231
  <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">
232
+ <div class="nav-section private-nav" data-level="2">
118
233
  <a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
119
234
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
120
235
  </a>
@@ -140,21 +255,20 @@
140
255
  <div class="content-inner">
141
256
  <h1>Authentication Guide for @knowcode/doc-builder</h1>
142
257
  <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>
258
+ <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
259
  </blockquote>
145
260
  <h2>Overview</h2>
146
261
  <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
262
  <h2>Why Supabase?</h2>
148
263
  <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>
264
+ <li><i class="ph ph-lock-key" aria-label="secure"></i> <strong>Enterprise Security</strong>: JWT tokens, bcrypt password hashing, Row Level Security</li>
265
+ <li><i class="ph ph-users" aria-label="team"></i> <strong>Multi-User Support</strong>: Unlimited users with fine-grained access control</li>
151
266
  <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>
267
+ <li><i class="ph ph-arrows-clockwise" aria-label="refresh"></i> <strong>Real-time</strong>: Live updates when permissions change</li>
268
+ <li><i class="ph ph-money" aria-label="money"></i> <strong>Generous Free Tier</strong>: 50,000 monthly active users free</li>
154
269
  </ul>
155
270
  <h2>How It Works</h2>
156
271
  <div class="mermaid-wrapper">
157
- <div class="mermaid-title">Diagram</div>
158
272
  <div class="mermaid">graph TD
159
273
  A[User visits page] --> B{Has JWT Token?}
160
274
  B -->|No| C[Redirect to login]
@@ -271,12 +385,12 @@ npx @knowcode/doc-builder auth:list-users --site-id xxx
271
385
  <h2>Security Features</h2>
272
386
  <h3>What Supabase Provides</h3>
273
387
  <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>
388
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>JWT Authentication</strong>: Industry-standard secure tokens</li>
389
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Password Hashing</strong>: bcrypt with salt</li>
390
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Row Level Security</strong>: Database-level access control</li>
391
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Session Management</strong>: Automatic token refresh</li>
392
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>Multi-Factor Auth</strong>: Optional 2FA support</li>
393
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> <strong>OAuth Providers</strong>: Google, GitHub, etc. (optional)</li>
280
394
  </ul>
281
395
  <h3>Security Best Practices</h3>
282
396
  <ol>
@@ -353,7 +467,17 @@ auth: {
353
467
  </div>
354
468
 
355
469
  <!-- Scripts -->
470
+ <script>
471
+ // Pass configuration to frontend
472
+ window.docBuilderConfig = {
473
+ features: {
474
+ showPdfDownload: true,
475
+ menuDefaultOpen: false
476
+ }
477
+ };
478
+ </script>
356
479
  <script src="/js/main.js"></script>
357
-
480
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
481
+ <script src="/js/auth.js"></script>
358
482
  </body>
359
483
  </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-28T16:34:27.918Z",
102
+ "dateModified": "2025-07-28T16:34:27.918Z",
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.3">Last updated: Jul 28, 2025, 04:34 PM 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,16 +205,18 @@
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>
212
+ <a href="/guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="fas fa-file-alt"></i> Private Directory Authentication Troubleshooting</a>
98
213
  <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>
99
214
  <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>
100
215
  <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>
101
216
  <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
217
  <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
218
  <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">
219
+ <div class="nav-section private-nav" data-level="1">
105
220
  <a class="nav-title collapsible" href="#" data-target="nav-private-1" >
106
221
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
107
222
  </a>
@@ -114,7 +229,7 @@
114
229
  <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
230
  <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
231
  <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">
232
+ <div class="nav-section private-nav" data-level="2">
118
233
  <a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
119
234
  <i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
120
235
  </a>
@@ -143,7 +258,6 @@
143
258
  <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
259
  <h2>Workflow Overview</h2>
145
260
  <div class="mermaid-wrapper">
146
- <div class="mermaid-title">Diagram</div>
147
261
  <div class="mermaid">graph TD
148
262
  A[Start Project] --> B[Setup CLAUDE.md]
149
263
  B --> C[Configure doc-builder]
@@ -210,7 +324,6 @@ This file provides comprehensive guidance for Claude Code when working in this p
210
324
  - Add clear labels and descriptions
211
325
  - Example:
212
326
  <div class="mermaid-wrapper">
213
- <div class="mermaid-title">Diagram</div>
214
327
  <div class="mermaid">graph TD
215
328
  A[User Request] --> B{Authentication}
216
329
  B -->|Valid| C[Process Request]
@@ -382,7 +495,7 @@ const response = await api.getData({ userId: 123 });
382
495
  <li><strong>Create working examples</strong> that can be copy-pasted</li>
383
496
  <li><strong>Add troubleshooting sections</strong> for common problems</li>
384
497
  <li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
385
- <li><strong>Mark speculated information</strong> clearly with ❓</li>
498
+ <li><strong>Mark speculated information</strong> clearly with <i class="ph ph-question" aria-label="question"></i></li>
386
499
  <li><strong>Follow the naming conventions</strong> exactly</li>
387
500
  <li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
388
501
  <li><strong>Add cross-references</strong> to related documentation</li>
@@ -481,12 +594,12 @@ For Claude to generate accurate and consistent content, include key organization
481
594
  </code></pre>
482
595
  <p>When these facts are included in your CLAUDE.md, Claude will:</p>
483
596
  <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>
597
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use correct contact information in examples</li>
598
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Reference the right URLs in documentation</li>
599
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Apply consistent author attribution</li>
600
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Generate accurate meta tags for SEO</li>
601
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Use proper organizational context</li>
602
+ <li><i class="ph ph-check-circle" aria-label="checked"></i> Follow established technical standards</li>
490
603
  </ul>
491
604
  <h3>1.3 Global CLAUDE.md Best Practices</h3>
492
605
  <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 +656,6 @@ For Claude to generate accurate and consistent content, include key organization
543
656
  - Group related changes in single commits
544
657
  </code></pre>
545
658
  <div class="mermaid-wrapper">
546
- <div class="mermaid-title">Diagram</div>
547
659
  <div class="mermaid">graph LR
548
660
  A[Global CLAUDE.md] --> B[Document Standards]
549
661
  A --> C[Git Workflow]
@@ -575,7 +687,6 @@ For Claude to generate accurate and consistent content, include key organization
575
687
  <h3>1.4 Benefits of Environment Facts in Documentation</h3>
576
688
  <p>Including these environmental facts in your CLAUDE.md provides several key benefits:</p>
577
689
  <div class="mermaid-wrapper">
578
- <div class="mermaid-title">Diagram</div>
579
690
  <div class="mermaid">graph TD
580
691
  A[Environment Facts in CLAUDE.md] --> B[Accurate Content]
581
692
  A --> C[Consistent Branding]
@@ -640,7 +751,6 @@ npx doc-builder init
640
751
  <h2>Step 3: Documentation Creation Workflow with Claude</h2>
641
752
  <h3>3.1 Effective Prompting Strategy</h3>
642
753
  <div class="mermaid-wrapper">
643
- <div class="mermaid-title">Diagram</div>
644
754
  <div class="mermaid">sequenceDiagram
645
755
  participant User
646
756
  participant Claude
@@ -691,7 +801,6 @@ npx doc-builder init
691
801
  <h2>Step 4: Building Documentation Site</h2>
692
802
  <h3>4.1 Development Workflow</h3>
693
803
  <div class="mermaid-wrapper">
694
- <div class="mermaid-title">Diagram</div>
695
804
  <div class="mermaid">graph LR
696
805
  A[Write Docs] --> B[Preview Locally]
697
806
  B --> C{Looks Good?}
@@ -737,7 +846,6 @@ npm run deploy:docs
737
846
  </code></pre>
738
847
  <h3>5.3 Deployment Workflow</h3>
739
848
  <div class="mermaid-wrapper">
740
- <div class="mermaid-title">Diagram</div>
741
849
  <div class="mermaid">stateDiagram-v2
742
850
  [*] --> LocalDevelopment
743
851
  LocalDevelopment --> BuildDocs: npm run build:docs
@@ -752,7 +860,6 @@ npm run deploy:docs
752
860
  <h2>Step 6: Continuous Documentation Updates</h2>
753
861
  <h3>6.1 Update Workflow</h3>
754
862
  <div class="mermaid-wrapper">
755
- <div class="mermaid-title">Diagram</div>
756
863
  <div class="mermaid">graph TD
757
864
  A[Code Changes] --> B{Docs Needed?}
758
865
  B -->|Yes| C[Update Documentation]
@@ -941,7 +1048,17 @@ The key to success is iterative refinement of your CLAUDE.md file to capture you
941
1048
  </div>
942
1049
 
943
1050
  <!-- Scripts -->
1051
+ <script>
1052
+ // Pass configuration to frontend
1053
+ window.docBuilderConfig = {
1054
+ features: {
1055
+ showPdfDownload: true,
1056
+ menuDefaultOpen: false
1057
+ }
1058
+ };
1059
+ </script>
944
1060
  <script src="/js/main.js"></script>
945
-
1061
+ <script src="https://unpkg.com/@supabase/supabase-js@2"></script>
1062
+ <script src="/js/auth.js"></script>
946
1063
  </body>
947
1064
  </html>