Pistonite · Pistonight · Mar 15, 2024 · Mar 15, 2024
diff --git a/docs/src/doc.md b/docs/src/doc.md
@@ -6,7 +6,7 @@ The document is divided into 2 columns: the main column and the notes column.
 The main column aims to provide short instructions for steps to execute, and the notes
 provide longer explanations and things to pay attention to.
 
-![Image for the main and notes columns](https://cdn.discordapp.com/attachments/951389021114871819/1168355564594679889/image.png?ex=655176e9&is=653f01e9&hm=23fa392f0d26ba0ff1a8ae7290b361e75bc2bcb759f8ac95a951a5380c347f6a&)
+![Image for the main and notes columns](./img/doc-view.png)
 
 ## Counter, Line Indicator and Color
 On the left of the main column is the "head" of the line. The head can have 3 functionalities:

diff --git a/docs/src/export.md b/docs/src/export.md
@@ -18,7 +18,7 @@ Clicking on the export format and Celer will execute the exporter. The exported
 
 ## Extra Configuration
 Some exporters support extra configurations before running. You will see an extra dialog like below:
-![image of export dialog](https://cdn.discordapp.com/attachments/951389021114871819/1207547142978146315/image.png?ex=65e00aea&is=65cd95ea&hm=c4659d7b04eada6e30ba833cd1d64c884832dbf18677ae98718a26d10f90388a&)
+![image of export dialog](./img/export-dialog.png)
 
 The configuration is in [YAML](./route/yaml-basics.md) format. If the exporter provides documentation, clicking on the
 "learn more" link will take you there.
diff --git a/docs/src/img/doc-view.png b/docs/src/img/doc-view.png
diff --git a/docs/src/img/export-dialog.png b/docs/src/img/export-dialog.png
diff --git a/docs/src/img/map-view.png b/docs/src/img/map-view.png
diff --git a/docs/src/map.md b/docs/src/map.md
@@ -2,7 +2,10 @@
 Celer uses [Leaflet](https://leafletjs.com) for the map.
 The map displays icons and lines corresponding to the movements in the route.
 
-![image with icons and lines on the map](https://cdn.discordapp.com/attachments/951389021114871819/1168363382714408980/image.png?ex=65517e31&is=653f0931&hm=aa7ffea5fb9e06cb95cc03fbf3aca3a5c7351a6a65fb6708d522caef9d064ca3&)
+![image with icons and lines on the map](./img/map-view.png)
+:::info
+Image taken from [this route](scheme://celer.placeholder.domain/view/Pistonight/celer-doc-fuzzing/omegeb)
+:::
 
 ## Visuals
 The map has 3 types of visuals:

diff --git a/docs/src/route/adding-icons.md b/docs/src/route/adding-icons.md
@@ -20,7 +20,7 @@ route:
   - Line with icon:
       icon: my-icon
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1180397155500961812/image.png?ex=657d4584&is=656ad084&hm=cf45fa428bb55f0b545de91735c684d36adb9f3ce64443cc8a3ebddda3fe92a2&)
+![image of example](./img/icon-example.png)
 
 You can check out more options for icon configuration [here](./property-reference#icon), including
 changing its size in the map or hiding the icon in the document or the map.
diff --git a/docs/src/route/counter-and-splits.md b/docs/src/route/counter-and-splits.md
@@ -18,7 +18,7 @@ route:
   - Line with counter:
       counter: .my-counter(woooo)
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1180399432722821171/image.png?ex=657d47a3&is=656ad2a3&hm=9f05ea0f94c21925c9b5d461b5b890f983d3106d229bb46bdd9bef8ef5e322c7&)
+![image of example](./img/counter-example.png)
 :::tip
 Counters can also have real functionality - automatically increment and display the count of something.
 Check out the [Variable Plugin](../plugin/variables.md) for how to do that.
@@ -43,7 +43,7 @@ You can see what split types are available in the document in the settings:
 1. Click on <FluentIcon name="Settings20Regular" /> `Settings` in the Toolbar.
 2. Choose the <FluentIcon name="Document20Regular" /> `Document` category.
 3. Scroll to the `Splits` section.
-![image of split settings](https://cdn.discordapp.com/attachments/951389021114871819/1180401223254413352/image.png?ex=657d494e&is=656ad44e&hm=5d7fadf0a7d41a3141d310dc207f79e4ff41465064e5cfb7fd036e108561e0b9&)
+![image of split settings](./img/split-settings.png)
 
 Checking the `My Counters` checkbox will enable splitting on counters tagged with the `my-counter`
 tag.

diff --git a/docs/src/route/hello-world.md b/docs/src/route/hello-world.md
@@ -62,6 +62,6 @@ Open `main.yaml` and add the following content
 Wait for a few seconds for the editor to pick up your changes, or press <FluentIcon name="Box20Regular"/> `Compile` on the Toolbar to compile manually.
 
 Now you should see the route document displayed. 
-![example of the route made](https://cdn.discordapp.com/attachments/951389021114871819/1168371134463488021/image.png?ex=65518569&is=653f1069&hm=a7b00b766a766de8b53394996299092f94cde0c3e95ee12e91b45d9aa421afb8&)
+![example of the route made](./img/hello-world.png)
 Congratulations! You made your first route in Celer!
 
diff --git a/docs/src/route/img/banner-example.png b/docs/src/route/img/banner-example.png
diff --git a/docs/src/route/img/color-example.png b/docs/src/route/img/color-example.png
diff --git a/docs/src/route/img/counter-example.png b/docs/src/route/img/counter-example.png
diff --git a/docs/src/route/img/github-desktop-push-origin.png b/docs/src/route/img/github-desktop-push-origin.png
diff --git a/docs/src/route/img/hello-world.png b/docs/src/route/img/hello-world.png
diff --git a/docs/src/route/img/icon-example.png b/docs/src/route/img/icon-example.png
diff --git a/docs/src/route/img/notes-example.png b/docs/src/route/img/notes-example.png
diff --git a/docs/src/route/img/split-settings.png b/docs/src/route/img/split-settings.png
diff --git a/docs/src/route/img/tag-color-example.png b/docs/src/route/img/tag-color-example.png
diff --git a/docs/src/route/img/text-example.png b/docs/src/route/img/text-example.png
diff --git a/docs/src/route/property-reference.md b/docs/src/route/property-reference.md
@@ -140,7 +140,7 @@ Examples:
   - Change to orange:
       color: "#ff8800"
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1174490425344675871/image.png?ex=6567c872&is=65555372&hm=8d8f58a26b518217d28d2df46b1bee57af95a8bf19688afb7d0fd6b8315d4cb6&)
+![image of example](./img/color-example.png)
 
 ## Markers
 Use the `markers` property to add circular markers.

diff --git a/docs/src/route/publish.md b/docs/src/route/publish.md
@@ -75,7 +75,7 @@ Select the files you want to upload.
 3. Click "Commit to main"
 4. Now the changes panel should say "0 changed files"
 5. On the top, you should see something like this:
-   ![image of push origin](https://cdn.discordapp.com/attachments/951389021114871819/1209290318076444723/image.png?ex=65e6625f&is=65d3ed5f&hm=dab6cefc2abbd3f7796c8298cdb50bd6299dbf4c39ef30af5f8452e86cc43bba&)
+   ![image of push origin](./img/github-desktop-push-origin.png)
 6. Click that, and your commits are now uploaded. You can go to the repository on GitHub to confirm.
 
 ## Viewing the route on Celer

diff --git a/docs/src/route/tagging-text.md b/docs/src/route/tagging-text.md
@@ -29,7 +29,7 @@ route:
       comment: .red(hello) world
       notes: this .red(color) is cool
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1180394934998683679/image.png?ex=657d4373&is=656ace73&hm=6ff820e7d348437325904f8133b6e1dba8f1d965731e99e63d63e4faac2eecab&)
+![image of example](./img/tag-color-example.png)
 
 ## White Spaces
 All white spaces in tags are significant.

diff --git a/docs/src/route/text-and-notes.md b/docs/src/route/text-and-notes.md
@@ -32,7 +32,7 @@ in a smaller font.
       text: Do the thing
       comment: be fast
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1174487919004766228/image.png?ex=6567c61c&is=6555511c&hm=1bbc08280e7609f8ca2d0d942bd60d67256b0530954dc15c00e3a13c6fa12ac1&)
+![image of text example](./img/text-example.png)
 
 ## Adding Notes
 Primary and secondary text are meant for concise description of steps to execute.
@@ -48,7 +48,7 @@ to add such explanations without cluttering up the main column.
       - if you can't do it you can do the backup
       - if you fail the backup you can do the other backup
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1174488604505034822/image.png?ex=6567c6c0&is=655551c0&hm=d584cd5bb6a5fafbf1546361b4cd05169ecffd6e53e59584dfa88f4ca8ab569b&)
+![image of notes example](./img/notes-example.png)
 :::tip
 The note blocks automatically adjust their positions to avoid overlapping. See [here](/doc#note-positions) for more
 details and how you can change the behavior
@@ -67,17 +67,17 @@ the main column to cover the note areas
 If the banner is too long, use the `text` property, so you can break it
 into multiple lines without messing up the syntax:
 ```yaml
-  - banner: # "banner" here is a placeholder text
-      text: Once there was a young artist who struggled
-            to find inspiration in her small town. One 
-            day, she discovered a hidden garden filled 
-            with vibrant flowers and singing birds.
-            Inspired, she began painting the garden, 
-            capturing its beauty and essence. As she shared 
-            her art, it brought joy and color to the lives
-            of people in her town. This recognition
-            encouraged her to pursue her dreams, reminding
-            her that inspiration can be found in the simplest of places.
-      banner: true
+- banner: # "banner" here is a placeholder text
+    text: Once there was a young artist who struggled
+          to find inspiration in her small town. One 
+          day, she discovered a hidden garden filled 
+          with vibrant flowers and singing birds.
+          Inspired, she began painting the garden, 
+          capturing its beauty and essence. As she shared 
+          her art, it brought joy and color to the lives
+          of people in her town. This recognition
+          encouraged her to pursue her dreams, reminding
+          her that inspiration can be found in the simplest of places.
+    banner: true
 ```
-![image of example](https://cdn.discordapp.com/attachments/951389021114871819/1174493787196756038/image.png?ex=6567cb93&is=65555693&hm=f1ca333826bacffe7a823b77086618208e451ca19242bca4ccf025c4abdbe47e&)
+![image of banner example](./img/banner-example.png)