@knowcode/doc-builder 1.5.17 → 1.5.18
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/CHANGELOG.md +11 -0
- package/html/README.html +3 -3
- package/html/css/notion-style.css +2 -0
- package/html/documentation-index.html +3 -3
- package/html/guides/authentication-guide.html +3 -3
- package/html/guides/claude-workflow-guide.html +375 -43
- package/html/guides/documentation-standards.html +3 -3
- package/html/guides/google-site-verification-guide.html +3 -3
- package/html/guides/phosphor-icons-guide.html +3 -3
- package/html/guides/seo-guide.html +3 -3
- package/html/guides/seo-optimization-guide.html +3 -3
- package/html/guides/troubleshooting-guide.html +3 -3
- package/html/guides/windows-setup-guide.html +130 -34
- package/html/index.html +3 -3
- package/html/sitemap.xml +17 -17
- package/html/vercel-cli-setup-guide.html +3 -3
- package/html/vercel-first-time-setup-guide.html +3 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,17 @@ All notable changes to @knowcode/doc-builder will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [1.5.18] - 2025-07-22
|
|
9
|
+
|
|
10
|
+
### Documentation
|
|
11
|
+
- Enhanced Claude + CLAUDE.md Documentation Workflow Guide with comprehensive examples
|
|
12
|
+
- Expanded Project-Level CLAUDE.md section with complete template and best practices
|
|
13
|
+
- Added detailed document structure, naming conventions, and content requirements
|
|
14
|
+
- Included information verification standards with ✅/❓ marks
|
|
15
|
+
- Expanded Global CLAUDE.md best practices with real-world examples
|
|
16
|
+
- Enhanced project-specific instructions for API, testing, and deployment docs
|
|
17
|
+
- Updated best practices summary with detailed guidelines for documentation maintenance
|
|
18
|
+
|
|
8
19
|
## [1.5.17] - 2025-07-22
|
|
9
20
|
|
|
10
21
|
### Changed
|
package/html/README.html
CHANGED
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.097Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.097Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/README.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
|
@@ -682,12 +682,14 @@ th {
|
|
|
682
682
|
background: var(--color-bg-secondary);
|
|
683
683
|
border-bottom: 1px solid var(--color-border-default);
|
|
684
684
|
color: var(--color-text-primary);
|
|
685
|
+
vertical-align: top;
|
|
685
686
|
}
|
|
686
687
|
|
|
687
688
|
td {
|
|
688
689
|
padding: var(--space-3) var(--space-4);
|
|
689
690
|
border-bottom: 1px solid var(--color-border-default);
|
|
690
691
|
color: var(--color-text-primary);
|
|
692
|
+
vertical-align: top;
|
|
691
693
|
}
|
|
692
694
|
|
|
693
695
|
tr:last-child td {
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.111Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.111Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/documentation-index.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.115Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.115Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/authentication-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<title>Claude + CLAUDE.md Documentation Workflow Guide</title>
|
|
8
8
|
|
|
9
9
|
<meta name="author" content="Lindsay Smith">
|
|
10
|
-
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude,
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, claude, error">
|
|
11
11
|
<meta name="robots" content="index, follow">
|
|
12
12
|
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html">
|
|
13
13
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.122Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.122Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -203,54 +203,341 @@
|
|
|
203
203
|
</div>
|
|
204
204
|
<h2>Step 1: Setting Up CLAUDE.md</h2>
|
|
205
205
|
<h3>1.1 Project-Level CLAUDE.md</h3>
|
|
206
|
-
<p>Create a <code>CLAUDE.md</code> file in your project root with specific instructions for documentation:</p>
|
|
206
|
+
<p>Create a comprehensive <code>CLAUDE.md</code> file in your project root with specific instructions for documentation. Here's a complete example based on best practices:</p>
|
|
207
207
|
<pre><code class="language-markdown"># CLAUDE.md - [Your Project Name]
|
|
208
208
|
|
|
209
|
+
This file provides comprehensive guidance for Claude Code when working in this project.
|
|
210
|
+
|
|
211
|
+
## Project Overview
|
|
212
|
+
|
|
213
|
+
**Name**: Your Project
|
|
214
|
+
**Purpose**: Brief description of what your project does
|
|
215
|
+
**Technology Stack**: List your key technologies (e.g., Node.js, React, AWS)
|
|
216
|
+
|
|
209
217
|
## Documentation Standards
|
|
210
218
|
|
|
219
|
+
### Document Title Format
|
|
220
|
+
- Use `# Document Title`
|
|
221
|
+
- Include metadata:
|
|
222
|
+
- **Generated**: YYYY-MM-DD HH:MM UTC
|
|
223
|
+
- **Status**: Draft/In Progress/Complete
|
|
224
|
+
- **Verified**: <i class="ph ph-check-circle" aria-label="checked"></i> (for verified information) / <i class="ph ph-question" aria-label="question"></i> (for speculated information)
|
|
225
|
+
|
|
211
226
|
### Document Structure
|
|
212
227
|
- All documentation goes in the `/docs` directory
|
|
213
|
-
- Use hierarchical folder structure
|
|
214
|
-
-
|
|
228
|
+
- Use hierarchical folder structure:
|
|
229
|
+
- `docs/guides/` - How-to guides and tutorials
|
|
230
|
+
- `docs/api/` - API reference documentation
|
|
231
|
+
- `docs/architecture/` - System design and architecture
|
|
232
|
+
- `docs/deployment/` - Deployment and operations guides
|
|
233
|
+
- `docs/troubleshooting/` - Common issues and solutions
|
|
234
|
+
|
|
235
|
+
### Naming Conventions
|
|
236
|
+
- Analysis documents: `analysis-{topic}-{specifics}.md`
|
|
237
|
+
- Design documents: `design-{component}-{feature}.md`
|
|
238
|
+
- Implementation plans: `plan-{feature}-implementation.md`
|
|
239
|
+
- Technical guides: `{component}-{topic}-guide.md`
|
|
240
|
+
- API docs: `api-{service}-reference.md`
|
|
241
|
+
- Testing documents: `test-{component}-{type}.md`
|
|
215
242
|
|
|
216
243
|
### Content Requirements
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
-
|
|
220
|
-
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
244
|
+
|
|
245
|
+
#### 1. Mermaid Diagrams
|
|
246
|
+
- Include diagrams wherever they help explain complex concepts
|
|
247
|
+
- Use consistent node naming and styling
|
|
248
|
+
- Add clear labels and descriptions
|
|
249
|
+
- Example:
|
|
250
|
+
<div class="mermaid-wrapper">
|
|
251
|
+
<div class="mermaid">graph TD
|
|
252
|
+
A[User Request] --> B{Authentication}
|
|
253
|
+
B -->|Valid| C[Process Request]
|
|
254
|
+
B -->|Invalid| D[Return 401]
|
|
255
|
+
C --> E[Return Response]</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
#### 2. Information Verification
|
|
259
|
+
- Mark all information as either verified (<i class="ph ph-check-circle" aria-label="checked"></i>) or speculated (<i class="ph ph-question" aria-label="question"></i>)
|
|
260
|
+
- Include sources for verified information
|
|
261
|
+
- Clearly indicate assumptions
|
|
262
|
+
- Example:
|
|
263
|
+
- <i class="ph ph-check-circle" aria-label="checked"></i> This API endpoint requires authentication (verified in auth.js:45)
|
|
264
|
+
- <i class="ph ph-question" aria-label="question"></i> Response time should be under 200ms (performance requirement assumed)
|
|
265
|
+
|
|
266
|
+
#### 3. Code Examples
|
|
267
|
+
- Use proper syntax highlighting with language identifiers
|
|
268
|
+
- Include context and explanations
|
|
269
|
+
- Show both correct and incorrect usage where applicable
|
|
270
|
+
- Add error handling in examples
|
|
271
|
+
- Example:
|
|
272
|
+
```javascript
|
|
273
|
+
// <i class="ph ph-check-circle" aria-label="checked"></i> Correct way to call the API
|
|
274
|
+
try {
|
|
275
|
+
const response = await api.getData({ userId: 123 });
|
|
276
|
+
console.log('Data:', response.data);
|
|
277
|
+
} catch (error) {
|
|
278
|
+
console.error('API Error:', error.message);
|
|
279
|
+
}
|
|
280
|
+
|
|
281
|
+
// <i class="ph ph-x-circle" aria-label="error"></i> Incorrect - missing error handling
|
|
282
|
+
const response = await api.getData({ userId: 123 });
|
|
283
|
+
</code></pre>
|
|
284
|
+
<h4>4. Practical Examples</h4>
|
|
285
|
+
<ul>
|
|
286
|
+
<li>Include real-world scenarios</li>
|
|
287
|
+
<li>Show complete workflows</li>
|
|
288
|
+
<li>Add curl/httpie examples for APIs</li>
|
|
289
|
+
<li>Include sample data</li>
|
|
290
|
+
</ul>
|
|
291
|
+
<h3>Writing Style</h3>
|
|
292
|
+
<ul>
|
|
293
|
+
<li>Use clear, concise language</li>
|
|
294
|
+
<li>Write for your audience's technical level</li>
|
|
295
|
+
<li>Use active voice</li>
|
|
296
|
+
<li>Keep paragraphs short (3-4 sentences)</li>
|
|
297
|
+
<li>Use bullet points for lists</li>
|
|
298
|
+
<li>Bold important terms on first use</li>
|
|
299
|
+
</ul>
|
|
300
|
+
<h3>Standard Sections</h3>
|
|
301
|
+
<p>Every technical document should include:</p>
|
|
302
|
+
<ol>
|
|
303
|
+
<li><strong>Overview</strong> - Brief description of the topic</li>
|
|
304
|
+
<li><strong>Prerequisites</strong> - What the reader needs to know/have</li>
|
|
305
|
+
<li><strong>Main Content</strong> - The core information</li>
|
|
306
|
+
<li><strong>Examples</strong> - Practical demonstrations</li>
|
|
307
|
+
<li><strong>Troubleshooting</strong> - Common issues and solutions</li>
|
|
308
|
+
<li><strong>References</strong> - Links to related documentation</li>
|
|
309
|
+
</ol>
|
|
310
|
+
<h3>Tables and Structured Data</h3>
|
|
311
|
+
<p>Use tables for comparing options or listing properties:</p>
|
|
312
|
+
<table>
|
|
313
|
+
<thead>
|
|
314
|
+
<tr>
|
|
315
|
+
<th>Property</th>
|
|
316
|
+
<th>Type</th>
|
|
317
|
+
<th>Required</th>
|
|
318
|
+
<th>Description</th>
|
|
319
|
+
</tr>
|
|
320
|
+
</thead>
|
|
321
|
+
<tbody><tr>
|
|
322
|
+
<td>id</td>
|
|
323
|
+
<td>string</td>
|
|
324
|
+
<td>Yes</td>
|
|
325
|
+
<td>Unique identifier</td>
|
|
326
|
+
</tr>
|
|
327
|
+
<tr>
|
|
328
|
+
<td>name</td>
|
|
329
|
+
<td>string</td>
|
|
330
|
+
<td>Yes</td>
|
|
331
|
+
<td>Display name</td>
|
|
332
|
+
</tr>
|
|
333
|
+
<tr>
|
|
334
|
+
<td>active</td>
|
|
335
|
+
<td>boolean</td>
|
|
336
|
+
<td>No</td>
|
|
337
|
+
<td>Whether the item is active</td>
|
|
338
|
+
</tr>
|
|
339
|
+
</tbody></table>
|
|
340
|
+
<h3>File Organization</h3>
|
|
341
|
+
<ul>
|
|
342
|
+
<li>Active files in appropriate directories</li>
|
|
343
|
+
<li>Move unused files to <code>archive/</code> with descriptive names</li>
|
|
344
|
+
<li>Temporary files must include "temp" in filename</li>
|
|
345
|
+
<li>Example structure:<pre><code>docs/
|
|
346
|
+
├── guides/
|
|
347
|
+
│ ├── setup-guide.md
|
|
348
|
+
│ └── deployment-guide.md
|
|
349
|
+
├── api/
|
|
350
|
+
│ └── rest-api-reference.md
|
|
351
|
+
└── archive/
|
|
352
|
+
└── old-setup-guide-2024.md
|
|
229
353
|
</code></pre>
|
|
230
|
-
|
|
354
|
+
</li>
|
|
355
|
+
</ul>
|
|
356
|
+
<h2>Git and Version Control</h2>
|
|
357
|
+
<h3>Commit Practices</h3>
|
|
358
|
+
<ul>
|
|
359
|
+
<li>Commit after material changes or milestones</li>
|
|
360
|
+
<li>Use descriptive commit messages</li>
|
|
361
|
+
<li>Group related changes</li>
|
|
362
|
+
<li>Format: <code>type: Brief description</code></li>
|
|
363
|
+
<li>Types: feat, fix, docs, style, refactor, test, chore</li>
|
|
364
|
+
</ul>
|
|
365
|
+
<h3>Documentation Updates</h3>
|
|
366
|
+
<ul>
|
|
367
|
+
<li>Update documentation when code changes</li>
|
|
368
|
+
<li>Keep CHANGELOG.md current</li>
|
|
369
|
+
<li>Document breaking changes prominently</li>
|
|
370
|
+
</ul>
|
|
371
|
+
<h2>Quality Standards</h2>
|
|
372
|
+
<h3>Completeness</h3>
|
|
373
|
+
<ul>
|
|
374
|
+
<li>Cover all aspects of the topic</li>
|
|
375
|
+
<li>Include edge cases</li>
|
|
376
|
+
<li>Document error scenarios</li>
|
|
377
|
+
<li>Add performance considerations</li>
|
|
378
|
+
</ul>
|
|
379
|
+
<h3>Accuracy</h3>
|
|
380
|
+
<ul>
|
|
381
|
+
<li>Verify technical details</li>
|
|
382
|
+
<li>Test all code examples</li>
|
|
383
|
+
<li>Review with subject matter experts</li>
|
|
384
|
+
<li>Update when implementation changes</li>
|
|
385
|
+
</ul>
|
|
386
|
+
<h3>Maintenance</h3>
|
|
387
|
+
<ul>
|
|
388
|
+
<li>Review documentation quarterly</li>
|
|
389
|
+
<li>Update version numbers</li>
|
|
390
|
+
<li>Check for broken links</li>
|
|
391
|
+
<li>Verify code examples still work</li>
|
|
392
|
+
</ul>
|
|
393
|
+
<h2>Special Considerations</h2>
|
|
394
|
+
<h3>Security</h3>
|
|
395
|
+
<ul>
|
|
396
|
+
<li>Never include credentials or sensitive data</li>
|
|
397
|
+
<li>Document security requirements</li>
|
|
398
|
+
<li>Include authentication examples without real tokens</li>
|
|
399
|
+
<li>Note security best practices</li>
|
|
400
|
+
</ul>
|
|
401
|
+
<h3>Performance</h3>
|
|
402
|
+
<ul>
|
|
403
|
+
<li>Document performance implications</li>
|
|
404
|
+
<li>Include benchmarks where relevant</li>
|
|
405
|
+
<li>Note resource requirements</li>
|
|
406
|
+
<li>Add optimization tips</li>
|
|
407
|
+
</ul>
|
|
408
|
+
<h3>Accessibility</h3>
|
|
409
|
+
<ul>
|
|
410
|
+
<li>Use semantic markdown</li>
|
|
411
|
+
<li>Include alt text for images</li>
|
|
412
|
+
<li>Ensure good heading hierarchy</li>
|
|
413
|
+
<li>Write clear link text (not "click here")</li>
|
|
414
|
+
</ul>
|
|
415
|
+
<h2>AI-Specific Instructions</h2>
|
|
416
|
+
<p>When generating documentation:</p>
|
|
417
|
+
<ol>
|
|
418
|
+
<li><strong>Always include the metadata header</strong> with generation date and verification status</li>
|
|
419
|
+
<li><strong>Create working examples</strong> that can be copy-pasted</li>
|
|
420
|
+
<li><strong>Add troubleshooting sections</strong> for common problems</li>
|
|
421
|
+
<li><strong>Include mermaid diagrams</strong> for workflows and architectures</li>
|
|
422
|
+
<li><strong>Mark speculated information</strong> clearly with <i class="ph ph-question" aria-label="question"></i></li>
|
|
423
|
+
<li><strong>Follow the naming conventions</strong> exactly</li>
|
|
424
|
+
<li><strong>Create comprehensive content</strong> - aim for completeness over brevity</li>
|
|
425
|
+
<li><strong>Add cross-references</strong> to related documentation</li>
|
|
426
|
+
</ol>
|
|
427
|
+
<h2>Project-Specific Patterns</h2>
|
|
428
|
+
<p>[Add your project-specific patterns here, such as:]</p>
|
|
429
|
+
<ul>
|
|
430
|
+
<li>API authentication flow</li>
|
|
431
|
+
<li>Database connection patterns</li>
|
|
432
|
+
<li>Error handling conventions</li>
|
|
433
|
+
<li>Logging standards</li>
|
|
434
|
+
<li>Testing approaches</li>
|
|
435
|
+
</ul>
|
|
436
|
+
<h2>Common Code Snippets</h2>
|
|
437
|
+
<p>[Add frequently used code patterns for consistency:]</p>
|
|
438
|
+
<pre><code class="language-javascript">// Standard error handling pattern
|
|
439
|
+
function handleError(error) {
|
|
440
|
+
logger.error('Operation failed:', {
|
|
441
|
+
message: error.message,
|
|
442
|
+
stack: error.stack,
|
|
443
|
+
timestamp: new Date().toISOString()
|
|
444
|
+
});
|
|
445
|
+
// ... rest of error handling
|
|
446
|
+
}
|
|
447
|
+
</code></pre>
|
|
448
|
+
<h2>References</h2>
|
|
449
|
+
<ul>
|
|
450
|
+
<li><a href="/README.md">Project README</a></li>
|
|
451
|
+
<li><a href="/docs/api/">API Documentation</a></li>
|
|
452
|
+
<li><a href="/docs/architecture/">Architecture Overview</a></li>
|
|
453
|
+
<li><a href="/CONTRIBUTING.md">Contributing Guide</a></li>
|
|
454
|
+
</ul>
|
|
231
455
|
<pre><code>
|
|
456
|
+
### 1.2 Global CLAUDE.md Best Practices
|
|
457
|
+
|
|
458
|
+
Your global `~/.claude/CLAUDE.md` should include universal standards that apply to all projects. Here's an expanded example:
|
|
459
|
+
|
|
460
|
+
```markdown
|
|
461
|
+
# Global CLAUDE.md Instructions
|
|
462
|
+
|
|
463
|
+
## Universal Documentation Standards
|
|
464
|
+
|
|
465
|
+
### Visual Elements
|
|
466
|
+
- Where it makes sense, include diagrams (Mermaid preferred)
|
|
467
|
+
- Use skeleton loaders for UI components
|
|
468
|
+
- For Trello board screenshots:
|
|
469
|
+
- Save as: @docs/product-requirements/Screenshot YYYY-MM-DD at HH.MM.SS.png
|
|
470
|
+
- Ensure columns are top-justified
|
|
471
|
+
- Color-code columns by risk level
|
|
472
|
+
|
|
473
|
+
### Information Verification
|
|
474
|
+
- Mark all verified vs. speculated information as a general document standard
|
|
475
|
+
- Use <i class="ph ph-check-circle" aria-label="checked"></i> for verified information with source references
|
|
476
|
+
- Use <i class="ph ph-question" aria-label="question"></i> for assumptions or unverified information
|
|
477
|
+
|
|
478
|
+
### Development Practices
|
|
479
|
+
- Use Docker V2 for containerization
|
|
480
|
+
- Name temporary test files with "temp" in the filename
|
|
481
|
+
- Do git commits after material changes or milestones
|
|
482
|
+
- Archive unused files by moving to archive/ and renaming
|
|
483
|
+
- After debugging, suggest archiving old unused code
|
|
484
|
+
|
|
485
|
+
### Directory Organization
|
|
486
|
+
- Create all new markdown docs in the /docs directory
|
|
487
|
+
- Put documents in relevant subdirectories
|
|
488
|
+
- MD docs will always go under the /docs directory
|
|
489
|
+
- Maintain clear folder hierarchies
|
|
490
|
+
|
|
491
|
+
### Build and Deployment
|
|
492
|
+
- Carefully manage container sizes to prevent bloat
|
|
493
|
+
- Use multi-stage builds for Docker
|
|
494
|
+
- Remove unnecessary dependencies during build
|
|
495
|
+
- Leverage .dockerignore effectively
|
|
496
|
+
- Consider Alpine or slim base images
|
|
497
|
+
- Be cautious with npx vs npm caching issues
|
|
498
|
+
|
|
499
|
+
### Documentation Maintenance
|
|
500
|
+
- Always maintain a CHANGELOG.md for significant changes
|
|
501
|
+
- Check responsive breakpoints for consistency
|
|
502
|
+
- Use table approach for columns in MD files when appropriate
|
|
503
|
+
|
|
504
|
+
### Vercel-Specific
|
|
505
|
+
- For public access, disable project/deployment protection in Vercel console
|
|
506
|
+
- Remember to disable Vercel authentication for public projects
|
|
507
|
+
|
|
508
|
+
### Git Workflow
|
|
509
|
+
- Commit after every big milestone or completed major task
|
|
510
|
+
- Use descriptive commit messages
|
|
511
|
+
- Group related changes in single commits
|
|
232
512
|
</code></pre>
|
|
233
|
-
<h3>1.2 Global CLAUDE.md Best Practices</h3>
|
|
234
|
-
<p>Your global <code>~/.claude/CLAUDE.md</code> should include:</p>
|
|
235
513
|
<div class="mermaid-wrapper">
|
|
236
514
|
<div class="mermaid">graph LR
|
|
237
515
|
A[Global CLAUDE.md] --> B[Document Standards]
|
|
238
516
|
A --> C[Git Workflow]
|
|
239
517
|
A --> D[Quality Checks]
|
|
240
518
|
A --> E[Security Practices]
|
|
519
|
+
A --> F[Development Tools]
|
|
241
520
|
|
|
242
521
|
B --> B1[Naming Conventions]
|
|
243
522
|
B --> B2[Markdown Standards]
|
|
244
523
|
B --> B3[Diagram Requirements]
|
|
524
|
+
B --> B4[Verification Marks]
|
|
245
525
|
|
|
246
|
-
C --> C1[Commit
|
|
247
|
-
C --> C2[
|
|
526
|
+
C --> C1[Commit After Milestones]
|
|
527
|
+
C --> C2[Archive Unused Code]
|
|
528
|
+
C --> C3[Descriptive Messages]
|
|
248
529
|
|
|
249
|
-
D --> D1[
|
|
530
|
+
D --> D1[Responsive Testing]
|
|
250
531
|
D --> D2[Changelog Updates]
|
|
532
|
+
D --> D3[Documentation Reviews]
|
|
251
533
|
|
|
252
534
|
E --> E1[No Credentials]
|
|
253
|
-
E --> E2[Access Controls]
|
|
535
|
+
E --> E2[Access Controls]
|
|
536
|
+
E --> E3[Secure Defaults]
|
|
537
|
+
|
|
538
|
+
F --> F1[Docker V2]
|
|
539
|
+
F --> F2[Build Optimization]
|
|
540
|
+
F --> F3[Caching Strategies]</div>
|
|
254
541
|
</div>
|
|
255
542
|
<h2>Step 2: Initialize doc-builder</h2>
|
|
256
543
|
<pre><code class="language-bash"># Install doc-builder
|
|
@@ -415,18 +702,45 @@ npm run deploy:docs
|
|
|
415
702
|
- Include architecture decisions
|
|
416
703
|
- Document integration points
|
|
417
704
|
- Add performance considerations
|
|
705
|
+
- Note dependencies and version requirements
|
|
418
706
|
|
|
419
707
|
### Code Examples
|
|
420
|
-
- Use
|
|
421
|
-
- Include error handling
|
|
708
|
+
- Use the project's primary language (e.g., TypeScript, JavaScript)
|
|
709
|
+
- Include error handling in all examples
|
|
422
710
|
- Show both correct and incorrect usage
|
|
423
711
|
- Add inline comments for clarity
|
|
712
|
+
- Test all examples before including
|
|
713
|
+
- Include import statements
|
|
714
|
+
|
|
715
|
+
### API Documentation
|
|
716
|
+
- Document all public endpoints
|
|
717
|
+
- Include authentication requirements
|
|
718
|
+
- Show request/response examples
|
|
719
|
+
- Document rate limits
|
|
720
|
+
- Include error response codes
|
|
721
|
+
- Add curl examples for testing
|
|
424
722
|
|
|
425
723
|
### Diagrams
|
|
426
724
|
- Use mermaid for all flow diagrams
|
|
427
725
|
- Include sequence diagrams for APIs
|
|
428
726
|
- Add state diagrams for complex logic
|
|
429
727
|
- Create entity relationship diagrams for data models
|
|
728
|
+
- Use consistent styling and colors
|
|
729
|
+
- Add titles to all diagrams
|
|
730
|
+
|
|
731
|
+
### Testing Documentation
|
|
732
|
+
- Document test setup requirements
|
|
733
|
+
- Include example test cases
|
|
734
|
+
- Show how to run specific test suites
|
|
735
|
+
- Document mocking strategies
|
|
736
|
+
- Include performance benchmarks
|
|
737
|
+
|
|
738
|
+
### Deployment Documentation
|
|
739
|
+
- Include environment-specific configurations
|
|
740
|
+
- Document secret management
|
|
741
|
+
- Show deployment commands
|
|
742
|
+
- Include rollback procedures
|
|
743
|
+
- Document monitoring setup
|
|
430
744
|
</code></pre>
|
|
431
745
|
<h3>7.2 Documentation Templates</h3>
|
|
432
746
|
<p>Create templates in your CLAUDE.md:</p>
|
|
@@ -471,25 +785,43 @@ npm run deploy:docs
|
|
|
471
785
|
## Best Practices Summary
|
|
472
786
|
|
|
473
787
|
### Documentation Creation
|
|
474
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Use CLAUDE.md to maintain consistency
|
|
475
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i> Include visual diagrams for complex concepts
|
|
476
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i> Provide practical examples
|
|
477
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i> Mark verification status
|
|
478
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i> Keep documentation close to code
|
|
788
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Use CLAUDE.md to maintain consistency across all documentation
|
|
789
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Include visual diagrams (Mermaid) for complex concepts and workflows
|
|
790
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Provide practical, working examples that can be copy-pasted
|
|
791
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Mark verification status (<i class="ph ph-check-circle" aria-label="checked"></i>/<i class="ph ph-question" aria-label="question"></i>) for all technical information
|
|
792
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Keep documentation close to code in the /docs directory
|
|
793
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Include metadata headers with timestamps and status
|
|
794
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Add troubleshooting sections for common issues
|
|
795
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Cross-reference related documentation
|
|
479
796
|
|
|
480
797
|
### Claude Interaction
|
|
481
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Provide clear, specific requests
|
|
482
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i> Reference existing patterns
|
|
483
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i> Request iterative improvements
|
|
484
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i> Verify technical accuracy
|
|
485
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i> Ask for troubleshooting sections
|
|
798
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Provide clear, specific requests with expected output format
|
|
799
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Reference existing patterns from CLAUDE.md
|
|
800
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Request iterative improvements - review and refine
|
|
801
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Verify technical accuracy of generated content
|
|
802
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Ask for troubleshooting sections explicitly
|
|
803
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Request examples with error handling
|
|
804
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Specify diagram types needed (sequence, flow, state)
|
|
805
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Ask Claude to check its own work against CLAUDE.md standards
|
|
806
|
+
|
|
807
|
+
### Documentation Maintenance
|
|
808
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Update docs when code changes
|
|
809
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Archive outdated documentation
|
|
810
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Maintain CHANGELOG.md
|
|
811
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Review documentation quarterly
|
|
812
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Test all code examples
|
|
813
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Check for broken links
|
|
814
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Update version references
|
|
486
815
|
|
|
487
816
|
### Deployment
|
|
488
|
-
1. <i class="ph ph-check-circle" aria-label="checked"></i> Test locally before deploying
|
|
489
|
-
2. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
490
|
-
3. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
491
|
-
4. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
492
|
-
5. <i class="ph ph-check-circle" aria-label="checked"></i>
|
|
817
|
+
1. <i class="ph ph-check-circle" aria-label="checked"></i> Test locally before deploying (npm run dev:docs)
|
|
818
|
+
2. <i class="ph ph-check-circle" aria-label="checked"></i> Build and verify output (npm run build:docs)
|
|
819
|
+
3. <i class="ph ph-check-circle" aria-label="checked"></i> Use preview deployments first
|
|
820
|
+
4. <i class="ph ph-check-circle" aria-label="checked"></i> Configure custom domains if needed
|
|
821
|
+
5. <i class="ph ph-check-circle" aria-label="checked"></i> Enable HTTPS (automatic with Vercel)
|
|
822
|
+
6. <i class="ph ph-check-circle" aria-label="checked"></i> Monitor deployment health
|
|
823
|
+
7. <i class="ph ph-check-circle" aria-label="checked"></i> Disable Vercel authentication for public docs
|
|
824
|
+
8. <i class="ph ph-check-circle" aria-label="checked"></i> Commit documentation changes before deploying
|
|
493
825
|
|
|
494
826
|
## Common Issues and Solutions
|
|
495
827
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.126Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.126Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/documentation-standards.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.133Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.133Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/google-site-verification-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.136Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.136Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.139Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.139Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/seo-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.146Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.146Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/seo-optimization-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.149Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.149Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/troubleshooting-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.155Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.155Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html"
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
<div class="header-actions">
|
|
104
104
|
<div class="deployment-info">
|
|
105
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
106
106
|
</div>
|
|
107
107
|
|
|
108
108
|
|
|
@@ -195,6 +195,33 @@
|
|
|
195
195
|
<li><i class="ph ph-check-circle" aria-label="checked"></i> PowerShell 5.1+ (included with Windows)</li>
|
|
196
196
|
<li><i class="ph ph-star" aria-label="star"></i> Visual Studio Code (recommended) - <a href="https://code.visualstudio.com">code.visualstudio.com</a></li>
|
|
197
197
|
</ul>
|
|
198
|
+
<h2>Understanding Claude vs Claude Code</h2>
|
|
199
|
+
<h3>What's the Difference?</h3>
|
|
200
|
+
<p><strong>Claude.ai</strong> (Web Interface):</p>
|
|
201
|
+
<ul>
|
|
202
|
+
<li>Browser-based chat interface</li>
|
|
203
|
+
<li>General-purpose AI assistant</li>
|
|
204
|
+
<li>Good for conversations and one-off tasks</li>
|
|
205
|
+
<li>Limited file handling capabilities</li>
|
|
206
|
+
</ul>
|
|
207
|
+
<p><strong>Claude Code</strong> (Command-Line Tool):</p>
|
|
208
|
+
<ul>
|
|
209
|
+
<li>Terminal/command-line interface</li>
|
|
210
|
+
<li>Specialized for software development</li>
|
|
211
|
+
<li>Direct file system access</li>
|
|
212
|
+
<li>Can read, write, and modify multiple files</li>
|
|
213
|
+
<li>Integrated with your development workflow</li>
|
|
214
|
+
<li>Requires Pro or Max subscription</li>
|
|
215
|
+
</ul>
|
|
216
|
+
<h3>Why Claude Code for Documentation?</h3>
|
|
217
|
+
<p>Claude Code excels at:</p>
|
|
218
|
+
<ul>
|
|
219
|
+
<li>Reading entire codebases</li>
|
|
220
|
+
<li>Generating multiple markdown files</li>
|
|
221
|
+
<li>Updating existing documentation</li>
|
|
222
|
+
<li>Creating consistent formatting</li>
|
|
223
|
+
<li>Working directly in your project folder</li>
|
|
224
|
+
</ul>
|
|
198
225
|
<h2>The Three-Part System</h2>
|
|
199
226
|
<p>Understanding the conceptual separation is crucial:</p>
|
|
200
227
|
<table>
|
|
@@ -231,21 +258,21 @@
|
|
|
231
258
|
<tbody><tr>
|
|
232
259
|
<td><strong>Claude</strong></td>
|
|
233
260
|
<td>AI content generation</td>
|
|
234
|
-
<td>Pro ($20/mo) or
|
|
261
|
+
<td>Pro ($20/mo) or Max ($200/mo) plan required</td>
|
|
235
262
|
<td><a href="https://claude.ai">claude.ai</a></td>
|
|
236
263
|
</tr>
|
|
237
264
|
<tr>
|
|
265
|
+
<td><strong>GitHub</strong></td>
|
|
266
|
+
<td>Version control</td>
|
|
267
|
+
<td>Free account (required for Vercel)</td>
|
|
268
|
+
<td><a href="https://github.com">github.com</a></td>
|
|
269
|
+
</tr>
|
|
270
|
+
<tr>
|
|
238
271
|
<td><strong>Vercel</strong></td>
|
|
239
272
|
<td>Free web hosting</td>
|
|
240
273
|
<td>Free Hobby account sufficient</td>
|
|
241
274
|
<td><a href="https://vercel.com">vercel.com</a></td>
|
|
242
275
|
</tr>
|
|
243
|
-
<tr>
|
|
244
|
-
<td><strong>GitHub</strong></td>
|
|
245
|
-
<td>Version control (optional)</td>
|
|
246
|
-
<td>Free account for Vercel integration</td>
|
|
247
|
-
<td><a href="https://github.com">github.com</a></td>
|
|
248
|
-
</tr>
|
|
249
276
|
</tbody></table>
|
|
250
277
|
<h3>Software Requirements</h3>
|
|
251
278
|
<table>
|
|
@@ -347,24 +374,26 @@
|
|
|
347
374
|
<strong>Claude Account</strong></p>
|
|
348
375
|
<ul>
|
|
349
376
|
<li><input disabled="" type="checkbox"> Sign up at <a href="https://claude.ai">claude.ai</a></li>
|
|
350
|
-
<li><input disabled="" type="checkbox"> Subscribe to Pro ($20/mo) or
|
|
377
|
+
<li><input disabled="" type="checkbox"> Subscribe to Pro ($20/mo) or Max ($200/mo) plan</li>
|
|
351
378
|
<li><input disabled="" type="checkbox"> Verify email</li>
|
|
379
|
+
<li><input disabled="" type="checkbox"> Note: Free plan does NOT include Claude Code access</li>
|
|
352
380
|
</ul>
|
|
353
381
|
</li>
|
|
354
382
|
<li><p><input disabled="" type="checkbox">
|
|
355
|
-
<strong>
|
|
383
|
+
<strong>GitHub Account</strong> (Required)</p>
|
|
356
384
|
<ul>
|
|
357
|
-
<li><input disabled="" type="checkbox"> Sign up at <a href="https://
|
|
358
|
-
<li><input disabled="" type="checkbox">
|
|
359
|
-
<li><input disabled="" type="checkbox">
|
|
385
|
+
<li><input disabled="" type="checkbox"> Sign up at <a href="https://github.com">github.com</a></li>
|
|
386
|
+
<li><input disabled="" type="checkbox"> Configure username and email</li>
|
|
387
|
+
<li><input disabled="" type="checkbox"> Enable 2FA (recommended)</li>
|
|
388
|
+
<li><input disabled="" type="checkbox"> Required for Vercel deployment</li>
|
|
360
389
|
</ul>
|
|
361
390
|
</li>
|
|
362
391
|
<li><p><input disabled="" type="checkbox">
|
|
363
|
-
<strong>
|
|
392
|
+
<strong>Vercel Account</strong></p>
|
|
364
393
|
<ul>
|
|
365
|
-
<li><input disabled="" type="checkbox"> Sign up at <a href="https://
|
|
366
|
-
<li><input disabled="" type="checkbox">
|
|
367
|
-
<li><input disabled="" type="checkbox">
|
|
394
|
+
<li><input disabled="" type="checkbox"> Sign up at <a href="https://vercel.com">vercel.com</a> using GitHub</li>
|
|
395
|
+
<li><input disabled="" type="checkbox"> Choose Hobby (free) plan</li>
|
|
396
|
+
<li><input disabled="" type="checkbox"> Authorize Vercel to access GitHub</li>
|
|
368
397
|
</ul>
|
|
369
398
|
</li>
|
|
370
399
|
</ul>
|
|
@@ -437,24 +466,30 @@ npm -v
|
|
|
437
466
|
<tr>
|
|
438
467
|
<th>Plan</th>
|
|
439
468
|
<th>Price</th>
|
|
469
|
+
<th>Claude Code Access</th>
|
|
440
470
|
<th>Best For</th>
|
|
441
|
-
<th>Details</th>
|
|
442
471
|
</tr>
|
|
443
472
|
</thead>
|
|
444
473
|
<tbody><tr>
|
|
445
|
-
<td><strong>
|
|
474
|
+
<td><strong>Free</strong></td>
|
|
475
|
+
<td>$0/month</td>
|
|
476
|
+
<td><i class="ph ph-x-circle" aria-label="error"></i> No access</td>
|
|
477
|
+
<td>Basic chat only</td>
|
|
478
|
+
</tr>
|
|
479
|
+
<tr>
|
|
480
|
+
<td><strong>Pro</strong></td>
|
|
446
481
|
<td>$20/month</td>
|
|
482
|
+
<td><i class="ph ph-check-circle" aria-label="checked"></i> Full access</td>
|
|
447
483
|
<td>Individual developers</td>
|
|
448
|
-
<td>Personal use, full Claude Code access</td>
|
|
449
484
|
</tr>
|
|
450
485
|
<tr>
|
|
451
|
-
<td><strong>
|
|
452
|
-
<td>$
|
|
453
|
-
<td>
|
|
454
|
-
<td>
|
|
486
|
+
<td><strong>Max</strong></td>
|
|
487
|
+
<td>$200/month</td>
|
|
488
|
+
<td><i class="ph ph-check-circle" aria-label="checked"></i> Full access</td>
|
|
489
|
+
<td>Power users, higher limits</td>
|
|
455
490
|
</tr>
|
|
456
491
|
</tbody></table>
|
|
457
|
-
<p><strong>
|
|
492
|
+
<p><strong>Important</strong>: Only Pro and Max plans include Claude Code access. The free Claude.ai plan does NOT support Claude Code. See <a href="https://support.anthropic.com/en/articles/11145838-using-claude-code-with-your-pro-or-max-plan">Using Claude Code with Pro/Max Plans</a></p>
|
|
458
493
|
<h3>Install Claude Code CLI</h3>
|
|
459
494
|
<pre><code class="language-powershell">npm install -g @anthropic/claude-code
|
|
460
495
|
</code></pre>
|
|
@@ -508,11 +543,19 @@ cd my-docs-project
|
|
|
508
543
|
</tr>
|
|
509
544
|
</tbody></table>
|
|
510
545
|
<p>The free Hobby plan is perfect for documentation sites!</p>
|
|
511
|
-
<h3>Create
|
|
546
|
+
<h3>Create GitHub Account First</h3>
|
|
547
|
+
<ol>
|
|
548
|
+
<li>Go to <a href="https://github.com">GitHub</a></li>
|
|
549
|
+
<li>Click <strong>Sign Up</strong></li>
|
|
550
|
+
<li>Create username and verify email</li>
|
|
551
|
+
<li>Complete account setup</li>
|
|
552
|
+
</ol>
|
|
553
|
+
<h3>Create Vercel Account (Requires GitHub)</h3>
|
|
512
554
|
<ol>
|
|
513
555
|
<li>Go to <a href="https://vercel.com">Vercel</a></li>
|
|
514
556
|
<li>Click <strong>Sign Up</strong></li>
|
|
515
|
-
<li>Choose <strong>Continue with
|
|
557
|
+
<li>Choose <strong>Continue with GitHub</strong> (recommended)</li>
|
|
558
|
+
<li>Authorize Vercel to access your GitHub</li>
|
|
516
559
|
<li>Select <strong>Hobby</strong> plan (free)</li>
|
|
517
560
|
</ol>
|
|
518
561
|
<h3>Install Vercel CLI</h3>
|
|
@@ -536,12 +579,42 @@ cd my-docs-project
|
|
|
536
579
|
<h3>3. Deploy to Vercel</h3>
|
|
537
580
|
<pre><code class="language-powershell">doc-builder deploy
|
|
538
581
|
</code></pre>
|
|
539
|
-
<
|
|
582
|
+
<h4>First Deployment Setup Questions</h4>
|
|
583
|
+
<p>You'll be prompted with several questions. Here's what each one means:</p>
|
|
584
|
+
<p><strong>1. "Set up and deploy?"</strong> → Type <code>Y</code> (Yes)</p>
|
|
585
|
+
<ul>
|
|
586
|
+
<li>This confirms you want to deploy your documentation to Vercel</li>
|
|
587
|
+
</ul>
|
|
588
|
+
<p><strong>2. "What is your project name?"</strong> → Example: <code>my-api-docs</code></p>
|
|
589
|
+
<ul>
|
|
590
|
+
<li>This becomes your URL: <code>https://my-api-docs.vercel.app</code></li>
|
|
591
|
+
<li>Also used as the project identifier in Vercel dashboard</li>
|
|
592
|
+
</ul>
|
|
593
|
+
<p> <strong>Naming Requirements:</strong></p>
|
|
594
|
+
<ul>
|
|
595
|
+
<li>Must be <strong>lowercase</strong> only</li>
|
|
596
|
+
<li>Up to 100 characters long</li>
|
|
597
|
+
<li>Can include: letters, numbers, <code>.</code> <code>_</code> <code>-</code></li>
|
|
598
|
+
<li>Cannot contain: <code>---</code> (three consecutive hyphens)</li>
|
|
599
|
+
<li>Must start with a letter</li>
|
|
600
|
+
</ul>
|
|
601
|
+
<p> <strong>Good examples:</strong> <code>my-docs</code>, <code>api-docs-v2</code>, <code>team_handbook</code><br> <strong>Bad examples:</strong> <code>My-Docs</code> (uppercase), <code>123-docs</code> (starts with number), <code>my---docs</code> (triple hyphen)</p>
|
|
602
|
+
<p><strong>3. "Which scope do you want to deploy to?"</strong> → Select your account</p>
|
|
540
603
|
<ul>
|
|
541
|
-
<li
|
|
542
|
-
|
|
543
|
-
<
|
|
544
|
-
<
|
|
604
|
+
<li>Choose your personal account or team name</li>
|
|
605
|
+
</ul>
|
|
606
|
+
<p><strong>4. "Link to existing project?"</strong> → Type <code>N</code> (No) for first time</p>
|
|
607
|
+
<ul>
|
|
608
|
+
<li>Choose <code>Y</code> only if you've already created this project before</li>
|
|
609
|
+
</ul>
|
|
610
|
+
<p><strong>5. "What's the name of your existing project?"</strong> → Skip if you chose No above</p>
|
|
611
|
+
<p><strong>6. "In which directory is your code located?"</strong> → Press Enter (accepts <code>./</code>)</p>
|
|
612
|
+
<ul>
|
|
613
|
+
<li>doc-builder already handles this correctly</li>
|
|
614
|
+
</ul>
|
|
615
|
+
<p><strong>7. "Want to modify these settings?"</strong> → Type <code>N</code> (No)</p>
|
|
616
|
+
<ul>
|
|
617
|
+
<li>The default settings are configured correctly by doc-builder</li>
|
|
545
618
|
</ul>
|
|
546
619
|
<h3>4. Make Site Public</h3>
|
|
547
620
|
<p>After deployment:</p>
|
|
@@ -583,6 +656,29 @@ Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser -Force
|
|
|
583
656
|
<pre><code class="language-powershell">vercel logout
|
|
584
657
|
vercel login
|
|
585
658
|
</code></pre>
|
|
659
|
+
<h3>Vercel Project Naming Errors</h3>
|
|
660
|
+
<p><strong>Error</strong>: "Invalid project name" or deployment fails</p>
|
|
661
|
+
<p><strong>Common Causes</strong>:</p>
|
|
662
|
+
<ol>
|
|
663
|
+
<li>Project name contains uppercase letters</li>
|
|
664
|
+
<li>Project name starts with a number</li>
|
|
665
|
+
<li>Project name contains invalid characters</li>
|
|
666
|
+
<li>Project name contains <code>---</code> (three hyphens)</li>
|
|
667
|
+
</ol>
|
|
668
|
+
<p><strong>Solution</strong>:<br>Use a valid project name following these rules:</p>
|
|
669
|
+
<ul>
|
|
670
|
+
<li><strong>Lowercase only</strong>: <code>my-docs</code> <i class="ph ph-check-circle" aria-label="checked"></i>, <code>My-Docs</code> <i class="ph ph-x-circle" aria-label="error"></i></li>
|
|
671
|
+
<li><strong>Start with letter</strong>: <code>api-docs</code> <i class="ph ph-check-circle" aria-label="checked"></i>, <code>123-docs</code> <i class="ph ph-x-circle" aria-label="error"></i></li>
|
|
672
|
+
<li><strong>Valid characters</strong>: Letters, numbers, <code>.</code>, <code>_</code>, <code>-</code></li>
|
|
673
|
+
<li><strong>No triple hyphens</strong>: <code>my-cool-docs</code> <i class="ph ph-check-circle" aria-label="checked"></i>, <code>my---docs</code> <i class="ph ph-x-circle" aria-label="error"></i></li>
|
|
674
|
+
</ul>
|
|
675
|
+
<p><strong>Examples of valid names</strong>:</p>
|
|
676
|
+
<ul>
|
|
677
|
+
<li><code>my-documentation</code></li>
|
|
678
|
+
<li><code>api-docs-v2</code></li>
|
|
679
|
+
<li><code>team_handbook</code></li>
|
|
680
|
+
<li><code>docs.myproject</code></li>
|
|
681
|
+
</ul>
|
|
586
682
|
<h2>Best Practices</h2>
|
|
587
683
|
<h3>Folder Structure</h3>
|
|
588
684
|
<pre><code>Documents/
|
package/html/index.html
CHANGED
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.097Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.097Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/README.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
package/html/sitemap.xml
CHANGED
|
@@ -2,103 +2,103 @@
|
|
|
2
2
|
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
|
3
3
|
<url>
|
|
4
4
|
<loc>https://doc-builder-delta.vercel.app/404.html</loc>
|
|
5
|
-
<lastmod>2025-07-22T15:
|
|
5
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
6
6
|
<changefreq>monthly</changefreq>
|
|
7
7
|
<priority>0.6</priority>
|
|
8
8
|
</url>
|
|
9
9
|
<url>
|
|
10
10
|
<loc>https://doc-builder-delta.vercel.app/README.html</loc>
|
|
11
|
-
<lastmod>2025-07-22T15:
|
|
11
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
12
12
|
<changefreq>monthly</changefreq>
|
|
13
13
|
<priority>0.6</priority>
|
|
14
14
|
</url>
|
|
15
15
|
<url>
|
|
16
16
|
<loc>https://doc-builder-delta.vercel.app/claude-workflow-guide.html</loc>
|
|
17
|
-
<lastmod>2025-07-22T15:
|
|
17
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
18
18
|
<changefreq>monthly</changefreq>
|
|
19
19
|
<priority>0.8</priority>
|
|
20
20
|
</url>
|
|
21
21
|
<url>
|
|
22
22
|
<loc>https://doc-builder-delta.vercel.app/documentation-index.html</loc>
|
|
23
|
-
<lastmod>2025-07-22T15:
|
|
23
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
24
24
|
<changefreq>monthly</changefreq>
|
|
25
25
|
<priority>0.6</priority>
|
|
26
26
|
</url>
|
|
27
27
|
<url>
|
|
28
28
|
<loc>https://doc-builder-delta.vercel.app/guides/authentication-guide.html</loc>
|
|
29
|
-
<lastmod>2025-07-22T15:
|
|
29
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
30
30
|
<changefreq>monthly</changefreq>
|
|
31
31
|
<priority>0.8</priority>
|
|
32
32
|
</url>
|
|
33
33
|
<url>
|
|
34
34
|
<loc>https://doc-builder-delta.vercel.app/guides/claude-workflow-guide.html</loc>
|
|
35
|
-
<lastmod>2025-07-22T15:
|
|
35
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
36
36
|
<changefreq>monthly</changefreq>
|
|
37
37
|
<priority>0.8</priority>
|
|
38
38
|
</url>
|
|
39
39
|
<url>
|
|
40
40
|
<loc>https://doc-builder-delta.vercel.app/guides/document-standards.html</loc>
|
|
41
|
-
<lastmod>2025-07-22T15:
|
|
41
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
42
42
|
<changefreq>monthly</changefreq>
|
|
43
43
|
<priority>0.8</priority>
|
|
44
44
|
</url>
|
|
45
45
|
<url>
|
|
46
46
|
<loc>https://doc-builder-delta.vercel.app/guides/documentation-standards.html</loc>
|
|
47
|
-
<lastmod>2025-07-22T15:
|
|
47
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
48
48
|
<changefreq>monthly</changefreq>
|
|
49
49
|
<priority>0.8</priority>
|
|
50
50
|
</url>
|
|
51
51
|
<url>
|
|
52
52
|
<loc>https://doc-builder-delta.vercel.app/guides/google-site-verification-guide.html</loc>
|
|
53
|
-
<lastmod>2025-07-22T15:
|
|
53
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
54
54
|
<changefreq>monthly</changefreq>
|
|
55
55
|
<priority>0.8</priority>
|
|
56
56
|
</url>
|
|
57
57
|
<url>
|
|
58
58
|
<loc>https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html</loc>
|
|
59
|
-
<lastmod>2025-07-22T15:
|
|
59
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
60
60
|
<changefreq>monthly</changefreq>
|
|
61
61
|
<priority>0.8</priority>
|
|
62
62
|
</url>
|
|
63
63
|
<url>
|
|
64
64
|
<loc>https://doc-builder-delta.vercel.app/guides/seo-guide.html</loc>
|
|
65
|
-
<lastmod>2025-07-22T15:
|
|
65
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
66
66
|
<changefreq>monthly</changefreq>
|
|
67
67
|
<priority>0.8</priority>
|
|
68
68
|
</url>
|
|
69
69
|
<url>
|
|
70
70
|
<loc>https://doc-builder-delta.vercel.app/guides/seo-optimization-guide.html</loc>
|
|
71
|
-
<lastmod>2025-07-22T15:
|
|
71
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
72
72
|
<changefreq>monthly</changefreq>
|
|
73
73
|
<priority>0.8</priority>
|
|
74
74
|
</url>
|
|
75
75
|
<url>
|
|
76
76
|
<loc>https://doc-builder-delta.vercel.app/guides/troubleshooting-guide.html</loc>
|
|
77
|
-
<lastmod>2025-07-22T15:
|
|
77
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
78
78
|
<changefreq>monthly</changefreq>
|
|
79
79
|
<priority>0.8</priority>
|
|
80
80
|
</url>
|
|
81
81
|
<url>
|
|
82
82
|
<loc>https://doc-builder-delta.vercel.app/guides/windows-setup-guide.html</loc>
|
|
83
|
-
<lastmod>2025-07-22T15:
|
|
83
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
84
84
|
<changefreq>monthly</changefreq>
|
|
85
85
|
<priority>0.8</priority>
|
|
86
86
|
</url>
|
|
87
87
|
<url>
|
|
88
88
|
<loc>https://doc-builder-delta.vercel.app/index.html</loc>
|
|
89
|
-
<lastmod>2025-07-22T15:
|
|
89
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
90
90
|
<changefreq>weekly</changefreq>
|
|
91
91
|
<priority>1.0</priority>
|
|
92
92
|
</url>
|
|
93
93
|
<url>
|
|
94
94
|
<loc>https://doc-builder-delta.vercel.app/vercel-cli-setup-guide.html</loc>
|
|
95
|
-
<lastmod>2025-07-22T15:
|
|
95
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
96
96
|
<changefreq>monthly</changefreq>
|
|
97
97
|
<priority>0.8</priority>
|
|
98
98
|
</url>
|
|
99
99
|
<url>
|
|
100
100
|
<loc>https://doc-builder-delta.vercel.app/vercel-first-time-setup-guide.html</loc>
|
|
101
|
-
<lastmod>2025-07-22T15:
|
|
101
|
+
<lastmod>2025-07-22T15:51:37.169Z</lastmod>
|
|
102
102
|
<changefreq>monthly</changefreq>
|
|
103
103
|
<priority>0.8</priority>
|
|
104
104
|
</url>
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.158Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.158Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/vercel-cli-setup-guide.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|
|
@@ -62,8 +62,8 @@
|
|
|
62
62
|
"name": "Knowcode Ltd",
|
|
63
63
|
"url": "https://knowcode.tech"
|
|
64
64
|
},
|
|
65
|
-
"datePublished": "2025-07-22T15:
|
|
66
|
-
"dateModified": "2025-07-22T15:
|
|
65
|
+
"datePublished": "2025-07-22T15:51:37.160Z",
|
|
66
|
+
"dateModified": "2025-07-22T15:51:37.160Z",
|
|
67
67
|
"mainEntityOfPage": {
|
|
68
68
|
"@type": "WebPage",
|
|
69
69
|
"@id": "https://doc-builder-delta.vercel.app/vercel-first-time-setup-guide.html"
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
|
|
97
97
|
<div class="header-actions">
|
|
98
98
|
<div class="deployment-info">
|
|
99
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
99
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.17">Last updated: Jul 22, 2025, 03:51 PM UTC</span>
|
|
100
100
|
</div>
|
|
101
101
|
|
|
102
102
|
|