diff --git a/docs/src/doc.md b/docs/src/doc.md
index b48cb45..023e918 100644
--- 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
index af9aa28..6ba7782 100644
--- 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
new file mode 100644
index 0000000..4249dec
Binary files /dev/null and b/docs/src/img/doc-view.png differ
diff --git a/docs/src/img/export-dialog.png b/docs/src/img/export-dialog.png
new file mode 100644
index 0000000..2efe582
Binary files /dev/null and b/docs/src/img/export-dialog.png differ
diff --git a/docs/src/img/map-view.png b/docs/src/img/map-view.png
new file mode 100644
index 0000000..fa0476d
Binary files /dev/null and b/docs/src/img/map-view.png differ
diff --git a/docs/src/map.md b/docs/src/map.md
index 7113c43..1ca27df 100644
--- 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
index 43acd95..3d6112d 100644
--- 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
index 24b9819..1499cb5 100644
--- 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 `Settings` in the Toolbar.
2. Choose the `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
index 12f96ac..469269a 100644
--- 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 `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
new file mode 100644
index 0000000..548139b
Binary files /dev/null and b/docs/src/route/img/banner-example.png differ
diff --git a/docs/src/route/img/color-example.png b/docs/src/route/img/color-example.png
new file mode 100644
index 0000000..f04ae28
Binary files /dev/null and b/docs/src/route/img/color-example.png differ
diff --git a/docs/src/route/img/counter-example.png b/docs/src/route/img/counter-example.png
new file mode 100644
index 0000000..7e67c59
Binary files /dev/null and b/docs/src/route/img/counter-example.png differ
diff --git a/docs/src/route/img/github-desktop-push-origin.png b/docs/src/route/img/github-desktop-push-origin.png
new file mode 100644
index 0000000..da6260f
Binary files /dev/null and b/docs/src/route/img/github-desktop-push-origin.png differ
diff --git a/docs/src/route/img/hello-world.png b/docs/src/route/img/hello-world.png
new file mode 100644
index 0000000..1c36d6f
Binary files /dev/null and b/docs/src/route/img/hello-world.png differ
diff --git a/docs/src/route/img/icon-example.png b/docs/src/route/img/icon-example.png
new file mode 100644
index 0000000..895bb14
Binary files /dev/null and b/docs/src/route/img/icon-example.png differ
diff --git a/docs/src/route/img/notes-example.png b/docs/src/route/img/notes-example.png
new file mode 100644
index 0000000..96e4fed
Binary files /dev/null and b/docs/src/route/img/notes-example.png differ
diff --git a/docs/src/route/img/split-settings.png b/docs/src/route/img/split-settings.png
new file mode 100644
index 0000000..c1ef147
Binary files /dev/null and b/docs/src/route/img/split-settings.png differ
diff --git a/docs/src/route/img/tag-color-example.png b/docs/src/route/img/tag-color-example.png
new file mode 100644
index 0000000..e4ffc72
Binary files /dev/null and b/docs/src/route/img/tag-color-example.png differ
diff --git a/docs/src/route/img/text-example.png b/docs/src/route/img/text-example.png
new file mode 100644
index 0000000..a6a52b5
Binary files /dev/null and b/docs/src/route/img/text-example.png differ
diff --git a/docs/src/route/property-reference.md b/docs/src/route/property-reference.md
index f454dc3..5dbbac7 100644
--- 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
index 93b01a8..5842d19 100644
--- 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
index 59382f3..0e48490 100644
--- 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
index b08e29d..98679f8 100644
--- 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)