@knowcode/doc-builder 1.9.0 → 1.9.1
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.
- package/README.md +2 -0
- package/html/README.html +34 -149
- package/html/css/notion-style.css +13 -394
- package/html/documentation-index.html +17 -127
- package/html/guides/authentication-default-change.html +8 -130
- package/html/guides/authentication-guide.html +20 -141
- package/html/guides/claude-workflow-guide.html +23 -137
- package/html/guides/documentation-standards.html +12 -133
- package/html/guides/image-modal-guide.html +381 -0
- package/html/guides/phosphor-icons-guide.html +28 -150
- package/html/guides/private-directory-authentication.html +8 -130
- package/html/guides/public-site-deployment.html +8 -130
- package/html/guides/search-engine-verification-guide.html +8 -130
- package/html/guides/seo-guide.html +8 -130
- package/html/guides/seo-optimization-guide.html +39 -159
- package/html/guides/troubleshooting-guide.html +20 -141
- package/html/guides/windows-setup-guide.html +39 -161
- package/html/image-modal-test.html +9 -125
- package/html/index.html +34 -149
- package/html/js/auth.js +39 -118
- package/html/js/main.js +25 -259
- package/html/private/cache-control-anti-pattern.html +13 -135
- package/html/private/launch/README.html +16 -144
- package/html/private/launch/auth-cleanup-summary.html +25 -153
- package/html/private/launch/bubble-plugin-specification.html +8 -136
- package/html/private/launch/go-to-market-strategy.html +10 -138
- package/html/private/launch/launch-announcements.html +24 -151
- package/html/private/launch/vercel-deployment-auth-setup.html +10 -138
- package/html/private/next-steps-walkthrough.html +15 -137
- package/html/private/supabase-auth-implementation-completed.html +22 -143
- package/html/private/supabase-auth-implementation-plan.html +15 -136
- package/html/private/supabase-auth-integration-plan.html +22 -142
- package/html/private/supabase-auth-setup-guide.html +17 -139
- package/html/private/test-private-doc.html +8 -130
- package/html/private/user-management-tooling.html +8 -130
- package/html/prompts/markdown-document-standards.html +13 -134
- package/html/vercel-cli-setup-guide.html +12 -128
- package/html/vercel-first-time-setup-guide.html +9 -125
- package/lib/emoji-mapper.js +12 -0
- package/package.json +1 -1
|
@@ -3,41 +3,14 @@
|
|
|
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="
|
|
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="> 🎉 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="> 🎉 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">
|
|
6
|
+
<meta name="description" content="Beautiful documentation with the least effort possible">
|
|
7
|
+
<title>Authentication Guide for @knowcode/doc-builder - @knowcode/doc-builder</title>
|
|
34
8
|
|
|
35
9
|
<!-- Fonts -->
|
|
36
10
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
37
11
|
|
|
38
12
|
<!-- Icons -->
|
|
39
13
|
<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">
|
|
41
14
|
|
|
42
15
|
<!-- Mermaid -->
|
|
43
16
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
@@ -45,90 +18,8 @@
|
|
|
45
18
|
<!-- Styles -->
|
|
46
19
|
<link rel="stylesheet" href="/css/notion-style.css">
|
|
47
20
|
|
|
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
|
-
|
|
83
21
|
<!-- Favicon -->
|
|
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
|
|
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-27T08:30:10.771Z",
|
|
102
|
-
"dateModified": "2025-07-27T08:30:10.771Z",
|
|
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>
|
|
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>">
|
|
132
23
|
</head>
|
|
133
24
|
<body>
|
|
134
25
|
<!-- Header -->
|
|
@@ -138,14 +29,10 @@
|
|
|
138
29
|
|
|
139
30
|
<div class="header-actions">
|
|
140
31
|
<div class="deployment-info">
|
|
141
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
32
|
+
<span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
|
|
142
33
|
</div>
|
|
143
34
|
|
|
144
35
|
|
|
145
|
-
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
-
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
-
</a>
|
|
148
|
-
|
|
149
36
|
|
|
150
37
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
151
38
|
<i class="fas fa-moon"></i>
|
|
@@ -205,6 +92,7 @@
|
|
|
205
92
|
<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>
|
|
206
93
|
<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>
|
|
207
94
|
<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>
|
|
95
|
+
<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>
|
|
208
96
|
<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>
|
|
209
97
|
<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>
|
|
210
98
|
<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>
|
|
@@ -213,7 +101,7 @@
|
|
|
213
101
|
<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>
|
|
214
102
|
<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>
|
|
215
103
|
<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>
|
|
216
|
-
<div class="nav-section
|
|
104
|
+
<div class="nav-section" data-level="1">
|
|
217
105
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
218
106
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
219
107
|
</a>
|
|
@@ -226,7 +114,7 @@
|
|
|
226
114
|
<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>
|
|
227
115
|
<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>
|
|
228
116
|
<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>
|
|
229
|
-
<div class="nav-section
|
|
117
|
+
<div class="nav-section" data-level="2">
|
|
230
118
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
231
119
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
232
120
|
</a>
|
|
@@ -252,20 +140,21 @@
|
|
|
252
140
|
<div class="content-inner">
|
|
253
141
|
<h1>Authentication Guide for @knowcode/doc-builder</h1>
|
|
254
142
|
<blockquote>
|
|
255
|
-
<p><strong
|
|
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>
|
|
256
144
|
</blockquote>
|
|
257
145
|
<h2>Overview</h2>
|
|
258
146
|
<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>
|
|
259
147
|
<h2>Why Supabase?</h2>
|
|
260
148
|
<ul>
|
|
261
|
-
<li
|
|
262
|
-
<li
|
|
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
151
|
<li>🌍 <strong>Scalable</strong>: Built on PostgreSQL, handles millions of users</li>
|
|
264
|
-
<li
|
|
265
|
-
<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
154
|
</ul>
|
|
267
155
|
<h2>How It Works</h2>
|
|
268
156
|
<div class="mermaid-wrapper">
|
|
157
|
+
<div class="mermaid-title">Diagram</div>
|
|
269
158
|
<div class="mermaid">graph TD
|
|
270
159
|
A[User visits page] --> B{Has JWT Token?}
|
|
271
160
|
B -->|No| C[Redirect to login]
|
|
@@ -382,12 +271,12 @@ npx @knowcode/doc-builder auth:list-users --site-id xxx
|
|
|
382
271
|
<h2>Security Features</h2>
|
|
383
272
|
<h3>What Supabase Provides</h3>
|
|
384
273
|
<ul>
|
|
385
|
-
<li
|
|
386
|
-
<li
|
|
387
|
-
<li
|
|
388
|
-
<li
|
|
389
|
-
<li
|
|
390
|
-
<li
|
|
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>
|
|
391
280
|
</ul>
|
|
392
281
|
<h3>Security Best Practices</h3>
|
|
393
282
|
<ol>
|
|
@@ -464,17 +353,7 @@ auth: {
|
|
|
464
353
|
</div>
|
|
465
354
|
|
|
466
355
|
<!-- Scripts -->
|
|
467
|
-
<script>
|
|
468
|
-
// Pass configuration to frontend
|
|
469
|
-
window.docBuilderConfig = {
|
|
470
|
-
features: {
|
|
471
|
-
showPdfDownload: true,
|
|
472
|
-
menuDefaultOpen: false
|
|
473
|
-
}
|
|
474
|
-
};
|
|
475
|
-
</script>
|
|
476
356
|
<script src="/js/main.js"></script>
|
|
477
|
-
|
|
478
|
-
<script src="/js/auth.js"></script>
|
|
357
|
+
|
|
479
358
|
</body>
|
|
480
359
|
</html>
|
|
@@ -3,41 +3,14 @@
|
|
|
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="
|
|
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">
|
|
6
|
+
<meta name="description" content="Beautiful documentation with the least effort possible">
|
|
7
|
+
<title>Claude + CLAUDE.md Documentation Workflow Guide - @knowcode/doc-builder</title>
|
|
34
8
|
|
|
35
9
|
<!-- Fonts -->
|
|
36
10
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
37
11
|
|
|
38
12
|
<!-- Icons -->
|
|
39
13
|
<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">
|
|
41
14
|
|
|
42
15
|
<!-- Mermaid -->
|
|
43
16
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
@@ -45,90 +18,8 @@
|
|
|
45
18
|
<!-- Styles -->
|
|
46
19
|
<link rel="stylesheet" href="/css/notion-style.css">
|
|
47
20
|
|
|
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
|
-
|
|
83
21
|
<!-- Favicon -->
|
|
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
|
|
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-27T08:30:10.774Z",
|
|
102
|
-
"dateModified": "2025-07-27T08:30:10.774Z",
|
|
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>
|
|
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>">
|
|
132
23
|
</head>
|
|
133
24
|
<body>
|
|
134
25
|
<!-- Header -->
|
|
@@ -138,14 +29,10 @@
|
|
|
138
29
|
|
|
139
30
|
<div class="header-actions">
|
|
140
31
|
<div class="deployment-info">
|
|
141
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
32
|
+
<span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
|
|
142
33
|
</div>
|
|
143
34
|
|
|
144
35
|
|
|
145
|
-
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
-
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
-
</a>
|
|
148
|
-
|
|
149
36
|
|
|
150
37
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
151
38
|
<i class="fas fa-moon"></i>
|
|
@@ -205,6 +92,7 @@
|
|
|
205
92
|
<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>
|
|
206
93
|
<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>
|
|
207
94
|
<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>
|
|
95
|
+
<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>
|
|
208
96
|
<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>
|
|
209
97
|
<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>
|
|
210
98
|
<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>
|
|
@@ -213,7 +101,7 @@
|
|
|
213
101
|
<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>
|
|
214
102
|
<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>
|
|
215
103
|
<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>
|
|
216
|
-
<div class="nav-section
|
|
104
|
+
<div class="nav-section" data-level="1">
|
|
217
105
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
218
106
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
219
107
|
</a>
|
|
@@ -226,7 +114,7 @@
|
|
|
226
114
|
<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>
|
|
227
115
|
<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>
|
|
228
116
|
<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>
|
|
229
|
-
<div class="nav-section
|
|
117
|
+
<div class="nav-section" data-level="2">
|
|
230
118
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
231
119
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
232
120
|
</a>
|
|
@@ -255,6 +143,7 @@
|
|
|
255
143
|
<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>
|
|
256
144
|
<h2>Workflow Overview</h2>
|
|
257
145
|
<div class="mermaid-wrapper">
|
|
146
|
+
<div class="mermaid-title">Diagram</div>
|
|
258
147
|
<div class="mermaid">graph TD
|
|
259
148
|
A[Start Project] --> B[Setup CLAUDE.md]
|
|
260
149
|
B --> C[Configure doc-builder]
|
|
@@ -321,6 +210,7 @@ This file provides comprehensive guidance for Claude Code when working in this p
|
|
|
321
210
|
- Add clear labels and descriptions
|
|
322
211
|
- Example:
|
|
323
212
|
<div class="mermaid-wrapper">
|
|
213
|
+
<div class="mermaid-title">Diagram</div>
|
|
324
214
|
<div class="mermaid">graph TD
|
|
325
215
|
A[User Request] --> B{Authentication}
|
|
326
216
|
B -->|Valid| C[Process Request]
|
|
@@ -492,7 +382,7 @@ const response = await api.getData({ userId: 123 });
|
|
|
492
382
|
<li><strong>Create working examples</strong> that can be copy-pasted</li>
|
|
493
383
|
<li><strong>Add troubleshooting sections</strong> for common problems</li>
|
|
494
384
|
<li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
|
|
495
|
-
<li><strong>Mark speculated information</strong> clearly with
|
|
385
|
+
<li><strong>Mark speculated information</strong> clearly with ❓</li>
|
|
496
386
|
<li><strong>Follow the naming conventions</strong> exactly</li>
|
|
497
387
|
<li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
|
|
498
388
|
<li><strong>Add cross-references</strong> to related documentation</li>
|
|
@@ -591,12 +481,12 @@ For Claude to generate accurate and consistent content, include key organization
|
|
|
591
481
|
</code></pre>
|
|
592
482
|
<p>When these facts are included in your CLAUDE.md, Claude will:</p>
|
|
593
483
|
<ul>
|
|
594
|
-
<li
|
|
595
|
-
<li
|
|
596
|
-
<li
|
|
597
|
-
<li
|
|
598
|
-
<li
|
|
599
|
-
<li
|
|
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>
|
|
600
490
|
</ul>
|
|
601
491
|
<h3>1.3 Global CLAUDE.md Best Practices</h3>
|
|
602
492
|
<p>Your global <code>~/.claude/CLAUDE.md</code> should include universal standards that apply to all projects. Here's an expanded example:</p>
|
|
@@ -653,6 +543,7 @@ For Claude to generate accurate and consistent content, include key organization
|
|
|
653
543
|
- Group related changes in single commits
|
|
654
544
|
</code></pre>
|
|
655
545
|
<div class="mermaid-wrapper">
|
|
546
|
+
<div class="mermaid-title">Diagram</div>
|
|
656
547
|
<div class="mermaid">graph LR
|
|
657
548
|
A[Global CLAUDE.md] --> B[Document Standards]
|
|
658
549
|
A --> C[Git Workflow]
|
|
@@ -684,6 +575,7 @@ For Claude to generate accurate and consistent content, include key organization
|
|
|
684
575
|
<h3>1.4 Benefits of Environment Facts in Documentation</h3>
|
|
685
576
|
<p>Including these environmental facts in your CLAUDE.md provides several key benefits:</p>
|
|
686
577
|
<div class="mermaid-wrapper">
|
|
578
|
+
<div class="mermaid-title">Diagram</div>
|
|
687
579
|
<div class="mermaid">graph TD
|
|
688
580
|
A[Environment Facts in CLAUDE.md] --> B[Accurate Content]
|
|
689
581
|
A --> C[Consistent Branding]
|
|
@@ -748,6 +640,7 @@ npx doc-builder init
|
|
|
748
640
|
<h2>Step 3: Documentation Creation Workflow with Claude</h2>
|
|
749
641
|
<h3>3.1 Effective Prompting Strategy</h3>
|
|
750
642
|
<div class="mermaid-wrapper">
|
|
643
|
+
<div class="mermaid-title">Diagram</div>
|
|
751
644
|
<div class="mermaid">sequenceDiagram
|
|
752
645
|
participant User
|
|
753
646
|
participant Claude
|
|
@@ -798,6 +691,7 @@ npx doc-builder init
|
|
|
798
691
|
<h2>Step 4: Building Documentation Site</h2>
|
|
799
692
|
<h3>4.1 Development Workflow</h3>
|
|
800
693
|
<div class="mermaid-wrapper">
|
|
694
|
+
<div class="mermaid-title">Diagram</div>
|
|
801
695
|
<div class="mermaid">graph LR
|
|
802
696
|
A[Write Docs] --> B[Preview Locally]
|
|
803
697
|
B --> C{Looks Good?}
|
|
@@ -843,6 +737,7 @@ npm run deploy:docs
|
|
|
843
737
|
</code></pre>
|
|
844
738
|
<h3>5.3 Deployment Workflow</h3>
|
|
845
739
|
<div class="mermaid-wrapper">
|
|
740
|
+
<div class="mermaid-title">Diagram</div>
|
|
846
741
|
<div class="mermaid">stateDiagram-v2
|
|
847
742
|
[*] --> LocalDevelopment
|
|
848
743
|
LocalDevelopment --> BuildDocs: npm run build:docs
|
|
@@ -857,6 +752,7 @@ npm run deploy:docs
|
|
|
857
752
|
<h2>Step 6: Continuous Documentation Updates</h2>
|
|
858
753
|
<h3>6.1 Update Workflow</h3>
|
|
859
754
|
<div class="mermaid-wrapper">
|
|
755
|
+
<div class="mermaid-title">Diagram</div>
|
|
860
756
|
<div class="mermaid">graph TD
|
|
861
757
|
A[Code Changes] --> B{Docs Needed?}
|
|
862
758
|
B -->|Yes| C[Update Documentation]
|
|
@@ -1045,17 +941,7 @@ The key to success is iterative refinement of your CLAUDE.md file to capture you
|
|
|
1045
941
|
</div>
|
|
1046
942
|
|
|
1047
943
|
<!-- Scripts -->
|
|
1048
|
-
<script>
|
|
1049
|
-
// Pass configuration to frontend
|
|
1050
|
-
window.docBuilderConfig = {
|
|
1051
|
-
features: {
|
|
1052
|
-
showPdfDownload: true,
|
|
1053
|
-
menuDefaultOpen: false
|
|
1054
|
-
}
|
|
1055
|
-
};
|
|
1056
|
-
</script>
|
|
1057
944
|
<script src="/js/main.js"></script>
|
|
1058
|
-
|
|
1059
|
-
<script src="/js/auth.js"></script>
|
|
945
|
+
|
|
1060
946
|
</body>
|
|
1061
947
|
</html>
|