finos / finos/architecture-as-code

Add Tree View for Scaffolded Website Structure

Open
#2,078 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
399
Forks
138
Avg merge
2d 6h
Merged PRs (30d)
38

Description

## Summary

As discussed on https://github.com/finos/architecture-as-code/issues/2039 as part of the demo of the create website mode [pull/2061](https://github.com/finos/architecture-as-code/pulls/2061), we should add a dedicated tree view in the VSCode extension sidebar that displays the scaffolded website structure. This allows users to navigate and manage their documentation site without relying on the standard file explorer.

## Problem Statement

After running "Create Website" (scaffold mode), users must use the file explorer to navigate the generated structure. This has limitations:

- The file explorer shows all files, not just the documentation structure
- No visual distinction between content pages, config files, and static assets
- Cannot see the logical hierarchy (nodes, relationships) at a glance
- No quick actions specific to documentation pages (edit, preview, delete from site)

## Current Experience

After scaffolding, users see this in the file explorer which they use to navigate.

```
website/
├── docs/
│ ├── index.md
│ ├── nodes/
│ │ ├── ecommerce-system.md
│ │ ├── payment-service.md
│ │ └── inventory-service.md
│ └── relationships/
│ └── sys-composition.md
├── static/
├── package.json
├── sidebars.js
└── docusaurus.config.js
```

## Proposed Experience

A new "CALM Website" tree view in the CALM sidebar:

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.