Added global CX version variable (#168)

leaningtech · Nov 12, 2024 · 8c50962 · 8c50962
1 parent 7104198
commit 8c50962
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 10 deletions.
diff --git a/packages/astro-theme/lib/code-replace.js b/packages/astro-theme/lib/code-replace.js
@@ -1,4 +1,13 @@
-const replacements = [];
+let CX_LATEST = "1.0.6";
+
+const replacements = [
+	[
+		"%CX_LATEST%",
+		() => {
+			return Promise.resolve(CX_LATEST);
+		},
+	],
+];
 
 document.addEventListener("DOMContentLoaded", () => {
 	const spans = document.querySelectorAll(".expressive-code code span");
@@ -7,9 +16,32 @@ document.addEventListener("DOMContentLoaded", () => {
 		for (const [search, replace] of replacements) {
 			if (span.innerText.includes(search)) {
 				replace().then((s) => {
-					span.innerText = span.innerText.replace(search, s);
+					span.innerHTML = span.innerHTML.replace(search, s);
 				});
 			}
 		}
 	}
+
+	const badge = document.querySelectorAll("img[src*='%CX_LATEST%']");
+	badge.forEach((img) => {
+		const newSrc = img.src.replace("%CX_LATEST%", CX_LATEST);
+		img.src = newSrc;
+	});
 });
+
+// Function to update data-code before button click
+function updateDataCode() {
+	// Find button with data-code attribute (``` copy button)
+	document.querySelectorAll("[data-code]").forEach((btn) => {
+		let originalCode = btn.dataset.code;
+
+		// Replace the placeholder %CX_LATEST% with the newest versions of CX
+		let replacedCode = originalCode.replace(/%CX_LATEST%/g, CX_LATEST);
+
+		// Update the button's data-code attribute with the modified data
+		btn.dataset.code = replacedCode;
+	});
+}
+
+// When page loads, call the function to update the code blocks
+window.addEventListener("DOMContentLoaded", updateDataCode);
diff --git a/sites/cheerpx/src/content/docs/00-overview.mdx b/sites/cheerpx/src/content/docs/00-overview.mdx
@@ -8,7 +8,10 @@ import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
 import { DISCORD_URL } 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-%CX_LATEST%-blue"
+		alt="Version %CX_LATEST%"
+	/>
 	<a href="https://discord.leaningtech.com/" target="_blank">
 		<img
 			src="https://img.shields.io/discord/988743885121548329?color=%237289DA&logo=discord&logoColor=ffffff"
@@ -38,7 +41,7 @@ import { DISCORD_URL } from "@/consts.ts";
 </div>
 
 ```html
-<script src="https://cxrtnc.leaningtech.com/1.0.0/cx.js"></script>
+<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 ```
 
 {/* TODO: add a img */}

diff --git a/sites/cheerpx/src/content/docs/10-getting-started/index.md b/sites/cheerpx/src/content/docs/10-getting-started/index.md
@@ -12,7 +12,7 @@ description: Getting started with CheerpX
 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>
+<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 ```
 
 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.
@@ -23,7 +23,7 @@ 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";
+	import * as CheerpX from "https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.esm.js";
 	self.CheerpX = CheerpX;
 </script>
 ```
@@ -43,7 +43,7 @@ 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>
+		<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 		<script type="module">
 			// The read-only disk image from Leaning Technologies' fast cloud backend
 			const cloudDevice = await CheerpX.CloudDevice.create(
@@ -134,7 +134,7 @@ 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>
+		<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 		<script type="module">
 			// The read-only disk image from Leaning Technologies' fast cloud backend
 			const cloudDevice = await CheerpX.CloudDevice.create(

diff --git a/sites/cheerpx/src/content/docs/13-tutorials/full_os.md b/sites/cheerpx/src/content/docs/13-tutorials/full_os.md
@@ -49,7 +49,7 @@ 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>
+		<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 	</head>
 	<body style="height: 100%; background: black;"></body>
 </html>

diff --git a/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx b/sites/cheerpx/src/content/docs/13-tutorials/simple-executable.mdx
@@ -92,7 +92,7 @@ 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>
+		<script src="https://cxrtnc.leaningtech.com/%CX_LATEST%/cx.js"></script>
 	</head>
 	<body style="height: 100%; background: black;">
 		<pre id="console" style="height: 100%;"></pre>