fix(guides) : standardize tree view on guide (#7922)

Author: ThierryRakotomanana

src/content/guides/asset-management.mdx

@@ -109,16 +109,16 @@ Let's try it out by adding a new `style.css` file to our project and import it i
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-  |- /dist
-    |- bundle.js
-    |- index.html
-  |- /src
-+   |- style.css
-    |- index.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
++  │   ├── style.css
+   │   └── index.js
+   └── /node_modules
 ```
 
 **src/style.css**
@@ -215,17 +215,17 @@ Let's add an image to our project and see how this works, you can use any image
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-  |- /dist
-    |- bundle.js
-    |- index.html
-  |- /src
-+   |- icon.png
-    |- style.css
-    |- index.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
++  │   ├── icon.png
+   │   ├── style.css
+   │   └── index.js
+   └── /node_modules
 ```
 
 **src/index.js**
@@ -334,19 +334,19 @@ Add some font files to your project:
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-  |- /dist
-    |- bundle.js
-    |- index.html
-  |- /src
-+   |- my-font.woff
-+   |- my-font.woff2
-    |- icon.png
-    |- style.css
-    |- index.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
++  │   ├── my-font.woff
++  │   ├── my-font.woff2
+   │   ├── icon.png
+   │   ├── style.css
+   │   └── index.js
+   └── /node_modules
 ```
 
 With the loader configured and fonts in place, you can incorporate them via an `@font-face` declaration. The local `url(...)` directive will be picked up by webpack, as it was with the image:
@@ -457,21 +457,21 @@ Add some data files to your project:
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-  |- /dist
-    |- bundle.js
-    |- index.html
-  |- /src
-+   |- data.xml
-+   |- data.csv
-    |- my-font.woff
-    |- my-font.woff2
-    |- icon.png
-    |- style.css
-    |- index.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
++  │   ├── data.xml
++  │   ├── data.csv
+   │   ├── my-font.woff
+   │   ├── my-font.woff2
+   │   ├── icon.png
+   │   ├── style.css
+   │   └── index.js
+   └── /node_modules
 ```
 
 **src/data.xml**
@@ -715,13 +715,13 @@ Re-run the `npm run build` command and open `dist/index.html`. You should be abl
 The coolest part of everything mentioned above, is that loading assets this way allows you to group modules and assets in a more intuitive way. Instead of relying on a global `/assets` directory that contains everything, you can group assets with the code that uses them. For example, a structure like this can be useful:
 
 ```diff
-- |- /assets
-+ |– /components
-+ |  |– /my-component
-+ |  |  |– index.jsx
-+ |  |  |– index.css
-+ |  |  |– icon.svg
-+ |  |  |– img.png
+- ├── /assets
++ └── /components
++     └── /my-component
++         ├── index.jsx
++         ├── index.css
++         ├── icon.svg
++         └── img.png
 ```
 
 This setup makes your code a lot more portable as everything that is closely coupled now lives together. Let's say you want to use `/my-component` in another project, copy or move it into the `/components` directory over there. As long as you've installed any _external dependencies_ and your _configuration has the same loaders_ defined, you should be good to go.
@@ -736,24 +736,24 @@ For the next guides we won't be using all the different assets we've used in thi
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-  |- /dist
-    |- bundle.js
-    |- index.html
-  |- /src
--   |- data.csv
--   |- data.json5
--   |- data.toml
--   |- data.xml
--   |- data.yaml
--   |- icon.png
--   |- my-font.woff
--   |- my-font.woff2
--   |- style.css
-    |- index.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
+   ├── /dist
+   │   ├── bundle.js
+   │   └── index.html
+   ├── /src
+-  │   ├── data.csv
+-  │   ├── data.json5
+-  │   ├── data.toml
+-  │   ├── data.xml
+-  │   ├── data.yaml
+-  │   ├── icon.png
+-  │   ├── my-font.woff
+-  │   ├── my-font.woff2
+-  │   ├── style.css
+   │   └── index.js
+   └── /node_modules
 ```
 
 **webpack.config.js**

src/content/guides/author-libraries.mdx

@@ -25,11 +25,11 @@ The basic project structure would look like this:
 **project**
 
 ```diff
-+  |- webpack.config.js
-+  |- package.json
-+  |- /src
-+    |- index.js
-+    |- ref.json
++ ├── webpack.config.js
++ ├── package.json
++ └── /src
++     ├── index.js
++     └── ref.json
 ```
 
 Initialize the project with npm, then install `webpack`, `webpack-cli` and `lodash`:

src/content/guides/caching.mdx

@@ -35,13 +35,13 @@ Let's get our project set up using the example from [getting started](/guides/ge
 
 ```diff
 webpack-demo
-|- package.json
-|- package-lock.json
-|- webpack.config.js
-|- /dist
-|- /src
-  |- index.js
-|- /node_modules
+ ├── package.json
+ ├── package-lock.json
+ ├── webpack.config.js
+ ├── /dist
+ ├── /src
+ │   └── index.js
+ └── /node_modules
 ```
 
 **webpack.config.js**
@@ -205,14 +205,14 @@ Let's add another module, `print.js`, to our project:
 
 ```diff
 webpack-demo
-|- package.json
-|- package-lock.json
-|- webpack.config.js
-|- /dist
-|- /src
-  |- index.js
-+ |- print.js
-|- /node_modules
+ ├── package.json
+ ├── package-lock.json
+ ├── webpack.config.js
+ ├── /dist
+ ├── /src
+ │   ├── index.js
++│   └── print.js
+ └── /node_modules
 ```
 
 **print.js**

src/content/guides/code-splitting.mdx

@@ -36,6 +36,7 @@ contributors:
   - snitin315
   - artem-malko
   - Brennvo
+  - ThierryRakotomanana
 related:
   - title: <link rel="prefetch/preload" /> in webpack
     url: https://medium.com/webpack/link-rel-prefetch-preload-in-webpack-51a52358f84c
@@ -62,15 +63,15 @@ This is by far the easiest and most intuitive way to split code. However, it is
 **project**
 
 ```diff
-webpack-demo
-|- package.json
-|- package-lock.json
-|- webpack.config.js
-|- /dist
-|- /src
-  |- index.js
-+ |- another-module.js
-|- /node_modules
+ webpack-demo
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
++ │   └── another-module.js
+  └── /node_modules
 ```
 
 **another-module.js**
@@ -317,15 +318,15 @@ We'll also update our project to remove the now unused files:
 **project**
 
 ```diff
-webpack-demo
-|- package.json
-|- package-lock.json
-|- webpack.config.js
-|- /dist
-|- /src
-  |- index.js
-- |- another-module.js
-|- /node_modules
+ webpack-demo
+  ├── package.json
+  ├── package-lock.json
+  ├── webpack.config.js
+  ├── /dist
+  ├── /src
+  │   ├── index.js
+- │   └── another-module.js
+  └── /node_modules
 ```
 
 Now, instead of statically importing `lodash`, we'll use dynamic importing to separate a chunk:

src/content/guides/dependency-management.mdx

@@ -7,6 +7,7 @@ contributors:
   - sokra
   - byzyk
   - AnayaDesign
+  - ThierryRakotomanana
 ---
 
 ## Dynamic expressions in import() or require()
@@ -17,13 +18,11 @@ Example, given we have the following folder structure including `.ejs` files:
 
 ```bash
 example_directory
-│
-└───template
-│   │   table.ejs
-│   │   table-row.ejs
-│   │
-│   └───directory
-│       │   another.ejs
+└── template/
+    ├── table.ejs
+    ├── table-row.ejs
+    └── directory/
+        └── another.ejs
 ```
 
 When following `import()` or `require()` call is evaluated:

src/content/guides/development.mdx

@@ -342,15 +342,15 @@ The `publicPath` will be used within our server script as well in order to make
 
 ```diff
   webpack-demo
-  |- package.json
-  |- package-lock.json
-  |- webpack.config.js
-+ |- server.js
-  |- /dist
-  |- /src
-    |- index.js
-    |- print.js
-  |- /node_modules
+   ├── package.json
+   ├── package-lock.json
+   ├── webpack.config.js
++  ├── server.js
+   ├── /dist
+   ├── /src
+   │   ├── index.js
+   │   └── print.js
+   └── /node_modules
 ```
 
 **server.js**