Implement applet runner page (#90)

src/components/applet-page/Hero-Applet.astro

@@ -0,0 +1,71 @@
+---
+import LinkButton from "../LinkButton.astro";
+import { Image } from "astro:assets";
+import ScrollPrompt from "@/components/hero/ScrollPrompt.astro";
+import AppletGear from "./assets/ga.png";
+import screenshots from "@/components/applet-page/assets/afterapply.png";
+---
+
+<header
+	class="min-h-[calc(100vh-48px-64px)] flex flex-col items-center bg-gradient-to-b to-[#e6275544] from-transparent"
+>
+	<div class="grow"></div>
+
+	<div
+		class="w-full max-w-screen-xl px-4 sm:px-8 pt-8 lg:pt-16 xl:pt-32 space-y-4 md:grid grid-cols-3"
+	>
+		<div class="flex items-center col-span-2">
+			<div>
+				<p class="text-4xl mt-8 text-stone-500">CheerpJ Applet Runner</p>
+				<h1
+					class="text-white text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-semibold my-4"
+				>
+					Run
+					<span class="font-bold text-orange-500"> Java Applets</span>
+					<br />in the modern browser
+				</h1>
+				<p class="text-xl mt-12 text-stone-300 font-semibold leading-7">
+					Unleash the power of CheerpJ in an easy-to-use browser extension!
+				</p>
+				<p class="text-xl mt-8 text-stone-300 leading-7">
+					Activate and run Java applets effortlessly on any website without the need for traditional Java plugins, enhancing compatibility and user experience.
+				</p>
+				<div class="mt-8 flex flex-wrap gap-4">
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started/install-chrome"
+						label="Install for Chrome"
+						type="primary"
+						iconRight="ri:chrome-fill"
+					/>
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started/install-edge"
+						label="Install for Edge"
+						type="primary2"
+						iconRight="ri:edge-fill"
+					/>
+					<LinkButton
+						href="/cheerpj-applet-runner/getting-started"
+						label="Documentation"
+						type="secondary"
+						iconRight="iconoir:google-docs"
+					/>
+				</div>
+			</div>
+		</div>
+		<div class="flex justify-center w-5/5 h-5/5 scale-150">
+			<Image
+				class="mt-40"
+				src={AppletGear}
+				alt="Applet Applet logo enclosed by gears"
+
+			/>
+		</div>
+	</div>
+	<div class="flex justify-center items-center">
+		<Image class="scale-75" src={screenshots} alt="screenshots" />
+	</div>
+
+	<div class="grow"></div>
+	<ScrollPrompt />
+
+</header>

src/components/applet-page/utilities/ImageSlider.svelte

@@ -0,0 +1,93 @@
+<script type="ts">
+	import { fade } from "svelte/transition";
+
+	let currentIndex = 1;
+	let images = [
+		{
+			src: "/cheerpj3/assets/jnlp-screenshots/screenshot_1.png",
+			alt: "Run Java Web Start applications. No Java installations. Easy to use. Sandboxed.",
+		},
+		{
+			src: "/cheerpj3/assets/jnlp-screenshots/screenshot_2.png",
+			alt: "Extensive Java compatibility. Swing. Oracle Forms. Oracle EBS. File System. Clipboard. Networking. Printing.",
+		},
+	];
+
+	function back() {
+		if (currentIndex > 1) {
+			currentIndex--;
+		}
+	}
+
+	function next() {
+		if (currentIndex < images.length) {
+			currentIndex++;
+		} else if (currentIndex >= images.length) {
+			currentIndex = 1;
+		}
+	}
+</script>
+
+<article class="overflow-hidden shadow-2xl relative">
+	<div
+		class="rounded-full bg-gray-600 text-white absolute top-5 right-5 text-sm px-2 text-center z-10"
+	>
+		<span>{currentIndex}</span>/<span>{images.length}</span>
+	</div>
+
+	{#each images as image, index (image)}
+		{#if currentIndex === index + 1}
+			<figure
+				transition:fade={{ duration: 700 }}
+				class="h-full w-full object-cover"
+			>
+				<img
+					src={image.src}
+					alt={image.alt}
+					class="absolute inset-0 z-10 h-full w-full object-cover"
+				/>
+			</figure>
+		{/if}
+	{/each}
+
+	<button
+		on:click={back}
+		class="absolute left-14 top-1/2 translate-y-1/2 w-11 h-11 flex justify-center items-center rounded-full shadow-md z-10 bg-gray-100 hover:bg-gray-200"
+	>
+		<svg
+			class="w-8 h-8 font-bold transition duration-500 ease-in-out transform motion-reduce:transform-none text-gray-500 hover:text-gray-600 hover:-translate-x-0.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2.5"
+				d="M15 19l-7-7 7-7"
+			>
+			</path>
+		</svg>
+	</button>
+
+	<button
+		on:click={next}
+		class="absolute right-14 top-1/2 translate-y-1/2 w-11 h-11 flex justify-center items-center rounded-full shadow-md z-10 bg-gray-100 hover:bg-gray-200"
+	>
+		<svg
+			class="w-8 h-8 font-bold transition duration-500 ease-in-out transform motion-reduce:transform-none text-gray-500 hover:text-gray-600 hover:translate-x-0.5"
+			fill="none"
+			stroke="currentColor"
+			viewBox="0 0 24 24"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				stroke-width="2.5"
+				d="M9 5l7 7-7 7"
+			></path>
+		</svg>
+	</button>
+</article>

src/components/applet-page/utilities/README.md

@@ -0,0 +1 @@
+ImageSlider is unused, but we may choose to revisit it later

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

@@ -0,0 +1,40 @@
+---
+title: Chrome Installation
+description: Install CheerpJ Applet Runner for Chrome
+---
+
+import LinkButton from "@/components/LinkButton.astro";
+
+This tutorial will take you step by step on installing the CheerpJ Applet Runner extension for Chrome.
+
+<LinkButton
+	href="https://chromewebstore.google.com/detail/cheerpj-applet-runner/bbmolahhldcbngedljfadjlognfaaein"
+	label="Add to Chrome"
+	type="primary"
+	iconRight="ri:chrome-fill"
+/>
+
+## Step 1
+
+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>
+
+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>
+
+> [!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.
+
+## Step 2
+
+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>

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

@@ -0,0 +1,38 @@
+---
+title: Edge Installation
+description: Install CheerpJ Applet Runner for Edge
+---
+
+import LinkButton from "@/components/LinkButton.astro";
+
+This tutorial will take you step by step on how to install the CheerpJ Applet Runner extension for Edge.
+
+<LinkButton
+	href="https://microsoftedge.microsoft.com/addons/detail/cheerpj-applet-runner/ebfcpaoldmijengghefpohddmfpndmic"
+	label="Add to Edge"
+	type="primary"
+	iconRight="ri:edge-fill"
+/>
+
+## Step 1
+
+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>
+
+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>
+
+> [!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.
+
+## Step 2
+
+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>

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

@@ -0,0 +1,28 @@
+---
+title: Using the extension for the first time
+description: Tutorial for first-time users
+---
+
+This tutorial will guide you on the basic functionalities of the Applet Runner extension. We assume you have installed the extension on [Chrome](/cheerpj-applet-runner/getting-started/install-chrome) or [Edge](/cheerpj-applet-runner/getting-started/install-edge).
+
+## How to use
+
+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.
+
+### Before using the Applet Runner extension
+
+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>
+
+### 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>
+Now you should be able to see what it should be:
+<div class="mx-24">
+	![](/cheerpj3/assets/applet-screenshots/after_click.png)
+</div>

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

@@ -0,0 +1,115 @@
+---
+title: Run a Java applet
+description: Run a java applet in modern browsers
+---
+
+import LinkButton from "../../../../components/LinkButton.astro";
+
+CheerpJ can run Java applets in the browser seamlessly. This page will help you getting started with CheerpJ for Java applets.
+
+**There are two different ways to run a Java Applet in the browser:**
+
+- [Running your own Java applet](/cheerpj3/getting-started/Java-applet#running-your-own-applet) using the CheerpJ runtime environment in your own webpage.
+- [Running a public applet](/cheerpj3/getting-started/Java-applet#running-a-public-applet) using the [CheerpJ Applet Runner](https://chrome.google.com/webstore/detail/cheerpj-applet-runner/bbmolahhldcbngedljfadjlognfaaein) Chrome extension for applets integrated with the applet tag `<applet>` on public websites.
+
+## Running your own applet
+
+**You will need:**
+
+- Your applet file(s)
+- The HTML file where your applet is meant to be displayed.
+- A basic HTTP server to test locally
+
+### 1. Integrating CheerpJ in your HTML file
+
+This tutorial assumes you already have an HTML file with an `<applet>`, `<object>` or `<embed>` tag.
+
+In order to integrate CheerpJ, you just need to add:
+
+1.  A simple `<script>` within the `<head>` of your page with the CheerpJ runtime loader.
+
+```html
+<script src="https://cjrtnc.leaningtech.com/3.0/cj3loader.js"></script>
+```
+
+2.  A second script calling [`cheerpjInit()`] to initialize CheerpJ's runtime environment.
+
+```html
+<script>
+	cheerpjInit();
+</script>
+```
+
+For example:
+
+```html title="index.html" {6, 15-17}
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<title>CheerpJ applet test</title>
+		<script src="https://cjrtnc.leaningtech.com/3.0/cj3loader.js"></script>
+	</head>
+	<body>
+		<applet
+			archive="Example.jar"
+			code="ExamplePath.ExampleApplet"
+			height="900"
+			width="900"
+		></applet>
+		<script>
+			cheerpjInit();
+		</script>
+	</body>
+</html>
+```
+
+### 2. Host your page locally
+
+You can now serve this web page on a simple HTTP server, such as the http-server utility.
+
+```shell
+npm install http-server
+http-server -p 8080
+```
+
+> In case your users have a native Java plugin installed, you can replace the original HTML tag with a `cheerpj-` prefixed version. `<cheerpj-applet>`, `<cheerpj-object>`, and `<cheerpj-embed>` are all supported.
+
+## Running a public applet
+
+### 1. Install the CheerpJ applet runner
+
+CheerpJ Applet Runner is available for Chrome and Edge.
+
+<div class="flex flex-wrap gap-3">
+  <LinkButton
+    type="primary"
+    href="https://chrome.google.com/webstore/detail/cheerpj-applet-runner/bbmolahhldcbngedljfadjlognfaaein"
+    label="Add to Chrome"
+    iconLeft="openmoji:chrome"
+  />
+
+<LinkButton
+	type="primary"
+	href="https://microsoftedge.microsoft.com/addons/detail/cheerpj-applet-runner/ebfcpaoldmijengghefpohddmfpndmic"
+	label="Add to Microsoft Edge"
+	iconLeft="openmoji:edge"
+/>
+
+</div>
+
+### 2. Go to a website with an applet
+
+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)
+
+## The result
+
+You will see the CheerpJ display on your browser with some loading messages before showing your applet running. Depending on your application and the optimizations applied, this could take just a few seconds.
+
+## Further reading
+
+- [Runtime API reference](/cheerpj3/reference)
+
+[`cheerpjInit()`]: /cheerpj3/reference/cheerpjInit