Fix image not showing on main documenation

documentation/versioned_docs/version-0.4.2/docs/03-first-interaction.mdx

@@ -1,4 +1,5 @@
 import Player from "@site/src/components/Player";
+import Image from "@site/src/components/Image";
 
 # First Interaction
 
@@ -27,7 +28,7 @@ To do this, run `/typewriter connect` in game. Then clicking the link that is gi
 
 ![connect-command](./assets/first-interaction/connect-command.gif)
 
-![connect-book](./assets/first-interaction/connect-book.png)
+<Image img={require("./assets/first-interaction/connect-book.png")} alt="connect-book" />
 
 :::caution
 If you're getting a message along the lines of "The server is not hosting the websocket. Try enabling it in the config", please refer to [Configuring the Web Panel](02-installation-guide.md#configuring-the-web-panel)
@@ -36,7 +37,7 @@ If you're getting a message along the lines of "The server is not hosting the we
 This will give you a link to the web panel. Once you have opened the web panel, it should look something like
 this:
 
-![panel-empty](./assets/first-interaction/panel-empty.png)
+<Image img={require("./assets/first-interaction/panel-empty.png")} alt="panel-empty" />
 
 ## Creating a page
 
@@ -55,7 +56,7 @@ For now, we will leave the page type on `Sequence`.
 
 Let's have a look at everything that is on the panel.
 
-![panel-layout](./assets/first-interaction/panel-layout.png)
+<Image img={require("./assets/first-interaction/panel-layout.png")} alt="panel-layout" />
 
 1. **The page lists**: This is where you can see all the pages that you have created. You can also create new
    pages here.
@@ -93,7 +94,7 @@ things that we can change. Let's change the name of the entry to `on_flower_clic
 that we want to interact with. To do this, click on the `Block` field. This will open a modal where you can
 select a block. Let's select the red tulip. After this the inspector should look like this:
 
-![inspector-1](./assets/first-interaction/inspector-1.png)
+<Image img={require("./assets/first-interaction/inspector-1.png")} alt="inspector-1" />
 
 ## Creating an option
 
@@ -105,7 +106,7 @@ tulip. To do this, click on the `+` button in the action bar, and add an `option
 Then change the name of the entry to `inspect_flower`. Then change the text of the option to `What do you want
 to do?`. After this the inspector should look like this:
 
-![inspector-2](./assets/first-interaction/inspector-2.png)
+<Image img={require("./assets/first-interaction/inspector-2.png")} alt="inspector-2" />
 
 ### Adding a speaker
 
@@ -131,7 +132,7 @@ next to the options drop down to add a new option. Then change the text of the o
 then add another option with the text `Touch the flower`. After this the inspector
 should look like this:
 
-![inspector-3](./assets/first-interaction/inspector-3.png)
+<Image img={require("./assets/first-interaction/inspector-3.png")} alt="inspector-3" />
 
 ## Connecting the entries
 
@@ -172,7 +173,7 @@ It is important that you use the specific trigger from the correct option. The f
 global triggers.
 :::
 
-![inspector-4](./assets/first-interaction/inspector-4.png)
+<Image img={require("./assets/first-interaction/inspector-4.png")} alt="inspector-4" />
 
 When you publish the changes in the game, it should look something like this:
 
@@ -200,7 +201,7 @@ To create a fact, head over to a static page such as `Flower Static`, click on t
 of the entry to `smelled_flower`. We can add a comment describing the fact and how it is used. After this the
 inspector should look like this:
 
-![inspector-5](./assets/first-interaction/inspector-5.png)
+<Image img={require("./assets/first-interaction/inspector-5.png")} alt="inspector-5" />
 
 #### Adding criteria to the dialogue
 
@@ -211,7 +212,7 @@ this fact when the dialogue gets triggered. To do this, click on the `+` button
 down. Then select the `smelled_flower` fact, make the modification `=` and the value `1`. After this the
 inspector should look like this:
 
-![inspector-6](./assets/first-interaction/inspector-6.png)
+<Image img={require("./assets/first-interaction/inspector-6.png")} alt="inspector-6" />
 
 Now we can create a new `spoken` dialogue entry that will be triggered when the player smells the flower for
 subsequent times. Rename it to `smell_flower_second_time`, add the text `You smell the flower again. It still smells <blue><bold>fragrant</bold></blue>.`, select our `flower` speaker we created earlier, and finally specify a
@@ -228,7 +229,7 @@ So `smell_flower_initialy` will be picked when the player has not smelled the fl
 
 The UI should look something like this:
 
-![panel-looked](./assets/first-interaction/panel-looked.png)
+<Image img={require("./assets/first-interaction/panel-looked.png")} alt="panel-looked" />
 
 When you publish the changes. In the game it should look something like this:
 
@@ -250,7 +251,7 @@ If you are not able to make it work, try reading parts again or go to our
 
 Finally, the UI should look something like this:
 
-![panel-final](./assets/first-interaction/panel-final.png)
+<Image img={require("./assets/first-interaction/panel-final.png")} alt="panel-final" />
 
 When you publish the changes. In the game it should look something like this:
 

documentation/versioned_docs/version-0.4.2/docs/04-first-cinematic.mdx

@@ -1,4 +1,5 @@
 import Player from "@site/src/components/Player";
+import Image from "@site/src/components/Image";
 
 # First Cinematic
 This guide will lead you through making your first cinematic.
@@ -41,7 +42,7 @@ Let's rename the entry to `camera_view`. Then, click `Add Segment` to add a new
 
 You'll now see a lot of new fields that aren't in the other pages. Let's go through those.
 
-![Cinematics Layout](./assets/first-cinematic/cinematic-layout.png)
+<Image img={require("./assets/first-cinematic/cinematic-layout.png")} alt="Cinematics Layout" />
 
 > #### Track Duration (1)
 The track duration field is where you decide the duration of the entire cinematic.
@@ -69,7 +70,7 @@ We now need to decide on two locations. To more easily continue the guide later
 around a red tulip. We then fill in `Path #1`'s location, and expand `Path #2` and add the location of that path.
 Remember to add two different locations. You can see example paths in the screenshot below.
 
