fixing images on docs (#109)

packages/cheerpj-applet-page/Hero.astro

@@ -42,7 +42,7 @@ import screenshots from "./assets/afterapply.png";
 						iconRight="ri:edge-fill"
 					/>
 					<LinkButton
-						href="/cheerpj-applet-runner/getting-started"
+						href="/docs/cheerpj-applet-runner/getting-started"
 						label="Documentation"
 						type="secondary"
 						iconRight="iconoir:google-docs"

packages/cheerpj-jnlp-page/Hero.astro

@@ -41,7 +41,7 @@ import screenshots from "./assets/screenshots.png";
 						iconRight="ri:edge-fill"
 					/>
 					<LinkButton
-						href="/cheerpj-jnlp-runner/getting-started"
+						href="/docs/cheerpj-jnlp-runner/getting-started"
 						label="Documentation"
 						type="secondary"
 						iconRight="iconoir:google-docs"

sites/cheerp/src/content/docs/12-reference/75-memory-profiler.md

@@ -46,7 +46,7 @@ The memprof library includes a visualiser to get a real-time view of memory usag
 ```
 
 You should see at the bottom of the browser window a graph similar to this one:
-![Memory consumption graph](/docs/assets/MemProfUI_Graph.gif)
+![Memory consumption graph](/cheerp/assets/MemProfUI_Graph.gif)
 
 On the horizontal axis you can see the time from the start of the program, and on the vertical the memory consumption at any given moment.
 
@@ -72,7 +72,7 @@ Returns information for all the live allocations:
 - size of the memory block
 - stack trace that led to the creation of that block of memory, parsed and formatted
 
-![Using the browser console gives a better formatted stack trace](/docs/assets/MemProfUI_Console4.gif)
+![Using the browser console gives a better formatted stack trace](/cheerp/assets/MemProfUI_Console4.gif)
 
 ## Introspection API
 

sites/cheerp/src/content/docs/13-tutorials/03-pong.md

@@ -53,7 +53,7 @@ You now need to start a local HTTP server in the directory containing pong.html,
 
 Visit your page, for example “http://127.0.0.1:8081” with any browser, and you should see something like this:
 
-![](/docs/tutorials/tutorial_1/pong1/pong1.png)
+![](/cheerp/tutorials/tutorial_1/pong1/pong1.png)
 
 Great! We can now move on to build an Hello World that writes on the Canvas.
 
@@ -108,7 +108,7 @@ We have created a new `Graphics` class and tagged it using the `[[cheerp::generi
 
 Compile this new code like we did before and refresh the browser tab, you should now see something like this:
 
-![](/docs/tutorials/tutorial_1/pong2/pong2.png)
+![](/cheerp/tutorials/tutorial_1/pong2/pong2.png)
 
 Great stuff.
 
@@ -205,7 +205,7 @@ We then need to call the handler one first time in `Graphics::initializeCanvas`:
 
 Let's recompile, and the result should look like this:
 
-![](/docs/tutorials/tutorial_1/pong3/pong3.png)
+![](/cheerp/tutorials/tutorial_1/pong3/pong3.png)
 
 Looking good.
 
@@ -249,7 +249,7 @@ Let's also register an `EventListener` in `Graphics::initializeCanvas`.
 
 You should now be able to move the paddle around like this:
 
-![](/docs/tutorials/tutorial_1/pong4/pong4.gif)
+![](/cheerp/tutorials/tutorial_1/pong4/pong4.gif)
 
 # Final steps
 
@@ -344,4 +344,4 @@ void mainLoop()
 
 And that should be it! The game should look like this:
 
-![](/docs/tutorials/tutorial_1/pong5/pong5.gif)
+![](/cheerp/tutorials/tutorial_1/pong5/pong5.gif)

sites/cheerpj/src/content/docs/10-getting-started/01-Java-applet.mdx

@@ -102,7 +102,7 @@ CheerpJ Applet Runner is available for Chrome and Edge.
 
 Visit a page with a Java applet, [such as this one](http://www.neilwallis.com/projects/java/water/index.php) and click on the CheerpJ Applet Runner icon in the toolbar and enable CheerpJ.
 
-![](/cheerpj2/assets/cheerpj_applet_demo.gif)
+![](/docs/cheerpj3/assets/cheerpj_applet_demo.gif)
 
 ## The result
 

sites/cheerpj/src/content/docs/11-guides/File-System-support.md

@@ -11,7 +11,7 @@ CheerpJ filesystems are implemented as UNIX-style virtual filesystems with multi
 | `/files/` | A persistent read-write file system                                | Java only | Yes  |
 | `/str/`   | A filesystem for passing JavaScript strings or binary data to Java | JS only   | Yes  |
 
-![](/cheerpj2/assets/filesystem.png)
+![](/docs/cheerpj3/assets/filesystem.png)
 
 > [!info] Local files
 > CheerpJ provides access to a virtualized filesystem, which does not correspond to the local user's computer. Accessing local files directly is forbidden for browser security reasons.

sites/cheerpj/src/content/docs/11-guides/Networking.md

@@ -20,7 +20,7 @@ CheerpJ supports wider networking scenarios via Tailscale, which is a VPN techno
 
 [Tailscale](https://tailscale.com/) is based on the [WireGuard](https://www.wireguard.com/) protocol. It includes a control plane that manages the WireGuard keys of all the machines in the network and takes care of authenticating users. Using this service provides more control over the network, user connections, authentication, security etc.
 
-![CheerpJ 3.0 general networking](/docs/assets/general_networking.png)
+![CheerpJ 3.0 general networking](/docs/cheerpj3/assets/general_networking.png)
 
 ### Why Tailscale?
 

sites/cheerpj/src/content/docs/13-tutorials/04-java-browser.mdx

@@ -21,7 +21,9 @@ Let's start by reviewing the Java application we will be testing. This is a simp
 
 You can type the full URL of a website in the input field and press enter to load the page. Note that the Swing web browser is fairly old, so sites may not display the same as in modern browsers.
 
-<img class="w-1/2" src="/cheerpj2/assets/tinybrowserloaded.png"></img>
+<div class="w-1/2">
+	![Tiny Browser Loaded](/docs/cheerpj3/assets/tinybrowserloaded.png)
+</div>
 
 In this scenario, the page is loading because the machine you are running this application on has an active connection to the internet and Java is installed.
 
@@ -79,7 +81,7 @@ npx http-server -p 8080
 
 You will be able to see the page in a modern browser running with CheerpJ. Let's type `https://github.com` in the Java browser client and press enter. Nothing will load and you will find this error in the console log:
 
-<img src="/cheerpj2/assets/errorconsolelog.png"></img>
+![Error in the Console Log](/docs/cheerpj3/assets/errorconsolelog.png)
 
 Now try loading a page that is hosted on the local server. Let's add the following file to the project directory:
 
@@ -98,7 +100,7 @@ Now try loading a page that is hosted on the local server. Let's add the followi
 
 In the Java browser application type the following address: `http://127.0.0.1:8080/hello.html` (or any address that corresponds to your local host).
 
-<img src="/cheerpj2/assets/hello_sameorigin.png" width="600"></img>
+![Hello From Same Origin](/docs/cheerpj3/assets/hello_sameorigin.png)
 
 **CheerpJ can only do same-origin requests when is not connected to a Tailscale Network.** The convenience of this scenario is that, even when the app is running in the browser, it is completely isolated from the wider internet.
 

sites/cheerpj/src/content/docs/13-tutorials/04-serverclient.mdx

@@ -7,7 +7,7 @@ This tutorial will take you step by step over a networking scenario of communica
 
 If you are not familiar with how CheerpJ and Tailscale work together, we invite you to take a look at our [Networking guide]. You can download the full template of this tutorial [here](/docs/tutorials/ServerClientTutorial.zip).
 
-<img src="/docs/assets/Tailscale_P2P.png"></img>
+<img src="/docs/cheerpj3/assets/Tailscale_P2P.png"></img>
 
 ## Pre-requisites:
 
@@ -22,7 +22,7 @@ The applications we will be running in this tutorial consist of a Java Server ap
 
 The idea is to run both applications in the browser with the help of CheerpJ and no Java installations on your machine!
 
-<img src="/cheerpj2/assets/client-server.png"></img>
+![Client Server](/docs/cheerpj3/assets/client-server.png)
 
 ## 2. Tailscale
 
@@ -170,8 +170,13 @@ http-server -p 8081
 Now that you have both Client and Server applications running with CheerpJ, you should be able to input an username and connect in both apps to establish the connection. Test by sending messages from one application to the other one.
 
 <div class="flex flex-row">
-	<img class="w-1/2" src="/cheerpj2/assets/server-browser.png"></img>
-	<img class="w-1/2" src="/cheerpj2/assets/client-browser.png"></img>
+	<div class="w-1/2 mr-1 md:mr-2">
+		![Server Browser](/docs/cheerpj3/assets/server-browser.png)
+	</div>
+
+  <div class="w-1/2 ml-1 md:ml-2">
+  	![Client Browser](/docs/cheerpj3/assets/client-browser.png)
+  </div>
 </div>
 
 You can download the full template of this tutorial [here](/docs/tutorials/ServerClientTutorial.zip) or visit the [GitHub repository](https://github.com/leaningtech/cheerpj-meta/tree/main/examples/Server-Client).

sites/cheerpj/src/content/docs/14-explanation/architecture.mdx

@@ -24,7 +24,7 @@ CheerpJ is made of the following building blocks:
 - A virtualized file system
 - A module for networking support
 
-![CheerpJ 3.0 architecture diagram](/docs/assets/cheerpj-3-arch.png)
+![CheerpJ 3.0 architecture diagram](/docs/cheerpj3/assets/cheerpj-3-arch.png)
 
 ### The CheerpJ Java Runtime Environment
 
@@ -37,7 +37,7 @@ The most important component of the CheerpJ Java runtime environment is its JVM
 
 The interpreter does not only deal with initialization and rarely-used code, but also gathers necessary information for JIT-ting. The generated code is very efficient, and the internal optimizer can, among other things, inline and devirtualize calls, which is extremely important for a language such as Java.
 
-![CheerpJ 3.0 JRE diagram](/docs/assets/JRE.png)
+![CheerpJ 3.0 JRE diagram](/docs/cheerpj3/assets/JRE.png)
 
 Alongside being able to run Java applications in the browser, CheerpJ runtime also provides advanced, bidirectional Java-JavaScript interoperability. Meaning you can access DOM from Java by [implementing `native` methods directly in JavaScript](/docs/guides/Implementing-Java-native-methods-in-JavaScript). You can also interact with Java methods, objects and arrays directly from JavaScript by using the new [`cheerpjRunLibrary` API](/docs/reference/cheerpjRunLibrary).
 
@@ -51,7 +51,7 @@ Swing applications, will render exactly as they do in native. Swing Look&Feel is
 
 CheepJ provides multiple filesystem backends to accommodate different application needs, including access to server-hosted files and persistent local storage.
 
-![](/cheerpj2/assets/filesystem.png)
+![](/docs/cheerpj3/assets/filesystem.png)
 
 <LinkButton
 	type="secondary"
@@ -63,7 +63,7 @@ CheepJ provides multiple filesystem backends to accommodate different applicat
 ### Networking support
 
 For same-origin HTTP/HTTPS requests, CheerpJ will be able to transparently use `fetch`. More generalized networking is supported via Tailscale, a VPN technology using WebSockets as a transport layer. It can support many different networking scenarios, including access to private network services, peer-to-peer connections between users and access to the wider internet via a user/application provided *exit node*.
-![CheerpJ 3.0 general networking](/docs/assets/general_networking.png)
+![CheerpJ 3.0 general networking](/docs/cheerpj3/assets/general_networking.png)
 
 <LinkButton
 	type="secondary"

sites/cheerpx/src/content/docs/11-guides/02-custom-devices.md

@@ -38,7 +38,7 @@ Click **Run workflow** and fill out the form:
 
 Then click the **Run workflow** button.
 
-![Screenshot of the GitHub user interface](/docs/guides/create-images/run-workflow.png)
+![Screenshot of the GitHub user interface](/cheerpx/guides/create-images/run-workflow.png)
 
 The workflow may take up to 10 minutes to complete depending on the complexity of your Dockerfile.
 

sites/labs/src/content/docs/cheerpj-applet-runner/03-getting-started/install-chrome.mdx

@@ -18,15 +18,11 @@ This tutorial will take you step by step on installing the CheerpJ Applet Runner
 
 Go to the [Chrome Web Store Applet Runner page](https://chromewebstore.google.com/detail/cheerpj-applet-runner/bbmolahhldcbngedljfadjlognfaaein) and click _**Add to Chrome**_.
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/store_chrome.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/store_chrome.png)</div>
 
 It will prompt a dialogue asking permission to manage your browser's downloads, then click again on _**Add extenstion**._
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/chrome_dialogue.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/chrome_dialogue.png)</div>
 
 > [!info]About downloads permission
 > CheerpJ Applet Runner needs to see your downloads. This is because the classic way to run Applet applications is by triggering the download of its corresponding Applet file. When CheerpJ Applet Runner detects the download of a Applet file it will start working with your Java application.
@@ -35,6 +31,4 @@ It will prompt a dialogue asking permission to manage your browser's downloads,
 
 Once the extension is installed you will see the small logo to the right of the browsing bar. If the logo is not there, click on the puzzle icon to see all your installed extensions, it should appear there. Here you can pin the extension to always make it appear visible in your browser menu.
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/chrome_toolbar.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/chrome_toolbar.png)</div>

sites/labs/src/content/docs/cheerpj-applet-runner/03-getting-started/install-edge.mdx

@@ -18,13 +18,11 @@ This tutorial will take you step by step on how to install the CheerpJ Applet Ru
 
 Please start by visiting the [Edge's add-on Applet Runner page](https://microsoftedge.microsoft.com/addons/detail/cheerpj-applet-runner/ebfcpaoldmijengghefpohddmfpndmic). Once there, please click on the button _**Get**_ to start the installation.
 
-<div class="mx-24">![](/cheerpj3/assets/applet-screenshots/store_edge.png)</div>
+<div class="mx-24">![](/assets/applet-screenshots/store_edge.png)</div>
 
 It will prompt a dialogue showing that the extension will be able to manage your downloads, then click on _**Add extension**._
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/edge_dialogue.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/edge_dialogue.png)</div>
 
 > [!info]About downloads permission
 > CheerpJ Applet Runner needs to see your downloads. This is because the classic way to run Applet applications is by triggering the download of its corresponding Applet file. When CheerpJ Applet Runner detects the download of a Applet file it will start working with your Java application.
@@ -33,6 +31,4 @@ It will prompt a dialogue showing that the extension will be able to manage your
 
 Once the extension is installed you will see the small logo to the right of the browsing bar. If the logo is not there, click on the puzzle icon to see all your installed extensions, it should appear there. Here you can click on the extension's menu (three dots) and select _*Show in Toolbar*_ .
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/edge_toolbar.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/edge_toolbar.png)</div>

sites/labs/src/content/docs/cheerpj-applet-runner/03-getting-started/using-first-time.mdx

@@ -13,16 +13,12 @@ Visit a page with a Java applet, [such as this one](http://www.neilwallis.com/pr
 
 In the 'Demonstrations' section, you will only see a paragraph of text, this is because your browser cannot handle applet tags:
 
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/before_click.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/before_click.png)</div>
 
 ### How to run the Applet Runner extension
 
 Just click on the extension and the page will be reloaded:
 
-<div class="mx-60">![](/cheerpj3/assets/applet-screenshots/click.png)</div>
+<div class="mx-60">![](/assets/applet-screenshots/click.png)</div>
 Now you should be able to see what it should be:
-<div class="mx-24">
-	![](/cheerpj3/assets/applet-screenshots/after_click.png)
-</div>
+<div class="mx-24">![](/assets/applet-screenshots/after_click.png)</div>

sites/labs/src/content/docs/cheerpj-applet-runner/04-guides/private-hosting-chrome.mdx

@@ -102,7 +102,7 @@ CheerpJ Applet Runner is available for Chrome and Edge.
 
 Visit a page with a Java applet, [such as this one](http://www.neilwallis.com/projects/java/water/index.php) and click on the CheerpJ Applet Runner icon in the toolbar and enable CheerpJ.
 
-![](/cheerpj2/assets/cheerpj_applet_demo.gif)
+![](/assets/cheerpj2/cheerpj_applet_demo.gif)
 
 ## The result
 

sites/labs/src/content/docs/cheerpj-applet-runner/index.mdx

@@ -99,7 +99,7 @@ import {
 				iconRight="ic:baseline-discord"
 			/>
 			<LinkButton
-				href="/cheerpj-applet-runner/getting-started"
+				href="/docs/cheerpj-applet-runner/getting-started"
 				label="Documentation"
 				type="secondary"
 				iconRight="iconoir:google-docs"

sites/labs/src/content/docs/cheerpj-jnlp-runner/03-getting-started/install-chrome.mdx

@@ -18,12 +18,12 @@ This tutorial will take you step by step on installing the CheerpJ JNLP Runner e
 
 Go to the [Chrome Web Store JNLP Runner page](https://chromewebstore.google.com/detail/cheerpj-jnlp-runner/achnhggjjhnadfapkmgallnbmemdojdi) and click _**Add to Chrome**_.
 
-<div class="mx-24">![](/cheerpj3/assets/jnlp-screenshots/store_chrome.png)</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/store_chrome.png)</div>
 
 It will prompt a dialogue asking permission to manage your browser's downloads, then click again on _**add to Chrome**._
 
 <div class="mx-24">
-	![](/cheerpj3/assets/jnlp-screenshots/chrome_dialogue.png)
+	![Chrome Dialogue1](/assets/jnlp-screenshots/chrome_dialogue.png)
 </div>
 
 > [!info]About downloads permission
@@ -33,9 +33,7 @@ It will prompt a dialogue asking permission to manage your browser's downloads,
 
 Once the extension is installed you will see the small logo to the right of the browsing bar. If the logo is not there, click on the puzzle icon to see all your installed extensions, it should appear there. Here you can pin the extension to always make it appear visible in your browser menu.
 
-<div class="mx-24">
-	![](/cheerpj3/assets/jnlp-screenshots/chrome_toolbar.png)
-</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/chrome_toolbar.png)</div>
 
 ## Step 3
 

sites/labs/src/content/docs/cheerpj-jnlp-runner/03-getting-started/install-edge.mdx

@@ -18,13 +18,11 @@ This tutorial will take you step by step on how to install the CheerpJ JNLP Runn
 
 Please start by visiting the [Edge's add-on JNLP Runner page](https://microsoftedge.microsoft.com/addons/detail/cheerpj-jnlp-runner/dpleickbpchmkpkmicanfolmianepfhe). Once there, please click on the button _**Get**_ to start the installation.
 
-<div class="mx-24">![](/cheerpj3/assets/jnlp-screenshots/store_edge.png)</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/store_edge.png)</div>
 
 It will prompt a dialogue showing that the extension will be able to manage your downloads, then click on _**add extension**._
 
-<div class="mx-24">
-	![](/cheerpj3/assets/jnlp-screenshots/edge_dialogue.png)
-</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/edge_dialogue.png)</div>
 
 > [!info]About downloads permission
 > CheerpJ JNLP Runner needs to see your downloads. This is because the classic way to run JNLP applications is by triggering the download of its corresponding JNLP file. When CheerpJ JNLP Runner detects the download of a JNLP file it will start working with your Java application.
@@ -33,7 +31,7 @@ It will prompt a dialogue showing that the extension will be able to manage your
 
 Once the extension is installed you will see the small logo to the right of the browsing bar. If the logo is not there, click on the puzzle icon to see all your installed extensions, it should appear there. Here you can click on the extension's menu (three dots) and select _*Show in Toolbar*_ .
 
-<div class="mx-24">![](/cheerpj3/assets/jnlp-screenshots/edge_toolbar.png)</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/edge_toolbar.png)</div>
 
 ## Step 3
 

sites/labs/src/content/docs/cheerpj-jnlp-runner/03-getting-started/licensing.mdx

@@ -9,9 +9,7 @@ This tutorial will guide you step by step on how to activate your JNLP Runner ex
 
 The first time you launch a JNLP file to run a Java application, the JNLP Runner will automatically detect it and it will start running. The first screen you will see is the license agreement. Please read this carefully and if you agree with the terms and conditions, click on _**Accept license**_.
 
-<div class="mx-24">
-	![](/cheerpj3/assets/jnlp-screenshots/license_agreement.png)
-</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/license_agreement.png)</div>
 
 ## Step 2
 
@@ -21,15 +19,13 @@ After accepting the license, you will be asked for a _**license key**_ or _**lic
 
 You can obtain your **license key** via email after registering your free trial. Please click on the link _**start your free trial**_ where you will be redirected to the [_**Leaning Technologies shop**_](https://leaningtech.onfastspring.com/cheerpj-jnlp-runner) where you can request your license key.
 
-<div class="mx-24">![](/cheerpj3/assets/jnlp-screenshots/license_key.png)</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/license_key.png)</div>
 
 ### Offline activation via License Token
 
 If you already have a **license token**, please click on _**Offline activation via License Token**_ and enter your valid token.
 
-<div class="mx-24">
-	![](/cheerpj3/assets/jnlp-screenshots/license_token.png)
-</div>
+<div class="mx-24">![](/assets/jnlp-screenshots/license_token.png)</div>
 
 ## Step 3