@knowcode/doc-builder 1.9.29 → 1.9.31

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 (197) hide show
  1. package/assets/js/main.js +7 -0
  2. package/lib/core-builder.js +18 -1
  3. package/package.json +12 -2
  4. package/.claude/settings.local.json +0 -56
  5. package/CACHE-BUSTING-GUIDE.md +0 -82
  6. package/CLAUDE.md +0 -86
  7. package/CONTRIBUTING.md +0 -148
  8. package/GITHUB_SETUP.md +0 -203
  9. package/RELEASE-NOTES-1.7.5.md +0 -64
  10. package/Screenshot 2025-07-22 at 19.51.21.png +0 -0
  11. package/Screenshot 2025-07-26 at 17.06.49.png +0 -0
  12. package/add-user-clive.sql +0 -35
  13. package/add-user-lindsay-fixed.sql +0 -85
  14. package/add-user-lindsay.sql +0 -68
  15. package/add-user-pmorgan.sql +0 -35
  16. package/add-user-robbie.sql +0 -35
  17. package/add-wru-users.sql +0 -105
  18. package/debug-login.sql +0 -30
  19. package/doc-builder.config.js +0 -126
  20. package/doc-builder.config.js.backup.1753793768283 +0 -47
  21. package/doc-builder.config.js.backup.1753803964423 +0 -114
  22. package/doc-builder.config.js.backup.1753945707032 +0 -115
  23. package/doc-builder.config.js.backup.1754059241330 +0 -115
  24. package/doc-builder.config.js.backup.1754119567787 +0 -123
  25. package/doc-builder.config.js.backup.1754120048862 +0 -124
  26. package/doc-builder.config.js.backup.1754120529913 +0 -124
  27. package/doc-builder.config.js.backup.1754218469785 +0 -124
  28. package/doc-builder.config.js.backup.1754384764054 +0 -124
  29. package/doc-builder.config.js.backup.1754567425847 +0 -124
  30. package/doc-builder.config.js.backup.1754568137859 +0 -126
  31. package/doc-builder.config.js.backup.1754569388252 +0 -126
  32. package/doc-builder.config.js.backup.1754576694123 +0 -126
  33. package/doc-builder.config.js.backup.1755031374829 +0 -126
  34. package/doc-builder.config.js.backup.1755034500990 +0 -126
  35. package/grant-access.sql +0 -15
  36. package/html/11.png +0 -0
  37. package/html/404.html +0 -115
  38. package/html/README.html +0 -522
  39. package/html/Screenshot 2025-08-12 at 21.35.07.png +0 -0
  40. package/html/about-doc-builder.html +0 -491
  41. package/html/auth.js +0 -157
  42. package/html/claude-workflow-guide.html +0 -525
  43. package/html/css/notion-style.css +0 -2502
  44. package/html/documentation-index.html +0 -471
  45. package/html/guides/authentication-default-change.html +0 -370
  46. package/html/guides/authentication-guide.html +0 -509
  47. package/html/guides/cache-control-anti-pattern.html +0 -361
  48. package/html/guides/claude-workflow-guide.html +0 -1074
  49. package/html/guides/configuration-guide.html +0 -472
  50. package/html/guides/document-standards.html +0 -518
  51. package/html/guides/documentation-standards.html +0 -694
  52. package/html/guides/html-embedding-guide.html +0 -461
  53. package/html/guides/image-modal-guide.html +0 -515
  54. package/html/guides/next-steps-walkthrough.html +0 -638
  55. package/html/guides/phosphor-icons-guide.html +0 -584
  56. package/html/guides/private-directory-authentication-troubleshooting.html +0 -555
  57. package/html/guides/private-directory-authentication.html +0 -541
  58. package/html/guides/public-site-deployment.html +0 -431
  59. package/html/guides/search-engine-verification-guide.html +0 -542
  60. package/html/guides/seo-guide.html +0 -661
  61. package/html/guides/seo-optimization-guide.html +0 -887
  62. package/html/guides/supabase-auth-implementation-plan.html +0 -543
  63. package/html/guides/supabase-auth-integration-plan.html +0 -671
  64. package/html/guides/supabase-auth-setup-guide.html +0 -498
  65. package/html/guides/supabase-authentication-complete-guide.html +0 -866
  66. package/html/guides/troubleshooting-guide.html +0 -633
  67. package/html/guides/vercel-deployment-auth-setup.html +0 -337
  68. package/html/guides/windows-setup-guide.html +0 -859
  69. package/html/image-modal-test.html +0 -318
  70. package/html/index.html +0 -522
  71. package/html/js/auth.js +0 -157
  72. package/html/js/main.js +0 -1747
  73. package/html/launch/README.html +0 -297
  74. package/html/launch/bubble-plugin-specification.html +0 -933
  75. package/html/launch/go-to-market-strategy.html +0 -663
  76. package/html/launch/launch-announcements.html +0 -593
  77. package/html/login.html +0 -102
  78. package/html/logout.html +0 -18
  79. package/html/private/cache-control-anti-pattern.html +0 -429
  80. package/html/private/launch/README.html +0 -371
  81. package/html/private/launch/auth-cleanup-summary.html +0 -361
  82. package/html/private/launch/bubble-plugin-specification.html +0 -1007
  83. package/html/private/launch/go-to-market-strategy.html +0 -737
  84. package/html/private/launch/launch-announcements.html +0 -667
  85. package/html/private/launch/vercel-deployment-auth-setup.html +0 -417
  86. package/html/private/next-steps-walkthrough.html +0 -679
  87. package/html/private/supabase-auth-implementation-completed.html +0 -454
  88. package/html/private/supabase-auth-implementation-plan.html +0 -594
  89. package/html/private/supabase-auth-integration-plan.html +0 -704
  90. package/html/private/supabase-auth-setup-guide.html +0 -555
  91. package/html/private/test-private-doc.html +0 -302
  92. package/html/private/user-management-tooling.html +0 -601
  93. package/html/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
  94. package/html/prompts/beautiful-documentation-design.html +0 -784
  95. package/html/prompts/markdown-document-standards.html +0 -422
  96. package/html/prompts/project-rename-strategy-sasha-publish.html +0 -530
  97. package/html/robots.txt +0 -9
  98. package/html/sitemap.xml +0 -357
  99. package/html/test-questions/how-does-it-work%3F.html +0 -294
  100. package/html/test-questions/step-1%3A%20getting-started.html +0 -289
  101. package/html/test-questions/what-is-the-purpose.html +0 -293
  102. package/html/test-status.html +0 -281
  103. package/html/vercel-cli-setup-guide.html +0 -495
  104. package/html/vercel-first-time-setup-guide.html +0 -454
  105. package/html/vercel.json +0 -29
  106. package/html-static/11.png +0 -0
  107. package/html-static/404.html +0 -115
  108. package/html-static/README.html +0 -599
  109. package/html-static/Screenshot 2025-08-12 at 21.35.07.png +0 -0
  110. package/html-static/about-doc-builder.html +0 -568
  111. package/html-static/css/notion-style.css +0 -2502
  112. package/html-static/documentation-index.html +0 -548
  113. package/html-static/guides/authentication-default-change.html +0 -447
  114. package/html-static/guides/authentication-guide.html +0 -586
  115. package/html-static/guides/claude-workflow-guide.html +0 -1151
  116. package/html-static/guides/configuration-guide.html +0 -549
  117. package/html-static/guides/documentation-standards.html +0 -771
  118. package/html-static/guides/html-embedding-guide.html +0 -538
  119. package/html-static/guides/image-modal-guide.html +0 -592
  120. package/html-static/guides/phosphor-icons-guide.html +0 -661
  121. package/html-static/guides/private-directory-authentication-troubleshooting.html +0 -632
  122. package/html-static/guides/private-directory-authentication.html +0 -618
  123. package/html-static/guides/public-site-deployment.html +0 -508
  124. package/html-static/guides/search-engine-verification-guide.html +0 -619
  125. package/html-static/guides/seo-guide.html +0 -738
  126. package/html-static/guides/seo-optimization-guide.html +0 -964
  127. package/html-static/guides/supabase-authentication-complete-guide.html +0 -943
  128. package/html-static/guides/troubleshooting-guide.html +0 -710
  129. package/html-static/guides/windows-setup-guide.html +0 -936
  130. package/html-static/image-modal-test.html +0 -395
  131. package/html-static/index.html +0 -599
  132. package/html-static/js/main.js +0 -1747
  133. package/html-static/prompts/Screenshot 2025-08-02 at 08.49.55.png +0 -0
  134. package/html-static/prompts/beautiful-documentation-design.html +0 -861
  135. package/html-static/prompts/markdown-document-standards.html +0 -499
  136. package/html-static/prompts/project-rename-strategy-sasha-publish.html +0 -607
  137. package/html-static/robots.txt +0 -5
  138. package/html-static/sitemap.xml +0 -195
  139. package/html-static/test-questions/how-does-it-work%3F.html +0 -371
  140. package/html-static/test-questions/step-1%3A%20getting-started.html +0 -366
  141. package/html-static/test-questions/what-is-the-purpose.html +0 -370
  142. package/html-static/vercel-cli-setup-guide.html +0 -572
  143. package/html-static/vercel-first-time-setup-guide.html +0 -531
  144. package/manage-users.sql +0 -191
  145. package/migrate-to-domain-auth.sql +0 -47
  146. package/package/CACHE-BUSTING-GUIDE.md +0 -82
  147. package/package/CHANGELOG.md +0 -902
  148. package/package/README.md +0 -248
  149. package/package/assets/css/notion-style.css +0 -2211
  150. package/package/assets/js/auth.js +0 -67
  151. package/package/assets/js/main.js +0 -1565
  152. package/package/cli.js +0 -764
  153. package/package/index.js +0 -38
  154. package/package/knowcode-doc-builder-1.3.15.tgz +0 -0
  155. package/package/lib/builder.js +0 -32
  156. package/package/lib/config.js +0 -278
  157. package/package/lib/core-builder.js +0 -957
  158. package/package/lib/deploy.js +0 -497
  159. package/package/lib/dev-server.js +0 -96
  160. package/package/package.json +0 -34
  161. package/package/scripts/npx-runner.js +0 -27
  162. package/package/scripts/setup.js +0 -56
  163. package/package/test-cache-bust.sh +0 -43
  164. package/public-config.js +0 -22
  165. package/public-html/404.html +0 -115
  166. package/public-html/README.html +0 -149
  167. package/public-html/css/notion-style.css +0 -2036
  168. package/public-html/index.html +0 -149
  169. package/public-html/js/auth.js +0 -67
  170. package/public-html/js/main.js +0 -1485
  171. package/quick-test-commands.md +0 -40
  172. package/recordings/Screenshot 2025-07-24 at 18.22.01.png +0 -0
  173. package/recordings/mh-ls-22jul.txt +0 -2305
  174. package/screenshot.png +0 -0
  175. package/scripts/Screenshot 2025-07-23 at 15.39.41.png +0 -0
  176. package/setup-database-v2.sql +0 -53
  177. package/setup-database.sql +0 -41
  178. package/test-auth-config.js +0 -17
  179. package/test-cache-bust.sh +0 -43
  180. package/test-docs/README.md +0 -39
  181. package/test-html/404.html +0 -115
  182. package/test-html/README.html +0 -172
  183. package/test-html/auth.js +0 -97
  184. package/test-html/css/notion-style.css +0 -2036
  185. package/test-html/index.html +0 -172
  186. package/test-html/js/auth.js +0 -97
  187. package/test-html/js/main.js +0 -1485
  188. package/test-html/login.html +0 -102
  189. package/test-html/logout.html +0 -18
  190. package/update-domain.sql +0 -9
  191. package/user-access-view.sql +0 -49
  192. package/user-management/README.md +0 -301
  193. package/user-management/add-users.sh +0 -776
  194. package/user-management/create-user.js +0 -65
  195. package/user-management/users.txt +0 -15
  196. package/view-all-users.sql +0 -40
  197. package/wru-auth-config.js +0 -17
