Add FileTree component to docs

site/lib/_sass/components/_code.scss

@@ -254,3 +254,25 @@ iframe[src^="https://dartpad"] {
   resize: vertical;
   width: 100%;
 }
+
+.file-tree {
+  --file-tree-bg: var(--site-inset-bgColor);
+  --file-tree-text: var(--site-base-fgColor);
+  --file-tree-icon: var(--site-base-fgColor-alt);
+  --file-tree-highlight: var(--site-link-fgColor);
+
+  font-family: var(--site-code-fontFamily); 
+
+  border: 1px solid var(--site-inset-borderColor);
+  margin-block-start: 1rem;
+  margin-block-end: 1rem;
+
+  details {
+    margin: unset;
+
+    summary {
+      font-weight: unset;
+      user-select: unset;
+    }
+  }
+}

site/lib/jaspr_options.dart

@@ -35,6 +35,7 @@ import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_fil
     as prefix13;
 import 'package:docs_flutter_dev_site/src/components/pages/learning_resource_filters_sidebar.dart'
     as prefix14;
+import 'package:jaspr_content/components/file_tree.dart' as prefix15;
 
 /// Default [JasprOptions] for use with your jaspr project.
 ///
@@ -122,7 +123,7 @@ JasprOptions get defaultJasprOptions => JasprOptions(
           'src/components/pages/learning_resource_filters_sidebar',
         ),
   },
