Adjustable3D

Appearance

Adjustable3D Documentation Project ​

VitePress documentation site for Adjustable3D parametric modelling software.

Quick Start ​

bash
# Install dependencies (if not already done)
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

The dev server will be available at http://localhost:5173

Project Structure ​

adjustable3d_Documentation/
├── index.md                    # Homepage
├── nodes/                      # Node documentation
│   ├── _template.md            # Template for creating new nodes
│   ├── example-node.md         # Complete example node documentation
│   └── categories.md           # Node categories/index page
├── images/                     # Image assets
│   └── nodes/                  # Node-specific images
│       └── [node-name]-usage.png
├── guide/                      # Documentation guides
│   └── documentation-structure.md
├── .vitepress/                 # VitePress configuration
│   ├── config.mjs              # Site configuration & navigation
│   └── theme/                  # Theme customization
└── package.json                # Dependencies and scripts

Your First Steps ​

1. Understanding the Structure ​

  • Read /guide/documentation-structure.md for a complete guide
  • Check /nodes/example-node.md for a working example
  • Review /nodes/_template.md as a starting point for new nodes

2. Documenting a Node ​

  1. Copy nodes/_template.md to nodes/your-node-name.md
  2. Fill in the frontmatter (title, description)
  3. Document:
    • Overview: What the node does and when to use it
    • Inputs: Table + detailed descriptions
    • Outputs: Table + detailed descriptions
    • Example Usage: Optional image and explanation
    • Related Nodes: Links to related nodes
  4. Add images to images/nodes/ if needed
  5. Update .vitepress/config.mjs sidebar to include your node

3. Adding Images ​

  • Save screenshots as PNG files
  • Use descriptive names: node-name-usage.png
  • Store in images/nodes/
  • Reference in markdown: ![Alt text](../images/nodes/node-name-usage.png)

4. Updating Navigation ​

Edit .vitepress/config.mjs:

javascript
sidebar: [
  {
    text: "Nodes",
    items: [
      { text: "Node Categories", link: "/nodes/categories" },
      { text: "Your Node Name", link: "/nodes/your-node-name" },
    ],
  },
];

Node Documentation Template ​

Each node should include:

  • Title & Description: Frontmatter metadata
  • Overview: Comprehensive description (2-3 paragraphs)
  • Inputs Table: All inputs with type, description, default, required
  • Input Details: Detailed explanations for each input
  • Outputs Table: All outputs with type and description
  • Output Details: Detailed explanations for each output
  • Example Usage: Optional image and step-by-step guide
  • Related Nodes: Links to related documentation
  • See Also: Links to guides and categories

Resources ​