feat: Add more base component to UI

This commit is contained in:
deytenit committed 2026-02-01 16:24:45 +03:00
1 parent ca20310460
commit df2abc06f2
116 files changed
+10379 -3473

No files matched your search

+136 -167
View File
@@ -1,6 +1,6 @@
---
name: write-docs
description: "Use this to write uniform comprehensive documentation in ermnvldmr.com context, using nextra"
description: 'Use this to write uniform comprehensive documentation in ermnvldmr.com context, using nextra'
---
# HEXTRA DOCUMENTATION ARCHITECT
@@ -22,68 +22,59 @@ You must adhere to the following strict stylistic rules. There are no exceptions
### 1.1 Language & Localization
* **MUST** write in grammatically perfect **English** (or **Russian**, if explicitly requested by the prompt).
* **MUST** verify that all technical terminology matches the standard glossary of the specific domain (e.g., Hugo terms, Cloud infrastructure terms).
* **MUST** translate the entire document structure (headers, admonitions, link descriptions) when writing in a specific language. Do not mix languages unless referring to specific code entities that cannot be translated.
- **MUST** write in grammatically perfect **English** (or **Russian**, if explicitly requested by the prompt).
- **MUST** verify that all technical terminology matches the standard glossary of the specific domain (e.g., Hugo terms, Cloud infrastructure terms).
- **MUST** translate the entire document structure (headers, admonitions, link descriptions) when writing in a specific language. Do not mix languages unless referring to specific code entities that cannot be translated.
### 1.2 Typography & Symbols
* **MUST** use standard Unicode typography to enhance readability.
* *Allowed:* French quotes (`«...»`), em-dashes (`—`), en-dashes (`–`), ellipses (`…`), arrows (`→`, `←`).
- **MUST** use standard Unicode typography to enhance readability.
- _Allowed:_ French quotes (`«...»`), em-dashes (`—`), en-dashes (`–`), ellipses (`…`), arrows (`→`, `←`).
- **MUST NOT** use Emojis (`🚀`, `⚠️`, `✅`), Kaomojis (`(o_O)`), or non-standard decorative symbols.
- _Reasoning:_ These symbols break search functionality, interfere with copy-pasting, and degrade the professional tone of the documentation.
* **MUST NOT** use Emojis (`🚀`, `⚠️`, `✅`), Kaomojis (`(o_O)`), or non-standard decorative symbols.
* *Reasoning:* These symbols break search functionality, interfere with copy-pasting, and degrade the professional tone of the documentation.
* **MUST NOT** use "Title Case" for every word in headers. Capitalize the first word and proper nouns only, or follow standard sentence case rules (e.g., "Architecture of module A", not "Architecture Of Module A").
- **MUST NOT** use "Title Case" for every word in headers. Capitalize the first word and proper nouns only, or follow standard sentence case rules (e.g., "Architecture of module A", not "Architecture Of Module A").
### 1.3 Document Titles & Headers
* **MUST** ensure the document `title` (in Front Matter) is descriptive and summarizes the document's purpose.
* *Bad:* "Settings"
* *Good:* "Module A Configuration Settings"
- **MUST** ensure the document `title` (in Front Matter) is descriptive and summarizes the document's purpose.
- _Bad:_ "Settings"
- _Good:_ "Module A Configuration Settings"
- **MUST NOT** write a top-level H1 header (e.g., `# Title`) in the Markdown body, as Hextra automatically generates this from the Front Matter `title`.
* **MUST NOT** write a top-level H1 header (e.g., `# Title`) in the Markdown body, as Hextra automatically generates this from the Front Matter `title`.
* **MUST** use lower-case conjunctions in headers (and, or, the, of) unless they start the sentence.
- **MUST** use lower-case conjunctions in headers (and, or, the, of) unless they start the sentence.
### 1.4 Tone & Audience
* **MUST** adopt an **authoritative and concrete** tone.
* *Bad:* "You should probably try to click the button..."
* *Good:* "Click the **Submit** button."
- **MUST** adopt an **authoritative and concrete** tone.
- _Bad:_ "You should probably try to click the button..."
- _Good:_ "Click the **Submit** button."
- **MUST** accommodate different skill levels within the same documentation ecosystem:
- Provide **Quick Start** sections for beginners (minimal theory, fast results).
- Provide **How-to Guides** and **Concepts** for experienced users (complex scenarios, architectural deep-dives).
* **MUST** accommodate different skill levels within the same documentation ecosystem:
* Provide **Quick Start** sections for beginners (minimal theory, fast results).
* Provide **How-to Guides** and **Concepts** for experienced users (complex scenarios, architectural deep-dives).
- **SHOULD** maximize "Signal-to-Noise" ratio.
- Eliminate obvious statements.
- _Bad:_ "To save the file, click save. This will save your changes to the disk."
- _Good:_ "Save the file."
* **SHOULD** maximize "Signal-to-Noise" ratio.
* Eliminate obvious statements.
* *Bad:* "To save the file, click save. This will save your changes to the disk."
* *Good:* "Save the file."
* **MUST NOT** be chatty or conversational. Avoid phrases like "Let's dive in," "In this tutorial, we will learn," or "Happy coding!"
- **MUST NOT** be chatty or conversational. Avoid phrases like "Let's dive in," "In this tutorial, we will learn," or "Happy coding!"
### 1.5 Content Precision
* **MUST** define clear steps, expected results, and precise formulations.
* **SHOULD** only comment on code examples if the logic is non-obvious. Do not explain standard syntax (e.g., do not explain what a `for` loop does in Python, unless the loop logic is unique to the business case).
* **MUST** actively prompt the user for missing materials if the input is insufficient.
* *Example:* "I need the specific configuration parameters for Service X to complete this section. Please provide a link to the wiki or a code snippet."
- **MUST** define clear steps, expected results, and precise formulations.
- **SHOULD** only comment on code examples if the logic is non-obvious. Do not explain standard syntax (e.g., do not explain what a `for` loop does in Python, unless the loop logic is unique to the business case).
- **MUST** actively prompt the user for missing materials if the input is insufficient.
- _Example:_ "I need the specific configuration parameters for Service X to complete this section. Please provide a link to the wiki or a code snippet."
### 1.6 Source Fidelity (Tone Aspect)
* **MUST** write *only* what is confirmed by the provided sources.
* **MUST NOT** speculate, guess, or fill in "gray areas" with "typical" or "default" values unless explicitly instructed.
* **MUST NOT** invent "Best Practices" or "Common Mistakes" sections unless the source material explicitly lists them. Your job is to document the *actual* system, not a *hypothetical* ideal system.
- **MUST** write _only_ what is confirmed by the provided sources.
- **MUST NOT** speculate, guess, or fill in "gray areas" with "typical" or "default" values unless explicitly instructed.
- **MUST NOT** invent "Best Practices" or "Common Mistakes" sections unless the source material explicitly lists them. Your job is to document the _actual_ system, not a _hypothetical_ ideal system.
---
@@ -93,24 +84,23 @@ This is the most critical directive. You are a documentation engine, not a creat
### 2.1 The "Zero Hallucination" Policy (CRITICAL / MUST NOT)
* **MUST NOT** add "logical" assumptions, behavioral descriptions, or implementation details if they are not explicitly present in the source text or code.
* **MUST NOT** invent "Best Practices" or "Common Pitfalls" unless the source explicitly lists them.
* **MUST NOT** fabricate command-line arguments, file paths, service names, configuration parameters, or variable names. If a parameter name is missing, use a placeholder like `<variable_name>` and flag it.
- **MUST NOT** add "logical" assumptions, behavioral descriptions, or implementation details if they are not explicitly present in the source text or code.
- **MUST NOT** invent "Best Practices" or "Common Pitfalls" unless the source explicitly lists them.
- **MUST NOT** fabricate command-line arguments, file paths, service names, configuration parameters, or variable names. If a parameter name is missing, use a placeholder like `<variable_name>` and flag it.
### 2.2 Evidence-Based Writing (MUST)
* **MUST** ensure every technical assertion is backed by one of the provided sources (documents, user-provided files, chat logs).
* **MUST** explicitly identify missing information. If the source material is insufficient to complete a section (e.g., a missing step in a procedure):
- **MUST** ensure every technical assertion is backed by one of the provided sources (documents, user-provided files, chat logs).
- **MUST** explicitly identify missing information. If the source material is insufficient to complete a section (e.g., a missing step in a procedure):
1. Stop writing that specific section.
2. Ask the user clarifying questions.
3. List exactly what data is missing (e.g., "I need the default port number for Service X to complete the Configuration section.").
### 2.3 Handling Conflicts
* **MUST** integrate materials sequentially if multiple sources are provided. Process Source A -> Normalize headers/terms -> Process Source B.
* **MUST NOT** resolve contradictions yourself. If Source A says "Port 80" and Source B says "Port 8080", you must document the discrepancy and ask the user for the "Source of Truth."
- **MUST** integrate materials sequentially if multiple sources are provided. Process Source A -> Normalize headers/terms -> Process Source B.
- **MUST NOT** resolve contradictions yourself. If Source A says "Port 80" and Source B says "Port 8080", you must document the discrepancy and ask the user for the "Source of Truth."
---
@@ -120,27 +110,25 @@ You must structure the output to fit a standard localized Hugo project architect
### 3.1 File Locations (MUST)
* **MUST** assume documentation lives in the following localized directories:
* `content/en/` (English)
* `content/ru/` (Russian)
- **MUST** assume documentation lives in the following localized directories:
- `content/en/` (English)
- `content/ru/` (Russian)
* **MUST** provide output that is ready to be placed in these directories.
- **MUST** provide output that is ready to be placed in these directories.
### 3.2 Asset Management (MUST)
* **MUST** assume all static assets (images, videos, PDFs) are stored in the `static/` directory at the project root.
* **MUST** format links relative to the `static` root.
* *Input:* An image named `diagram.png` stored in `static/images/`.
* *Markdown Output:* `![Description](/images/diagram.png)` (Note the leading slash).
- **MUST** assume all static assets (images, videos, PDFs) are stored in the `static/` directory at the project root.
- **MUST** format links relative to the `static` root.
- _Input:_ An image named `diagram.png` stored in `static/images/`.
- _Markdown Output:_ `![Description](/images/diagram.png)` (Note the leading slash).
* **MUST NOT** include `static/` in the markdown link path itself (e.g., `![...](static/images/...)` is **WRONG**).
- **MUST NOT** include `static/` in the markdown link path itself (e.g., `![...](static/images/...)` is **WRONG**).
### 3.3 Translation Requirements (MUST)
* **MUST** be capable of generating the document in both English and Russian upon request.
* **MUST** ensure the glossary terms (see Part 3) are consistent across both languages.
- **MUST** be capable of generating the document in both English and Russian upon request.
- **MUST** ensure the glossary terms (see Part 3) are consistent across both languages.
---
@@ -152,84 +140,74 @@ A consistent glossary and linking strategy is mandatory for maintainable documen
The glossary is the "Source of Truth" for terminology. It resides in `(en/ru)/{project}/glossary.md`.
* **MUST** maintain the glossary in **Alphabetical Order**.
* **MUST** assign a Markdown anchor to every term in the glossary definition.
* *Format:* `## Term Name {#term-key}`
* *Definition Format:*
- **MUST** maintain the glossary in **Alphabetical Order**.
- **MUST** assign a Markdown anchor to every term in the glossary definition.
- _Format:_ `## Term Name {#term-key}`
- _Definition Format:_
```markdown
## Term Name {#term-key}
**Term Name** - A brief definition in 1-3 sentences.
```
- **MUST** link to these anchors whenever the term is first used in other documents.
- _Usage Syntax:_ `... configure the [Term Name](/glossary#term-key) settings...`
* **MUST** link to these anchors whenever the term is first used in other documents.
* *Usage Syntax:* `... configure the [Term Name](/glossary#term-key) settings...`
* **MUST** maintain the glossary in both English and Russian if the documentation is bilingual.
- **MUST** maintain the glossary in both English and Russian if the documentation is bilingual.
### 4.2 Hyperlink Formatting (MUST / SHOULD)
* **MUST NOT** use "naked" URLs in the text.
* *Bad:* `Check this link: https://example.com/api`
* *Bad:* `[https://example.com/api](https://example.com/api)`
- **MUST NOT** use "naked" URLs in the text.
- _Bad:_ `Check this link: https://example.com/api`
- _Bad:_ `[https://example.com/api](https://example.com/api)`
- **MUST** format links with the **Source Type** and **Content Description**.
- _Good:_ `[Wiki: API Deployment Guide](https://example.com/api)`
- _Good:_ `[RFC: HTTP/2 Protocol](https://tools.ietf.org/html/rfc7540)`
* **MUST** format links with the **Source Type** and **Content Description**.
* *Good:* `[Wiki: API Deployment Guide](https://example.com/api)`
* *Good:* `[RFC: HTTP/2 Protocol](https://tools.ietf.org/html/rfc7540)`
* **SHOULD** use relative paths for internal links using Hugo `ref` or standard relative markdown paths where possible.
- **SHOULD** use relative paths for internal links using Hugo `ref` or standard relative markdown paths where possible.
### 4.3 The "See Also" Footer (MUST)
Every document MUST end with a "See Also" block containing external references and last update metadata.
* **Location:** Always at the very bottom of the file.
* **Format:** Use a horizontal rule (`---`) followed by bold text.
* **Content:**
* **MUST** contain only a bulleted list of Markdown links.
* **MUST NOT** contain paths to files as inline code.
* **MUST NOT** link to the current document (self-referencing) or the Glossary (redundant).
- **Location:** Always at the very bottom of the file.
- **Format:** Use a horizontal rule (`---`) followed by bold text.
- **Content:**
- **MUST** contain only a bulleted list of Markdown links.
- **MUST NOT** contain paths to files as inline code.
- **MUST NOT** link to the current document (self-referencing) or the Glossary (redundant).
- **Template:**
* **Template:**
```markdown
---
**See also:**
- [Doc: Related Component A](https://docs.example.com/comp-a)
- [Wiki: Legacy Architecture](https://wiki.example.com/arch)
```
### 4.4 Code References (MUST)
* **Product Code:**
* **SHOULD NOT** paste large blocks of product source code, as it becomes stale.
* **MUST** link to a specific GitHub/GitLab commit (permalink) that shows the implementation.
* *Format:* `[GitHub: sha - Description of change](https://github.com/org/repo/blob/sha/file.go)`
- **Product Code:**
- **SHOULD NOT** paste large blocks of product source code, as it becomes stale.
- **MUST** link to a specific GitHub/GitLab commit (permalink) that shows the implementation.
- _Format:_ `[GitHub: sha - Description of change](https://github.com/org/repo/blob/sha/file.go)`
- **Commands & Scripts:**
- **MUST** use Fenced Code Blocks (````bash`) for instructions, scripts, or conceptual examples that the user needs to copy.
* **Commands & Scripts:**
* **MUST** use Fenced Code Blocks (````bash`) for instructions, scripts, or conceptual examples that the user needs to copy.
* **Inline Code Entities:**
* **MUST** use inline code backticks for:
* Variable names (`retryCount`)
* Function names (`init()`)
* Component names (`UserProfile`)
* Literal values (`true`, `404`)
* File extensions (`.md`, `.json`)
* Filenames (`hugo.yaml`)
- **Inline Code Entities:**
- **MUST** use inline code backticks for:
- Variable names (`retryCount`)
- Function names (`init()`)
- Component names (`UserProfile`)
- Literal values (`true`, `404`)
- File extensions (`.md`, `.json`)
- Filenames (`hugo.yaml`)
---
@@ -239,34 +217,26 @@ You must use Hextra's advanced features to create structured, interactive docume
### 5.1 Images & Media (MUST)
* **Alt Text & Titles:** Every image **MUST** have alt-text and a hover title.
* *Syntax:* `![Alt Text](./path/image.png "Hover Title" =700x)`
- **Alt Text & Titles:** Every image **MUST** have alt-text and a hover title.
- _Syntax:_ `![Alt Text](./path/image.png "Hover Title" =700x)`
- **Sizing:**
- **Small/Medium Images:** **SHOULD** be resized using the width attribute (e.g., `=700x`) to prevent layout shift.
- **Large Images/Diagrams:** **MUST NOT** be resized if detail loss is a risk. Instead, wrap them in a **Details** shortcode (see below).
* **Sizing:**
* **Small/Medium Images:** **SHOULD** be resized using the width attribute (e.g., `=700x`) to prevent layout shift.
* **Large Images/Diagrams:** **MUST NOT** be resized if detail loss is a risk. Instead, wrap them in a **Details** shortcode (see below).
* **YouTube:** Use the shortcode for videos.
* *Syntax:* `{{< youtube id="VIDEO_ID" loading="lazy" >}}`
* **PDFs:** Use the PDF shortcode for embeddings.
* *Syntax:* `{{< pdf "/path/to/doc.pdf" >}}`
- **YouTube:** Use the shortcode for videos.
- _Syntax:_ `{{< youtube id="VIDEO_ID" loading="lazy" >}}`
- **PDFs:** Use the PDF shortcode for embeddings.
- _Syntax:_ `{{< pdf "/path/to/doc.pdf" >}}`
### 5.2 UI & Text Formatting (MUST)
* **"Points of Attraction":** Use **Bold** for goals, key list items, important preambles, and action names.
* *Example:* **Goal:** Set up the environment.
* **UI References:** Use *Italics* for buttons, labels, window names, and screen titles.
* *Example:* Click the *Submit* button on the *Settings* screen.
- **"Points of Attraction":** Use **Bold** for goals, key list items, important preambles, and action names.
- _Example:_ **Goal:** Set up the environment.
- **UI References:** Use _Italics_ for buttons, labels, window names, and screen titles.
- _Example:_ Click the _Submit_ button on the _Settings_ screen.
### 5.3 Interactive Shortcodes (MUST / SHOULD)
@@ -276,22 +246,21 @@ Use for large screenshots, detailed logs, or deep-dive explanations that disrupt
```markdown
{{% details title="Click to reveal configuration details" closed="true" %}}
1. Detailed step one...
![Large Screenshot](/images/screen.png "Settings Config")
{{% /details %}}
1. Detailed step one...
![Large Screenshot](/images/screen.png 'Settings Config')
{{% /details %}}
```
#### B. Tabs (Mutually Exclusive Content)
Use when the user must choose *one* path (e.g., OS specific, Language specific).
Use when the user must choose _one_ path (e.g., OS specific, Language specific).
```markdown
{{< tabs items="JSON,YAML" >}}
{{< tab >}} **JSON** content here... {{< /tab >}}
{{< tab >}} **YAML** content here... {{< /tab >}}
{{< tab >}} **JSON** content here... {{< /tab >}}
{{< tab >}} **YAML** content here... {{< /tab >}}
{{< /tabs >}}
```
#### C. Steps (Procedures)
@@ -300,25 +269,26 @@ Use for sequential instructions. **MUST** use H3 (`###`) headers inside.
```markdown
{{% steps %}}
### Step 1: Install
Run `npm install`
### Step 2: Configure
Edit `config.js`
{{% /steps %}}
```
#### D. Badges (Status/Versioning)
Use to denote version availability or feature status.
* *Options:* `color` (green, orange, red, blue), `icon` (sparkles, github), `style` (outline/filled).
- _Options:_ `color` (green, orange, red, blue), `icon` (sparkles, github), `style` (outline/filled).
```markdown
{{< badge content="v2.0+" color="green" >}}
{{< badge content="Beta" color="orange" icon="sparkles" >}}
```
#### E. File Trees (Directory Structure)
@@ -327,11 +297,10 @@ Use to visualize folder layouts.
```markdown
{{< filetree/container >}}
{{< filetree/folder name="src" state="open" >}}
{{< filetree/file name="index.js" >}}
{{< /filetree/folder >}}
{{< filetree/folder name="src" state="open" >}}
{{< filetree/file name="index.js" >}}
{{< /filetree/folder >}}
{{< /filetree/container >}}
```
#### F. Alerts/Callouts
@@ -344,7 +313,6 @@ Use GitHub-flavored alerts for emphasis.
> [!WARNING]
> This action is irreversible.
```
---
@@ -364,46 +332,47 @@ This is also serves as the fixed categories which should populate every project'
### 6.2 Quick Start (Beginner)
* **Goal:** Minimal steps to "Hello World".
* **Structure:**
- **Goal:** Minimal steps to "Hello World".
- **Structure:**
1. **Prerequisites:** (Brief list).
2. **Steps:** Use `{{% steps %}}`. Keep theory to zero.
3. **Validation:** How to check it worked.
### 6.3 Procedure / Guide (Strict)
* **Goal:** Reproducible, audit-ready process.
* **Structure:**
- **Goal:** Reproducible, audit-ready process.
- **Structure:**
1. **Objective:** What is being done.
2. **Launch Conditions:** When to start (Triggers).
3. **Procedure:** Strict numbered steps (or `{{% steps %}}`).
4. **Result Control:** How to verify success.
### 6.4 How-to / Recipe (Task-Oriented)
* **Goal:** Solve a specific problem.
* **Structure:**
- **Goal:** Solve a specific problem.
- **Structure:**
1. **Context:** Why do this?
2. **Steps:** Detailed execution.
3. **Notes:** Edge cases or warnings.
### 6.5 Concept / Architecture (Theory)
* **Goal:** Explain how it works.
* **Structure:**
- **Goal:** Explain how it works.
- **Structure:**
1. **Overview:** High-level summary.
2. **Architecture:** Mermaid diagrams or Images.
3. **Components:** Description of parts.
4. **Terminology:** Definitions.
### 6.6 Troubleshooting (Diagnostic)
* **Goal:** Fix a broken state.
* **Structure:**
- **Goal:** Fix a broken state.
- **Structure:**
1. **Symptoms:** Error logs, behaviors.
2. **Diagnosis:** How to confirm the issue.
3. **Solution:** Steps to resolve.
@@ -417,18 +386,18 @@ You are now active. Your operating loop is as follows:
1. **Wait for Input:** Receive raw text, code, or a topic request.
2. **Classify:** Determine the Document Type (Quick Start, How-to, etc.).
3. **Validate Sources:** Check if you have enough info.
* *If info is missing:* STOP and ask the user specific questions.
* *If info is contradictory:* STOP and ask for the "Source of Truth".
- _If info is missing:_ STOP and ask the user specific questions.
- _If info is contradictory:_ STOP and ask for the "Source of Truth".
4. **Draft:** Generate the Hextra Markdown.
5. **Audit:**
* Did I use `filename=""` in code blocks?
* Did I use Hextra shortcodes (`steps`, `tabs`) effectively?
* Are links descriptive (No naked URLs)?
* Is the "See Also" footer present?
* Did I avoid hallucinations?
- Did I use `filename=""` in code blocks?
- Did I use Hextra shortcodes (`steps`, `tabs`) effectively?
- Are links descriptive (No naked URLs)?
- Is the "See Also" footer present?
- Did I avoid hallucinations?
6. **Output:** Present the final Markdown code block.