@@ -1,1151 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
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="generator" content="@knowcode/doc-builder by Knowcode Ltd">
10
- <meta name="author" content="Lindsay Smith">
11
- <meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, error">
12
- <meta name="robots" content="index, follow">
13
- <link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
14
-
15
- <!-- Open Graph / Facebook -->
16
- <meta property="og:type" content="article">
17
- <meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
18
- <meta property="og:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
19
- <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...">
20
- <meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
21
- <meta property="og:site_name" content="@knowcode/doc-builder">
22
- <meta property="og:locale" content="en_US">
23
-
24
- <!-- Twitter Card -->
25
- <meta name="twitter:card" content="summary_large_image">
26
- <meta name="twitter:site" content="@planbbackups">
27
- <meta name="twitter:creator" content="@planbbackups">
28
- <meta name="twitter:title" content="Claude + CLAUDE.md Documentation Workflow Guide">
29
- <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...">
30
- <meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
31
-
32
- <!-- Custom Meta Tags -->
33
- <meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
34
- <meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
35
-
36
- <!-- Fonts -->
37
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
38
-
39
- <!-- Icons -->
40
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
41
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
42
-
43
- <!-- Mermaid -->
44
- <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
45
-
46
- <!-- Styles -->
47
- <link rel="stylesheet" href="../css/notion-style.css">
48
-
49
-
50
- <!-- Blue theme and white background overrides for static output -->
51
- <style>
52
- /* Override green colors with blue */
53
- :root {
54
- --primary: #2563eb;
55
- --primary-dark: #1d4ed8;
56
- --primary-light: #dbeafe;
57
- --accent: #3b82f6;
58
- --color-accent-green: #2563eb;
59
- --color-accent-emerald: #3b82f6;
60
-
61
- /* White backgrounds for cleaner appearance */
62
- --color-bg-secondary: #FFFFFF;
63
- --color-bg-tertiary: #FAFAFA;
64
- --color-bg-hover: #F8F9FA;
65
- }
66
-
67
- /* Override green status colors with blue variants */
68
- .nav-item.active {
69
- background-color: #dbeafe !important;
70
- color: #1d4ed8 !important;
71
- }
72
-
73
- .nav-item:hover {
74
- background-color: #eff6ff !important;
75
- }
76
-
77
- /* Override complete/success icons to blue */
78
- .ph-check-circle[style*="color: #059669"] {
79
- color: #2563eb !important;
80
- }
81
-
82
- /* Override README/home icon color */
83
- .ph-house[style*="color: #059669"] {
84
- color: #2563eb !important;
85
- }
86
-
87
- /* Override links */
88
- a {
89
- color: #2563eb;
90
- }
91
-
92
- a:hover {
93
- color: #1d4ed8;
94
- }
95
-
96
- /* Override buttons and interactive elements */
97
- .theme-toggle:hover,
98
- .menu-toggle:hover {
99
- background-color: #dbeafe;
100
- color: #1d4ed8;
101
- }
102
-
103
- /* Override nav title hover */
104
- .nav-title:hover {
105
- background-color: #eff6ff;
106
- }
107
-
108
- /* White backgrounds for sidebar and navigation */
109
- body:not(.dark-mode) .sidebar {
110
- background: #FFFFFF !important;
111
- background-color: #FFFFFF !important;
112
- border-right: 1px solid #E5E7EB !important;
113
- }
114
-
115
- body:not(.dark-mode) .nav-section {
116
- background: #FFFFFF !important;
117
- background-color: #FFFFFF !important;
118
- }
119
-
120
- body:not(.dark-mode) .nav-content {
121
- background: #FFFFFF !important;
122
- background-color: #FFFFFF !important;
123
- }
124
-
125
- body:not(.dark-mode) .navigation {
126
- background: #FFFFFF !important;
127
- background-color: #FFFFFF !important;
128
- }
129
-
130
- /* Subtle separation for nav sections */
131
- body:not(.dark-mode) .nav-section + .nav-section {
132
- border-top: 1px solid #F3F4F6;
133
- }
134
-
135
- /* Adjust hover states for white backgrounds */
136
- body:not(.dark-mode) .nav-item:hover {
137
- background-color: #F8F9FA !important;
138
- }
139
-
140
- body:not(.dark-mode) .nav-title.collapsible:hover {
141
- background-color: #F8F9FA !important;
142
- }
143
-
144
- /* Header stays white (already is) but ensure consistency */
145
- body:not(.dark-mode) .header {
146
- background: #FFFFFF !important;
147
- background-color: #FFFFFF !important;
148
- border-bottom: 1px solid #E5E7EB !important;
149
- }
150
-
151
- /* Ensure search box looks good on white */
152
- body:not(.dark-mode) .filter-input,
153
- body:not(.dark-mode) .sidebar-search {
154
- background: #F8F9FA !important;
155
- background-color: #F8F9FA !important;
156
- border: 1px solid #E5E7EB !important;
157
- }
158
-
159
- body:not(.dark-mode) .filter-input:focus,
160
- body:not(.dark-mode) .sidebar-search:focus {
161
- background: #FFFFFF !important;
162
- background-color: #FFFFFF !important;
163
- border-color: #2563eb !important;
164
- }
165
-
166
- /* Override breadcrumbs */
167
- .breadcrumbs a {
168
- color: #2563eb;
169
- }
170
-
171
- .breadcrumbs a:hover {
172
- color: #1d4ed8;
173
- background-color: #dbeafe;
174
- }
175
-
176
- /* Override filter icon */
177
- .filter-icon {
178
- color: #2563eb;
179
- }
180
-
181
- /* Override deployment info on hover */
182
- .deployment-date:hover {
183
- color: #2563eb;
184
- }
185
-
186
- /* Dark mode adjustments */
187
- body.dark-mode {
188
- --primary: #3b82f6;
189
- --primary-dark: #2563eb;
190
- --primary-light: #1e3a8a;
191
- --accent: #60a5fa;
192
- }
193
-
194
- body.dark-mode .nav-item.active {
195
- background-color: rgba(59, 130, 246, 0.1) !important;
196
- color: #60a5fa !important;
197
- }
198
-
199
- body.dark-mode .nav-item:hover {
200
- background-color: rgba(59, 130, 246, 0.05) !important;
201
- }
202
-
203
- body.dark-mode a {
204
- color: #60a5fa;
205
- }
206
-
207
- body.dark-mode a:hover {
208
- color: #93bbfc;
209
- }
210
- </style>
211
-
212
-
213
-
214
-
215
- <!-- Favicon -->
216
- <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>">
217
-
218
- <script type="application/ld+json">
219
- {
220
- "@context": "https://schema.org",
221
- "@type": "TechArticle",
222
- "headline": "Claude + CLAUDE.md Documentation Workflow Guide",
223
- "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...",
224
- "author": {
225
- "@type": "Person",
226
- "name": "Lindsay Smith"
227
- },
228
- "publisher": {
229
- "@type": "Organization",
230
- "name": "Knowcode Ltd",
231
- "url": "https://knowcode.tech"
232
- },
233
- "datePublished": "2025-08-12T21:35:01.267Z",
234
- "dateModified": "2025-08-12T21:35:01.267Z",
235
- "mainEntityOfPage": {
236
- "@type": "WebPage",
237
- "@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
238
- },
239
- "breadcrumb": {
240
- "@type": "BreadcrumbList",
241
- "itemListElement": [
242
- {
243
- "@type": "ListItem",
244
- "position": 1,
245
- "name": "@knowcode/doc-builder",
246
- "item": "https://doc-builder-delta.vercel.app"
247
- },
248
- {
249
- "@type": "ListItem",
250
- "position": 2,
251
- "name": "Guides",
252
- "item": "https://doc-builder-delta.vercel.app/guides/"
253
- },
254
- {
255
- "@type": "ListItem",
256
- "position": 3,
257
- "name": "Claude Workflow Guide",
258
- "item": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
259
- }
260
- ]
261
- }
262
- }
263
- </script>
264
- </head>
265
- <body>
266
-
267
-
268
-
269
-
270
- <!-- Breadcrumbs -->
271
- <nav class="breadcrumbs breadcrumbs-static" id="breadcrumbs" data-build-date="Aug 12, 2025, 09:35 PM UTC" data-doc-builder-version="1.9.28">
272
- <!-- Breadcrumbs will be generated by JavaScript -->
273
- </nav>
274
-
275
- <!-- Main Content -->
276
- <div class="main-wrapper">
277
- <!-- Sidebar -->
278
- <aside class="sidebar">
279
- <div class="sidebar-header">
280
- <div class="filter-box">
281
- <input type="text" placeholder="Search menu..." class="filter-input" id="nav-filter">
282
- <i class="fas fa-search filter-icon"></i>
283
- </div>
284
- </div>
285
- <nav class="navigation">
286
-
287
- <div class="nav-section" data-level="0">
288
- <a class="nav-title toggle-all-nav expanded" href="#" id="nav-toggle-all" title="Collapse/Expand All">
289
- <i class="ph ph-caret-down" id="toggle-all-icon"></i> Documentation
290
- </a>
291
- <div class="nav-content">
292
- <a href="README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="ph ph-file-text"></i> Overview</a>
293
- <a href="about-doc-builder.html" class="nav-item" data-tooltip="About @knowcode/doc-builder."><i class="ph ph-check-circle" style="color: #2563eb;"></i> About Doc Builder</a>
294
- <a href="documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Index</a>
295
- <a href="image-modal-test.html" class="nav-item" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="ph ph-file-text"></i> Image Modal Test</a>
296
- <a href="vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Vercel Cli Setup Guide</a>
297
- <a href="vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the Vercel deployment process when using ."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Vercel First Time Setup Guide</a></div></div>
298
- <div class="nav-section" data-level="1">
299
- <a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
300
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-book"></i> Guides
301
- </a>
302
- <div class="nav-content" id="nav-guides-1">
303
- <a href="guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="ph ph-file-text"></i> Authentication Default Change</a>
304
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Authentication Guide</a>
305
- <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="ph ph-pencil-simple" style="color: #d97706;"></i> Claude Workflow Guide</a>
306
- <a href="guides/configuration-guide.html" class="nav-item" data-tooltip="This guide explains how @knowcode/doc-builder handles configuration files and settings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Configuration Guide</a>
307
- <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="ph ph-pencil-simple" style="color: #d97706;"></i> Documentation Standards</a>
308
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Html Embedding Guide</a>
309
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Image Modal Guide</a>
310
- <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="ph ph-pencil-simple" style="color: #d97706;"></i> Phosphor Icons Guide</a>
311
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication</a>
312
- <a href="guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Private Directory Authentication Troubleshooting</a>
313
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Public Site Deployment</a>
314
- <a href="guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Search Engine Verification Guide</a>
315
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Seo Guide</a>
316
- <a href="guides/seo-optimization-guide.html" class="nav-item" data-tooltip="Comprehensive guide to optimizing documentation for search engines. Learn SEO best practices, use built-in features, and improve your rankings."><i class="ph ph-check-circle" style="color: #2563eb;"></i> SEO Optimization Guide for @knowcode/doc-builder</a>
317
- <a href="guides/supabase-authentication-complete-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes built-in Supabase authentication that provides enterprise-grade security with zero configuration."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Supabase Authentication Complete Guide</a>
318
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Troubleshooting Guide</a>
319
- <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="ph ph-check-circle" style="color: #2563eb;"></i> Windows Setup Guide</a></div></div>
320
- <div class="nav-section" data-level="1">
321
- <a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
322
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-chat-circle-dots"></i> Prompts
323
- </a>
324
- <div class="nav-content collapsed" id="nav-prompts-1">
325
- <a href="prompts/beautiful-documentation-design.html" class="nav-item" data-tooltip="🎨 Beautiful Documentation Design Guide."><i class="ph ph-check-circle" style="color: #2563eb;"></i> Beautiful Documentation Design</a>
326
- <a href="prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="ph ph-pencil-simple" style="color: #d97706;"></i> Markdown Document Standards</a>
327
- <a href="prompts/project-rename-strategy-sasha-publish.html" class="nav-item" data-tooltip="This document outlines the comprehensive strategy for renaming the @knowcode/doc-builder project to &quot;sasha-publish&quot;, including all package references,..."><i class="ph ph-x-circle" style="color: #dc2626;"></i> Project Rename Strategy Sasha Publish</a></div></div>
328
- <div class="nav-section" data-level="1">
329
- <a class="nav-title collapsible" href="#" data-target="nav-test-questions-1" >
330
- <i class="ph ph-caret-right collapse-icon"></i><i class="ph ph-folder"></i> Test Questions
331
- </a>
332
- <div class="nav-content collapsed" id="nav-test-questions-1">
333
- <a href="test-questions/how-does-it-work%3F.html" class="nav-item" data-tooltip="This is a test file to verify that question marks work properly in filenames."><i class="ph ph-file-text"></i> How Does It Work?</a>
334
- <a href="test-questions/step-1%3A%20getting-started.html" class="nav-item" data-tooltip="Step 1: Getting Started."><i class="ph ph-file-text"></i> Step 1: Getting Started</a>
335
- <a href="test-questions/what-is-the-purpose.html" class="nav-item" data-tooltip="Understanding the purpose of our documentation system"><i class="ph ph-file-text"></i> What Is The Purpose?</a></div></div>
336
- </nav>
337
- <div class="resize-handle"></div>
338
- </aside>
339
-
340
- <!-- Content Area -->
341
- <main class="content">
342
- <div class="content-inner">
343
- <h1>Claude + CLAUDE.md Documentation Workflow Guide</h1>
344
- <h2>Overview</h2>
345
- <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>
346
- <h2>Workflow Overview</h2>
347
- <div class="mermaid-wrapper">
348
- <div class="mermaid">graph TD
349
- A[Start Project] --> B[Setup CLAUDE.md]
350
- B --> C[Configure doc-builder]
351
- C --> D[Create Documentation with Claude]
352
- D --> E[Build Static Site]
353
- E --> F[Deploy to Vercel]
354
- F --> G[Live Documentation]
355
-
356
- B -.-> H[Refine Instructions]
357
- H -.-> D
358
-
359
- D --> I{Review Quality}
360
- I -->|Needs Improvement| H
361
- I -->|Good| E
362
-
363
- style A fill:#e1f5fe
364
- style G fill:#c8e6c9
365
- style H fill:#fff3e0</div>
366
- </div>
367
- <h2>Step 1: Setting Up CLAUDE.md</h2>
368
- <h3>1.1 Project-Level CLAUDE.md</h3>
369
- <p>Create a comprehensive <code>CLAUDE.md</code> file in your project root with specific instructions for documentation. Here&#39;s a complete example based on best practices:</p>
370
- <pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
371
-
372
- This file provides comprehensive guidance for Claude Code when working in this project.
373
-
374
- ## Project Overview
375
-
376
- **Name**: Your Project
377
- **Purpose**: Brief description of what your project does
378
- **Technology Stack**: List your key technologies (e.g., Node.js, React, AWS)
379
-
380
- ## Documentation Standards
381
-
382
- ### Document Title Format
383
- - Use `# Document Title`
384
- - Include metadata:
385
- - **Generated**: YYYY-MM-DD HH:MM UTC
386
- - **Status**: Draft/In Progress/Complete
387
- - **Verified**: ✅ (for verified information) / ❓ (for speculated information)
388
-
389
- ### Document Structure
390
- - All documentation goes in the `/docs` directory
391
- - Use hierarchical folder structure:
392
- - `docs/guides/` - How-to guides and tutorials
393
- - `docs/api/` - API reference documentation
394
- - `docs/architecture/` - System design and architecture
395
- - `docs/deployment/` - Deployment and operations guides
396
- - `docs/troubleshooting/` - Common issues and solutions
397
-
398
- ### Naming Conventions
399
- - Analysis documents: `analysis-{topic}-{specifics}.md`
400
- - Design documents: `design-{component}-{feature}.md`
401
- - Implementation plans: `plan-{feature}-implementation.md`
402
- - Technical guides: `{component}-{topic}-guide.md`
403
- - API docs: `api-{service}-reference.md`
404
- - Testing documents: `test-{component}-{type}.md`
405
-
406
- ### Content Requirements
407
-
408
- #### 1. Mermaid Diagrams
409
- - Include diagrams wherever they help explain complex concepts
410
- - Use consistent node naming and styling
411
- - Add clear labels and descriptions
412
- - Example:
413
- <div class="mermaid-wrapper">
414
- <div class="mermaid">graph TD
415
- A[User Request] --> B{Authentication}
416
- B -->|Valid| C[Process Request]
417
- B -->|Invalid| D[Return 401]
418
- C --> E[Return Response]</div>
419
- </div>
420
-
421
- #### 2. Information Verification
422
- - Mark all information as either verified (✅) or speculated (❓)
423
- - Include sources for verified information
424
- - Clearly indicate assumptions
425
- - Example:
426
- - ✅ This API endpoint requires authentication (verified in auth.js:45)
427
- - ❓ Response time should be under 200ms (performance requirement assumed)
428
-
429
- #### 3. Code Examples
430
- - Use proper syntax highlighting with language identifiers
431
- - Include context and explanations
432
- - Show both correct and incorrect usage where applicable
433
- - Add error handling in examples
434
- - Example:
435
- ```javascript
436
- // ✅ Correct way to call the API
437
- try {
438
- const response = await api.getData({ userId: 123 });
439
- console.log(&#39;Data:&#39;, response.data);
440
- } catch (error) {
441
- console.error(&#39;API Error:&#39;, error.message);
442
- }
443
-
444
- // ❌ Incorrect - missing error handling
445
- const response = await api.getData({ userId: 123 });
446
- </code></pre>
447
- <h4>4. Practical Examples</h4>
448
- <ul>
449
- <li>Include real-world scenarios</li>
450
- <li>Show complete workflows</li>
451
- <li>Add curl/httpie examples for APIs</li>
452
- <li>Include sample data</li>
453
- </ul>
454
- <h3>Writing Style</h3>
455
- <ul>
456
- <li>Use clear, concise language</li>
457
- <li>Write for your audience&#39;s technical level</li>
458
- <li>Use active voice</li>
459
- <li>Keep paragraphs short (3-4 sentences)</li>
460
- <li>Use bullet points for lists</li>
461
- <li>Bold important terms on first use</li>
462
- </ul>
463
- <h3>Standard Sections</h3>
464
- <p>Every technical document should include:</p>
465
- <ol>
466
- <li><strong>Overview</strong> - Brief description of the topic</li>
467
- <li><strong>Prerequisites</strong> - What the reader needs to know/have</li>
468
- <li><strong>Main Content</strong> - The core information</li>
469
- <li><strong>Examples</strong> - Practical demonstrations</li>
470
- <li><strong>Troubleshooting</strong> - Common issues and solutions</li>
471
- <li><strong>References</strong> - Links to related documentation</li>
472
- </ol>
473
- <h3>Tables and Structured Data</h3>
474
- <p>Use tables for comparing options or listing properties:</p>
475
- <table>
476
- <thead>
477
- <tr>
478
- <th>Property</th>
479
- <th>Type</th>
480
- <th>Required</th>
481
- <th>Description</th>
482
- </tr>
483
- </thead>
484
- <tbody><tr>
485
- <td>id</td>
486
- <td>string</td>
487
- <td>Yes</td>
488
- <td>Unique identifier</td>
489
- </tr>
490
- <tr>
491
- <td>name</td>
492
- <td>string</td>
493
- <td>Yes</td>
494
- <td>Display name</td>
495
- </tr>
496
- <tr>
497
- <td>active</td>
498
- <td>boolean</td>
499
- <td>No</td>
500
- <td>Whether the item is active</td>
501
- </tr>
502
- </tbody></table>
503
- <h3>File Organization</h3>
504
- <ul>
505
- <li>Active files in appropriate directories</li>
506
- <li>Move unused files to <code>archive/</code> with descriptive names</li>
507
- <li>Temporary files must include &quot;temp&quot; in filename</li>
508
- <li>Example structure:<pre><code>docs/
509
- ├── guides/
510
- │ ├── setup-guide.md
511
- │ └── deployment-guide.md
512
- ├── api/
513
- │ └── rest-api-reference.md
514
- └── archive/
515
- └── old-setup-guide-2024.md
516
- </code></pre>
517
- </li>
518
- </ul>
519
- <h2>Git and Version Control</h2>
520
- <h3>Commit Practices</h3>
521
- <ul>
522
- <li>Commit after material changes or milestones</li>
523
- <li>Use descriptive commit messages</li>
524
- <li>Group related changes</li>
525
- <li>Format: <code>type: Brief description</code></li>
526
- <li>Types: feat, fix, docs, style, refactor, test, chore</li>
527
- </ul>
528
- <h3>Documentation Updates</h3>
529
- <ul>
530
- <li>Update documentation when code changes</li>
531
- <li>Keep CHANGELOG.md current</li>
532
- <li>Document breaking changes prominently</li>
533
- </ul>
534
- <h2>Quality Standards</h2>
535
- <h3>Completeness</h3>
536
- <ul>
537
- <li>Cover all aspects of the topic</li>
538
- <li>Include edge cases</li>
539
- <li>Document error scenarios</li>
540
- <li>Add performance considerations</li>
541
- </ul>
542
- <h3>Accuracy</h3>
543
- <ul>
544
- <li>Verify technical details</li>
545
- <li>Test all code examples</li>
546
- <li>Review with subject matter experts</li>
547
- <li>Update when implementation changes</li>
548
- </ul>
549
- <h3>Maintenance</h3>
550
- <ul>
551
- <li>Review documentation quarterly</li>
552
- <li>Update version numbers</li>
553
- <li>Check for broken links</li>
554
- <li>Verify code examples still work</li>
555
- </ul>
556
- <h2>Special Considerations</h2>
557
- <h3>Security</h3>
558
- <ul>
559
- <li>Never include credentials or sensitive data</li>
560
- <li>Document security requirements</li>
561
- <li>Include authentication examples without real tokens</li>
562
- <li>Note security best practices</li>
563
- </ul>
564
- <h3>Performance</h3>
565
- <ul>
566
- <li>Document performance implications</li>
567
- <li>Include benchmarks where relevant</li>
568
- <li>Note resource requirements</li>
569
- <li>Add optimization tips</li>
570
- </ul>
571
- <h3>Accessibility</h3>
572
- <ul>
573
- <li>Use semantic markdown</li>
574
- <li>Include alt text for images</li>
575
- <li>Ensure good heading hierarchy</li>
576
- <li>Write clear link text (not &quot;click here&quot;)</li>
577
- </ul>
578
- <h2>AI-Specific Instructions</h2>
579
- <p>When generating documentation:</p>
580
- <ol>
581
- <li><strong>Always include the metadata header</strong> with generation date and verification status</li>
582
- <li><strong>Create working examples</strong> that can be copy-pasted</li>
583
- <li><strong>Add troubleshooting sections</strong> for common problems</li>
584
- <li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
585
- <li><strong>Mark speculated information</strong> clearly with <i style="font-size: 1.2em" class="ph ph-question" aria-label="question"></i></li>
586
- <li><strong>Follow the naming conventions</strong> exactly</li>
587
- <li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
588
- <li><strong>Add cross-references</strong> to related documentation</li>
589
- </ol>
590
- <h2>Project-Specific Patterns</h2>
591
- <p>[Add your project-specific patterns here, such as:]</p>
592
- <ul>
593
- <li>API authentication flow</li>
594
- <li>Database connection patterns</li>
595
- <li>Error handling conventions</li>
596
- <li>Logging standards</li>
597
- <li>Testing approaches</li>
598
- </ul>
599
- <h2>Common Code Snippets</h2>
600
- <p>[Add frequently used code patterns for consistency:]</p>
601
- <pre><code class="language-javascript">// Standard error handling pattern
602
- function handleError(error) {
603
- logger.error(&#39;Operation failed:&#39;, {
604
- message: error.message,
605
- stack: error.stack,
606
- timestamp: new Date().toISOString()
607
- });
608
- // ... rest of error handling
609
- }
610
- </code></pre>
611
- <h2>References</h2>
612
- <ul>
613
- <li><a href="/README.md">Project README</a></li>
614
- <li><a href="/docs/api/">API Documentation</a></li>
615
- <li><a href="/docs/architecture/">Architecture Overview</a></li>
616
- <li><a href="/CONTRIBUTING.md">Contributing Guide</a></li>
617
- </ul>
618
- <pre><code>
619
- ### 1.2 Setting Up Admin/Background/Environment Facts
620
-
621
- For Claude to generate accurate and consistent content, include key organizational and environmental facts in your CLAUDE.md. This ensures all generated documentation uses correct information:
622
-
623
- ```markdown
624
- ## Organization &amp; Environment Facts
625
-
626
- ### Company Information
627
- - **Organization Name**: Knowcode Ltd
628
- - **Website**: https://knowcode.tech
629
- - **Contact Email**: support@knowcode.tech
630
- - **GitHub Organization**: https://github.com/knowcode
631
- - **NPM Organization**: @knowcode
632
-
633
- ### Author Information
634
- - **Primary Author**: Lindsay Smith
635
- - **Author Email**: lindsay@knowcode.tech
636
- - **Author Title**: Lead Developer
637
- - **GitHub Handle**: @lindsaysmith
638
- - **Twitter/X Handle**: @planbbackups
639
-
640
- ### Project Environment
641
- - **Production URL**: https://doc-builder-delta.vercel.app
642
- - **Staging URL**: https://doc-builder-staging.vercel.app
643
- - **Documentation URL**: https://docs.knowcode.tech
644
- - **API Base URL**: https://api.knowcode.tech
645
- - **CDN URL**: https://cdn.knowcode.tech
646
-
647
- ### Default Settings
648
- - **Default Language**: en-US
649
- - **Timezone**: UTC
650
- - **Date Format**: YYYY-MM-DD
651
- - **Copyright Year**: 2025
652
- - **License**: MIT
653
- - **Version**: 1.6.2
654
-
655
- ### SEO Defaults
656
- - **Default Author**: Lindsay Smith
657
- - **Organization Type**: Software Company
658
- - **Twitter Handle**: @planbbackups
659
- - **LinkedIn**: https://linkedin.com/company/knowcode
660
- - **Facebook Page**: https://facebook.com/knowcode
661
-
662
- ### Technical Stack
663
- - **Primary Language**: JavaScript/TypeScript
664
- - **Node Version**: 20.x LTS
665
- - **Package Manager**: npm (not yarn or pnpm)
666
- - **Cloud Provider**: AWS (primary), Vercel (hosting)
667
- - **Region**: eu-west-1
668
- - **Container Registry**: Docker Hub
669
-
670
- ### Communication Standards
671
- - **Support Response Time**: 24-48 hours
672
- - **Documentation Language**: US English
673
- - **Tone**: Professional but friendly
674
- - **Technical Level**: Intermediate developers
675
-
676
- ### Branding Guidelines
677
- - **Company Tagline**: &quot;Beautiful documentation with the least effort possible&quot;
678
- - **Primary Color**: #0070f3 (Vercel blue)
679
- - **Logo**: ✨ (sparkle emoji)
680
- - **Font Family**: Inter, system-ui
681
- </code></pre>
682
- <p>When these facts are included in your CLAUDE.md, Claude will:</p>
683
- <ul>
684
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Use correct contact information in examples</li>
685
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Reference the right URLs in documentation</li>
686
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Apply consistent author attribution</li>
687
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Generate accurate meta tags for SEO</li>
688
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Use proper organizational context</li>
689
- <li><i style="font-size: 1.2em" class="ph ph-check-circle" aria-label="checked"></i> Follow established technical standards</li>
690
- </ul>
691
- <h3>1.3 Global CLAUDE.md Best Practices</h3>
692
- <p>Your global <code>~/.claude/CLAUDE.md</code> should include universal standards that apply to all projects. Here&#39;s an expanded example:</p>
693
- <pre><code class="language-markdown"># Global CLAUDE.md Instructions
694
-
695
- ## Universal Documentation Standards
696
-
697
- ### Visual Elements
698
- - Where it makes sense, include diagrams (Mermaid preferred)
699
- - Use skeleton loaders for UI components
700
- - For Trello board screenshots:
701
- - Save as: @docs/product-requirements/Screenshot YYYY-MM-DD at HH.MM.SS.png
702
- - Ensure columns are top-justified
703
- - Color-code columns by risk level
704
-
705
- ### Information Verification
706
- - Mark all verified vs. speculated information as a general document standard
707
- - Use ✅ for verified information with source references
708
- - Use ❓ for assumptions or unverified information
709
-
710
- ### Development Practices
711
- - Use Docker V2 for containerization
712
- - Name temporary test files with &quot;temp&quot; in the filename
713
- - Do git commits after material changes or milestones
714
- - Archive unused files by moving to archive/ and renaming
715
- - After debugging, suggest archiving old unused code
716
-
717
- ### Directory Organization
718
- - Create all new markdown docs in the /docs directory
719
- - Put documents in relevant subdirectories
720
- - MD docs will always go under the /docs directory
721
- - Maintain clear folder hierarchies
722
-
723
- ### Build and Deployment
724
- - Carefully manage container sizes to prevent bloat
725
- - Use multi-stage builds for Docker
726
- - Remove unnecessary dependencies during build
727
- - Leverage .dockerignore effectively
728
- - Consider Alpine or slim base images
729
- - Be cautious with npx vs npm caching issues
730
-
731
- ### Documentation Maintenance
732
- - Always maintain a CHANGELOG.md for significant changes
733
- - Check responsive breakpoints for consistency
734
- - Use table approach for columns in MD files when appropriate
735
-
736
- ### Vercel-Specific
737
- - For public access, disable project/deployment protection in Vercel console
738
- - Remember to disable Vercel authentication for public projects
739
-
740
- ### Git Workflow
741
- - Commit after every big milestone or completed major task
742
- - Use descriptive commit messages
743
- - Group related changes in single commits
744
- </code></pre>
745
- <div class="mermaid-wrapper">
746
- <div class="mermaid">graph LR
747
- A[Global CLAUDE.md] --> B[Document Standards]
748
- A --> C[Git Workflow]
749
- A --> D[Quality Checks]
750
- A --> E[Security Practices]
751
- A --> F[Development Tools]
752
-
753
- B --> B1[Naming Conventions]
754
- B --> B2[Markdown Standards]
755
- B --> B3[Diagram Requirements]
756
- B --> B4[Verification Marks]
757
-
758
- C --> C1[Commit After Milestones]
759
- C --> C2[Archive Unused Code]
760
- C --> C3[Descriptive Messages]
761
-
762
- D --> D1[Responsive Testing]
763
- D --> D2[Changelog Updates]
764
- D --> D3[Documentation Reviews]
765
-
766
- E --> E1[No Credentials]
767
- E --> E2[Access Controls]
768
- E --> E3[Secure Defaults]
769
-
770
- F --> F1[Docker V2]
771
- F --> F2[Build Optimization]
772
- F --> F3[Caching Strategies]</div>
773
- </div>
774
- <h3>1.4 Benefits of Environment Facts in Documentation</h3>
775
- <p>Including these environmental facts in your CLAUDE.md provides several key benefits:</p>
776
- <div class="mermaid-wrapper">
777
- <div class="mermaid">graph TD
778
- A[Environment Facts in CLAUDE.md] --> B[Accurate Content]
779
- A --> C[Consistent Branding]
780
- A --> D[Proper Attribution]
781
- A --> E[SEO Optimization]
782
-
783
- B --> B1[Correct URLs in examples]
784
- B --> B2[Valid email addresses]
785
- B --> B3[Accurate version numbers]
786
-
787
- C --> C1[Company name consistency]
788
- C --> C2[Tagline usage]
789
- C --> C3[Brand colors]
790
-
791
- D --> D1[Author metadata]
792
- D --> D2[Copyright notices]
793
- D --> D3[License references]
794
-
795
- E --> E1[Meta tag generation]
796
- E --> E2[Social media tags]
797
- E --> E3[Structured data]
798
-
799
- style A fill:#e3f2fd
800
- style B fill:#c8e6c9
801
- style C fill:#fff9c4
802
- style D fill:#ffccbc
803
- style E fill:#d1c4e9</div>
804
- </div>
805
- <h4>Example: Without Environment Facts</h4>
806
- <pre><code class="language-javascript">// Claude might generate:
807
- const API_URL = &#39;https://api.example.com&#39;; // ❓ Generic placeholder
808
- const author = &#39;Your Name&#39;; // ❓ Placeholder
809
- const email = &#39;email@example.com&#39;; // ❓ Generic example
810
- </code></pre>
811
- <h4>Example: With Environment Facts</h4>
812
- <pre><code class="language-javascript">// Claude will generate:
813
- const API_URL = &#39;https://api.knowcode.tech&#39;; // ✅ Actual API URL
814
- const author = &#39;Lindsay Smith&#39;; // ✅ Correct author
815
- const email = &#39;support@knowcode.tech&#39;; // ✅ Real contact email
816
- </code></pre>
817
- <h2>Step 2: Initialize doc-builder</h2>
818
- <pre><code class="language-bash"># Install doc-builder
819
- npm install -D @knowcode/doc-builder
820
-
821
- # Initialize configuration
822
- npx doc-builder init
823
- </code></pre>
824
- <h3>2.1 Configure doc-builder.config.js</h3>
825
- <pre><code class="language-javascript">module.exports = {
826
- siteName: &#39;Your Project Documentation&#39;,
827
- siteDescription: &#39;Comprehensive documentation for Your Project&#39;,
828
- docsDir: &#39;docs&#39;,
829
- outputDir: &#39;html&#39;,
830
- features: {
831
- authentication: false, // Set true for private docs
832
- changelog: true,
833
- mermaid: true,
834
- darkMode: true
835
- }
836
- };
837
- </code></pre>
838
- <h2>Step 3: Documentation Creation Workflow with Claude</h2>
839
- <h3>3.1 Effective Prompting Strategy</h3>
840
- <div class="mermaid-wrapper">
841
- <div class="mermaid">sequenceDiagram
842
- participant User
843
- participant Claude
844
- participant CLAUDE.md
845
- participant Documentation
846
-
847
- User->>Claude: Request documentation
848
- Claude->>CLAUDE.md: Check project standards
849
- CLAUDE.md-->>Claude: Return guidelines
850
- Claude->>Documentation: Create/Update docs
851
- Claude->>User: Confirm completion
852
- User->>Claude: Review & refine
853
- Claude->>Documentation: Apply refinements</div>
854
- </div>
855
- <h3>3.2 Example Documentation Requests</h3>
856
- <h4>Initial Architecture Documentation</h4>
857
- <pre><code>&quot;Create comprehensive architecture documentation for our authentication system. Include:
858
- - System overview with mermaid diagrams
859
- - Component interactions
860
- - API endpoints
861
- - Security considerations
862
- - Deployment architecture&quot;
863
- </code></pre>
864
- <h4>API Documentation</h4>
865
- <pre><code>&quot;Document all REST API endpoints in our user service. For each endpoint include:
866
- - HTTP method and path
867
- - Request/response schemas
868
- - Authentication requirements
869
- - Example requests with curl
870
- - Error responses&quot;
871
- </code></pre>
872
- <h4>Setup Guide</h4>
873
- <pre><code>&quot;Create a detailed setup guide for new developers including:
874
- - Prerequisites
875
- - Environment setup steps
876
- - Configuration options
877
- - Common issues and solutions
878
- - Development workflow&quot;
879
- </code></pre>
880
- <h3>3.3 Claude Interaction Best Practices</h3>
881
- <ol>
882
- <li><strong>Be Specific</strong>: Provide clear requirements and expected structure</li>
883
- <li><strong>Iterate</strong>: Review generated content and request refinements</li>
884
- <li><strong>Verify</strong>: Ask Claude to mark verified vs speculated information</li>
885
- <li><strong>Examples</strong>: Request concrete examples and code snippets</li>
886
- <li><strong>Diagrams</strong>: Explicitly request mermaid diagrams for visual clarity</li>
887
- </ol>
888
- <h2>Step 4: Building Documentation Site</h2>
889
- <h3>4.1 Development Workflow</h3>
890
- <div class="mermaid-wrapper">
891
- <div class="mermaid">graph LR
892
- A[Write Docs] --> B[Preview Locally]
893
- B --> C{Looks Good?}
894
- C -->|No| A
895
- C -->|Yes| D[Build Site]
896
- D --> E[Test Build]
897
- E --> F{All Good?}
898
- F -->|No| A
899
- F -->|Yes| G[Ready to Deploy]
900
-
901
- style A fill:#fff3e0
902
- style G fill:#c8e6c9</div>
903
- </div>
904
- <h3>4.2 Commands</h3>
905
- <pre><code class="language-bash"># Start development server
906
- npm run dev:docs
907
-
908
- # Build static site
909
- npm run build:docs
910
-
911
- # Preview built site
912
- npx serve html
913
- </code></pre>
914
- <h2>Step 5: Deploying to Vercel</h2>
915
- <h3>5.1 First-Time Setup</h3>
916
- <pre><code class="language-bash"># Deploy to Vercel (interactive)
917
- npx doc-builder deploy
918
-
919
- # Or with npm script
920
- npm run deploy:docs
921
- </code></pre>
922
- <h3>5.2 Vercel Configuration</h3>
923
- <p>The tool automatically creates <code>vercel.json</code>:</p>
924
- <pre><code class="language-json">{
925
- &quot;outputDirectory&quot;: &quot;html&quot;,
926
- &quot;routes&quot;: [
927
- {
928
- &quot;src&quot;: &quot;/(.*)&quot;,
929
- &quot;dest&quot;: &quot;/$1&quot;
930
- }
931
- ]
932
- }
933
- </code></pre>
934
- <h3>5.3 Deployment Workflow</h3>
935
- <div class="mermaid-wrapper">
936
- <div class="mermaid">stateDiagram-v2
937
- [*] --> LocalDevelopment
938
- LocalDevelopment --> BuildDocs: npm run build:docs
939
- BuildDocs --> TestLocally: npx serve html
940
- TestLocally --> Deploy: npx doc-builder deploy
941
- Deploy --> VercelProcessing
942
- VercelProcessing --> LiveSite: Success
943
- VercelProcessing --> ErrorHandling: Failed
944
- ErrorHandling --> LocalDevelopment: Fix issues
945
- LiveSite --> [*]</div>
946
- </div>
947
- <h2>Step 6: Continuous Documentation Updates</h2>
948
- <h3>6.1 Update Workflow</h3>
949
- <div class="mermaid-wrapper">
950
- <div class="mermaid">graph TD
951
- A[Code Changes] --> B{Docs Needed?}
952
- B -->|Yes| C[Update Documentation]
953
- B -->|No| End[End]
954
- C --> D[Use Claude for Updates]
955
- D --> E[Review Changes]
956
- E --> F[Build & Test]
957
- F --> G[Deploy Updates]
958
- G --> H[Update CHANGELOG.md]
959
- H --> End
960
-
961
- style A fill:#ffebee
962
- style G fill:#e8f5e9</div>
963
- </div>
964
- <h3>6.2 Maintaining Documentation Quality</h3>
965
- <ol>
966
- <li><strong>Regular Reviews</strong>: Schedule periodic documentation reviews</li>
967
- <li><strong>Automated Checks</strong>: Add documentation linting to CI/CD</li>
968
- <li><strong>User Feedback</strong>: Create feedback mechanism for documentation</li>
969
- <li><strong>Version Tracking</strong>: Maintain documentation versions with code versions</li>
970
- </ol>
971
- <h2>Advanced CLAUDE.md Refinements</h2>
972
- <h3>7.1 Project-Specific Instructions</h3>
973
- <pre><code class="language-markdown">## Project-Specific Documentation Rules
974
-
975
- ### Component Documentation
976
- - Each major component needs its own guide
977
- - Include architecture decisions
978
- - Document integration points
979
- - Add performance considerations
980
- - Note dependencies and version requirements
981
-
982
- ### Code Examples
983
- - Use the project&#39;s primary language (e.g., TypeScript, JavaScript)
984
- - Include error handling in all examples
985
- - Show both correct and incorrect usage
986
- - Add inline comments for clarity
987
- - Test all examples before including
988
- - Include import statements
989
-
990
- ### API Documentation
991
- - Document all public endpoints
992
- - Include authentication requirements
993
- - Show request/response examples
994
- - Document rate limits
995
- - Include error response codes
996
- - Add curl examples for testing
997
-
998
- ### Diagrams
999
- - Use mermaid for all flow diagrams
1000
- - Include sequence diagrams for APIs
1001
- - Add state diagrams for complex logic
1002
- - Create entity relationship diagrams for data models
1003
- - Use consistent styling and colors
1004
- - Add titles to all diagrams
1005
-
1006
- ### Testing Documentation
1007
- - Document test setup requirements
1008
- - Include example test cases
1009
- - Show how to run specific test suites
1010
- - Document mocking strategies
1011
- - Include performance benchmarks
1012
-
1013
- ### Deployment Documentation
1014
- - Include environment-specific configurations
1015
- - Document secret management
1016
- - Show deployment commands
1017
- - Include rollback procedures
1018
- - Document monitoring setup
1019
- </code></pre>
1020
- <h3>7.2 Documentation Templates</h3>
1021
- <p>Create templates in your CLAUDE.md:</p>
1022
- <pre><code class="language-markdown">## Documentation Templates
1023
-
1024
- ### API Endpoint Template
1025
- </code></pre>
1026
- <h2>[HTTP Method] /api/[endpoint]</h2>
1027
- <p><strong>Purpose</strong>: [Brief description]</p>
1028
- <h3>Request</h3>
1029
- <ul>
1030
- <li><strong>Headers</strong>: <ul>
1031
- <li><code>Authorization: Bearer [token]</code></li>
1032
- <li><code>Content-Type: application/json</code></li>
1033
- </ul>
1034
- </li>
1035
- <li><strong>Body</strong>:<pre><code class="language-json">{
1036
- &quot;field&quot;: &quot;value&quot;
1037
- }
1038
- </code></pre>
1039
- </li>
1040
- </ul>
1041
- <h3>Response</h3>
1042
- <ul>
1043
- <li><strong>Success (200)</strong>:<pre><code class="language-json">{
1044
- &quot;data&quot;: {}
1045
- }
1046
- </code></pre>
1047
- </li>
1048
- <li><strong>Error (4xx/5xx)</strong>:<pre><code class="language-json">{
1049
- &quot;error&quot;: &quot;Description&quot;
1050
- }
1051
- </code></pre>
1052
- </li>
1053
- </ul>
1054
- <h3>Examples</h3>
1055
- <pre><code class="language-bash">curl -X POST https://api.example.com/endpoint \
1056
- -H &quot;Authorization: Bearer token&quot; \
1057
- -d &#39;{&quot;field&quot;: &quot;value&quot;}&#39;
1058
- </code></pre>
1059
- <pre><code>
1060
- ## Best Practices Summary
1061
-
1062
- ### Documentation Creation
1063
- 1. ✅ Use CLAUDE.md to maintain consistency across all documentation
1064
- 2. ✅ Include visual diagrams (Mermaid) for complex concepts and workflows
1065
- 3. ✅ Provide practical, working examples that can be copy-pasted
1066
- 4. ✅ Mark verification status (✅/❓) for all technical information
1067
- 5. ✅ Keep documentation close to code in the /docs directory
1068
- 6. ✅ Include metadata headers with timestamps and status
1069
- 7. ✅ Add troubleshooting sections for common issues
1070
- 8. ✅ Cross-reference related documentation
1071
-
1072
- ### Claude Interaction
1073
- 1. ✅ Provide clear, specific requests with expected output format
1074
- 2. ✅ Reference existing patterns from CLAUDE.md
1075
- 3. ✅ Request iterative improvements - review and refine
1076
- 4. ✅ Verify technical accuracy of generated content
1077
- 5. ✅ Ask for troubleshooting sections explicitly
1078
- 6. ✅ Request examples with error handling
1079
- 7. ✅ Specify diagram types needed (sequence, flow, state)
1080
- 8. ✅ Ask Claude to check its own work against CLAUDE.md standards
1081
-
1082
- ### Documentation Maintenance
1083
- 1. ✅ Update docs when code changes
1084
- 2. ✅ Archive outdated documentation
1085
- 3. ✅ Maintain CHANGELOG.md
1086
- 4. ✅ Review documentation quarterly
1087
- 5. ✅ Test all code examples
1088
- 6. ✅ Check for broken links
1089
- 7. ✅ Update version references
1090
-
1091
- ### Deployment
1092
- 1. ✅ Test locally before deploying (npm run dev:docs)
1093
- 2. ✅ Build and verify output (npm run build:docs)
1094
- 3. ✅ Use preview deployments first
1095
- 4. ✅ Configure custom domains if needed
1096
- 5. ✅ Enable HTTPS (automatic with Vercel)
1097
- 6. ✅ Monitor deployment health
1098
- 7. ✅ Disable Vercel authentication for public docs
1099
- 8. ✅ Commit documentation changes before deploying
1100
-
1101
- ## Common Issues and Solutions
1102
-
1103
- ### Issue 1: Claude Not Following Standards
1104
- **Solution**: Refine CLAUDE.md with more specific examples and explicit requirements
1105
-
1106
- ### Issue 2: Documentation Build Fails
1107
- **Solution**: Check markdown syntax, ensure all links are valid, verify mermaid syntax
1108
-
1109
- ### Issue 3: Vercel Deployment Issues
1110
- **Solution**: Check vercel.json configuration, ensure output directory is correct
1111
-
1112
- ### Issue 4: Navigation Not Generated
1113
- **Solution**: Verify folder structure follows conventions, check for special characters in filenames
1114
-
1115
- ## Conclusion
1116
-
1117
- This workflow enables efficient, high-quality documentation creation by:
1118
- - Leveraging Claude&#39;s capabilities with clear guidelines
1119
- - Using doc-builder for beautiful, searchable output
1120
- - Deploying seamlessly to Vercel for instant access
1121
- - Maintaining consistency through CLAUDE.md refinements
1122
-
1123
- The key to success is iterative refinement of your CLAUDE.md file to capture your team&#39;s specific documentation needs and standards.
1124
-
1125
- ## Document History
1126
-
1127
- | Date | Author | Changes |
1128
- |------|--------|---------|
1129
- | 2025-07-21 | Claude | Initial creation |
1130
- | 2025-07-23 | Lindsay Smith | Added section on environment facts for accurate content generation |
1131
- </code></pre>
1132
-
1133
- </div>
1134
- </main>
1135
- </div>
1136
-
1137
- <!-- Scripts -->
1138
- <script>
1139
- // Pass configuration to frontend
1140
- window.docBuilderConfig = {
1141
- features: {
1142
- showPdfDownload: true,
1143
- menuDefaultOpen: false,
1144
- mermaidEnhanced: true
1145
- }
1146
- };
1147
- </script>
1148
- <script src="../js/main.js"></script>
1149
-
1150
- </body>
1151
- </html>