From 8a654d663e4d66b086469c04a0b5dc1cd4c72f77 Mon Sep 17 00:00:00 2001 From: Ana Gabriela Reyna Date: Thu, 14 Sep 2023 15:52:18 +0100 Subject: [PATCH] Astro-expressive-code added, added console on CJ code blocks --- astro.config.mjs | 2 + package.json | 1 + pnpm-lock.yaml | 66 +++++++++++++++++++ src/content/docs/cheerpj2/01-demos.md | 2 - .../03-getting-started/00-Tutorial.md | 12 ++-- .../03-getting-started/01-Getting-Started.md | 20 +++--- .../DOM-and-JavaScript-interoperability.md | 4 +- ...nting-Java-native-methods-in-JavaScript.md | 6 +- .../05-reference/02-Command-Line-Options.md | 2 +- .../docs/cheerpj2/05-reference/Runtime-API.md | 2 +- .../cheerpj2/05-reference/WebWorker-API.md | 6 +- 11 files changed, 95 insertions(+), 28 deletions(-) diff --git a/astro.config.mjs b/astro.config.mjs index 9496987c..40fbfe32 100644 --- a/astro.config.mjs +++ b/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(), diff --git a/package.json b/package.json index 1fa99e25..4d561847 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5109658e..795ff85d 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ dependencies: astro: specifier: ^2.8.5 version: 2.8.5 + astro-expressive-code: + specifier: ^0.22.2 + version: 0.22.2(astro@2.8.5) astro-icon: specifier: ^0.8.1 version: 0.8.1 @@ -460,6 +463,11 @@ packages: to-fast-properties: 2.0.0 dev: false + /@ctrl/tinycolor@3.6.1: + resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==} + engines: {node: '>=10'} + dev: false + /@emmetio/abbreviation@2.3.3: resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} dependencies: @@ -872,6 +880,38 @@ packages: dev: false optional: true + /@expressive-code/core@0.22.2: + resolution: {integrity: sha512-fVfnopl4dz75KgZ8q9G6sL+GW7QAzuWnNrm4zTKRabRzwdTZ9MCUmGPJvUpxKovJ1Z4t6YIKGHTson0a7fvV5g==} + dependencies: + '@ctrl/tinycolor': 3.6.1 + hast-util-to-html: 8.0.4 + hastscript: 7.2.0 + postcss: 8.4.25 + postcss-nested: 6.0.1(postcss@8.4.25) + dev: false + + /@expressive-code/plugin-frames@0.22.2: + resolution: {integrity: sha512-Tn4COPTdySVJ6gygCCqYd0KMQXea4l6NN/9Px2uSekPDLUiE9Ff4i3005Pa1rr31m0hLBes4POnFRRmwqIu+ZA==} + dependencies: + '@expressive-code/core': 0.22.2 + hastscript: 7.2.0 + dev: false + + /@expressive-code/plugin-shiki@0.22.2: + resolution: {integrity: sha512-BDNkEb2OwmoL5kJJnNZ6fXk5IytZordEWGjWycEiKyHMXotJ+94S0PIIiTfVIp38H1faL+yd+kz2pF4t7ePcww==} + dependencies: + '@expressive-code/core': 0.22.2 + shiki: 0.14.3 + dev: false + + /@expressive-code/plugin-text-markers@0.22.2: + resolution: {integrity: sha512-9lMON0kVEn0LAIe9mHcXaxdwqnxCF7MR+IExyC4OGhMVEc1p8Vp7rvSxsUPjySQV2QvYNTlQOaKVi/eI5oM1Ag==} + dependencies: + '@expressive-code/core': 0.22.2 + hastscript: 7.2.0 + unist-util-visit-parents: 5.1.3 + dev: false + /@jridgewell/gen-mapping@0.3.3: resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} engines: {node: '>=6.0.0'} @@ -1248,6 +1288,15 @@ packages: hasBin: true dev: false + /astro-expressive-code@0.22.2(astro@2.8.5): + resolution: {integrity: sha512-pmyuTJcEzfYzxPNBsIEjVNTzgWHxDGiv4D/oJusvOm30x7ETADMusqf9uYmJ6rS1jlwAgfaUWm7vTv6SaxWrSw==} + peerDependencies: + astro: ^2.0.0 || ^3.0.0-beta + dependencies: + astro: 2.8.5 + remark-expressive-code: 0.22.2 + dev: false + /astro-icon@0.8.1: resolution: {integrity: sha512-APk+fbFnoyGdIVSPFrdrOW9YBK96/1fYuVe7ULTGW92+z00RKB8GfLJiUvzNVXUAX2rZJCFmruGVF4rrhcTYsg==} dependencies: @@ -2014,6 +2063,15 @@ packages: strip-final-newline: 3.0.0 dev: false + /expressive-code@0.22.2: + resolution: {integrity: sha512-2KOsjZKx6pRLVhlIo7ikZxL0CJzuvpP4LeGcFiz7YsqUtT3ak4MgEeD1ph82FNp2isl+vnc8OZu1xoGDi9JxMw==} + dependencies: + '@expressive-code/core': 0.22.2 + '@expressive-code/plugin-frames': 0.22.2 + '@expressive-code/plugin-shiki': 0.22.2 + '@expressive-code/plugin-text-markers': 0.22.2 + dev: false + /extend-shallow@2.0.1: resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==} engines: {node: '>=0.10.0'} @@ -3728,6 +3786,14 @@ packages: unified: 10.1.2 dev: false + /remark-expressive-code@0.22.2: + resolution: {integrity: sha512-NwVpKDHiHsD+3CwxDrXA6B2fNttVDK0BBnkHLPQoKNOuEokYWA9+3trZQw77txBGimNLsJQCBl/tddsHen2g8w==} + dependencies: + expressive-code: 0.22.2 + hast-util-to-html: 8.0.4 + unist-util-visit: 4.1.2 + dev: false + /remark-frontmatter@4.0.1: resolution: {integrity: sha512-38fJrB0KnmD3E33a5jZC/5+gGAC2WKNiPw1/fdXJvijBlhA7RCsvJklrYJakS0HedninvaCYW8lQGf9C918GfA==} dependencies: diff --git a/src/content/docs/cheerpj2/01-demos.md b/src/content/docs/cheerpj2/01-demos.md index 94715421..e1e6beb6 100644 --- a/src/content/docs/cheerpj2/01-demos.md +++ b/src/content/docs/cheerpj2/01-demos.md @@ -26,8 +26,6 @@ A few selected Java Swing examples to demonstrate how complex Swing GUI apps can ## JavaFiddle - - 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. diff --git a/src/content/docs/cheerpj2/03-getting-started/00-Tutorial.md b/src/content/docs/cheerpj2/03-getting-started/00-Tutorial.md index 6a360fbb..1a362874 100644 --- a/src/content/docs/cheerpj2/03-getting-started/00-Tutorial.md +++ b/src/content/docs/cheerpj2/03-getting-started/00-Tutorial.md @@ -8,9 +8,9 @@ CheerpJ is very easy to use, this tutorial will guide you step by step into comp 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. -## Using CheerpJ AOT compiler +## Using CheerpJ's AOT compiler ### Build or download the JAR file @@ -20,9 +20,9 @@ CheerpJ compiles unmodified JAR files to JavaScript so that they can run in the 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. @@ -32,7 +32,7 @@ cd ~/cheerpj_tutorial/ Copy the following HTML code into `~/cheerpj_tutorial/cheerpj_tutorial.html` -```html +```html title="cheerpj_tutorial/cheerpj_tutorial.html" @@ -80,7 +80,7 @@ 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 ``` diff --git a/src/content/docs/cheerpj2/03-getting-started/01-Getting-Started.md b/src/content/docs/cheerpj2/03-getting-started/01-Getting-Started.md index 5aaf56a3..5304dc73 100644 --- a/src/content/docs/cheerpj2/03-getting-started/01-Getting-Started.md +++ b/src/content/docs/cheerpj2/03-getting-started/01-Getting-Started.md @@ -4,7 +4,7 @@ title: Getting started This page will help you getting started with CheerpJ and converting your first Java application to JavaScript in no time. -To start, make sure to download the latest available version of CheerpJ [here](https://leaningtech.com/download-cheerpj/). Decompress the Cheerpj 2.3 archive anywhere, for example in `~/cheerpj_2.3`. +To start, make sure to download the latest available version of CheerpJ [here](https://leaningtech.com/download-cheerpj/). Decompress the Cheerpj 2.3 archive anywhere, for example in `~/cheerpj_2.3` or `/Applications/cheerpj_2.3/`. **Important:** Converting an applet is documented at the bottom of this page. @@ -16,8 +16,8 @@ To start, make sure to download the latest available version of CheerpJ [here](h The basic usage is very simple: -``` -~/cheerpj_2.3/cheerpjfy.py my_application_archive.jar +```shell +/Applications/cheerpj_2.3/cheerpjfy.py my_application_archive.jar ``` This command will generate a file called `my_application_archive.jar.js`, which needs to be deployed in the same folder of the original .JAR archive, and hosted on a web server. Instructions on how to serve the converted JavaScript on a web page are provided below. @@ -26,7 +26,7 @@ This command will generate a file called `my_application_archive.jar.js`, which **Note to Windows users:** You will need to have python3 installed on the system. Python provides a launcher called `py` that will automatically detect and use the right version of python for a given script. To use `cheerpjfy.py` on Windows you need to prefix all the commands with `py`, for example: -``` +```shell py c:\cheerpj_2.3\cheerpjfy.py application.jar ``` @@ -34,8 +34,8 @@ py c:\cheerpj_2.3\cheerpjfy.py application.jar If your JAR has any dependencies in the form of further JAR archives, the `cheerpjfy.py` command line must be modified as follows: -``` -~/cheerpj_2.3/cheerpjfy.py --deps my_dependency_archive.jar my_application_archive.jar +```shell +/Applications/cheerpj_2.3/cheerpjfy.py --deps my_dependency_archive.jar my_application_archive.jar ``` This command will generate `my_application_archive.jar.js` but **not** `my_dependency_archive.jar.js`. Each archive should be compiled separately by invoking `~/cheerpj_2.3/cheerpjfy.py my_dependency_archive.jar`. @@ -51,7 +51,7 @@ done ## Basic HTML page for testing a Java application -```html +```html title="index.html" @@ -75,8 +75,8 @@ This page will initialize the CheerpJ system, create a graphical environment to You can now serve this web page on a simple http server, such as the http-server utility. -``` -http-server ~/cheerpj_2.3/ +```shell +http-server [path] [options] ``` ## Converting an applet @@ -98,7 +98,7 @@ To avoid potential conflicts with native Java we recommend replacing the origina ## Basic HTML page for testing a Java applet -```html +```html title="index.html" diff --git a/src/content/docs/cheerpj2/04-guides/DOM-and-JavaScript-interoperability.md b/src/content/docs/cheerpj2/04-guides/DOM-and-JavaScript-interoperability.md index 287dc968..c3a01906 100644 --- a/src/content/docs/cheerpj2/04-guides/DOM-and-JavaScript-interoperability.md +++ b/src/content/docs/cheerpj2/04-guides/DOM-and-JavaScript-interoperability.md @@ -10,7 +10,7 @@ The `com.leaningtech.client.Global` is a representation of the global namespace ## Basic example -```java +```java title="DomExample.java" import com.leaningtech.client.Document; import com.leaningtech.client.Element; import com.leaningtech.client.Global; @@ -60,7 +60,7 @@ The various methods behave the same, with the only difference being the expected Assuming the example above is contained in `DomExample.java`, you need to first build the program using the standard `javac` compiler, create a JAR and then create the JAR.JS from it using CheerpJ. In both steps the `cheerpj-dom.jar` must be explicitly added to the command line as a dependency. -``` +```shell # The CHEERPJ_INSTALL_PATH is assumed to be set to the location where the CheerpJ archive has been installed javac -cp $CHEERPJ_INSTALL_PATH/cheerpj-dom.jar DomExample.java jar cvf domexample.jar DomExample.class diff --git a/src/content/docs/cheerpj2/04-guides/Implementing-Java-native-methods-in-JavaScript.md b/src/content/docs/cheerpj2/04-guides/Implementing-Java-native-methods-in-JavaScript.md index 335acc44..5bbcd68a 100644 --- a/src/content/docs/cheerpj2/04-guides/Implementing-Java-native-methods-in-JavaScript.md +++ b/src/content/docs/cheerpj2/04-guides/Implementing-Java-native-methods-in-JavaScript.md @@ -8,7 +8,7 @@ With CheerpJ, it is possible to implement Java 'native' methods (that would norm Take as an example the following Java class -```java +```java title="SomeClass.java" public class SomeClass { public static void someStaticMethod() { ... @@ -32,7 +32,7 @@ Since this is a rather involved process, the `cheerpjfy.py` script provides func Assume the previous class has been compiled and packaged in `some.jar`, to generate a directory tree for JS native code you can do: -``` +```shell mkdir native/ cheerpjfy.py --stub-natives=native/ some.jar ``` @@ -41,7 +41,7 @@ This will generate a tree of directories under the `native` folder, which will r Once all have been implemented, native methods can be packaged with the compiled code using the following command: -``` +```shell cheerpjfy.py --natives=native/ some.jar ``` diff --git a/src/content/docs/cheerpj2/05-reference/02-Command-Line-Options.md b/src/content/docs/cheerpj2/05-reference/02-Command-Line-Options.md index 23fa91f7..5964ef3e 100644 --- a/src/content/docs/cheerpj2/05-reference/02-Command-Line-Options.md +++ b/src/content/docs/cheerpj2/05-reference/02-Command-Line-Options.md @@ -4,7 +4,7 @@ title: Command line options The basic usage of the `cheerpjfy.py` build script is: -``` +```shell ./cheerpjfy.py application.jar ``` diff --git a/src/content/docs/cheerpj2/05-reference/Runtime-API.md b/src/content/docs/cheerpj2/05-reference/Runtime-API.md index acba6f79..a2f2055b 100644 --- a/src/content/docs/cheerpj2/05-reference/Runtime-API.md +++ b/src/content/docs/cheerpj2/05-reference/Runtime-API.md @@ -8,7 +8,7 @@ CheerpJ exposes a simple API to interact with a Java application converted to Ja A basic HTML file to load a CheerpJ application will look as follows: -```html +```html title="index.html" diff --git a/src/content/docs/cheerpj2/05-reference/WebWorker-API.md b/src/content/docs/cheerpj2/05-reference/WebWorker-API.md index 06199b6c..2c9816b1 100644 --- a/src/content/docs/cheerpj2/05-reference/WebWorker-API.md +++ b/src/content/docs/cheerpj2/05-reference/WebWorker-API.md @@ -69,7 +69,7 @@ w.cjResolveCall("ClassName", "methodName", null).then( // or array of parameter CheerpJ exposes a custom API to access this feature directly from Java code. The API is equivalent in terms of capabilities. This API is blocking, so to actually take advantage of concurrency between the main thread and Web Workers it is necessary to use this API from a Java thread. -```java +```java title="Worker.java" package com.leaningtech.cheerpj; public class Worker @@ -98,7 +98,7 @@ The Java version of the API is also extended to support `long`s in parameters an Example usage: -```java +```java title="WW.java" import com.leaningtech.cheerpj.Worker; public class WW @@ -113,6 +113,6 @@ public class WW To build the class you need to add `cheerpj-public.jar` to the classpath -``` +```shell javac -cp cheerpj_install_dir/cheerpj-public.jar WW.java ```