Documentation Architecture

Relevant source files

The following files were used as context for generating this wiki page:

• package.json
• index.md
• user-guide/index.md
• tutorials/index.md
• biome.json
• user-guide/settings.md

The Acode Plugin Docs project implements a structured, static documentation system to provide guides and API references for the Acode editor. It utilizes a modern web stack to transform Markdown files into a navigable web application, ensuring high performance and developer accessibility.

The architecture centers on a file-based routing system where directory structures define the documentation hierarchy. It separates content into logical modules such as user guides, tutorials, and API references, supported by automated linting and formatting to maintain code quality across contributions.

Technology Stack and Core Components

The documentation engine relies on VitePress for static site generation and Vue for interactive UI components. Biome serves as the primary tool for maintaining codebase health through linting and formatting.

Build and Development Tools

The system defines several lifecycle scripts to manage documentation development and deployment.

Script	Command	Purpose
docs:dev	vitepress dev	Launches the local development server with hot-reload.
docs:build	vitepress build	Compiles Markdown into static HTML for production.
docs:preview	vitepress preview	Serves the production build locally for verification.
lint	biome lint --write	Checks for code smells and applies fixes.
format	biome format --write	Standardizes code style and indentation.

Sources: package.json:6-12, package.json:17-18

Dependency Architecture

The project leverages specialized libraries to enhance the documentation experience:

• VitePress (v1.2.3): The core documentation engine.
• Vue (v3.4.27): Framework for dynamic content and components.
• Lucide-Vue-Next: Provides a consistent icon set for navigation and UI elements.
• Biome: Handles linting, formatting, and import organization for JavaScript and JSON files.

Sources: package.json:15-21, biome.json:30-37

Information Architecture

The content is organized into three primary categories to serve different user needs: Home, User Guide, and Tutorials.

Hierarchy Flow

The following diagram illustrates how a user navigates from the entry point to specific feature documentation.

Core Modules

1. Home View: Defines the brand identity and quick entry points via a VitePress "home" layout. It lists features like Easy Integration, Rapid Development, and Extensible API.
2. User Guide: Master index for core editor features including the File Browser, Terminal, and Settings.
3. Tutorials: Contains step-by-step procedures for specific workflows, such as environment setup (Java) or tool usage (Command Palette).
4. Settings Module: A hierarchical sub-system that breaks down application preferences into App, Editor, Terminal, and Preview categories.

Sources: index.md:1-40, user-guide/index.md:1-80, user-guide/settings.md:1-40, tutorials/index.md:1-15

Code Quality and Standards

The project enforces strict coding standards through a centralized Biome configuration to ensure consistency across Markdown, JSON, and JavaScript files.

Formatting Configuration

The system uses the following rules for its development environment:

• Indentation: Tabs are the preferred indent style.
• JavaScript: Double quotes are enforced for strings.
• Imports: Automated organization of source imports is enabled.
• VCS: Git is identified as the client, though ignore files are handled manually within the configuration.

{
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	}
}

Sources: biome.json:4-38

Navigation and Interactivity

The documentation uses Vue components within Markdown to provide rich UI elements, such as icons and interactive grids.

UI Component Integration

The documentation utilizes lucide-vue-next to represent editor actions visually. This is prominent in the File Browser and Settings documentation to help users identify UI elements in the Acode app.

Data Models for Settings

Each documentation page for settings follows a tabular data model to describe available configurations:

Field	Description
Setting Name	The identifier found in the Acode UI.
Description	A plain-language explanation of the setting's effect.
Values/Notes	Allowed ranges, specific options (e.g., On/Off), or version constraints.

Sources: user-guide/settings/app-settings.md:9-14, user-guide/settings/editor-settings.md:7-27

Conclusion

The documentation architecture for Acode Plugin Docs provides a scalable framework for managing technical content. By combining VitePress for speed, Biome for consistency, and a clear directory-based hierarchy, the project ensures that both users and contributors can easily navigate and maintain the development guides.