improved 'getting started' by separating extensions content and point… (

#185)
leaningtech · Dec 9, 2024 · b886fea · b886fea
1 parent c7d4fc4
commit b886fea
Show file tree

Hide file tree

Showing 6 changed files with 1,418 additions and 40 deletions.
diff --git a/packages/astro-theme/components/AppletRunnerButton.astro b/packages/astro-theme/components/AppletRunnerButton.astro
diff --git a/packages/astro-theme/components/JNLPRunnerButton.astro b/packages/astro-theme/components/JNLPRunnerButton.astro
diff --git a/packages/astro-theme/package.json b/packages/astro-theme/package.json
@@ -23,6 +23,8 @@
 		"./components/LatestBlogPostPill.astro": "./components/LatestBlogPostPill.astro",
 		"./components/ShowcaseList.astro": "./components/ShowcaseList.astro",
 		"./components/Callout.astro": "./components/Callout.astro",
+		"./components/JNLPRunnerButton.astro": "./components/JNLPRunnerButton.astro",
+		"./components/AppletRunnerButton.astro": "./components/AppletRunnerButton.astro",
 		"./components/nav/global/GlobalNavbar.astro": "./components/nav/global/GlobalNavbar.astro"
 	},
 	"scripts": {},

diff --git a/sites/cheerpj/src/content/docs/00-overview.mdx b/sites/cheerpj/src/content/docs/00-overview.mdx
@@ -7,6 +7,8 @@ description: Java Virtual Machine for modern web browsers
 import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
 import ShowcaseList from "@leaningtech/astro-theme/components/ShowcaseList.astro";
 import { DISCORD_URL } from "@/consts.ts";
+import JNLPRunnerButton from "@leaningtech/astro-theme/components/JNLPRunnerButton.astro";
+import AppletRunnerButton from "@leaningtech/astro-theme/components/AppletRunnerButton.astro";
 
 <div class="not-prose flex gap-2 mb-2">
 	<img
@@ -44,14 +46,18 @@ import { DISCORD_URL } from "@/consts.ts";
 <script src="https://cjrtnc.leaningtech.com/3.0/cj3loader.js"></script>
 ```
 
-<div class="text-stone-400">
-	Not a developer? Check out our [product website](https://cheerpj.com/) and our
-	ready-to-use [browser extension](/cheerpj-jnlp-runner) for running Java Web
-	Start applications.
-</div>
-
 <div class="mx-24">![](./explanation-diagram.png)</div>
 
+### **Not a developer?**
+
+Check out our browser extensions for running Java Applets and Web Start applications. Designed for individual users and organizations, they require no technical knowledge or setup.
+{/* Check out our browser extensions for **running Java Applets and Web Start applications directly in modern browsers**, without the need for a Java plugin or a Java installation. */}
+
+<div class="items-center justify-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse">
+	<AppletRunnerButton />
+	<JNLPRunnerButton />
+</div>
+
 ## Features
 
 With CheerpJ, you can:

diff --git a/sites/cheerpj/src/content/docs/10-getting-started/01-Java-applet.mdx b/sites/cheerpj/src/content/docs/10-getting-started/01-Java-applet.mdx
@@ -4,13 +4,22 @@ description: Run a java applet in modern browsers
 ---
 
 import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
+import AppletRunnerButton from "@leaningtech/astro-theme/components/AppletRunnerButton.astro";
 
-CheerpJ can run Java applets in the browser seamlessly. This page will help you getting started with CheerpJ for Java applets.
+CheerpJ can run Java applets in the browser seamlessly. This page will help you getting started with CheerpJ for Java applets using the CheerpJ runtime environment on your own webpage.
 
-**There are two different ways to run a Java Applet in the browser:**
+{/* <p class="m-0 text-md font-semibold text-gray-900 dark:text-white"> */}
 
-- [Running your own Java applet](/docs/getting-started/Java-applet#running-your-own-applet) using the CheerpJ runtime environment in your own webpage.
-- [Running a public applet](/docs/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.
+<div class="items-center justify-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse">
+	<div class="-mb-2 flex-grow text-left">
+		<div class="-my-1 font-sans text-lg font-semibold">Not a Developer?</div>
+		<p class="-my-3 text-base text-gray-600 dark:text-gray-400">
+			Check out our browser extension for running Java Applets while you browse
+			in modern browsers.
+		</p>
+	</div>
+	<AppletRunnerButton />
+</div>
 
 ## Running your own applet
 
@@ -75,35 +84,6 @@ 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://schubart.net/rc/) and click on the CheerpJ Applet Runner icon in the toolbar and enable CheerpJ.
-
-![](/docs/cheerpj3/assets/applet_runner_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.

diff --git a/...ontent/docs/10-getting-started/03-JNLP.md → ...ntent/docs/10-getting-started/03-JNLP.mdx b/...ontent/docs/10-getting-started/03-JNLP.md → ...ntent/docs/10-getting-started/03-JNLP.mdx
@@ -3,9 +3,20 @@ title: Run a JNLP
 description: Run a JWS/JNLP application in the browser
 ---
 
+import JNLPRunnerButton from "@leaningtech/astro-theme/components/JNLPRunnerButton.astro";
+
 This quickstart tutorial will take you step by step on how to run your JNLP app (also known as Java Web Start application) in the browser with CheerpJ.
 
-If you are interested in a ready-to-use tool for running Java Web Start applications, we recommend taking a look at our [CheerpJ JNLP Runner](/cheerpj-jnlp-runner) browser extension.
+<div class="items-center justify-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4 rtl:space-x-reverse">
+	<div class="flex-grow text-left ">
+		<div class="-my-1 font-sans text-lg font-semibold">Not a Developer?</div>
+		<p class="-my-3 text-base text-gray-600 dark:text-gray-400">
+			Check out our browser extension for running Java Web Start applications
+			while you browse in modern browsers.
+		</p>
+	</div>
+	<JNLPRunnerButton />
+</div>
 
 You will need: