From 2dd2a7f863cf1089d10d3ebce7d1b364d963d8dc Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Mon, 25 Sep 2023 16:13:44 +0100 Subject: [PATCH 1/6] add callouts --- astro.config.mjs | 9 ++++ package.json | 1 + pnpm-lock.yaml | 13 +++-- src/layouts/DocsArticle.astro | 2 + src/lib/callout.css | 96 +++++++++++++++++++++++++++++++++++ src/lib/callout.js | 33 ++++++++++++ 6 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 src/lib/callout.css create mode 100644 src/lib/callout.js diff --git a/astro.config.mjs b/astro.config.mjs index 40fbfe32..fda33155 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -7,6 +7,7 @@ import pagefind from "astro-pagefind"; import svelte from "@astrojs/svelte"; import prefetch from "@astrojs/prefetch"; import astroExpressiveCode from "astro-expressive-code"; +import remarkObsidianCallout from "remark-obsidian-callout"; const prod = process.env.NODE_ENV === "production"; // https://astro.build/config @@ -29,6 +30,14 @@ export default defineConfig({ shikiConfig: { theme: "dracula", }, + remarkPlugins: [ + [ + remarkObsidianCallout, + { + blockquoteClass: "not-prose", + }, + ], + ], }, compressHTML: prod, build: { diff --git a/package.json b/package.json index dc550d58..0384a1cc 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "prettier": "^3.0.3", "prettier-plugin-astro": "^0.12.0", "prettier-plugin-svelte": "^3.0.3", + "remark-obsidian-callout": "^1.1.3", "typescript": "^5.2.2" }, "prettier": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6d2f8f50..b83dc5bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,6 +64,9 @@ devDependencies: prettier-plugin-svelte: specifier: ^3.0.3 version: 3.0.3(prettier@3.0.3)(svelte@4.2.1) + remark-obsidian-callout: + specifier: ^1.1.3 + version: 1.1.3 typescript: specifier: ^5.2.2 version: 5.2.2 @@ -1116,7 +1119,6 @@ packages: /@types/unist@2.0.8: resolution: {integrity: sha512-d0XxK3YTObnWVp6rZuev3c49+j4Lo8g4L1ZRm9z5L0xpoZycUPshHgczK5gsUMaZOstjVYYi09p5gYvUtfChYw==} - dev: false /@types/unist@3.0.0: resolution: {integrity: sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==} @@ -3751,6 +3753,12 @@ packages: - supports-color dev: false + /remark-obsidian-callout@1.1.3: + resolution: {integrity: sha512-q2jZgPMHP5Wyq0WgeGdwboPoepqN7Ib77iWagEKThZjtl1wUd7/f2tdErdPr/LeZu9K7I6r52XylwhLs5GJi9g==} + dependencies: + unist-util-visit: 4.1.2 + dev: true + /remark-parse@10.0.2: resolution: {integrity: sha512-3ydxgHa/ZQzG8LvC7jTXccARYDcRld3VfcgIIFs7bI6vbRSxJJmzgLEIIoYKyrfhaY+ujuWaf/PJiMZXoiCXgw==} dependencies: @@ -4412,7 +4420,6 @@ packages: resolution: {integrity: sha512-u9njyyfEh43npf1M+yGKDGVPbY/JWEemg5nH05ncKPfi+kBbKBJoTdsogMu33uhytuLlv9y0O7GH7fEdwLdLQw==} dependencies: '@types/unist': 2.0.8 - dev: false /unist-util-is@6.0.0: resolution: {integrity: sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==} @@ -4463,7 +4470,6 @@ packages: dependencies: '@types/unist': 2.0.8 unist-util-is: 5.2.1 - dev: false /unist-util-visit-parents@6.0.1: resolution: {integrity: sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==} @@ -4478,7 +4484,6 @@ packages: '@types/unist': 2.0.8 unist-util-is: 5.2.1 unist-util-visit-parents: 5.1.3 - dev: false /unist-util-visit@5.0.0: resolution: {integrity: sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==} diff --git a/src/layouts/DocsArticle.astro b/src/layouts/DocsArticle.astro index 4161ce05..235f9f73 100644 --- a/src/layouts/DocsArticle.astro +++ b/src/layouts/DocsArticle.astro @@ -122,4 +122,6 @@ const contributeLinks = [ } customElements.define("docs-article", DocsArticle); + + import "../lib/callout"; diff --git a/src/lib/callout.css b/src/lib/callout.css new file mode 100644 index 00000000..adc9f491 --- /dev/null +++ b/src/lib/callout.css @@ -0,0 +1,96 @@ +blockquote[data-callout] { + @apply p-4 px-5 my-3 rounded-md text-slate-200; +} + +.callout-title { + @apply flex items-center gap-1 mb-1; +} + +.callout-title-icon svg { + @apply w-5 h-5 mr-1; +} + +.callout-title-text { + @apply font-semibold; +} + +blockquote[data-expandable="true"] .callout-title { + cursor: pointer; + user-select: none; +} + +blockquote[data-expandable="true"][data-expanded="false"] + > *:not(.callout-title) { + display: none; +} + +.callout-caret { + transform: rotate(0); + transition: transform 0.2s ease-out; +} + +blockquote[data-expandable="true"][data-expanded="false"] .callout-caret { + transform: rotate(-90deg); +} + +/* Fallback colours */ +blockquote[data-callout] { + @apply bg-blue-400 bg-opacity-10; + + & .callout-title { + @apply text-blue-400; + } +} + +blockquote[data-callout="tip"], +blockquote[data-callout="hint"], +blockquote[data-callout="important"] { + @apply bg-cyan-400 bg-opacity-10; + + & .callout-title { + @apply text-cyan-400; + } +} + +blockquote[data-callout="success"], +blockquote[data-callout="check"], +blockquote[data-callout="done"] { + @apply bg-green-400 bg-opacity-10; + + & .callout-title { + @apply text-green-400; + } +} + +blockquote[data-callout="question"], +blockquote[data-callout="help"], +blockquote[data-callout="faq"] { + @apply bg-yellow-400 bg-opacity-10; + + & .callout-title { + @apply text-yellow-400; + } +} + +blockquote[data-callout="warning"], +blockquote[data-callout="caution"], +blockquote[data-callout="attention"] { + @apply bg-orange-400 bg-opacity-10; + + & .callout-title { + @apply text-orange-400; + } +} + +blockquote[data-callout="failure"], +blockquote[data-callout="fail"], +blockquote[data-callout="missing"], +blockquote[data-callout="danger"], +blockquote[data-callout="error"], +blockquote[data-callout="bug"] { + @apply bg-red-400 bg-opacity-10; + + & .callout-title { + @apply text-red-400; + } +} diff --git a/src/lib/callout.js b/src/lib/callout.js new file mode 100644 index 00000000..082b0198 --- /dev/null +++ b/src/lib/callout.js @@ -0,0 +1,33 @@ +import "./callout.css"; + +function transition(cb) { + if (document.startViewTransition) { + document.startViewTransition(cb); + } else { + cb(); + } +} + +document.addEventListener("DOMContentLoaded", () => { + const callouts = document.querySelectorAll( + "blockquote[data-callout][data-expandable=true]", + ); + for (const callout of callouts) { + const title = callout.querySelector(".callout-title"); + + // Add caret svg icon + title.innerHTML += ``; + + // Make expandable + title.addEventListener("click", () => { + const { dataset } = callout; + transition(() => { + if (dataset.expanded === "true") { + dataset.expanded = "false"; + } else { + dataset.expanded = "true"; + } + }); + }); + } +}); From f3ecade0f46c46ce2de2cef07702f426b20c63b9 Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Mon, 25 Sep 2023 16:36:24 +0100 Subject: [PATCH 2/6] use postcss nesting plugin Although nesting is supported in most browsers now, this silences a vite warning and transpiles it to non-nested CSS. --- postcss.config.cjs | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 postcss.config.cjs diff --git a/postcss.config.cjs b/postcss.config.cjs new file mode 100644 index 00000000..bab04a41 --- /dev/null +++ b/postcss.config.cjs @@ -0,0 +1,7 @@ +module.exports = { + plugins: { + "tailwindcss/nesting": {}, + tailwindcss: {}, + autoprefixer: {}, + }, +}; From a7542729c0be9d4a26f29a45d1c49a598ee87cb5 Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Mon, 25 Sep 2023 17:53:08 +0100 Subject: [PATCH 3/6] add operating system tabs to terminal blocks --- src/layouts/DocsArticle.astro | 1 + src/lib/terminal-os-tabs.css | 37 +++++++++++++++ src/lib/terminal-os-tabs.js | 88 +++++++++++++++++++++++++++++++++++ 3 files changed, 126 insertions(+) create mode 100644 src/lib/terminal-os-tabs.css create mode 100644 src/lib/terminal-os-tabs.js diff --git a/src/layouts/DocsArticle.astro b/src/layouts/DocsArticle.astro index 235f9f73..f5a8c105 100644 --- a/src/layouts/DocsArticle.astro +++ b/src/layouts/DocsArticle.astro @@ -124,4 +124,5 @@ const contributeLinks = [ customElements.define("docs-article", DocsArticle); import "../lib/callout"; + import "../lib/terminal-os-tabs"; diff --git a/src/lib/terminal-os-tabs.css b/src/lib/terminal-os-tabs.css new file mode 100644 index 00000000..dcd82341 --- /dev/null +++ b/src/lib/terminal-os-tabs.css @@ -0,0 +1,37 @@ +.expressive-code { + @apply my-4; + + & code { + @apply !font-mono; + } + + & .has-tabs { + justify-content: start !important; + @apply !p-2; + + /* Remove traffic lights */ + &::before, + & .title { + display: none; + } + + /* Allow buttons to be clicked */ + &::after { + pointer-events: none; + } + + & .tab-button { + border: none; + border-radius: 0; + background: transparent; + cursor: pointer; + + @apply text-slate-500; + + &.is-active, + &:hover { + @apply text-slate-300; + } + } + } +} diff --git a/src/lib/terminal-os-tabs.js b/src/lib/terminal-os-tabs.js new file mode 100644 index 00000000..81482169 --- /dev/null +++ b/src/lib/terminal-os-tabs.js @@ -0,0 +1,88 @@ +import "./terminal-os-tabs.css"; + +const replacements = [ + [ + /^\/opt\/cheerp\/bin\/([^ ]+)/, + { + win: "C:\\cheerp\\bin\\$1.exe", + mac: "/Applications/cheerp/bin/$1", + linux: "/opt/cheerp/bin/$1", + }, + ], +]; + +let os = localStorage.getItem("os") ?? getOs(); + +function getOs() { + if (navigator.platform.indexOf("Win") != -1) return "win"; + if (navigator.platform.indexOf("Mac") != -1) return "mac"; + return "linux"; +} + +document.addEventListener("DOMContentLoaded", () => { + const figures = document.querySelectorAll( + // ```shell blocks + ".expressive-code figure.is-terminal", + ); + + const updateFuncs = []; + + for (const figure of figures) { + const commands = figure.querySelectorAll(".ec-line > span:first-child"); + let needsTabs = false; + + for (const command of commands) { + // Skip if no match + let didMatch = false; + for (const [regex] of replacements) { + if (regex.test(command.innerText)) { + didMatch = true; + break; + } + } + if (!didMatch) continue; + + // Queue update + const originalText = command.innerText; + updateFuncs.push(() => { + command.innerText = originalText; + for (const [regex, obj] of replacements) { + command.innerText = command.innerText.replace(regex, obj[os] ?? "$0"); + } + }); + + needsTabs = true; + } + + if (needsTabs) { + const header = figure.querySelector(".header"); + header.classList.add("has-tabs"); + header.appendChild(makeTabButton("Windows", "win")); + header.appendChild(makeTabButton("macOS", "mac")); + header.appendChild(makeTabButton("Linux", "linux")); + } + } + + function makeTabButton(label, osValue) { + const button = document.createElement("button"); + button.classList.add("tab-button"); + button.innerText = label; + button.addEventListener("click", () => { + os = osValue; + localStorage.setItem("os", os); + update(); + }); + updateFuncs.push(() => { + button.classList.toggle("is-active", os === osValue); + }); + return button; + } + + function update() { + for (const updateFunc of updateFuncs) { + updateFunc(); + } + } + + update(); +}); From 5f0674718dfbf2b9dc1a242d0c8830d589571059 Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Mon, 25 Sep 2023 17:53:24 +0100 Subject: [PATCH 4/6] format cheerp codeblocks --- .../00-installation/10-source/01-linux.md | 16 ------------- .../01-tutorials/00-getting-started/index.md | 16 +++++-------- .../docs/cheerp/01-tutorials/01-hello-wasm.md | 24 +++++++++++++------ .../docs/cheerp/01-tutorials/02-dom.md | 7 ++++-- .../docs/cheerp/01-tutorials/03-pong.md | 24 +++++++++---------- .../docs/cheerp/01-tutorials/04-webworkers.md | 10 ++++---- 6 files changed, 45 insertions(+), 52 deletions(-) diff --git a/src/content/docs/cheerp/00-installation/10-source/01-linux.md b/src/content/docs/cheerp/00-installation/10-source/01-linux.md index dc71bb44..59e9e7e7 100644 --- a/src/content/docs/cheerp/00-installation/10-source/01-linux.md +++ b/src/content/docs/cheerp/00-installation/10-source/01-linux.md @@ -174,22 +174,6 @@ cmake --install build_asmjs cd ../.. ``` -## "Hello, World" in Cheerp - -```cpp -//save as example.cpp -#include - -int main() -{ - std::cout << "Hello, World!\n"; - return 0; -} -``` - -`/opt/cheerp/bin/clang++ example.cpp -o cheerp_example.js -O3 && node cheerp_example.js` -Should compile and execute the relevant file. - ## Cheerp unit tests ```bash diff --git a/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md b/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md index dc843d50..2ef4631b 100644 --- a/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md +++ b/src/content/docs/cheerp/01-tutorials/00-getting-started/index.md @@ -10,18 +10,14 @@ Cheerp in itself has no dependencies, but the recommended workflow and the tutor - an HTTP server (such as http-server) - a web browser -If you don't have these, see [recommended workflow](/cheerp/tutorials/getting-started/recommended-workflow). If you're not sure, make sure that the following commands work in your terminal: - -1. `/opt/cheerp/bin/clang++ --version` (`C:\cheerp\bin\clang++ --version` on Windows systems) -2. `nodejs --version` -3. `http-server -o` +If you don't have these, see [recommended workflow](/cheerp/tutorials/getting-started/recommended-workflow). ## Compiling your first application You are now ready for compiling your first Web application using Cheerp. Move to a folder of your choice and save the following C++ program as `hello.cpp`. -```cpp +```cpp title="hello.cpp" // The cheerp/clientlib.h header contains declarations for the browser APIs #include @@ -34,19 +30,19 @@ void webMain() You can then compile this program using the following command line: -``` +```shell /opt/cheerp/bin/clang++ -target cheerp hello.cpp -o hello.js ``` Great, you have compiled your first program with Cheerp. You can now run the generated JavaScript directly with -``` -nodejs hello.js +```shell +node hello.js ``` You can also save this HTML file as `hello.html`: -```html +```html title="hello.html" diff --git a/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md b/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md index 80356cfe..6403a089 100644 --- a/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md +++ b/src/content/docs/cheerp/01-tutorials/01-hello-wasm.md @@ -14,15 +14,21 @@ I picked a computational heavy task: "Counting how many primes are smaller than First, save [segmented_sieve.cpp](/cheerp/tutorials/hello_wasm/segmented_sieve.cpp) on your computer and try to compile it natively: -`g++ segmented_sieve.cpp -o segmented_sieve -O3` +```shell +g++ segmented_sieve.cpp -o segmented_sieve -O3 +``` + (or `clang++` or equivalent command line C++ compiler) and then we run it: -`./segmented_sieve` + +```shell +./segmented_sieve +``` the output to the console will be something like: -``` +```text frame="terminal" 4.0052e-05s to sieve in the interval (1, 10) 4 primes found 5.8115e-05s to sieve in the interval (1, 100) 25 primes found 2.2484e-05s to sieve in the interval (1, 1000) 168 primes found @@ -46,7 +52,7 @@ and then we run it: the output to the console will be something like: -``` +```text frame="terminal" 0.006s to sieve in the interval (1, 10) 4 primes found 0.007s to sieve in the interval (1, 100) 25 primes found 0.008s to sieve in the interval (1, 1000) 168 primes found @@ -62,7 +68,7 @@ It works, internally it does equivalents calculations. There is a performance sl Want to see it inside a browser? -```html +```html title="segmented_sieve.html" @@ -87,7 +93,9 @@ Now we will get to the serious stuff, compiling to a mix of JavaScript (that wil The command line it's basically the same, just changing the target: -/opt/cheerp/bin/clang++ -target cheerp-wasm segmented_sieve.cpp -o segmented_sieve_wasm.js -O3 +```shell +/opt/cheerp/bin/clang++ -target cheerp-wasm segmented_sieve.cpp -o segmented_sieve_wasm.js -O3 +``` Note that we are using the **cheerp-wasm** target, not the **cheerp** target. This marks all code to be compiled into wasm (or asmjs) by default, including the C and C++ standard libraries. @@ -126,7 +134,9 @@ Take the previous html file, and change `segmented_sieve.js` to `segmented_sieve Next, run a web server: -`http-server -o` +```shell +http-server -o +``` This will open a new tab on your favorite browser with a list of the files in the current folder. Choose `segmented_sieve.html` (or whatever name you gave to the file), way few second for the execution and open the console. You should be able to see similar results to the one computed via `nodejs`. diff --git a/src/content/docs/cheerp/01-tutorials/02-dom.md b/src/content/docs/cheerp/01-tutorials/02-dom.md index 9ff76622..df7b1f72 100644 --- a/src/content/docs/cheerp/01-tutorials/02-dom.md +++ b/src/content/docs/cheerp/01-tutorials/02-dom.md @@ -63,11 +63,14 @@ void webMain() ``` Compiling with: -`/opt/cheerp/bin/clang++ -O3 dom.cpp -o dom.js` + +```shell +/opt/cheerp/bin/clang++ -O3 dom.cpp -o dom.js +``` Now we need a [html file](/cheerp/tutorials/dom_access/dom.html): -```html +```html title="dom.html" diff --git a/src/content/docs/cheerp/01-tutorials/03-pong.md b/src/content/docs/cheerp/01-tutorials/03-pong.md index 4f6bde55..c5f40aab 100644 --- a/src/content/docs/cheerp/01-tutorials/03-pong.md +++ b/src/content/docs/cheerp/01-tutorials/03-pong.md @@ -8,7 +8,7 @@ This tutorial will guide you through the steps to create a simple game of pong i Let's create a new C++ file `pong.cpp` as follows: -```cpp +```cpp title="pong.cpp" #include #include @@ -33,7 +33,7 @@ This command will generate two files: a JavaScript loader (`pong.js`) and a WebA All we need to run this Hello World is a simple HTML page: -```html +```html title="pong.html" @@ -63,7 +63,7 @@ What we will do in this tutorial is keeping all the Canvas manipulation in the J Let's have a look a this example: -```cpp +```cpp title="pong.cpp" #include #include @@ -120,7 +120,7 @@ For this, we will create a `Platform` object, which will be the only controllabl Let’s create a new class for the Platform. We will **not** use the [[cheerp::genericjs]] attribute on this class so that all it’s code will be compiled in WebAssembly. -```cpp +```cpp title="pong.cpp" class Platform { private: @@ -170,7 +170,7 @@ The class has some basic properties and a render function which then delegates t We now need an instance of the Platform object, let’s put it in the global scope for convenience, and also add a top level function `mainLoop` to handle the main loop of the application. This function will clear the background and then render the platform: -```cpp +```cpp title="pong.cpp" // Define a global instance for the platform object. A more serious game // would manage these objects dynamically Platform platform(185, 380, 30, 7); @@ -215,7 +215,7 @@ We now need to be able to move the platform around. We will add a `keydown` even Let's add two new methods to `Platform`: -```cpp +```cpp title="pong.cpp" void moveLeft() { x -= 5; @@ -229,7 +229,7 @@ Let's add two new methods to `Platform`: as well as a keyDown event handler to the Graphics class which lives in `genericjs` code. -```cpp +```cpp title="pong.cpp" void Graphics::keyDownHandler(client::KeyboardEvent* e) { if(e->get_keyCode() == 37) @@ -241,7 +241,7 @@ void Graphics::keyDownHandler(client::KeyboardEvent* e) Let's also register an `EventListener` in `Graphics::initializeCanvas`. -```cpp +```cpp title="pong.cpp" client::document.addEventListener("keydown", cheerp::Callback(keyDownHandler)); ``` @@ -253,7 +253,7 @@ You should now be able to move the paddle around like this: We'll now focus on the ball. We will create a `Ball` class, including a basic physical model of position and velocity. We will keep this class in WebAssembly, so no need for a `[[cheerp::genericjs]]` tag. -```cpp +```cpp title="pong.cpp" class Ball { private: @@ -301,7 +301,7 @@ The `Ball` class has methods to update its position, check for collisions and fo To visualize our ball on screen we need to implement `Graphics::drawCircle`: -```cpp +```cpp title="pong.cpp" static void drawCircle(int x, int y, int radius, int rgb) { int r = rgb&0xff; @@ -316,13 +316,13 @@ To visualize our ball on screen we need to implement `Graphics::drawCircle`: And, as with `Platform`, instantiate a `Ball` object in the global scope. -```cpp +```cpp title="pong.cpp" Ball ball(200, 200, 2, -2); ``` We will now expand the `mainLoop` method to call them in sequence. `Ball::collide` also checks if the ball has gone past the bottom of the screen, which is our losing condition, and `mainLoop` is going to report that by drawing some text. -```cpp +```cpp title="pong.cpp" void mainLoop() { // Reset the background to black diff --git a/src/content/docs/cheerp/01-tutorials/04-webworkers.md b/src/content/docs/cheerp/01-tutorials/04-webworkers.md index 51b41493..753d21bf 100644 --- a/src/content/docs/cheerp/01-tutorials/04-webworkers.md +++ b/src/content/docs/cheerp/01-tutorials/04-webworkers.md @@ -22,7 +22,7 @@ Cheerp is designed to give you full access to all browser APIs, including WebWor You can use Cheerp to generate JavaScript running in the Worker, JavaScript in the main page that run a Worker, or both. Below you find a trivial example ported from http://www.html5rocks.com/en/tutorials/workers/basics/. -```cpp +```cpp title="cheerpWorkerHost.cpp" // cheerpWorkerHost.cpp: Code to include in the HTML page #include #include @@ -39,8 +39,8 @@ void webMain() } ``` -```cpp -// cheerpWorker.cpp: Code that run inside the worker +```cpp title="cheerpWorker.cpp" +// cheerpWorker.cpp: Code that runs inside the worker #include #include @@ -58,14 +58,14 @@ void webMain() You can build these files using the following commands: -``` +```shell /opt/cheerp/bin/clang++ -O3 cheerpWorkerHost.cpp -o cheerpWorkerHost.js /opt/cheerp/bin/clang++ -O3 cheerpWorker.cpp -o cheerpWorker.js ``` For your convenience here is the needed HTML to execute the code -```html +```html title="cheerpWorker.html" From 3739bb09622b1e5254848a19e31260e6fe3f88ce Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Mon, 25 Sep 2023 17:58:40 +0100 Subject: [PATCH 5/6] format more cheerp codeblocks --- src/content/docs/cheerp/00-installation/01-ppa.md | 8 ++++---- src/content/docs/cheerp/00-installation/02-rhel8.md | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/docs/cheerp/00-installation/01-ppa.md b/src/content/docs/cheerp/00-installation/01-ppa.md index 4c4f0c71..2821bfa3 100644 --- a/src/content/docs/cheerp/00-installation/01-ppa.md +++ b/src/content/docs/cheerp/00-installation/01-ppa.md @@ -12,13 +12,13 @@ To add it to your system you have two options: add the following line to /etc/apt/sources.list -``` +```sh deb http://ppa.launchpad.net/leaningtech-dev/cheerp-ppa/ubuntu focal main ``` and import the key for apt with the command -``` +```sh sudo apt-key adv --keyserver keyserver.ubuntu.com --recv-keys 84540D4B9BF457D5 sudo apt-get update ``` @@ -29,7 +29,7 @@ or run the following command -``` +```sh sudo add-apt-repository ppa:leaningtech-dev/cheerp-ppa sudo apt-get update ``` @@ -38,6 +38,6 @@ sudo apt-get update To install all cheerp components, run -``` +```sh apt-get install cheerp-core ``` diff --git a/src/content/docs/cheerp/00-installation/02-rhel8.md b/src/content/docs/cheerp/00-installation/02-rhel8.md index 74b4c33b..0016a7b2 100644 --- a/src/content/docs/cheerp/00-installation/02-rhel8.md +++ b/src/content/docs/cheerp/00-installation/02-rhel8.md @@ -10,7 +10,7 @@ We provide a repo with stable builds at https://rpm.leaningtech.com/stable and a To install Cheerp just add the repo configuration file (Stable in this case): -``` +```sh cat << EOF > /etc/yum.repos.d/cheerp.repo [Cheerp-Stable] name=Cheerp Stable @@ -23,7 +23,7 @@ EOF And install the `cheerp-core` package: -``` +```sh yum install cheerp-core ``` From 44f77ca75f039a1e93840b19a1243ecca94476bf Mon Sep 17 00:00:00 2001 From: Alex Bates Date: Wed, 27 Sep 2023 15:59:51 +0100 Subject: [PATCH 6/6] inline stylesheets always Mitigates cache problem --- astro.config.mjs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/astro.config.mjs b/astro.config.mjs index fda33155..6b37e72a 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -42,7 +42,7 @@ export default defineConfig({ compressHTML: prod, build: { format: "file", - inlineStylesheets: "auto", + inlineStylesheets: "always", }, trailingSlash: "never", });