diff --git a/content/blog/cheerpj-2-3-released.md b/content/blog/cheerpj-2-3-released.md index f8fd6a82..046f5145 100644 --- a/content/blog/cheerpj-2-3-released.md +++ b/content/blog/cheerpj-2-3-released.md @@ -8,7 +8,7 @@ categories: - "technical-blog" authors: - "lorenzo-marsicano" -heroImage: ./cheerpj.png +heroImage: "./cheerpj.png" tags: - CheerpJ --- diff --git a/content/showcase/HomeByMe.md b/content/showcase/HomeByMe.md new file mode 100644 index 00000000..aeeba59f --- /dev/null +++ b/content/showcase/HomeByMe.md @@ -0,0 +1,20 @@ +--- +title: HomeByME +description: A home design application, compiled to the web with Cheerp. +url: https://home.by.me/en/ +repository_url: https://home.by.me/en/ +heroImage: "./homebyme.png" +projectType: Enterprise Demo +Niche: Interior design + +tags: + - Cheerp +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/HomeByMe.yml b/content/showcase/HomeByMe.yml deleted file mode 100644 index bfbbcc54..00000000 --- a/content/showcase/HomeByMe.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: HomeByME -description: A home design application, compiled to the web with Cheerp. -url: https://home.by.me/en/ -heroImage: ./homebyme.png -tags: - - Cheerp diff --git a/content/showcase/boardspace.md b/content/showcase/boardspace.md new file mode 100644 index 00000000..a1ad96dd --- /dev/null +++ b/content/showcase/boardspace.md @@ -0,0 +1,20 @@ +--- +title: Boardspace +description: A board game playing application using AWT. Over 100 games are available to play against human and robot opponents using WebSockets. +projectType: Community +niche: Videogames +author: Boardspace +url: https://boardspace.net/login.html +repository_url: https://boardspace.net/login.html +heroImage: "./boardspace.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/boardspace.yml b/content/showcase/boardspace.yml deleted file mode 100644 index 64aecb52..00000000 --- a/content/showcase/boardspace.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Boardspace -description: A board game playing application using AWT. Over 100 games are available to play against human and robot opponents using WebSockets. -url: https://boardspace.net/login.html -heroImage: ./boardspace.png -tags: - - CheerpJ diff --git a/content/showcase/browsercraft.md b/content/showcase/browsercraft.md new file mode 100644 index 00000000..b5a3688a --- /dev/null +++ b/content/showcase/browsercraft.md @@ -0,0 +1,23 @@ +--- +title: Browsercraft +description: Minecraft running unmodified in the browser! +url: https://browsercraft.cheerpj.com/ +repository_url: https://github.com/leaningtech/browsercraft +heroImage: "./browsercraft.png" +projectType: Company Demo +niche: Videogames +tags: + - CheerpJ +--- + +## What is it? + +Browsercraft runs unmodified Minecraft (version 1.2.5) in the browser using CheerpJ, a Java runtime for modern browsers. The experience is intentionally limited to 3 minutes; please refer to minecraft.net for the full game. + +## What this is not + +It is not a replacement for the official Minecraft, nor a reimplementation in another programming language. This is also not a modified version of the game: we do not alter the code in any way, we simply run the original JARs. + +## How it works + +CheerpJ is a Java Virtual Machine written in WebAssembly that runs entirely in your browser. It can execute any Java application without modification and without requiring the source code. This demo demonstrates those capabilities by running an older version (1.2.5) of Minecraft and LWJGL entirely in the browser. diff --git a/content/showcase/browsercraft.yml b/content/showcase/browsercraft.yml deleted file mode 100644 index 8d85d3d2..00000000 --- a/content/showcase/browsercraft.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Browsercraft -description: Minecraft running unmodified in the browser! -url: https://browsercraft.cheerpj.com/ -heroImage: ./browsercraft.png -tags: - - CheerpJ diff --git a/sites/cheerp/src/content/showcase/cjdom.yml b/content/showcase/cjdom.md similarity index 50% rename from sites/cheerp/src/content/showcase/cjdom.yml rename to content/showcase/cjdom.md index adb1944e..d41975aa 100644 --- a/sites/cheerp/src/content/showcase/cjdom.yml +++ b/content/showcase/cjdom.md @@ -1,6 +1,12 @@ +--- title: CJDom description: A library providing bindings to common Web/DOM APIs for CheerpJ. url: https://github.com/reportmill/CJDom -heroImage: ./cjdom.png +repository_url: https://github.com/reportmill/CJDom +author: Jeff Martin +projectType: Community +niche: Dev utilities +heroImage: "./cjdom.png" tags: - CheerpJ +--- diff --git a/content/showcase/code-editor.md b/content/showcase/code-editor.md new file mode 100644 index 00000000..bca3d015 --- /dev/null +++ b/content/showcase/code-editor.md @@ -0,0 +1,16 @@ +--- +title: Client side code editor +description: Practice Python coding client-side on your browser! +url: https://github.com/rheap404/cheerpx_hack +repository_url: https://github.com/rheap404/cheerpx_hack +heroImage: "./code-editor.png" +author: Rhea and Rida +niche: Virtual Machines and Education +projectType: "Hackathon winner 2024" +tags: + - CheerpX +--- + +This platform allows users to practice coding problems in Python, featuring a split-view workspace with problem instructions on one side and a code editor with a built-in console on the other. The platform runs code client-side using CheerpX, which emulates a virtual machine in the browser. This eliminates the need for server-based execution, improving speed, privacy, and scalability. + +This project was developed as part of the WebVM Hackathon, leveraging CheerpX for WebAssembly-powered client-side execution of Python code in the browser. It mimics platforms like NeetCode.io, enabling users to practice coding problems and receive immediate feedback by running their code directly in the browser. The goal of this project is to showcase the potential of WebVM for delivering powerful terminal-based applications without the need for native installations. diff --git a/content/showcase/code-editor.png b/content/showcase/code-editor.png new file mode 100644 index 00000000..a496743b Binary files /dev/null and b/content/showcase/code-editor.png differ diff --git a/content/showcase/dragoncourtrevived.md b/content/showcase/dragoncourtrevived.md new file mode 100644 index 00000000..deaab43a --- /dev/null +++ b/content/showcase/dragoncourtrevived.md @@ -0,0 +1,20 @@ +--- +title: "Dragon Court: Revived" +description: An old-school fantasy RPG, revived with in-game trading, multiplayer clans, and competitive leaderboards. +url: https://dragoncourt.penguinchilling.com/ +niche: Videogames +projectType: Community +author: Penguin Chilling +repository_url: https://dragoncourt.penguinchilling.com/ +heroImage: "./dragoncourtrevived.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/dragoncourtrevived.yml b/content/showcase/dragoncourtrevived.yml deleted file mode 100644 index 594dea8e..00000000 --- a/content/showcase/dragoncourtrevived.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: "Dragon Court: Revived" -description: An old-school fantasy RPG, revived with in-game trading, multiplayer clans, and competitive leaderboards. -url: https://dragoncourt.penguinchilling.com/ -heroImage: ./dragoncourtrevived.png -tags: - - CheerpJ diff --git a/content/showcase/dungeon.md b/content/showcase/dungeon.md new file mode 100644 index 00000000..baa76d4d --- /dev/null +++ b/content/showcase/dungeon.md @@ -0,0 +1,16 @@ +--- +title: Linux dungeon +description: Browser-based fantasy puzzle game that runs entirely in a virtual Linux terminal +url: https://jfoxuk.github.io/webvm/ +repository_url: https://github.com/JFoxUK/webvm +heroImage: "./dungeon.png" +author: Jonathan Fox, Ruby Tipper +projectType: "Hackathon winner 2025" +niche: Virtual Machines and Education +tags: + - CheerpX +--- + +Linux Dungeon is a browser-based fantasy puzzle game that runs entirely in a virtual Linux terminal. Players take on the role of an adventurer trapped in a digital dungeon, where the only way forward is to master real Linux commands. Each room is sealed inside a password-protected .zip file, and players must explore directories, decode clues, and edit configs to advance. + +This project was built for the WebVM: Hackathon II, which challenged developers to create educational Linux experiences using CheerpX. diff --git a/content/showcase/dungeon.png b/content/showcase/dungeon.png new file mode 100644 index 00000000..3955d0eb Binary files /dev/null and b/content/showcase/dungeon.png differ diff --git a/content/showcase/imagej.md b/content/showcase/imagej.md new file mode 100644 index 00000000..3445c8cd --- /dev/null +++ b/content/showcase/imagej.md @@ -0,0 +1,18 @@ +--- +title: ImageJ.js +description: A web port of ImageJ, an open-source image processing tool popular in the scientific community. +url: https://aicell.io/post/improving-imagej.js/ +repository_url: https://github.com/aicell-lab/imagej.js +projectType: community +heroImage: "./imagej.webp" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/imagej.yml b/content/showcase/imagej.yml deleted file mode 100644 index ec32c857..00000000 --- a/content/showcase/imagej.yml +++ /dev/null @@ -1,7 +0,0 @@ -title: ImageJ.js -description: A web port of ImageJ, an open-source image processing tool popular in the scientific community. -url: https://aicell.io/post/improving-imagej.js/ -# https://github.com/aicell-lab/imagej.js -heroImage: ./imagej.webp -tags: - - CheerpJ diff --git a/content/showcase/itext.md b/content/showcase/itext.md new file mode 100644 index 00000000..9b0ba794 --- /dev/null +++ b/content/showcase/itext.md @@ -0,0 +1,18 @@ +--- +title: iText +description: Edit PDFs fully client side using the industry standard iText library converted to JavaScript. +url: https://cheerpjdemos.leaningtech.com/iTextDemo.html +repository_url: https://cheerpjdemos.leaningtech.com/iTextDemo.html +heroImage: "./itext.png" +projectType: Company Demo +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/itext.yml b/content/showcase/itext.yml deleted file mode 100644 index 0f92361a..00000000 --- a/content/showcase/itext.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: iText -description: Edit PDFs fully client side using the industry standard iText library converted to JavaScript. -url: https://cheerpjdemos.leaningtech.com/iTextDemo.html -heroImage: ./itext.png -tags: - - CheerpJ diff --git a/content/showcase/javafiddle.md b/content/showcase/javafiddle.md new file mode 100644 index 00000000..665cdca4 --- /dev/null +++ b/content/showcase/javafiddle.md @@ -0,0 +1,19 @@ +--- +title: Java Fiddle +description: Compile, edit and run Java, directly in the browser. +url: https://javafiddle.leaningtech.com/ +repository_url: https://github.com/leaningtech/javafiddle +heroImage: "./javafiddle.png" +author: Leaning Technologies +projectType: Company Demo +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/javafiddle.yml b/content/showcase/javafiddle.yml deleted file mode 100644 index cd17c28d..00000000 --- a/content/showcase/javafiddle.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: Java Fiddle -description: Compile, edit and run Java, directly in the browser. -url: https://javafiddle.leaningtech.com/ -heroImage: ./javafiddle.png -tags: - - CheerpJ diff --git a/content/showcase/nasa-applets.md b/content/showcase/nasa-applets.md new file mode 100644 index 00000000..f518f785 --- /dev/null +++ b/content/showcase/nasa-applets.md @@ -0,0 +1,19 @@ +--- +title: NASA Aeronautics Simulators +description: Interactive simulator applets for aeoronautics students, powered by CheerpJ. +url: https://www1.grc.nasa.gov/beginners-guide-to-aeronautics/drop-simulator/ +repository_url: https://www1.grc.nasa.gov/beginners-guide-to-aeronautics/drop-simulator/ +niche: Education +projectType: Community +heroImage: "./nasa-applets.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/nasa-applets.yml b/content/showcase/nasa-applets.yml deleted file mode 100644 index 6fb1f9b2..00000000 --- a/content/showcase/nasa-applets.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: NASA Aeronautics Simulators -description: Interactive simulator applets for aeoronautics students, powered by CheerpJ. -url: https://www1.grc.nasa.gov/beginners-guide-to-aeronautics/drop-simulator/ -heroImage: ./nasa-applets.png -tags: - - CheerpJ diff --git a/content/showcase/openastex.md b/content/showcase/openastex.md new file mode 100644 index 00000000..65f22f69 --- /dev/null +++ b/content/showcase/openastex.md @@ -0,0 +1,18 @@ +--- +title: OpenAstexViewer +description: A complex Java applet with 3D rendering running in any browser using CheerpJ. +url: https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html +reposiutory_url: https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html +projectType: Company Demo +heroImage: "./openastex.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/openastex.yml b/content/showcase/openastex.yml deleted file mode 100644 index 3f774089..00000000 --- a/content/showcase/openastex.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: OpenAstexViewer -description: A complex Java applet with 3D rendering running in any browser using CheerpJ. -url: https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html -heroImage: ./openastex.png -tags: - - CheerpJ diff --git a/content/showcase/phet.md b/content/showcase/phet.md new file mode 100644 index 00000000..78d15b98 --- /dev/null +++ b/content/showcase/phet.md @@ -0,0 +1,16 @@ +--- +title: PHET Interactive Simulations +description: Interactive physics simulations from the University of Colorado Boulder, powered by CheerpJ. +url: https://phet.colorado.edu/en/simulations/filter?type=cheerpj +heroImage: "./phet.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/phet.yml b/content/showcase/phet.yml deleted file mode 100644 index a434ada3..00000000 --- a/content/showcase/phet.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: PHET Interactive Simulations -description: Interactive physics simulations from the University of Colorado Boulder, powered by CheerpJ. -url: https://phet.colorado.edu/en/simulations/filter?type=cheerpj -heroImage: ./phet.png -tags: - - CheerpJ diff --git a/content/showcase/swingset3.md b/content/showcase/swingset3.md new file mode 100644 index 00000000..697ec386 --- /dev/null +++ b/content/showcase/swingset3.md @@ -0,0 +1,18 @@ +--- +title: SwingSet3 +description: Java Swing components to HTML5 with CheerpJ +url: https://cheerpj-example-swingset3.leaningtech.com/ +repository_url: https://github.com/leaningtech/cheerpj-example-swingset3/blob/main/index.html +projectType: Company Demo +heroImage: "./swingset3.png" +tags: + - CheerpJ +--- + +Praesent ut fermentum arcu, at vulputate metus. Curabitur gravida nunc bibendum auctor placerat. Etiam volutpat laoreet eleifend. Aenean dictum rutrum mattis. Maecenas sit amet semper elit. Pellentesque mattis ex at lectus sodales, et consectetur nisl posuere. Suspendisse vitae leo accumsan, ultricies nisi in, molestie mi. + +## Some subtitle + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sed tempus elit. Integer tempor eros elit, ut pharetra est cursus non. Curabitur gravida quis purus non convallis. Pellentesque ultricies eget quam eget aliquam. Nunc at vestibulum lectus, eu euismod nibh. Quisque fermentum nunc sed imperdiet tempus. Vivamus iaculis urna ipsum, ac vehicula neque porttitor sit amet. Duis a mauris eu leo malesuada dapibus. + +Donec a nibh a diam fringilla porta. Fusce sit amet pretium enim. Donec ac massa nec nisl ultrices blandit. Aliquam cursus rutrum neque. Vestibulum eu lobortis justo, id consequat odio. Ut blandit nibh tortor, eu maximus metus tempor sit amet. Fusce vel cursus turpis, sollicitudin placerat lectus. Nullam ac tellus eu urna rutrum eleifend eu a augue. Integer dignissim lectus nulla, id faucibus quam malesuada id. Nunc ultrices neque nec risus accumsan sagittis. Proin eu augue sed urna sollicitudin ornare quis eu ex. Vestibulum commodo dictum efficitur. diff --git a/content/showcase/swingset3.yml b/content/showcase/swingset3.yml deleted file mode 100644 index 2116b3dc..00000000 --- a/content/showcase/swingset3.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: SwingSet3 -description: Java Swing components to HTML5 with CheerpJ -url: https://cheerpj-example-swingset3.leaningtech.com/ -heroImage: ./swingset3.png -tags: - - CheerpJ diff --git a/content/showcase/webvm-alpine.md b/content/showcase/webvm-alpine.md new file mode 100644 index 00000000..c563ec95 --- /dev/null +++ b/content/showcase/webvm-alpine.md @@ -0,0 +1,16 @@ +--- +title: WebVM Alpine +description: Graphical Linux Alpine running client-side. +url: https://webvm.io/alpine.html +repository_url: https://github.com/leaningtech/webvm +heroImage: "./webvm_alpine.png" +projectType: Company demo +niche: Virtual Machines +author: Leaning Technologies +tags: + - CheerpX +--- + +WebVM 2.0 came out with big improvements for graphical applications support, including booting a complete Alpine desktop environment. +For now, we have settled on using i3, a minimalistic window manager, to make sure the demo is enjoyable by most users, even on mobile devices, without consuming excessive amounts of data. Further improvements in our roadmap will make it practical to run the much heavier XFCE environment in future releases. +Read more about this demo at our [dedicated blog post](https://cheerpx.io/blog/webvm-20). diff --git a/content/showcase/webvm.md b/content/showcase/webvm.md new file mode 100644 index 00000000..c7b9836a --- /dev/null +++ b/content/showcase/webvm.md @@ -0,0 +1,20 @@ +--- +title: WebVM +description: Linux running client-side within your browser tab +projectType: Company demo +niche: Virtual Machines +author: Leaning Technologies +url: https://webvm.io/ +repository_url: https://github.com/leaningtech/webvm +heroImage: "./webvm.png" +tags: + - CheerpX +--- + +WebVM is a virtual Linux environment running in the browser via WebAssembly. WebVM is powered by the CheerpX virtualization engine, which enables safe, sandboxed client-side execution of x86 binaries, fully client-side. Being built completely on standard Web technologies - WebAssembly in particular - it is fully isolated from your system and your other browser tabs. + +CheerpX includes an x86-to-WebAssembly JIT compiler, a virtual block-based file system, and a Linux syscall emulator + +## Claude Integration + +WebVM integrates The Computer Use feature from Claude. Since Claude APIs can be used directly from a browser tab, it’s possible to combine them with WebVM to create a secure and private environment to experiment with Claude Computer Use capabilities. Please read more about WebVM and Claude integration in our dedicated [blog post](https://cheerpx.io/blog/webvm-claude). diff --git a/content/showcase/webvm.yml b/content/showcase/webvm.yml deleted file mode 100644 index 8da1a3e6..00000000 --- a/content/showcase/webvm.yml +++ /dev/null @@ -1,6 +0,0 @@ -title: WebVM -description: Linux running client-side within your browser tab -url: https://webvm.io/ -heroImage: ./webvm.png -tags: - - CheerpX diff --git a/content/showcase/webvm_alpine.png b/content/showcase/webvm_alpine.png new file mode 100644 index 00000000..15a6f248 Binary files /dev/null and b/content/showcase/webvm_alpine.png differ diff --git a/packages/astro-theme/components/BlogPostCard.astro b/packages/astro-theme/components/BlogPostCard.astro index 147069f9..2a2dec26 100644 --- a/packages/astro-theme/components/BlogPostCard.astro +++ b/packages/astro-theme/components/BlogPostCard.astro @@ -1,8 +1,8 @@ --- import { getEntry, type CollectionEntry } from "astro:content"; +import { Image } from "astro:assets"; import FormattedDate from "./FormattedDate.astro"; import { resolveAuthors } from "../lib/blog"; -import { Image } from "astro:assets"; import { productFromUrl } from "../lib/products"; const product = productFromUrl(Astro.url); @@ -14,6 +14,11 @@ interface Props { } const { post: postOrSlug, showMetadata = false, size = "narrow" } = Astro.props; + +if (!postOrSlug) { + return null; +} + const post = typeof postOrSlug === "string" ? await getEntry("blog", postOrSlug) diff --git a/packages/astro-theme/components/Breadcrumbs.astro b/packages/astro-theme/components/Breadcrumbs.astro index 16440d68..88014694 100644 --- a/packages/astro-theme/components/Breadcrumbs.astro +++ b/packages/astro-theme/components/Breadcrumbs.astro @@ -37,7 +37,7 @@ const crumbs = path {title} {!isLast && ( - + )} )) diff --git a/packages/astro-theme/components/DemoCard.astro b/packages/astro-theme/components/DemoCard.astro new file mode 100644 index 00000000..861d8cee --- /dev/null +++ b/packages/astro-theme/components/DemoCard.astro @@ -0,0 +1,81 @@ +--- +import { getEntry, type CollectionEntry } from "astro:content"; +import { Image } from "astro:assets"; +import { productFromUrl } from "../lib/products"; + +const product = productFromUrl(Astro.url); + +interface Props { + demo: CollectionEntry<"showcase"> | CollectionEntry<"showcase">["slug"]; + showMetadata?: boolean; + size?: "wide" | "narrow"; +} + +const { demo: demoOrSlug, showMetadata = false, size = "narrow" } = Astro.props; + +const demo = + typeof demoOrSlug === "string" + ? await getEntry("showcase", demoOrSlug) + : demoOrSlug; + +//choose hover link color based on product +const productName = typeof product === "undefined" ? "Labs" : product.name; +//if product is cheerpj, add prefix /docs on post url +const demo_url = + productName === "CheerpJ" + ? "https://labs.leaningtech.com/showcase/" + : "/showcase/"; +--- + + + { + demo.data.heroImage && ( + + ) + } +
+

