rework variable replacement logic

We now do it at built time, using remark and rehype plugins.

Author: yuri91

packages/astro-theme/index.ts

@@ -4,6 +4,7 @@ import tailwind from "@astrojs/tailwind";
 import robotsTxt from "astro-robots-txt";
 import publicDir from "astro-public";
 import pagefind from "./pagefind";
+import { remarkReplaceVars, rehypeReplaceVars } from "./replace-variables";
 import svelte from "@astrojs/svelte";
 import astroExpressiveCode, { loadShikiTheme } from "astro-expressive-code";
 import remarkObsidianCallout from "remark-obsidian-callout";
@@ -57,7 +58,9 @@ export default function ThemeIntegration(
 							frames: {},
 						},
 					}),
-					mdx(),
+					mdx({
+						remarkPlugins: [ remarkReplaceVars ],
+					}),
 					sitemap(),
 					tailwind(),
 					robotsTxt(),
@@ -98,8 +101,9 @@ export default function ThemeIntegration(
 				});
 				params.updateConfig({
 					markdown: {
-						remarkPlugins: [[remarkObsidianCallout, {}]],
+						remarkPlugins: [[remarkObsidianCallout, {}], remarkReplaceVars ],
 						rehypePlugins: [
+							rehypeReplaceVars,
 							rehypeSlug, // astro does this automatically but rehype-autolink-headings needs it
 							[
 								rehypeAutolinkHeadings,

packages/astro-theme/layouts/DocsArticle.astro

@@ -176,5 +176,4 @@ function getEditHref(id: string): string {
 
 	import "../lib/callout";
 	import "../lib/terminal-os-tabs";
-	import "../lib/code-replace";
 </script>

packages/astro-theme/lib/code-replace.js

@@ -53,7 +53,8 @@
 		"rehype-autolink-headings": "^7.0.0",
 		"rehype-external-links": "^3.0.0",
 		"rehype-slug": "^6.0.0",
-		"remark-obsidian-callout": "^1.1.3"
+		"remark-obsidian-callout": "^1.1.3",
+		"unist-util-visit": "^5.0.0"
 	},
 	"devDependencies": {
 		"sirv": "^2.0.4"

packages/astro-theme/package.json

@@ -0,0 +1,50 @@
+import { visit } from 'unist-util-visit';
+
+const replacements = {
+	CX_LATEST: "1.1.5",
+	BP_LATEST: "1.0",
+};
+
+export function remarkReplaceVars() {
+	return (tree) => {
+		visit(tree, ['text', 'code', 'inlineCode'], (node) => {
+			if (node.value) {
+				Object.entries(replacements).forEach(([key, value]) => {
+					node.value = node.value.replaceAll(`%${key}%`, value);
+				});
+			}
+		});
+	};
+}
+export function rehypeReplaceVars() {
+	return (tree) => {
+		visit(tree, 'element', (node) => {
+			if (node.properties) {
+				Object.entries(node.properties).forEach(([prop, val]) => {
+					if (typeof val === 'string') {
+						Object.entries(replacements).forEach(([key, value]) => {
+							node.properties[prop] = val.replaceAll(`%${key}%`, value);
+						});
+					}
+				});
+			}
+		});
+		visit(tree, 'mdxJsxFlowElement', (node) => {
+			if (node.attributes) {
+				Object.entries(node.attributes).forEach(([idx, attr]) => {
+					if (typeof attr.value === 'string') {
+						Object.entries(replacements).forEach(([key, value]) => {
+							attr.value = attr.value.replaceAll(`%${key}%`, value);
+						});
+					}
+				});
+			}
+		});
+		visit(tree, 'text', (node) => {
+			Object.entries(replacements).forEach(([key, value]) => {
+				node.value = node.value.replaceAll(`%${key}%`, value);
+			});
+		});
+	};
+}
+

packages/astro-theme/replace-variables.ts

@@ -7,10 +7,12 @@ description: Run Dev Environments in your browser
 import LinkButton from "@leaningtech/astro-theme/components/LinkButton.astro";
 import { DISCORD_URL } from "@/consts.ts";
 
+	<div class="%BP_LATEST%"
+	/>
 <div class="not-prose flex gap-2 mb-2">
 	<img
-		src="https://img.shields.io/badge/version-0.1-orange"
-		alt="Version 0.1"
+		src="https://img.shields.io/badge/version-%BP_LATEST%-orange"
+		alt="Version %BP_LATEST%"
 	/>
 	<a href="https://discord.leaningtech.com/">
 		<img
@@ -27,7 +29,7 @@ import { DISCORD_URL } from "@/consts.ts";
 </div>
 
 <div class="text-lg">
-  Instant, in-browser runtime for Node.js, Python, and Ruby on Rails to power the future of Web-based developer experiences.
+Instant, in-browser runtime for Node.js, Python, and Ruby on Rails to power the future of Web-based developer experiences.
 
 Run Node.js projects in your browser, unmodified (Python, Ruby, and more coming in the future).
 
@@ -43,7 +45,7 @@ See it in action in our [SvelteKit+Vite demo](https://vitedemo.browserpod.io)
 </div>
 
 ```html
-<script src="https://rt.browserpod.io/20251014_102/browserpod.js"></script>
+<script src="https://rt.browserpod.io/%BP_LATEST%/browserpod.js"></script>
 ```
 
 ## Use Cases
@@ -64,45 +66,7 @@ Let AI assistants and Agents run loose on your project, but isolated from the re
 
 BrowserPod has a simple yet powerful [API](/docs/reference).
 
-You can get up an running with few simple steps.
-
-First, you need to boot your pod:
-
-```js
-const pod = await BrowserPod.boot({ apiKey: "...", nodeVersion: "22" /*...*/ });
-```
-
-Then, you need to add your project's files to the pod. Currently, you need to fetch the contents yourself, and re-create the directory structure inside the pod's filesystem. We will add more convenient setup methods in the future:
-
-```js
-await pod.createDirectory("/project");
-for await (const f of myfiles) {
-	const response = await fetch(f.url);
-	const buffer = await response.arrayBuffer();
-	const fd = await pod.createFile(f.path);
-	fd.write(buffer);
-	fd.close();
-}
-```
-
-Then, run any setup step required to initialize your project:
-
-```js
-await pod.run("npm", ["install"], { cwd: "/project" });
-```
-
-And finally, run the dev server (or whatever workload your project provides):
-
-```js
-await pod.run("npm", ["run", "dev"], { cwd: "/project" });
-```
-
-Listening ports are associated with a Portal, which you can embed in the page with an IFrame, or visit from another Tab, or even another device, anywhere in the World.
-To get notified when a portal is created, do:
-
-```js
-pod.onPortal(({url, port} => { /*...load iframe...*/ });
-```
+You can get up an running with few simple steps by following our [Quickstart](/docs/getting-started) page.
 
 ## How does BrowserPod work?
 

pnpm-lock.yaml

@@ -3,7 +3,7 @@ title: Quickstart
 description: Getting started with BrowserPod
 ---
 
-## What BrowserPod Does
+## What BrowserPod Does %BP_LATEST%
 
 **BrowserPod is a technology for running node.js environments entirely client-side.**