Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Version bump #162

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Version bump #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b4a231
Version bump
AtibQur Nov 4, 2024
836b8f4
WIP
AtibQur Nov 6, 2024
8463bb3
Added text/colors
AtibQur Nov 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/astro-theme/consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ export const SITE_TITLE = "Leaning Technologies Developer Hub";
export const SITE_DESCRIPTION =
"Run C/C++, Java, and native code in the browser with our WebAssembly developer tools and JavaScript libraries: Cheerp, CheerpJ, and CheerpX";

export const VERSION = "1.0.4";
export const DISCORD_URL = "https://discord.leaningtech.com";
export const GITHUB_URL = "https://github.com/leaningtech";
export const TWITTER_URL = "https://twitter.com/leaningtech";
Expand Down
2 changes: 1 addition & 1 deletion sites/cheerpx/src/consts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,2 @@
// TODO: make discordbutton component
export { DISCORD_URL } from "@leaningtech/astro-theme/consts";
export { DISCORD_URL, VERSION } from "@leaningtech/astro-theme/consts";
14 changes: 9 additions & 5 deletions sites/cheerpx/src/content/docs/00-overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ description: Native code virtualization as a JavaScript library
---

import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
import { DISCORD_URL } from "@/consts.ts";
import { DISCORD_URL, VERSION } from "@/consts.ts";

