@aigne/doc-smith 0.8.5 → 0.8.7
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/.aigne/doc-smith/output/structure-plan.json +1 -5
- package/CHANGELOG.md +25 -0
- package/README.md +3 -3
- package/agents/{chat.yaml → chat/index.yaml} +7 -7
- package/agents/generate/check-document-structure.yaml +30 -0
- package/agents/{check-structure-plan.mjs → generate/check-need-generate-structure.mjs} +21 -21
- package/agents/generate/generate-structure.yaml +58 -0
- package/agents/{docs-generator.yaml → generate/index.yaml} +15 -16
- package/agents/generate/refine-document-structure.yaml +12 -0
- package/agents/{input-generator.mjs → init/index.mjs} +34 -27
- package/agents/{manage-prefs.mjs → prefs/index.mjs} +16 -16
- package/agents/publish/index.yaml +17 -0
- package/agents/{publish-docs.mjs → publish/publish-docs.mjs} +15 -16
- package/agents/schema/{structure-plan-result.yaml → document-execution-structure.yaml} +3 -3
- package/agents/schema/document-structure.yaml +26 -0
- package/agents/{language-selector.mjs → translate/choose-language.mjs} +5 -5
- package/agents/{retranslate.yaml → translate/index.yaml} +17 -18
- package/agents/translate/translate-document.yaml +32 -0
- package/agents/{batch-translate.yaml → translate/translate-multilingual.yaml} +5 -5
- package/agents/update/batch-generate-document.yaml +19 -0
- package/agents/{check-detail.mjs → update/check-document.mjs} +16 -16
- package/agents/{detail-generator-and-translate.yaml → update/generate-and-translate-document.yaml} +23 -23
- package/agents/update/generate-document.yaml +50 -0
- package/agents/{detail-regenerator.yaml → update/index.yaml} +16 -17
- package/agents/{action-success.mjs → utils/action-success.mjs} +2 -2
- package/agents/{check-detail-result.mjs → utils/check-detail-result.mjs} +3 -3
- package/agents/{check-feedback-refiner.mjs → utils/check-feedback-refiner.mjs} +6 -6
- package/agents/{find-items-by-paths.mjs → utils/choose-docs.mjs} +25 -10
- package/agents/{docs-fs.yaml → utils/docs-fs-actor.yaml} +3 -1
- package/agents/utils/feedback-refiner.yaml +50 -0
- package/agents/{find-item-by-path.mjs → utils/find-item-by-path.mjs} +17 -7
- package/agents/{find-user-preferences-by-path.mjs → utils/find-user-preferences-by-path.mjs} +1 -1
- package/agents/utils/format-document-structure.mjs +25 -0
- package/agents/{load-sources.mjs → utils/load-sources.mjs} +41 -28
- package/agents/{save-docs.mjs → utils/save-docs.mjs} +16 -16
- package/agents/{save-single-doc.mjs → utils/save-single-doc.mjs} +2 -2
- package/agents/{transform-detail-datasources.mjs → utils/transform-detail-datasources.mjs} +1 -1
- package/aigne.yaml +35 -35
- package/docs/cli-reference.md +1 -1
- package/docs/features-generate-documentation.md +1 -1
- package/docs/features-update-and-refine.md +2 -2
- package/docs-mcp/analyze-docs-relevance.yaml +10 -10
- package/docs-mcp/docs-search.yaml +5 -3
- package/package.json +10 -8
- package/prompts/{document → detail/custom}/custom-code-block.md +6 -6
- package/prompts/detail/custom/custom-components.md +172 -0
- package/prompts/{document → detail}/d2-chart/rules.md +95 -1
- package/prompts/{document → detail}/detail-example.md +80 -61
- package/prompts/{document/detail-generator.md → detail/document-rules.md} +4 -8
- package/prompts/{content-detail-generator.md → detail/generate-document.md} +48 -25
- package/prompts/{check-structure-planning-result.md → structure/check-document-structure.md} +23 -17
- package/prompts/{document/structure-planning.md → structure/document-rules.md} +0 -2
- package/prompts/{structure-planning.md → structure/generate-structure.md} +51 -30
- package/prompts/{document → structure}/structure-example.md +2 -2
- package/prompts/{document → structure}/structure-getting-started.md +2 -2
- package/prompts/translate/glossary.md +6 -0
- package/prompts/{translator.md → translate/translate-document.md} +29 -10
- package/prompts/{feedback-refiner.md → utils/feedback-refiner.md} +8 -8
- package/tests/agents/chat/chat.test.mjs +46 -0
- package/tests/agents/generate/check-document-structure.test.mjs +51 -0
- package/tests/agents/generate/check-need-generate-structure.test.mjs +292 -0
- package/tests/agents/generate/generate-structure.test.mjs +51 -0
- package/tests/{input-generator.test.mjs → agents/init/init.test.mjs} +19 -17
- package/tests/agents/prefs/prefs.test.mjs +431 -0
- package/tests/agents/publish/publish-docs.test.mjs +642 -0
- package/tests/agents/translate/choose-language.test.mjs +311 -0
- package/tests/agents/translate/translate-document.test.mjs +51 -0
- package/tests/agents/update/check-document.test.mjs +523 -0
- package/tests/agents/update/generate-document.test.mjs +51 -0
- package/tests/agents/utils/action-success.test.mjs +54 -0
- package/tests/{check-detail-result.test.mjs → agents/utils/check-detail-result.test.mjs} +98 -98
- package/tests/agents/utils/check-feedback-refiner.test.mjs +478 -0
- package/tests/agents/utils/choose-docs.test.mjs +417 -0
- package/tests/agents/utils/exit.test.mjs +70 -0
- package/tests/agents/utils/feedback-refiner.test.mjs +51 -0
- package/tests/agents/utils/find-item-by-path.test.mjs +526 -0
- package/tests/agents/utils/find-user-preferences-by-path.test.mjs +382 -0
- package/tests/agents/utils/format-document-structure.test.mjs +264 -0
- package/tests/agents/utils/fs.test.mjs +267 -0
- package/tests/{load-sources.test.mjs → agents/utils/load-sources.test.mjs} +153 -25
- package/tests/{save-docs.test.mjs → agents/utils/save-docs.test.mjs} +11 -5
- package/tests/agents/utils/save-output.test.mjs +315 -0
- package/tests/agents/utils/save-single-doc.test.mjs +364 -0
- package/tests/agents/utils/transform-detail-datasources.test.mjs +363 -0
- package/tests/utils/auth-utils.test.mjs +358 -0
- package/tests/utils/blocklet.test.mjs +334 -0
- package/tests/{conflict-resolution.test.mjs → utils/conflict-detector.test.mjs} +3 -3
- package/tests/utils/constants.test.mjs +295 -0
- package/tests/utils/d2-utils.test.mjs +423 -0
- package/tests/utils/deploy.test.mjs +365 -0
- package/tests/utils/docs-finder-utils.test.mjs +625 -0
- package/tests/utils/file-utils.test.mjs +213 -0
- package/tests/{kroki-utils.test.mjs → utils/kroki-utils.test.mjs} +2 -2
- package/tests/utils/load-config.test.mjs +141 -0
- package/tests/{mermaid-validation.test.mjs → utils/mermaid-validator.test.mjs} +2 -2
- package/tests/utils/mock-chat-model.mjs +12 -0
- package/tests/{preferences-utils.test.mjs → utils/preferences-utils.test.mjs} +1 -1
- package/tests/{save-value-to-config.test.mjs → utils/save-value-to-config.test.mjs} +61 -4
- package/tests/utils/utils.test.mjs +939 -0
- package/utils/auth-utils.mjs +1 -1
- package/utils/conflict-detector.mjs +1 -1
- package/utils/constants.mjs +5 -3
- package/utils/d2-utils.mjs +194 -0
- package/utils/deploy.mjs +3 -3
- package/utils/docs-finder-utils.mjs +26 -26
- package/utils/icon-map.mjs +26 -0
- package/{agents → utils}/load-config.mjs +2 -18
- package/utils/markdown-checker.mjs +5 -5
- package/agents/batch-docs-detail-generator.yaml +0 -19
- package/agents/check-structure-planning-result.yaml +0 -30
- package/agents/content-detail-generator.yaml +0 -50
- package/agents/feedback-refiner.yaml +0 -52
- package/agents/format-structure-plan.mjs +0 -25
- package/agents/reflective-structure-planner.yaml +0 -12
- package/agents/schema/structure-plan.yaml +0 -26
- package/agents/structure-planning.yaml +0 -58
- package/agents/team-publish-docs.yaml +0 -18
- package/agents/translate.yaml +0 -31
- package/prompts/document/custom-components.md +0 -104
- package/tests/README.md +0 -93
- package/tests/utils.test.mjs +0 -2067
- /package/agents/{exit.mjs → utils/exit.mjs} +0 -0
- /package/agents/{fs.mjs → utils/fs.mjs} +0 -0
- /package/agents/{save-output.mjs → utils/save-output.mjs} +0 -0
- /package/prompts/{document → detail}/d2-chart/official-examples.md +0 -0
- /package/prompts/{document → detail}/jsx/rules.md +0 -0
package/aigne.yaml
CHANGED
|
@@ -6,49 +6,49 @@ chat_model:
|
|
|
6
6
|
# name: gemini-2.5-flash
|
|
7
7
|
temperature: 0.8
|
|
8
8
|
agents:
|
|
9
|
-
- ./agents/structure
|
|
10
|
-
- ./agents/batch-
|
|
11
|
-
- ./agents/load-sources.mjs
|
|
12
|
-
- ./agents/save-docs.mjs
|
|
13
|
-
- ./agents/translate.yaml
|
|
14
|
-
- ./agents/
|
|
15
|
-
- ./agents/check-
|
|
16
|
-
- ./agents/transform-detail-datasources.mjs
|
|
17
|
-
- ./agents/
|
|
18
|
-
- ./agents/save-single-doc.mjs
|
|
19
|
-
- ./agents/save-output.mjs
|
|
20
|
-
- ./agents/check-structure
|
|
21
|
-
- ./agents/
|
|
22
|
-
- ./agents/
|
|
23
|
-
- ./agents/check-structure
|
|
24
|
-
- ./agents/
|
|
25
|
-
- ./agents/
|
|
26
|
-
- ./agents/
|
|
27
|
-
- ./agents/publish-docs.mjs
|
|
28
|
-
- ./agents/format-structure
|
|
29
|
-
- ./agents/
|
|
30
|
-
- ./agents/
|
|
31
|
-
- ./agents/
|
|
32
|
-
- ./agents/
|
|
33
|
-
- ./agents/language-selector.mjs
|
|
9
|
+
- ./agents/generate/generate-structure.yaml
|
|
10
|
+
- ./agents/update/batch-generate-document.yaml
|
|
11
|
+
- ./agents/utils/load-sources.mjs
|
|
12
|
+
- ./agents/utils/save-docs.mjs
|
|
13
|
+
- ./agents/translate/translate-document.yaml
|
|
14
|
+
- ./agents/update/generate-and-translate-document.yaml
|
|
15
|
+
- ./agents/update/check-document.mjs
|
|
16
|
+
- ./agents/utils/transform-detail-datasources.mjs
|
|
17
|
+
- ./agents/translate/translate-multilingual.yaml
|
|
18
|
+
- ./agents/utils/save-single-doc.mjs
|
|
19
|
+
- ./agents/utils/save-output.mjs
|
|
20
|
+
- ./agents/generate/check-need-generate-structure.mjs
|
|
21
|
+
- ./agents/update/generate-document.yaml
|
|
22
|
+
- ./agents/generate/refine-document-structure.yaml
|
|
23
|
+
- ./agents/generate/check-document-structure.yaml
|
|
24
|
+
- ./agents/init/index.mjs
|
|
25
|
+
- ./agents/generate/index.yaml
|
|
26
|
+
- ./agents/update/index.yaml
|
|
27
|
+
- ./agents/publish/publish-docs.mjs
|
|
28
|
+
- ./agents/utils/format-document-structure.mjs
|
|
29
|
+
- ./agents/publish/index.yaml
|
|
30
|
+
- ./agents/utils/find-item-by-path.mjs
|
|
31
|
+
- ./agents/translate/index.yaml
|
|
32
|
+
- ./agents/translate/choose-language.mjs
|
|
34
33
|
- ./docs-mcp/get-docs-structure.mjs
|
|
35
34
|
- ./docs-mcp/get-docs-detail.mjs
|
|
36
35
|
- ./docs-mcp/docs-search.yaml
|
|
37
36
|
- ./docs-mcp/analyze-docs-relevance.yaml
|
|
38
37
|
- ./docs-mcp/read-doc-content.mjs
|
|
39
38
|
- ./docs-mcp/analyze-content-relevance.yaml
|
|
40
|
-
- ./agents/check-feedback-refiner.mjs
|
|
41
|
-
- ./agents/feedback-refiner.yaml
|
|
42
|
-
- ./agents/
|
|
39
|
+
- ./agents/utils/check-feedback-refiner.mjs
|
|
40
|
+
- ./agents/utils/feedback-refiner.yaml
|
|
41
|
+
- ./agents/prefs/index.mjs
|
|
42
|
+
- ./agents/chat/index.yaml
|
|
43
43
|
cli:
|
|
44
|
-
chat: ./agents/chat.yaml
|
|
44
|
+
chat: ./agents/chat/index.yaml
|
|
45
45
|
agents:
|
|
46
|
-
- ./agents/
|
|
47
|
-
- ./agents/
|
|
48
|
-
- ./agents/
|
|
49
|
-
- ./agents/
|
|
50
|
-
- ./agents/
|
|
51
|
-
- ./agents/
|
|
46
|
+
- ./agents/init/index.mjs
|
|
47
|
+
- ./agents/generate/index.yaml
|
|
48
|
+
- ./agents/update/index.yaml
|
|
49
|
+
- ./agents/publish/index.yaml
|
|
50
|
+
- ./agents/translate/index.yaml
|
|
51
|
+
- ./agents/prefs/index.mjs
|
|
52
52
|
mcp_server:
|
|
53
53
|
agents:
|
|
54
54
|
- ./docs-mcp/get-docs-structure.mjs
|
package/docs/cli-reference.md
CHANGED
|
@@ -89,7 +89,7 @@ Analyzes your source code and generates a complete set of documentation based on
|
|
|
89
89
|
|
|
90
90
|
| Option | Type | Description |
|
|
91
91
|
|---|---|---|
|
|
92
|
-
| `--feedback` | string | Provides feedback to adjust and refine the overall
|
|
92
|
+
| `--feedback` | string | Provides feedback to adjust and refine the overall documentation structure. |
|
|
93
93
|
| `--forceRegenerate` | boolean | Discards existing content and regenerates all documentation from scratch. |
|
|
94
94
|
| `--model` | string | Specifies a particular LLM to use for generation (e.g., `openai:gpt-4o`). Overrides the default model. |
|
|
95
95
|
| `--glossary` | string | Path to a glossary file for consistent terminology. Use the format `@path/to/glossary.md`. |
|
|
@@ -90,7 +90,7 @@ While the default `generate` command is sufficient for most use cases, you can u
|
|
|
90
90
|
| Option | Description | Example |
|
|
91
91
|
|---------------------|------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------|
|
|
92
92
|
| `--forceRegenerate` | Deletes all existing documents and regenerates them from scratch. Use this after making significant changes to your source code or configuration. | `aigne doc generate --forceRegenerate` |
|
|
93
|
-
| `--feedback` | Provides high-level feedback to refine the overall
|
|
93
|
+
| `--feedback` | Provides high-level feedback to refine the overall documentation structure, such as adding, removing, or reorganizing sections. | `aigne doc generate --feedback "Add an API Reference section"` |
|
|
94
94
|
| `--model` | Specifies a particular Large Language Model from AIGNE Hub to use for content generation, allowing you to switch between models. | `aigne doc generate --model claude:claude-3-5-sonnet` |
|
|
95
95
|
|
|
96
96
|
## What's Next?
|
|
@@ -123,12 +123,12 @@ Key parameters for the `update` command:
|
|
|
123
123
|
|
|
124
124
|
## Optimizing the Overall Structure
|
|
125
125
|
|
|
126
|
-
Beyond refining the content of individual documents, you can also adjust the overall documentation structure. If a section is missing or the existing organization could be improved, you can provide feedback to the structure
|
|
126
|
+
Beyond refining the content of individual documents, you can also adjust the overall documentation structure. If a section is missing or the existing organization could be improved, you can provide feedback to improve the documentation structure using the `generate` command with the `--feedback` flag.
|
|
127
127
|
|
|
128
128
|
This command instructs DocSmith to reconsider the entire document plan based on your new input.
|
|
129
129
|
|
|
130
130
|
```bash
|
|
131
|
-
# Regenerate the structure
|
|
131
|
+
# Regenerate the documentation structure with specific feedback
|
|
132
132
|
aigne doc generate --feedback "Remove the 'About' section and add a more detailed 'API Reference'."
|
|
133
133
|
```
|
|
134
134
|
|
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
name: analyze-docs-relevance
|
|
2
|
-
description: Analyze which documents in the structure
|
|
2
|
+
description: Analyze which documents in the document structure are relevant to the user query
|
|
3
3
|
instructions: |
|
|
4
|
-
You are an AI assistant that analyzes the relevance between a user query and documents in a structure
|
|
4
|
+
You are an AI assistant that analyzes the relevance between a user query and documents in a document structure.
|
|
5
5
|
|
|
6
|
-
<
|
|
7
|
-
{{
|
|
8
|
-
</
|
|
6
|
+
<document_structure>
|
|
7
|
+
{{ originalDocumentStructure }}
|
|
8
|
+
</document_structure>
|
|
9
9
|
|
|
10
10
|
<user-query>
|
|
11
11
|
{{ query }}
|
|
12
12
|
</user-query>
|
|
13
13
|
|
|
14
|
-
Given a user query and a structure
|
|
14
|
+
Given a user query and a document structure containing multiple documents, your task is to:
|
|
15
15
|
1. Understand the user's search intent from the query
|
|
16
|
-
2. Analyze each document in the structure
|
|
16
|
+
2. Analyze each document in the document structure to determine relevance
|
|
17
17
|
3. Return a list of relevant documents with their paths, titles, and descriptions
|
|
18
18
|
|
|
19
19
|
Consider the following factors for relevance:
|
|
@@ -33,7 +33,7 @@ input_schema:
|
|
|
33
33
|
query:
|
|
34
34
|
type: string
|
|
35
35
|
description: User search query
|
|
36
|
-
|
|
36
|
+
originalDocumentStructure:
|
|
37
37
|
type: array
|
|
38
38
|
items:
|
|
39
39
|
type: object
|
|
@@ -44,7 +44,7 @@ input_schema:
|
|
|
44
44
|
type: string
|
|
45
45
|
description:
|
|
46
46
|
type: string
|
|
47
|
-
description:
|
|
47
|
+
description: Document structure containing all available documents
|
|
48
48
|
output_schema:
|
|
49
49
|
type: object
|
|
50
50
|
properties:
|
|
@@ -52,7 +52,7 @@ output_schema:
|
|
|
52
52
|
type: array
|
|
53
53
|
items:
|
|
54
54
|
type: string
|
|
55
|
-
description: Must be selected from paths in the structure
|
|
55
|
+
description: Must be selected from paths in the document structure, cannot be other paths
|
|
56
56
|
description: List of relevant documents
|
|
57
57
|
reasoning:
|
|
58
58
|
type: string
|
|
@@ -2,8 +2,10 @@ type: team
|
|
|
2
2
|
name: docs-search
|
|
3
3
|
description: Search relevant documents based on user query
|
|
4
4
|
skills:
|
|
5
|
-
- ../agents/
|
|
6
|
-
|
|
5
|
+
- url: ../agents/init/index.mjs
|
|
6
|
+
default_input:
|
|
7
|
+
skipIfExists: true
|
|
8
|
+
- ../agents/utils/load-sources.mjs
|
|
7
9
|
- analyze-docs-relevance.yaml
|
|
8
10
|
- read-doc-content.mjs
|
|
9
11
|
- analyze-content-relevance.yaml
|
|
@@ -36,5 +38,5 @@ output_schema:
|
|
|
36
38
|
type: string
|
|
37
39
|
description:
|
|
38
40
|
type: string
|
|
39
|
-
description: List of relevant documents from structure
|
|
41
|
+
description: List of relevant documents from document structure
|
|
40
42
|
mode: sequential
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aigne/doc-smith",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.7",
|
|
4
4
|
"description": "",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -12,13 +12,14 @@
|
|
|
12
12
|
"author": "Arcblock <blocklet@arcblock.io> https://github.com/blocklet",
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@aigne/aigne-hub": "^0.
|
|
16
|
-
"@aigne/anthropic": "^0.
|
|
17
|
-
"@aigne/cli": "^1.
|
|
18
|
-
"@aigne/core": "^1.
|
|
19
|
-
"@aigne/gemini": "^0.
|
|
20
|
-
"@aigne/openai": "^0.
|
|
21
|
-
"@aigne/publish-docs": "^0.
|
|
15
|
+
"@aigne/aigne-hub": "^0.9.3",
|
|
16
|
+
"@aigne/anthropic": "^0.13.3",
|
|
17
|
+
"@aigne/cli": "^1.46.2",
|
|
18
|
+
"@aigne/core": "^1.60.2",
|
|
19
|
+
"@aigne/gemini": "^0.13.3",
|
|
20
|
+
"@aigne/openai": "^0.15.3",
|
|
21
|
+
"@aigne/publish-docs": "^0.10.0",
|
|
22
|
+
"@terrastruct/d2": "^0.1.33",
|
|
22
23
|
"chalk": "^5.5.0",
|
|
23
24
|
"debug": "^4.4.1",
|
|
24
25
|
"dompurify": "^3.2.6",
|
|
@@ -43,6 +44,7 @@
|
|
|
43
44
|
},
|
|
44
45
|
"scripts": {
|
|
45
46
|
"test": "bun test",
|
|
47
|
+
"test:coverage2": "bun test --coverage",
|
|
46
48
|
"test:coverage": "bun test --coverage --coverage-reporter=lcov --coverage-reporter=text",
|
|
47
49
|
"test:watch": "bun test --watch",
|
|
48
50
|
"lint": "biome check",
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
<
|
|
1
|
+
<enhanced_code_block_rules>
|
|
2
2
|
## Enhanced Attributes for Markdown Code Blocks
|
|
3
3
|
|
|
4
4
|
When generating Markdown, you can add enhanced attributes to code blocks to provide richer functionality and better display effects. These attributes allow you to specify **titles**, **icons**, and more for code blocks.
|
|
@@ -20,7 +20,7 @@ The following are the available enhanced attributes and their descriptions:
|
|
|
20
20
|
|
|
21
21
|
### Examples
|
|
22
22
|
|
|
23
|
-
<
|
|
23
|
+
<code_block_good_examples>
|
|
24
24
|
The following are some examples of Markdown code blocks using enhanced attributes:
|
|
25
25
|
|
|
26
26
|
**Example 1: Code block with title and icon**
|
|
@@ -70,9 +70,9 @@ class ShoppingCart {
|
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
```
|
|
73
|
-
</
|
|
73
|
+
</code_block_good_examples>
|
|
74
74
|
|
|
75
|
-
<
|
|
75
|
+
<code_block_bad_examples>
|
|
76
76
|
**Example 1**
|
|
77
77
|
|
|
78
78
|
There are two errors in this example:
|
|
@@ -97,5 +97,5 @@ fn main() -> Result<(), Box<dyn std::error::Error>> {
|
|
|
97
97
|
}
|
|
98
98
|
```
|
|
99
99
|
|
|
100
|
-
</
|
|
101
|
-
</
|
|
100
|
+
</code_block_bad_examples>
|
|
101
|
+
</enhanced_code_block_rules>
|
|
@@ -0,0 +1,172 @@
|
|
|
1
|
+
<custom_components_usage>
|
|
2
|
+
When generating document details, you can use the following custom components at appropriate locations based on their descriptions and functionality to enhance document presentation:
|
|
3
|
+
- `<x-card>`
|
|
4
|
+
- `<x-cards>`
|
|
5
|
+
- `<x-field>`
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
### 1. <x-card> Single Card Component
|
|
9
|
+
Suitable for displaying individual links with a richer and more visually appealing presentation format.
|
|
10
|
+
|
|
11
|
+
Example:
|
|
12
|
+
|
|
13
|
+
```
|
|
14
|
+
<x-card data-title="Required Title" data-image="Image URL" data-icon="Icon identifier (e.g., lucide:rocket or material-symbols:rocket-outline)" data-href="Navigation link URL" data-horizontal="true/false" data-cta="Button text" >
|
|
15
|
+
Card body content
|
|
16
|
+
</x-card>
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Attribute Rules:
|
|
20
|
+
|
|
21
|
+
- data-title (required): Card title.
|
|
22
|
+
- data-icon / data-image (choose one, at least one must be provided):
|
|
23
|
+
- It's recommended to always provide data-icon.
|
|
24
|
+
- Icons should prioritize Lucide (lucide:icon-name). If not available in Lucide, use Iconify (collection:icon-name, e.g., material-symbols:rocket-outline).
|
|
25
|
+
- data-image (optional): Image URL, can coexist with icon.
|
|
26
|
+
- data-href (optional): Navigation link for clicking the card or button.
|
|
27
|
+
- data-horizontal (optional): Whether to use horizontal layout.
|
|
28
|
+
- data-cta (optional): Button text (call to action).
|
|
29
|
+
- Body content:
|
|
30
|
+
- Must be written within <x-card>...</x-card> children.
|
|
31
|
+
- **Markdown format rendering is not supported**
|
|
32
|
+
- **Code block rendering is not supported**
|
|
33
|
+
- Only supports plain text format without styling
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
### 2. `<x-field>` Structured Field Component
|
|
37
|
+
|
|
38
|
+
Suitable for displaying API parameters, return values, context data, and any structured data with metadata in a clean, organized format. Supports nested structures for complex data types.
|
|
39
|
+
|
|
40
|
+
Syntax:
|
|
41
|
+
|
|
42
|
+
```
|
|
43
|
+
<x-field data-name="field_name" data-type="string" data-default="default_value" data-required="true" data-deprecated="false" data-desc="Field description">
|
|
44
|
+
<!-- For complex types, children can only be other x-field elements -->
|
|
45
|
+
<x-field data-name="nested_field" data-type="string" data-desc="Nested field description"></x-field>
|
|
46
|
+
</x-field>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Attribute Rules:
|
|
50
|
+
|
|
51
|
+
- `data-name` (required): The name of the field/parameter
|
|
52
|
+
- `data-type` (required): The data type of the field (e.g., "string", "number", "boolean", "object", "array")
|
|
53
|
+
- `data-default` (optional): Default value for the field
|
|
54
|
+
- `data-required` (optional): Whether the field is required ("true" or "false")
|
|
55
|
+
- `data-deprecated` (optional): Whether the field is deprecated ("true" or "false")
|
|
56
|
+
- `data-desc` (optional): Description of the field (replaces previous body content)
|
|
57
|
+
- Children: For complex types (object, array), children can only be other `<x-field>` elements. For simple types, children can be empty.
|
|
58
|
+
|
|
59
|
+
Nesting Rules:
|
|
60
|
+
|
|
61
|
+
- Maximum nesting depth: 5 levels (to avoid overly complex structures)
|
|
62
|
+
- Children elements must only be `<x-field>` components
|
|
63
|
+
- Use `data-desc` attribute for field descriptions instead of body content
|
|
64
|
+
- **Always use opening/closing tags format**: `<x-field ...></x-field>` for all types
|
|
65
|
+
- For simple types (string, number, boolean), children can be empty: `<x-field ...></x-field>`
|
|
66
|
+
- For complex types (object, array), children contain nested `<x-field>` elements
|
|
67
|
+
|
|
68
|
+
**Usage Rules:**
|
|
69
|
+
|
|
70
|
+
- **Context types must use `<x-field>` instead of tables** for consistent formatting
|
|
71
|
+
|
|
72
|
+
Example:
|
|
73
|
+
|
|
74
|
+
```
|
|
75
|
+
<!-- Single field -->
|
|
76
|
+
<x-field data-name="user_id" data-type="string" data-default="u0911" data-required="true" data-deprecated="true" data-desc="Unique identifier for the user. Must be a valid UUID v4 format."></x-field>
|
|
77
|
+
|
|
78
|
+
<!-- Multiple related fields (Props, Parameters, Returns, Context) -->
|
|
79
|
+
<x-field data-name="name" data-type="string" data-required="true" data-desc="The name of the product."></x-field>
|
|
80
|
+
<x-field data-name="description" data-type="string" data-required="false" data-desc="An optional description for the product."></x-field>
|
|
81
|
+
<x-field data-name="type" data-type="string" data-required="false" data-desc="The type of product (e.g., 'service', 'good')."></x-field>
|
|
82
|
+
|
|
83
|
+
<!-- Complex nested object -->
|
|
84
|
+
<x-field data-name="session" data-type="object" data-required="true" data-desc="User session information containing authentication and permission data">
|
|
85
|
+
<x-field data-name="auth" data-type="object" data-required="true" data-desc="User authentication information">
|
|
86
|
+
<x-field data-name="token" data-type="object" data-required="true" data-desc="Access token information">
|
|
87
|
+
<x-field data-name="access_token" data-type="string" data-required="true" data-default="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." data-desc="JWT access token for API authentication"></x-field>
|
|
88
|
+
<x-field data-name="refresh_token" data-type="string" data-required="false" data-default="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..." data-desc="Refresh token for obtaining new access tokens"></x-field>
|
|
89
|
+
<x-field data-name="expires_at" data-type="number" data-required="true" data-default="1704067200" data-desc="Token expiration timestamp (Unix timestamp)"></x-field>
|
|
90
|
+
</x-field>
|
|
91
|
+
<x-field data-name="user" data-type="object" data-required="true" data-desc="User basic information">
|
|
92
|
+
<x-field data-name="profile" data-type="object" data-required="true" data-desc="User profile information">
|
|
93
|
+
<x-field data-name="name" data-type="string" data-required="true" data-default="John Doe" data-desc="User name"></x-field>
|
|
94
|
+
<x-field data-name="email" data-type="string" data-required="true" data-default="john.doe@example.com" data-desc="User email address"></x-field>
|
|
95
|
+
<x-field data-name="avatar" data-type="string" data-required="false" data-default="https://example.com/avatars/john-doe.jpg" data-desc="User avatar URL"></x-field>
|
|
96
|
+
</x-field>
|
|
97
|
+
<x-field data-name="permissions" data-type="array" data-required="true" data-default='["read", "write", "admin"]' data-desc="User permissions list"></x-field>
|
|
98
|
+
</x-field>
|
|
99
|
+
</x-field>
|
|
100
|
+
</x-field>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### 3. `<x-cards>` Card List Component
|
|
104
|
+
|
|
105
|
+
Suitable for displaying multiple links using a card list format, providing a richer and more visually appealing presentation.
|
|
106
|
+
|
|
107
|
+
Syntax:
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
<x-cards data-columns="Number of columns">
|
|
111
|
+
<x-card data-title="Title 1" data-icon="lucide:rocket">Content 1</x-card>
|
|
112
|
+
<x-card data-title="Title 2" data-icon="lucide:bolt">Content 2</x-card>
|
|
113
|
+
<x-card data-title="Title 3" data-icon="material-symbols:rocket-outline">Content 3</x-card>
|
|
114
|
+
</x-cards>
|
|
115
|
+
```
|
|
116
|
+
|
|
117
|
+
Attribute Rules:
|
|
118
|
+
- data-columns (optional): Number of columns, integer (e.g., 2, 3). Default is 2.
|
|
119
|
+
- Must contain multiple <x-card> elements internally.
|
|
120
|
+
- Consistency requirement: All <x-card> elements within the same <x-cards> must maintain visual consistency:
|
|
121
|
+
- Recommended to always provide data-icon for each card.
|
|
122
|
+
- Or all cards should have data-image.
|
|
123
|
+
- Avoid mixing (some with icons, some with only images).
|
|
124
|
+
|
|
125
|
+
<custom_components_good_example>
|
|
126
|
+
Use plain text without any styling
|
|
127
|
+
<x-card data-title="alarm()" data-icon="lucide:alarm-clock"> SIGALRM: Sent when a real-time timer has expired. </x-card>
|
|
128
|
+
|
|
129
|
+
Single card:
|
|
130
|
+
<x-card data-title="Horizontal card" data-icon="lucide:atom" data-horizontal="true">
|
|
131
|
+
This is an example of a horizontal card.
|
|
132
|
+
</x-card>
|
|
133
|
+
|
|
134
|
+
Card list (all using icons, recommended approach):
|
|
135
|
+
<x-cards data-columns="3">
|
|
136
|
+
<x-card data-title="Feature 1" data-icon="lucide:rocket">Description of Feature 1.</x-card>
|
|
137
|
+
<x-card data-title="Feature 2" data-icon="lucide:bolt">Description of Feature 2.</x-card>
|
|
138
|
+
<x-card data-title="Feature 3" data-icon="material-symbols:rocket-outline">Description of Feature 3.</x-card>
|
|
139
|
+
</x-cards>
|
|
140
|
+
|
|
141
|
+
Card list (all using images):
|
|
142
|
+
<x-cards data-columns="2">
|
|
143
|
+
<x-card data-title="Card A" data-image="https://picsum.photos/id/10/300/300">Content A</x-card>
|
|
144
|
+
<x-card data-title="Card B" data-image="https://picsum.photos/id/11/300/300">Content B</x-card>
|
|
145
|
+
</x-cards>
|
|
146
|
+
</custom_components_good_example>
|
|
147
|
+
|
|
148
|
+
<custom_components_bad_example>
|
|
149
|
+
|
|
150
|
+
`x-card` component body does not support markdown formatting inline code block
|
|
151
|
+
<x-card data-title="alarm()" data-icon="lucide:alarm-clock"> `SIGALRM`: Sent when a real-time timer has expired. </x-card>
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
`x-card` component body does not support code blocks
|
|
155
|
+
<x-card data-title="ctrl_break()" data-icon="lucide:keyboard">
|
|
156
|
+
Creates a listener for "ctrl-break" events.
|
|
157
|
+
```rust,no_run
|
|
158
|
+
use tokio::signal::windows::ctrl_break;
|
|
159
|
+
|
|
160
|
+
#[tokio::main]
|
|
161
|
+
async fn main() -> std::io::Result<()> {
|
|
162
|
+
let mut stream = ctrl_break()?;
|
|
163
|
+
stream.recv().await;
|
|
164
|
+
println!("got ctrl-break");
|
|
165
|
+
Ok(())
|
|
166
|
+
}
|
|
167
|
+
```
|
|
168
|
+
</x-card>
|
|
169
|
+
|
|
170
|
+
</custom_components_bad_example>
|
|
171
|
+
|
|
172
|
+
</custom_components_usage>
|
|
@@ -613,6 +613,101 @@ Ensure that the shape names used in connections are accurate and match the actua
|
|
|
613
613
|
Frontend.Uploader-Component -> Backend.Local-Storage-Middleware: "6. Upload file"
|
|
614
614
|
```
|
|
615
615
|
|
|
616
|
+
#### Remove redundant connection text
|
|
617
|
+
> If the connection text is redundant with the shape labels, it should be removed to reduce visual clutter.
|
|
618
|
+
|
|
619
|
+
- **Bad Practice:**
|
|
620
|
+
```d2
|
|
621
|
+
direction: down
|
|
622
|
+
|
|
623
|
+
User: {
|
|
624
|
+
shape: c4-person
|
|
625
|
+
}
|
|
626
|
+
|
|
627
|
+
PaymentProvider-Context: {
|
|
628
|
+
label: "PaymentProvider Context"
|
|
629
|
+
shape: rectangle
|
|
630
|
+
style: {
|
|
631
|
+
stroke: "#888"
|
|
632
|
+
stroke-width: 2
|
|
633
|
+
stroke-dash: 4
|
|
634
|
+
}
|
|
635
|
+
|
|
636
|
+
Entry-Points: {
|
|
637
|
+
label: "High-Level Components"
|
|
638
|
+
shape: rectangle
|
|
639
|
+
|
|
640
|
+
CheckoutTable: {
|
|
641
|
+
label: "CheckoutTable"
|
|
642
|
+
}
|
|
643
|
+
|
|
644
|
+
CheckoutDonate: {
|
|
645
|
+
label: "CheckoutDonate"
|
|
646
|
+
}
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
Core-Processor: {
|
|
650
|
+
label: "Core Payment Processor"
|
|
651
|
+
shape: rectangle
|
|
652
|
+
|
|
653
|
+
CheckoutForm: {
|
|
654
|
+
label: "CheckoutForm"
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
}
|
|
658
|
+
|
|
659
|
+
User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "Selects a plan"
|
|
660
|
+
User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "Makes a donation"
|
|
661
|
+
PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
|
|
662
|
+
PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm: "Initiates checkout"
|
|
663
|
+
```
|
|
664
|
+
- **Good Practice:**
|
|
665
|
+
```d2
|
|
666
|
+
direction: down
|
|
667
|
+
|
|
668
|
+
User: {
|
|
669
|
+
shape: c4-person
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
PaymentProvider-Context: {
|
|
673
|
+
label: "PaymentProvider Context"
|
|
674
|
+
shape: rectangle
|
|
675
|
+
style: {
|
|
676
|
+
stroke: "#888"
|
|
677
|
+
stroke-width: 2
|
|
678
|
+
stroke-dash: 4
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
Entry-Points: {
|
|
682
|
+
label: "High-Level Components"
|
|
683
|
+
shape: rectangle
|
|
684
|
+
|
|
685
|
+
CheckoutTable: {
|
|
686
|
+
label: "CheckoutTable"
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
CheckoutDonate: {
|
|
690
|
+
label: "CheckoutDonate"
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
Core-Processor: {
|
|
695
|
+
label: "Core Payment Processor"
|
|
696
|
+
shape: rectangle
|
|
697
|
+
|
|
698
|
+
CheckoutForm: {
|
|
699
|
+
label: "CheckoutForm"
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
}
|
|
703
|
+
|
|
704
|
+
User -> PaymentProvider-Context.Entry-Points.CheckoutTable: "Selects a plan"
|
|
705
|
+
User -> PaymentProvider-Context.Entry-Points.CheckoutDonate: "Makes a donation"
|
|
706
|
+
PaymentProvider-Context.Entry-Points.CheckoutTable -> PaymentProvider-Context.Core-Processor.CheckoutForm
|
|
707
|
+
PaymentProvider-Context.Entry-Points.CheckoutDonate -> PaymentProvider-Context.Core-Processor.CheckoutForm
|
|
708
|
+
```
|
|
709
|
+
|
|
710
|
+
|
|
616
711
|
#### Remove unnecessary grid-columns
|
|
617
712
|
- **Bad Practice:**
|
|
618
713
|
```d2
|
|
@@ -780,7 +875,6 @@ Ensure that the shape names used in connections are accurate and match the actua
|
|
|
780
875
|
Payment-API -> App.ResumeSubscription.t1: "10. Return latest subscription"
|
|
781
876
|
App.ResumeSubscription.t1 -> App.ResumeSubscription: "11. Call onResumed() & close dialog"
|
|
782
877
|
}
|
|
783
|
-
|
|
784
878
|
```
|
|
785
879
|
- **Good Practice:**
|
|
786
880
|
```d2
|