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)