-![Example Camera Paths](./assets/first-cinematic/camera-paths-example.png)
+<Image img={require("./assets/first-cinematic/camera-paths-example.png")} alt="Example Camera Paths" />
 
 You should now have a functioning cinematic!
 Let's `Publish` and check it out. Type `/tw cinematic start flower_cinematic` in chat, and

documentation/versioned_docs/version-0.4.2/docs/05-facts.mdx

@@ -1,5 +1,6 @@
 import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
+import Image from "@site/src/components/Image";
 
 # Facts
 
@@ -35,13 +36,13 @@ But some facts are only readable. For example, the [Inventory Item Count Fact](.
 ## Fields
 In some entries, there are fields that influence the way facts are handled.
 
-![Criterion Fields](./assets/facts/criteria_and_modifier.png)
+<Image img={require("./assets/facts/criteria_and_modifier.png")} alt="Criterion Fields" />
 
 ### Criteria
 
 Criteria is the condition for an entry, e.g., `if fact = 10 then...`. It controls whether an entry will occur.
 
-![Criterion Fields](./assets/facts/criteria.png)
+<Image img={require("./assets/facts/criteria.png")} alt="Criterion Fields" />
 
 When using Criteria, follow these steps:
 1. Select the fact to check.
@@ -52,7 +53,7 @@ When using Criteria, follow these steps:
 
 Modifiers, as the name suggests, modify a fact.
 
-![Modifier Fields](./assets/facts/modifier.png)
+<Image img={require("./assets/facts/modifier.png")} alt="Modifier Fields" />
 
 When using Modifiers, follow these steps:
 1. Select the fact to modify.
@@ -69,7 +70,7 @@ To get you started with facts, we will use a permanent fact to track progression
 
 1. Create a new page and select it as `static`. Give it the name `Playerprogress`
 2. Click on the + icon and select `Add Permanent Fact`. Rename it to `Playerprogress` and give it a nice comment.
-![Static Page Button](./assets/facts/static-page.png)
+<Image img={require("./assets/facts/static-page.png")} alt="Static Page Button" />
 3. On the sequence page, click on an action.
    - Set a **Criteria:** Check if `Playerprogress` == 0.
    - Set a **Modifier:** If criteria are met, update `Playerprogress` to 1.

documentation/versioned_docs/version-0.4.2/docs/09-troubleshooting/index.mdx

@@ -1,3 +1,5 @@
+import Image from "@site/src/components/Image";
+
 # Troubleshooting Guide
 
 Welcome to the Typewriter Plugin Troubleshooting Guide. This document aims to assist users in resolving common issues encountered while using the Typewriter plugin for Paper Spigot. Before reaching out for assistance on Discord or GitHub, we encourage you to review this comprehensive list of frequently encountered issues and their solutions. This proactive approach can help you solve your problem more quickly and efficiently.
@@ -14,7 +16,7 @@ For more detailed troubleshooting steps, refer to: [Panel not loading](troublesh
 
 ## No Entries Showing
 
-![No Entries](../assets/troubleshooting/no-entries.png)
+<Image img={require("../assets/troubleshooting/no-entries.png")} alt="No Entries" />
 
 This issue typically occurs when no adapters are installed. To resolve this, ensure that adapters are correctly installed by following the steps outlined in the **[Basic Adapter Installation Tutorial](./installation-guide#basic-adapter)**.