-  styles: () => [],
+  styles: () => [...prefix15.FileTree.styles],
 );
 
 Map<String, dynamic> _prefix2CopyButton(prefix2.CopyButton c) => {

site/lib/main.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:jaspr/server.dart';
+import 'package:jaspr_content/components/file_tree.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 import 'package:jaspr_content/theme.dart';
 import 'package:path/path.dart' as path;
@@ -94,6 +95,7 @@ List<CustomComponent> get _embeddableComponents => [
   const DashTabs(),
   const DashImage(),
   const YoutubeEmbed(),
+  const FileTree(),
   CustomComponent(
     pattern: RegExp('OSSelector', caseSensitive: false),
     builder: (_, _, _) => const OsSelector(),

site/lib/src/layouts/dash_layout.dart

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:convert' show htmlEscape;
-
 import 'package:jaspr/jaspr.dart';
 import 'package:jaspr_content/jaspr_content.dart';
 
@@ -102,9 +100,7 @@ abstract class FlutterDocsLayout extends PageLayoutBase {
       ),
       link(
         rel: 'stylesheet',
-        href:
-            '/assets/css/main.css?'
-            'hash=${htmlEscape.convert(generatedStylesHash)}',
+        href: '/assets/css/main.css?hash=$generatedStylesHash',
       ),
 
       if (pageData['js'] case final List<Object?> jsList)

site/lib/src/style_hash.dart

@@ -2,4 +2,4 @@
 // dart format off
 
 /// The generated hash of the `main.css` file.
-const generatedStylesHash = 'mW0BCRz4bRll';
+const generatedStylesHash = 'ZFZ+YS8Vr+JP';

src/_includes/docs/add-to-app/ios-project/embed-cocoapods.md

@@ -35,15 +35,16 @@ If you have a different directory structure,
 adjust the relative paths.
 The example directory structure resembles the following:
 
-```plaintext
-/path/to/MyApp
-├── my_flutter/
-│   └── .ios/
-│       └── Flutter/
-│         └── podhelper.rb
-└── MyApp/
-    └── Podfile
-```
+<FileTree>
+
+- my_flutter/
+   - .ios/
+   - Flutter/
+      - podhelper.rb
+- MyApp/
+   - Podfile
+
+</FileTree>
 
 #### Update your Podfile
 

src/_includes/docs/add-to-app/ios-project/embed-framework-directory-tree.md

@@ -9,25 +9,27 @@ Run this _every time_ you change code in your Flutter module.
 
 The resulting project structure should resemble this directory tree.
 
-```plaintext
-/path/to/MyApp/
-└── Flutter/
-    ├── Debug/
-    │   ├── Flutter.xcframework
-    │   ├── App.xcframework
-    │   ├── FlutterPluginRegistrant.xcframework (only if you have plugins with iOS platform code)
-    │   └── example_plugin.xcframework (each plugin is a separate framework)
-    ├── Profile/
-    │   ├── Flutter.xcframework
-    │   ├── App.xcframework
-    │   ├── FlutterPluginRegistrant.xcframework
-    │   └── example_plugin.xcframework
-    └── Release/
-        ├── Flutter.xcframework
-        ├── App.xcframework
-        ├── FlutterPluginRegistrant.xcframework
-        └── example_plugin.xcframework
-```
+<FileTree>
+
+- /path/to/MyApp/
+  - Flutter/
+    - Debug/
+      - Flutter.xcframework
+      - App.xcframework
+      - FlutterPluginRegistrant.xcframework (If you have plugins with iOS-platform code)
+      - example_plugin.xcframework (One framework file for each plugin)
+    - Profile/
+      - Flutter.xcframework
+      - App.xcframework
+      - FlutterPluginRegistrant.xcframework
+      - example_plugin.xcframework
+    - Release/
+      - Flutter.xcframework
+      - App.xcframework
+      - FlutterPluginRegistrant.xcframework
+      - example_plugin.xcframework
+
+</FileTree>
 
 :::warning
 Always use `Flutter.xcframework` and `App.xcframework` bundles

src/_includes/docs/swift-package-manager/migrate-objective-c-plugin.md

@@ -7,11 +7,14 @@ The example below uses `ios`, replace `ios` with `macos`/`darwin` as applicable.
    directories.
    Name this new directory the name of the platform package.
 
-   ```plaintext highlightLines=3
-   plugin_name/ios/
-   ├── ...
-   └── plugin_name/
-   ```
+   <FileTree>
+
+   - plugin_name/
+     - ios/
+       - ...
+       - **plugin_name/**
+
+   </FileTree>
 
 1. Within this new directory, create the following files/directories:
 
@@ -27,14 +30,17 @@ The example below uses `ios`, replace `ios` with `macos`/`darwin` as applicable.
 
    Your plugin should look like:
 
-   ```plaintext highlightLines=4-6
-   plugin_name/ios/
-   ├── ...
-   └── plugin_name/
-      ├── Package.swift
-      └── Sources/plugin_name/include/plugin_name/
-         └── .gitkeep
-   ```
+   <FileTree>
+
+   - plugin_name/
+     - ios/
+       - ...
+       - plugin_name/
+         - **Package.swift**
+         - **Sources/plugin_name/include/plugin_name/**
+           - **.gitkeep/**
+
+   </FileTree>
 
 1. Use the following template in the `Package.swift` file:
 

src/_includes/docs/swift-package-manager/migrate-swift-plugin.md

@@ -7,11 +7,14 @@ The example below uses `ios`, replace `ios` with `macos`/`darwin` as applicable.
    directories.
    Name this new directory the name of the platform package.
 
-   ```plaintext highlightLines=3
-   plugin_name/ios/
-   ├── ...
-   └── plugin_name/
-   ```
+   <FileTree>
+
+   - plugin_name/
+     - ios/
+       - ...
+       - **plugin_name/**
+
+   </FileTree>
 
 1. Within this new directory, create the following files/directories:
 
@@ -21,13 +24,17 @@ The example below uses `ios`, replace `ios` with `macos`/`darwin` as applicable.
 
    Your plugin should look like:
 
-   ```plaintext highlightLines=4-5
-   plugin_name/ios/
-   ├── ...
-   └── plugin_name/
-      ├── Package.swift
-      └── Sources/plugin_name/
-   ```
+   <FileTree>
+
+   - plugin_name/
+     - ios/
+       - ...
+       - plugin_name/
+         - **Package.swift**
+         - **Sources/**
+           - **plugin_name/**
+
+   </FileTree>
 
 1. Use the following template in the `Package.swift` file:
 

src/content/add-to-app/android/project-setup.md

@@ -284,27 +284,29 @@ More specifically, this command creates
 (by default all debug/profile/release modes)
 a [local repository][], with the following files:
 
-```plaintext
-build/host/outputs/repo
-└── com
-    └── example
-        └── flutter_module
-            ├── flutter_release
-            │   ├── 1.0
-            │   │   ├── flutter_release-1.0.aar
-            │   │   ├── flutter_release-1.0.aar.md5
-            │   │   ├── flutter_release-1.0.aar.sha1
-            │   │   ├── flutter_release-1.0.pom
-            │   │   ├── flutter_release-1.0.pom.md5
-            │   │   └── flutter_release-1.0.pom.sha1
-            │   ├── maven-metadata.xml
-            │   ├── maven-metadata.xml.md5
-            │   └── maven-metadata.xml.sha1
-            ├── flutter_profile
-            │   ├── ...
-            └── flutter_debug
-                └── ...
-```
+<FileTree>
+
+- build/host/outputs/repo
+  - com
+    - example
+      - flutter_module
+        - flutter_release
+          - 1.0
+            - flutter_release-1.0.aar
+            - flutter_release-1.0.aar.md5
+            - flutter_release-1.0.aar.sha1
+            - flutter_release-1.0.pom
+            - flutter_release-1.0.pom.md5
+            - flutter_release-1.0.pom.sha1
+        - maven-metadata.xml
+        - maven-metadata.xml.md5
+        - maven-metadata.xml.sha1
+    - flutter_profile
+        - ...
+    - flutter_debug
+        - ...
+
+</FileTree>
 
 To depend on the AAR, the host app must be able
 to find these files.

src/content/add-to-app/ios/project-setup.md

@@ -60,16 +60,19 @@ This helps when testing the Flutter-only parts of your code.
 
 The `my_flutter` module directory structure resembles a typical Flutter app.
 
-```plaintext
-my_flutter/
-├── .ios/
-│   ├── Runner.xcworkspace
-│   └── Flutter/podhelper.rb
-├── lib/
-│   └── main.dart
-├── test/
-└── pubspec.yaml
-```
+<FileTree>
+
+- my_flutter/
+  - .ios/
+    - Runner.xcworkspace
+    - Flutter/
+      - podhelper.rb
+  - lib/
+    - main.dart
+  - test/
+  - pubspec.yaml
+
+</FileTree>
 
 Your Dart code should be added to the `lib/` directory.
 Your Flutter dependencies, packages, and plugins must be added to the