<div class="not-prose flex gap-2 mb-2">
<img src="https://img.shields.io/badge/version-1.0-blue" alt="Version 1.0" />
<img
src={`https://img.shields.io/badge/version-${VERSION}-blue`}
alt={`Version ${VERSION}`}
/>
<a href="https://discord.leaningtech.com/" target="_blank">
<img
src="https://img.shields.io/discord/988743885121548329?color=%237289DA&logo=discord&logoColor=ffffff"
Expand Down Expand Up @@ -37,9 +40,10 @@ import { DISCORD_URL } from "@/consts.ts";
repository](https://github.com/leaningtech/cheerpx-meta/)
</div>

```html
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
```
<div style={{ textAlign: "center", margin: "0 auto", color: "#ff6347" }}>
&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
`/cx.js`&gt;&lt;/script&gt;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the end result, and it's quite poor
image

Try to get a better understanding about how the code formatting library works, there must be a way to tell the system to apply the same formatting used for ``` blocks to arbitrary blocks of HTML code

</div>

{/* TODO: add a img */}

Expand Down
26 changes: 17 additions & 9 deletions .../content/docs/10-getting-started/index.md → ...content/docs/10-getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,22 @@ title: Quickstart
description: Getting started with CheerpX
---

import { VERSION } from "@/consts.ts";

## What CheerpX Does

**CheerpX is an x86 virtualization technology for running executables and operating systems entirely client-side.** Upon completing the steps below, you’ll be able to run Linux executables right within your web browser!

## 1. Include CheerpX on your page

No installation is needed. Simply include CheerpX by adding the following script tag in the `<head>` or at the end of the `<body>` section of your HTML:
No installation is needed. Simply include CheerpX by adding the following script tag in the `<head>` or at the end of the `<body>` section of your HTML.

```html
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
```
**Latest version of CheerpX:**

<div style={{ margin: "0 auto", color: "#ff6347" }}>
&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
`/cx.js`&gt;&lt;/script&gt;
</div>

The CheerpX's API is stable and breaking changes can only be introduced on a new major version. All CheerpX builds are immutable so you can trust that, if your application works today, it is going to work identically forever.

Expand All @@ -23,12 +28,13 @@ CheerpX is also available as an ES6 JavaScript module. If you prefer to use the

```html
<script type="module">
import * as CheerpX from "https://cxrtnc.leaningtech.com/1.0.0/cx.esm.js";
// Insert the version number of CheerpX
import * as CheerpX from "https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This does not work, as expected
image

Please use a local build, it does not make sense for me to review a not yet working solution

self.CheerpX = CheerpX;
</script>
```

> [!tip]
> [!note] Note
> When using the ES6 module version, you don't have to assign the imported `CheerpX` to the global scope. This example is intended to keep compatibility with the traditional script inclusion method used in this documentation.

## 2. Create an application instance
Expand All @@ -43,7 +49,8 @@ The example below demonstrates how to set up the file system and devices using [
<head>
<meta charset="utf-8" />
<title>CheerpX Getting Started</title>
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
<!-- Add CheerpX and insert the latest version number -->
<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
<script type="module">
// The read-only disk image from Leaning Technologies' fast cloud backend
const cloudDevice = await CheerpX.CloudDevice.create(
Expand Down Expand Up @@ -77,7 +84,7 @@ The example below demonstrates how to set up the file system and devices using [
</html>
```

> [!tip]
> [!note] Note
> A virtual system image, such as `debian_large`, is a complete snapshot of an operating system's files and configurations. CheerpX uses this image to simulate a Linux environment within your browser, allowing it to execute applications as if they were running on a native Linux system. This example is inteded to quickly get you up-and-running using a pre-deployed disk image from our cloud backend, for a much more self-contained example please see the [Simple Executable tutorial](/docs/tutorials/simple-executable)

## 3. Enable cross-origin isolation
Expand Down Expand Up @@ -134,7 +141,8 @@ Now you can interact with the console to run commands. Make sure to give focus t
<head>
<meta charset="utf-8" />
<title>CheerpX Getting Started</title>
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
<!-- Add CheerpX and insert the latest version number -->
<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
<script type="module">
// The read-only disk image from Leaning Technologies' fast cloud backend
const cloudDevice = await CheerpX.CloudDevice.create(
Expand Down
12 changes: 11 additions & 1 deletion .../src/content/docs/13-tutorials/full_os.md → ...src/content/docs/13-tutorials/full_os.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ title: Full OS
description: Run bash on a custom disk image
---

import { VERSION } from "@/consts.ts";

This tutorial will guide you through creating a custom filesystem from scratch and using it with CheerpX.

## 1. Create an Ext2 image
Expand Down Expand Up @@ -41,6 +43,13 @@ mkfs.ext2 -b 4096 -d cheerpXFS/ cheerpXImage.ext2 600M

## 2. Load CheerpX from your index.html

**Latest version of CheerpX:**

<div style={{ margin: "0 auto", color: "#ff6347" }}>
&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
`/cx.js`&gt;&lt;/script&gt;
</div>

Loading CheerpX is very simple. Create a new file called `index.html` and populate it with the following HTML code.

```html title=index.html
Expand All @@ -49,7 +58,8 @@ Loading CheerpX is very simple. Create a new file called `index.html` and popula
<head>
<meta charset="UTF-8" />
<title>CheerpX Test</title>
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
<!-- Add CheerpX and insert the latest version number -->
<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.js"></script>
</head>
<body style="height: 100%; background: black;"></body>
</html>
Expand Down
11 changes: 10 additions & 1 deletion sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ description: Running a 32-bit Statically Linked Executable using CheerpX
---

import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
import { VERSION } from "@/consts.ts";

This tutorial will guide you through the process of creating a simple 32-bit statically linked Linux executable and running it in a browser using CheerpX. We'll use Docker as an optional method to compile the executable if you're on macOS or another system that cannot directly compile Linux executables. Additionally, we'll configure nginx to serve the necessary files.

Expand Down Expand Up @@ -84,6 +85,13 @@ This confirms that the executable is 32-bit and statically linked.

Let's set up your `index.html` file to load CheerpX, run your executable, and include some basic styling to improve the page's appearance.

**Latest version of CheerpX:**

<div style={{ color: "#ff6347" }}>
&lt;script src=`https://cxrtnc.leaningtech.com/`{VERSION}
`/cx.js`&gt;&lt;/script&gt;
</div>

Open `index.html` and add the following content:

```html title="index.html"
Expand All @@ -92,7 +100,8 @@ Open `index.html` and add the following content:
<head>
<meta charset="UTF-8" />
<title>CheerpX Simple Executable Test</title>
<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
<!-- Add CheerpX and insert the latest version number -->
<script src="https://cxrtnc.leaningtech.com/{VERSION_NUMBER}/cx.esm.js"></script>
</head>
<body style="height: 100%; background: black;">
<pre id="console" style="height: 100%;"></pre>
Expand Down
Loading