FileTree

File Trees are a great way to display directory structures in your site. It renders a collapsible tree view of files and folders, and automatically shows icons for different file types.

Usage

Add the FileTree() component to your components list in your main.dart file:

import 'package:jaspr_content/components/file_tree.dart';

// ...

ContentApp(
  components: [
    FileTree(),
  ],
)

Then use the <FileTree> component in your content files to display the file trees. Specify the structure of your files and directories with an unordered Markdown list. Create a sub-directory using a nested list or add a / to the end of a list item to render it as a directory without specific content.

<FileTree>

- lib/
  - components/
    - clicker.dart
  - **main.dart** Highlighted file with comment
- tool/
- .gitignore
- analysis_options.yaml
- CHANGELOG.md
- LICENSE 
- package.yaml 
- README.md This is a comment

</FileTree>

• You can highlight specific files or folders by making the text bold using ** or __.

• You can add comments to files or folders by adding text after the name of the file or folder.

• You can also specify folders to be closed by default by prefixing the folder name with a ^ character.

  <FileTree>
  
  - lib/ // This folder will be open by default
    - ^src/ // This folder will be closed by default
      - utils.dart
    - main.dart
  - README.md
  
  </FileTree>
  

Theming

You can customize the appearance of the FileTree component using the FileTreeTheme extension. You can set customize the background, text, icons, and highlight color as well as the border radius of the tree container.

ContentTheme(
  extensions: [
    FileTreeTheme(
      highlightColor: ThemeColors.teal,
      radius: 2.rem,
    ),
  ],
)