+ {demo.data.title} +

+
+ + { + showMetadata && ( +
+
+
{demo.data.description}
+
+
+ ) + } +
+

+ {demo.data.projectType} +

+ { + demo.data.tags.map((tag) => ( +

+ {tag} +

+ )) + } +
+ diff --git a/packages/astro-theme/components/DemoCardSet.astro b/packages/astro-theme/components/DemoCardSet.astro new file mode 100644 index 00000000..4e9b1546 --- /dev/null +++ b/packages/astro-theme/components/DemoCardSet.astro @@ -0,0 +1,54 @@ +--- +import { getCollection, type CollectionEntry } from "astro:content"; +import DemoCard from "./DemoCard.astro"; +import { productFromUrl } from "../lib/products"; + +interface Props { + // Only show posts if they have at least one of these tags + tags?: string[] | undefined; + + // Exclude posts with these IDs + exclude?: string[] | undefined; +} + +const { tags, exclude } = Astro.props; +const product = productFromUrl(Astro.url); +const productName = typeof product === "undefined" ? "Labs" : product.name; + +function sortCalc(demo: CollectionEntry<"showcase">): number { + let relevancy = + tags && demo.data.tags + ? demo.data.tags.filter((tag) => tags.includes(tag)).length + : 0.1; + if (demo.data.featured) { + relevancy *= 2; + } + return relevancy; +} + +const demos = ( + await getCollection("showcase", (demo) => { + if ( + demo.data.draft || + exclude?.includes(demo.id) || + !(demo.data?.tags?.includes(productName) || productName === "Labs") + ) { + return false; + } else { + return true; + } + }) +) + .sort((a, b) => sortCalc(b) - sortCalc(a)) + .slice(0, 3); +--- + + diff --git a/packages/astro-theme/components/DemoInfo.astro b/packages/astro-theme/components/DemoInfo.astro new file mode 100644 index 00000000..915c59aa --- /dev/null +++ b/packages/astro-theme/components/DemoInfo.astro @@ -0,0 +1,108 @@ +--- +import { productFromUrl } from "../lib/products"; +import LinkButton from "../components/LinkButton.astro"; +import Icon from "astro-icon"; + +interface Props { + title?: string; + description?: string | undefined; + niche?: string | undefined; + author?: string | undefined; + projectType?: string | undefined; + url?: string; + repository_url?: string; + tags?: string | undefined; +} + +const { + title, + description, + niche, + author, + projectType, + url, + repository_url, + tags, +} = Astro.props; +let tag_string = " "; +{ + tags.map((tag) => (tag_string += " " + tag)); +} +--- + +
+
+

+ {title} + { + description && ( +

+ {description} +

+ ) + } +

+
+ + +
+
+
+
+ + + { + author && ( + + + + + ) + } + { + projectType && ( + + + + + ) + } + { + niche && ( + + + + + ) + } + { + tags && ( + + + + + ) + } + +
Author {author}
Project type {projectType}
Niche {niche}
Technology {tag_string}
+
+
diff --git a/packages/astro-theme/components/DocsPagination.astro b/packages/astro-theme/components/DocsPagination.astro index fd35b53b..3d155d46 100644 --- a/packages/astro-theme/components/DocsPagination.astro +++ b/packages/astro-theme/components/DocsPagination.astro @@ -73,7 +73,7 @@ const { next, prev } = await getNextPrev(); {next.title} diff --git a/packages/astro-theme/components/ShowcaseList.astro b/packages/astro-theme/components/ShowcaseList.astro index b1cbc425..dbd1d4d1 100644 --- a/packages/astro-theme/components/ShowcaseList.astro +++ b/packages/astro-theme/components/ShowcaseList.astro @@ -13,8 +13,9 @@ const props = Astro.props; const product = productFromUrl(Astro.url); -let projects = await getCollection("showcase", ({ data }) => - data?.tags?.includes(product.name) +let projects = await getCollection( + "showcase", + ({ data }) => !product || data?.tags?.includes(product.name) ); if (typeof props.limit == "number") { projects = projects.slice(0, props.limit); diff --git a/packages/astro-theme/components/nav/product/Nav.astro b/packages/astro-theme/components/nav/product/Nav.astro index 81432d64..ad5d708d 100644 --- a/packages/astro-theme/components/nav/product/Nav.astro +++ b/packages/astro-theme/components/nav/product/Nav.astro @@ -24,8 +24,10 @@ const firstDocsEntry = getLocalisedProductNav( )[0]; if (!firstDocsEntry) throw new Error("must have a docs entry"); let blogref = "/blog"; +let showcaseref = "/showcase"; if (product.id.includes("cheerpj")) { blogref = "/docs/blog"; + showcaseref = "/docs/showcase"; } --- @@ -55,6 +57,7 @@ if (product.id.includes("cheerpj")) {
+
diff --git a/packages/astro-theme/content.ts b/packages/astro-theme/content.ts index cefb902c..7a5d33f8 100644 --- a/packages/astro-theme/content.ts +++ b/packages/astro-theme/content.ts @@ -55,15 +55,17 @@ export function defineCommonCollections() { }), }), showcase: defineCollection({ - type: "data", schema: ({ image }) => z.object({ title: z.string(), description: z.string().optional(), + projectType: z.string().optional(), + niche: z.string().optional(), + author: z.string().optional(), url: z.string(), - heroImage: image().refine((img) => img.width / img.height == 1.5, { - message: "Image must have 3:2 aspect ratio", - }), + repository_url: z.string().optional(), + heroImage: image().optional(), + draft: z.boolean().default(false), tags: productTags.optional(), }), }), diff --git a/packages/astro-theme/index.ts b/packages/astro-theme/index.ts index 77424086..c7c103c7 100644 --- a/packages/astro-theme/index.ts +++ b/packages/astro-theme/index.ts @@ -96,6 +96,15 @@ export default function ThemeIntegration( pattern: `${docsPrefix}/[...slug]`, entrypoint: "@leaningtech/astro-theme/pages/docs/[...slug].astro", }); + //routing for demos showcase + params.injectRoute({ + pattern: "showcase", + entrypoint: "@leaningtech/astro-theme/pages/showcase/index.astro", + }); + params.injectRoute({ + pattern: "showcase/[...slug]", + entrypoint: "@leaningtech/astro-theme/pages/showcase/[...slug].astro", + }); params.updateConfig({ markdown: { remarkPlugins: [[remarkObsidianCallout, {}]], diff --git a/packages/astro-theme/layouts/DemoArticle.astro b/packages/astro-theme/layouts/DemoArticle.astro new file mode 100644 index 00000000..007300ec --- /dev/null +++ b/packages/astro-theme/layouts/DemoArticle.astro @@ -0,0 +1,150 @@ +--- +import type { CollectionEntry } from "astro:content"; +import Shell from "./Shell.astro"; +import Icon from "astro-icon"; +import { SocialShare } from "astro-social-share"; +import DemoInfo from "../components/DemoInfo.astro"; +import Footer from "../components/Footer.astro"; +import DemoCardSet from "../components/DemoCardSet.astro"; +import LinkButton from "../components/LinkButton.astro"; +import { DISCORD_URL } from "../consts"; +import { Image } from "astro:assets"; +import { productFromUrl } from "../lib/products"; +import ProductNav from "../components/nav/product/Nav.astro"; + +const product = productFromUrl(Astro.url); + +type Props = CollectionEntry<"showcase">["data"] & { + id: CollectionEntry<"showcase">["id"]; + headings: BasicHeading[] | undefined; +}; + +const { + id, + title, + description, + author, + projectType, + niche, + heroImage, + headings, + url, + repository_url, + tags, +} = Astro.props; + +let titleAndSubtitle = title; +if (description) { + titleAndSubtitle += `: ${description}`; +} +--- + + + {product && } +
+
+
+ + Back to showcase + +
+ { + heroImage && ( + + ) + } +
+ + +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+ +
+

+ Related posts +

+ +
+ +