Format Cj docs

astro.config.mjs

@@ -6,12 +6,14 @@ import robotsTxt from "astro-robots-txt";
 import pagefind from "astro-pagefind";
 import svelte from "@astrojs/svelte";
 import prefetch from "@astrojs/prefetch";
+import astroExpressiveCode from "astro-expressive-code";
 const prod = process.env.NODE_ENV === "production";
 
 // https://astro.build/config
 export default defineConfig({
 	site: "https://labs.leaningtech.com",
 	integrations: [
+		astroExpressiveCode(),
 		mdx(),
 		sitemap(),
 		tailwind(),

package.json

@@ -20,6 +20,7 @@
 		"@astrojs/tailwind": "^4.0.0",
 		"@tailwindcss/typography": "^0.5.9",
 		"astro": "^2.8.5",
+		"astro-expressive-code": "^0.22.2",
 		"astro-icon": "^0.8.1",
 		"astro-pagefind": "^1.2.3",
 		"astro-robots-txt": "^0.5.0",

src/content/docs/cheerpj2/00-faq.md

@@ -77,7 +77,7 @@ Many first time users get stuck at this point. The most common issues are:
 
 ## My application compiled with CheerpJ does not work and I see a cross origin error to a Google service in the console. What's going on?
 
-The cross origin message you see happens as part of our automatic bug reporting system and it is not the real error. Something else is making your application crash, please report a bug here: https://github.com/leaningtech/cheerpj-meta/issues
+The cross origin message you see happens as part of our automatic bug reporting system and it is not the real error. Something else is making your application crash, please report a bug [here](https://github.com/leaningtech/cheerpj-meta/issues).
 
 ## Can I play Old School RuneScape using CheerpJ or the CheerpJ Applet Runner extension?
 

src/content/docs/cheerpj2/01-demos.md

@@ -6,39 +6,37 @@ To showcase the capabilities of the CheerpJ compiler we have published several d
 
 ## OpenAstexViewer
 
-<https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html>
-
 <img src="/cheerpj2/assets/demo_openastex.png" width="400">
 
 This demo highlights how complex Java applets with 3D rendering can efficiently and safely run in any browser using CheerpJ.
 
-This specific applet is a visualization tool for protein structures, the source code is available here: <https://github.com/openastexviewer/openastexviewer>
+This specific applet is a visualization tool for protein structures.
 
-## Swing examples:
+- Go to the [demo](https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html)
+- Find the source code [here](https://github.com/openastexviewer/openastexviewer)
 
-<https://cheerpjdemos.leaningtech.com/SwingDemo.html>
+## Swing examples:
 
 <img src="/cheerpj2/assets/demo_swing.png" width="400">
 
 A few selected Java Swing examples to demonstrate how complex Swing GUI apps can be automatically converted to HTML5/JavaScript.
 
-Source: <https://docs.oracle.com/javase/tutorial/uiswing/examples/components/index.html>
+- Go to the [demo](https://cheerpjdemos.leaningtech.com/SwingDemo.html)
+- [Source](https://docs.oracle.com/javase/tutorial/uiswing/examples/components/index.html)
 
 ## JavaFiddle
 
-<https://javafiddle.leaningtech.com/>
-
 <img src="/cheerpj2/assets/demo_fiddle.png" width="400">
 
 A playground to compile and run Java programs directly in the browser. Both console and GUI applications are supported. The standard `javac` compiler is used, since `javac` is also written in Java the whole compiler runs in the browser, together with the compiled application.
-Source: [https://javafiddle.leaningtech.com/index.html] (Inspect the page using the devtools)
 
-## iText Demo
+- Go to the [demo](ttps://javafiddle.leaningtech.com/) (please inspect the page using the devtools).
 
-<https://cheerpjdemos.leaningtech.com/iTextDemo.html>
+## iText Demo
 
 <img src="/cheerpj2/assets/demo_itext.png" width="400">
 
 Edit PDFs fully client side using the industry standard [iText](https://itextpdf.com/en) library converted to JavaScript. This demo demonstrates how CheerpJ APIs can be used to instance Java objects and call methods directly from JavaScript.
 
-Source: <https://cheerpjdemos.leaningtech.com/itextCheerpJDemo.js>
+- Go to the [demo](https://cheerpjdemos.leaningtech.com/iTextDemo.html)
+- [Source](https://cheerpjdemos.leaningtech.com/itextCheerpJDemo.js)

src/content/docs/cheerpj2/03-getting-started/00-Tutorial.md

@@ -4,54 +4,56 @@ title: Installation
 
 CheerpJ is very easy to use, this tutorial will guide you step by step into compiling an unmodified JAR file to a JAR.JS file. We will also create a basic HTML file integrated with the CheerpJ loader to run the Java application in the browser.
 
-# Download and install CheerpJ
+## Download and install CheerpJ
 
 Visit [our download page](https://leaningtech.com/download-cheerpj/) and download the CheerpJ archive for your platform. CheerpJ is available for Linux, Mac OS X and Windows.
 
-CheerpJ is distributed as an archive for all the platforms, you can unpack the archive anywhere in the system. During the tutorial we will assume that CheerpJ has been unpacked in the home directory and its root is `~/cheerpj_2.3/`. Please keep in mind to use a different path in the following commands if you have chosen a different position or you are using a different version of CheerpJ.
+CheerpJ is distributed as an archive for all the platforms, you can unpack the archive anywhere in the system. During the tutorial we will assume that CheerpJ has been unpacked in the Applications directory `/Applications/cheerpj_2.3/`. Please keep in mind to use a different path in the following commands if you have chosen a different position or you are using a different version of CheerpJ.
 
-# Build or download the JAR file
+## Using CheerpJ's AOT compiler
+
+### Build or download the JAR file
 
 CheerpJ compiles unmodified JAR files to JavaScript so that they can run in the browser. Java source code is not needed to use CheerpJ. If you are building your own application you should already have its JAR file. For this example we will download a basic Swing example. Download the [TextDemo.jar](https://docs.oracle.com/javase/tutorialJWS/samples/uiswing/TextDemoProject/TextDemo.jar) file into a new directory. Below we will assume that this new directory is `~/cheerpj_tutorial/`
 
-# Build the JAR.JS file
+### Build the JAR.JS file
 
 CheerpJ provides a convenient python program to convert whole JARs to JavaScript: `cheerpjfy.py`. It supports several options for advanced users, but it's basic syntax is very simple. The following command will generate `TextDemo.jar.js`
 
-```
+```shell
 cd ~/cheerpj_tutorial/
-~/cheerpj_2.3/cheerpjfy.py TextDemo.jar
+/Applications/cheerpj_2.3/cheerpjfy.py TextDemo.jar
 ```
 
 **NOTE**: `cheerpjfy.py` it's a python3 program, you need to have python3 installed on your system.
 **NOTE**: On windows you should prefix the command with the `py` launcher to use the correct version of python.
 
-# Create an HTML page
+### Create an HTML page
 
 Copy the following HTML code into `~/cheerpj_tutorial/cheerpj_tutorial.html`
 
-```
-<!DOCTYPE html>
+```html title="cheerpj_tutorial/cheerpj_tutorial.html"
+<!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>CheerpJ test</title>
-    <script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
-  </head>
-  <body>
-  </body>
-  <script>
-      cheerpjInit();
-      cheerpjCreateDisplay(800,600);
-      cheerpjRunJar("/app/TextDemo.jar");
-  </script>
+	<head>
+		<meta charset="utf-8" />
+		<title>CheerpJ test</title>
+		<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>
+	</head>
+	<body></body>
+	<script>
+		cheerpjInit();
+		cheerpjCreateDisplay(800, 600);
+		cheerpjRunJar("/app/TextDemo.jar");
+	</script>
 </html>
 ```
 
 Let's break down what is going on:
 
-- We first include the CheerpJ loader from our cloud runtime. (https://cjrtnc.leaningtech.com/2.3/loader.js). This file is the only script that needs to be loaded to use CheerpJ. CheerpJ will _automatically_ load all other files, including the `TextDemo.jar.js` we generated above.
-- We initialize CheerpJ using the `cheerpjInit()` API. See [Runtime API](/cheerpj2/reference/Runtime-API) for more information.
+- We first include the CheerpJ [loader](https://cjrtnc.leaningtech.com/2.3/loader.js) from our cloud runtime as `<script src="https://cjrtnc.leaningtech.com/2.3/loader.js"></script>`. This file is the only script that needs to be loaded to use CheerpJ. CheerpJ will _automatically_ load all other files, including the `TextDemo.jar.js` we generated above.
+
+- We initialize CheerpJ using `cheerpjInit()`. See [Runtime API](/cheerpj2/reference/Runtime-API#cheerpjinit) for more information.
 - We want to run a graphical application (i.e. a Swing or AWT application), so we need to initialize a _virtual display_ in the page. CheerpJ will render all Java windows into this display.
 - We can now start the JAR file. CheerpJ will _automatically_ download the `TextDemo.jar.js` file as soon as the first application class is loaded
 
@@ -66,7 +68,7 @@ The `/app/` directory is virtual, it only exists inside of CheerpJ and it's need
 - `/app/TextDemo.jar` -> `http://127.0.0.1:8080/TextDemo.jar`
 - `/app/subdirectory/data.txt` -> `http://127.0.0.1:8080/subdirectory/data.txt`
 
-# Run the application in the browser
+### Run the application in the browser
 
 To test CheerpJ you _must_ use a local Web Server. Opening the `cheerpj_tutorial.html` page directly from the disk (for example, by double-clicking on it) is **_not supported_**. This is a very common mistake for first time users.
 
@@ -78,13 +80,13 @@ To test CheerpJ you _must_ use a local Web Server. Opening the `cheerpj_tutorial
 
 To run TextDemo.jar in the browser using CheerpJ, do the following
 
-```
+```console
 cd ~/cheerpj_tutorial/
 python3 -m http.server 8080
 ```
 
 Now open your favourite browser and enter the following URL `http://127.0.0.1:8080/cheerpj_tutorial.html`. You will see the CheerpJ spinner during a brief loading phase. Then the Java window will appear and it will look identical to the native version.
 
-# The end!
+## The end!
 
 Congratulations, you have successfully compiled and run your first Java application using CheerpJ. For more information, please read our in-depth [Getting Started](/cheerpj2/getting-started/Getting-Started) page.