WIP browserpod docs

.gitignore

@@ -23,3 +23,4 @@ pnpm-debug.log*
 # content dir copied from astro-theme
 sites/*/src/content/blog
 sites/*/src/content/blogauthors
+sites/*/src/content/showcase

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

@@ -42,6 +42,7 @@ function getEditHref(id: string): string {
 	if (Astro.site?.hostname === "cheerp.io") site = "cheerp";
 	if (Astro.site?.hostname === "cheerpj.com") site = "cheerpj";
 	if (Astro.site?.hostname === "cheerpx.io") site = "cheerpx";
+	if (Astro.site?.hostname === "browserpod.io") site = "browserpod";
 	if (!site) throw new Error("unable to derive site dirname from Astro.site");
 	return `https://github.com/leaningtech/labs/edit/main/sites/${site}/src/content/docs/${id}`;
 }
@@ -175,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/nav.ts

@@ -33,7 +33,8 @@ export type Product =
 	| "cheerpx-for-flash"
 	| "cheerpj-jnlp-runner"
 	| "cheerpj-applet-runner"
-	| "cheerpx-games-runner";
+	| "cheerpx-games-runner"
+	| "browserpod";
 
 export function isProduct(value: unknown): value is Product {
 	return (
@@ -44,7 +45,8 @@ export function isProduct(value: unknown): value is Product {
 		value === "cheerpx-for-flash" ||
 		value === "cheerpj-jnlp-runner" ||
 		value === "cheerpj-applet-runner" ||
-		value === "cheerpx-games-runner"
+		value === "cheerpx-games-runner" ||
+		value === "browserpod"
 	);
 }
 

packages/astro-theme/lib/products.ts

@@ -3,6 +3,7 @@ import { isProduct, type Product } from "./nav";
 import cheerpLogotype from "../assets/branding/products/cheerp/logotype-white.svg";
 import cheerpjLogotype from "../assets/branding/products/cheerpj/logotype-white.svg";
 import cheerpxLogotype from "../assets/branding/products/cheerpx/logotype-white.svg";
+import browserpodLogotype from "../assets/branding/products/browserpod/logotype-white.png";
 import jnlprunnerLogotype from "../assets/branding/products/cheerpj-extensions/jnlp-logo.png";
 import jnlprunnerLogotypeLarge from "../assets/branding/products/cheerpj-extensions/cheerpj-jnlprunner-large.png";
 import appletrunnerLogotype from "../assets/branding/products/cheerpj-extensions/applet-logo.png";
@@ -130,6 +131,19 @@ export const products: { [product in Product]: ProductData } = {
 		github: "https://github.com/leaningtech/cheerpx-games-runner",
 		repositoryName: "cheerpx-games-runner",
 	},
+	browserpod: {
+		id: "browserpod",
+		type: "technology",
+		name: "browserpod",
+		href: "https://browserpod.io",
+		logotype: browserpodLogotype,
+		favicon: baseWithSlash + "browserpod/favicon.png",
+		subtitle: "Run Dev Environments in your browser",
+		description:
+			"Instant, in-browser runtime for Node.js, Python, and Ruby on Rails to power the future of Web-based developer experiences.",
+		github: "https://github.com/leaningtech/browserpod-meta",
+		repositoryName: "browserpod-meta",
+	},
 };
 
 export function productFromUrl(url: URL): ProductData | undefined {
@@ -141,6 +155,8 @@ export function productFromUrl(url: URL): ProductData | undefined {
 			return products.cheerpj3;
 		case "https://cheerpx.io":
 			return products.cheerpx;
+		case "https://browserpod.io":
+			return products.browserpod;
 	}
 
 	// Fallback for labs

packages/astro-theme/package.json

@@ -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/replace-variables.ts

@@ -0,0 +1,49 @@
+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);
+			});
+		});
+	};
+}