Make use of starlight file tree in our docs (#4917)

<img width="767" alt="image"
src="https://github.com/user-attachments/assets/812bd7b3-7526-4c63-bd1d-11044597a56e">
it is also dynamic, not really useful but looks nice

.vscode/settings.json

@@ -28,7 +28,7 @@
     "editor.detectIndentation": false,
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
-  "[json][[jsonc][yaml][typespec][markdown][css][astro]": {
+  "[json][[jsonc][yaml][typespec][markdown][css][astro][mdx]": {
     "editor.formatOnSave": true,
     "editor.formatOnPaste": true,
     "editor.insertSpaces": true,

docs/getting-started/getting-started-rest/01-setup-basic-syntax.md → docs/getting-started/getting-started-rest/01-setup-basic-syntax.mdx

@@ -4,6 +4,8 @@ title: Getting Started with TypeSpec For REST APIs
 pagination_next: getting-started/getting-started-rest/02-operations-responses # Explicitly needed as its also being the category page https://github.com/facebook/docusaurus/issues/6183
 ---
 
+import { FileTree } from "@astrojs/starlight/components";
+
 ## Introduction
 
 Welcome to our tutorial on using TypeSpec to define REST APIs with HTTP. In this section, we'll introduce you to TypeSpec, help you set up your environment, and cover the basic syntax and structure of TypeSpec. By the end of this section, you'll have a solid foundation to build upon in the subsequent sections.
@@ -31,14 +33,17 @@ Before we start writing TypeSpec code, we need to set up our development environ
 
 Once you've completed these steps, you'll have a basic TypeSpec project set up. Here's an overview of the files and directories in your TypeSpec project:
 
-```
-Project Root
-├── main.tsp
-├── tspconfig.yaml
-├── package.json
-├── node_modules/
-└── tsp-output/
-```
+{/* prettier-ignore */}
+<FileTree>
+- main.tsp
+- tspconfig.yaml
+- package.json
+- node_modules/
+- tsp-output/
+  - @typespec/
+    - openapi3/
+      - openapi.yaml
+</FileTree>
 
 - **main.tsp**: Entry point for TypeSpec definitions.
 - **tspconfig.yaml**: TypeSpec compiler configuration.

docs/getting-started/getting-started-rest/06-versioning.md → docs/getting-started/getting-started-rest/06-versioning.mdx

@@ -2,6 +2,8 @@
 title: Versioning
 ---
 
+import { FileTree } from "@astrojs/starlight/components";
+
 ## Introduction
 
 In this section, we'll focus on implementing versioning in your REST API. Versioning allows you to manage changes to your API over time without breaking existing clients. We'll introduce the `@versioned` decorator, show how to define versions with enums, and demonstrate how to use the `@added` decorator to specify version-specific models and operations.
@@ -88,19 +90,18 @@ In this example:
 
 Once we start adding versions, the TypeSpec compiler will generate individual OpenAPI specifications for each version. In our case, it will generate two OpenAPI specs, one for each version of our Pet Store service API. Our file structure will now look like this:
 
-```tsp
-main.tsp
-tspconfig.yaml
-package.json
-node_modules/
-tsp-output/
-┗ @typespec/
-  ┗ openapi3/
-    // highlight-start
-    ┣ openapi.1.0.yaml
-    ┗ openapi.2.0.yaml
-    // highlight-end
-```
+{/* prettier-ignore */}
+<FileTree>
+- main.tsp
+- tspconfig.yaml
+- package.json
+- node_modules/
+- tsp-output/
+  - @typespec/
+    - openapi3
+      - openapi.1.0.yaml
+      - openapi.2.0.yaml
+</FileTree>
 
 Generating separate specs for each version ensures backward compatibility, provides clear documentation for developers to understand differences between versions, and simplifies maintenance by allowing independent updates to each version's specifications.
 

docs/introduction/installation.md → docs/introduction/installation.mdx

@@ -4,6 +4,8 @@ title: Installation
 slug: docs
 ---
 
+import { FileTree } from "@astrojs/starlight/components";
+
 ## Requirements
 
 Install [Node.js 20 LTS](https://nodejs.org/en/download/) and ensure you can run the `npm` command in a command prompt:
@@ -63,16 +65,17 @@ tsp compile .
 
 You should now have a basic TypeSpec project setup with a structure looking like this:
 
-```bash
-main.tsp
-tspconfig.yaml
-package.json
-node_modules/
-tsp-output/
-  @typespec/
-    openapi3/
-      openapi.yaml
-```
+{/* prettier-ignore */}
+<FileTree>
+- main.tsp
+- tspconfig.yaml
+- package.json
+- node_modules/
+- tsp-output/
+  - @typespec/
+    - openapi3/
+      - openapi.yaml
+</FileTree>
 
 - **main.tsp**: The entry point for your TypeSpec build. This file typically contains the main definitions for your models, services, and operations.
 - **tspconfig.yaml**: Configuration file for the TypeSpec compiler, specifying options and settings for the build process.