Docs
Files
Draw a project tree with folder and file icons.
Opt-in. Enable it in build.rs before use — see Enabling below.
content/structure.mdx
<Files>
<Folder name="src">
<Folder name="pages">
<File name="home.rs" />
</Folder>
<File name="main.rs" />
</Folder>
<File name="Cargo.toml" />
</Files>
Attributes
| Tag | Attribute | Required | Meaning |
|---|---|---|---|
<Folder> | name | yes | Folder label. Missing name fails the build |
<File> | name | yes | File label. Missing name fails the build |
Both render with data-kind="folder" or data-kind="file", which is what the stylesheet uses to pick an icon.
Enabling
The MdxConfig::proa() preset enables this along with the other opt-in components. To turn on just this one:
Files is off by default. Turn it on in the MDX config:
build.rs
use proa_docs_build::{Config, DocsSource, MarkdownPipeline, MdxConfig};
let markdown = MarkdownPipeline::default().mdx(MdxConfig::new().files(true));
let config = Config::new().source(DocsSource::new("src/docs").markdown(markdown));
Without it, the tags are dropped from the rendered HTML, which is the usual cause of "my file tree renders as nothing."
Files or a filetree fence?
| Use | When |
|---|---|
<Files> | You want icons, nesting, and a real tree |
```proa-filetree | You want a quick indented listing inside a code block |
The fence is faster to write and needs no config. The component looks like a file browser.