Add CheerpJ version switcher (#18)

leaningtech · Sep 28, 2023 · 9517d8d · 9517d8d
1 parent 47ea3eb
commit 9517d8d
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 32 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -8,6 +8,7 @@ import svelte from "@astrojs/svelte";
 import prefetch from "@astrojs/prefetch";
 import astroExpressiveCode from "astro-expressive-code";
 import remarkObsidianCallout from "remark-obsidian-callout";
+import { resolve } from "node:path";
 const prod = process.env.NODE_ENV === "production";
 
 // https://astro.build/config
@@ -45,4 +46,14 @@ export default defineConfig({
 		inlineStylesheets: "always",
 	},
 	trailingSlash: "never",
+	vite: {
+		resolve: {
+			alias: [
+				{
+					find: "@",
+					replacement: resolve("./src/"),
+				},
+			],
+		},
+	},
 });
diff --git a/src/components/BlogPostPill.astro b/src/components/BlogPostPill.astro
@@ -11,7 +11,7 @@ const { post } = Astro.props;
 
 <a
 	href={`/blog/${post.slug}`}
-	class="rounded-full bg-primary-600 bg-opacity-10 text-primary-600 px-3 py-1 flex items-center gap-1 max-w-full overflow-hidden whitespace-nowrap"
+	class="not-prose rounded-full bg-primary-600 bg-opacity-10 text-primary-600 px-3 py-1 flex items-center gap-1 max-w-full overflow-hidden whitespace-nowrap"
 >
 	<div class="overflow-hidden overflow-ellipsis grow">
 		{post.data.shortTitle ?? post.data.title}

diff --git a/src/components/DocsSidebar.astro b/src/components/DocsSidebar.astro
@@ -3,10 +3,9 @@ import type { NavDirectory } from "../lib/nav";
 
 import { Icon } from "astro-icon";
 import DocsSidebarNavEntry from "./DocsSidebarNavEntry.astro";
-import BlogPostPill from "./BlogPostPill.astro";
-import { latestFeaturedPost } from "../lib/blog";
 import { productFromUrl as productFromUrl } from "../lib/products";
 import { Image } from "astro:assets";
+import ProductVersionSwitcher from "./ProductVersionSwitcher.astro";
 
 interface Props {
 	directory: NavDirectory | undefined;
@@ -37,8 +36,6 @@ const { directory } = Astro.props;
 	},
 ];*/
 
-const post = await latestFeaturedPost(Astro.url);
-
 const product = productFromUrl(Astro.url);
 if (!product) {
 	throw new Error(`unable to derive product from url: ${Astro.url.pathname}`);
@@ -50,10 +47,10 @@ if (!product) {
 	class="bg-stone-800 lg:bg-stone-900 fixed lg:sticky top-[65px] z-10 px-8 pb-8 w-full sm:w-80 h-[calc(100vh-4rem)] overflow-y-auto lg:text-sm"
 >
 	<div class="block pt-8 mb-8 lg:sticky top-0 lg:bg-stone-900">
-		<a href={product.href} class="block mb-4">
+		<a href={product.href} class="block">
 			<Image src={product.logotype} alt={product.name} class="h-20" />
 		</a>
-		{post && <BlogPostPill {post} />}
+		{product.id.startsWith("cheerpj") && <ProductVersionSwitcher {product} />}
 
 		<div
 			class="hidden absolute bottom--8 lg:block w-full h-8 bg-gradient-to-b from-stone-900 pointer-events-none"

diff --git a/src/components/LatestBlogPostPill.astro b/src/components/LatestBlogPostPill.astro
@@ -0,0 +1,8 @@
+---
+import { latestFeaturedPost } from "@/lib/blog";
+import BlogPostPill from "./BlogPostPill.astro";
+
+const post = await latestFeaturedPost(Astro.url);
+---
+
+{post && <BlogPostPill {post} />}
diff --git a/src/components/ProductVersionSwitcher.astro b/src/components/ProductVersionSwitcher.astro
@@ -0,0 +1,39 @@
+---
+import type { ProductData } from "@/lib/products";
+
+interface Props {
+	product: ProductData;
+}
+
+const { product } = Astro.props;
+---
+
+<div class="flex items-center justify-end gap-2">
+	{product.id === "cheerpj3" && <div>Preview</div>}
+
+	<label for="version-switcher" class="sr-only">Version</label>
+	<select
+		class="px-2 py-1 rounded bg-stone-950 text-stone-400 font-medium"
+		id="version-switcher"
+	>
+		<option value="cheerpj3" selected={product.id === "cheerpj3"}> v3</option>
+		<option value="cheerpj2" selected={product.id === "cheerpj2"}> v2</option>
+	</select>
+</div>
+
+<script>
+	const select = document.getElementById(
+		"version-switcher",
+	) as HTMLSelectElement;
+	select.addEventListener("change", async () => {
+		let href = location.pathname.replace(/\/cheerpj\d/, `/${select.value}`);
+
+		// If the page doesn't exist, redirect to the homepage
+		const req = await fetch(href, { method: "HEAD" });
+		if (req.status === 404) {
+			href = `/${select.value}`;
+		}
+
+		location.href = href;
+	});
+</script>
diff --git a/src/content/docs/cheerp/index.mdx b/src/content/docs/cheerp/index.mdx
@@ -3,7 +3,10 @@ title: Cheerp
 subtitle: The C/C++ compiler for web applications
 ---
 
-import LinkButton from "../../../components/LinkButton.astro";
+import LinkButton from "@/components/LinkButton.astro";
+import LatestBlogPostPill from "@/components/LatestBlogPostPill.astro";
+
+<LatestBlogPostPill />
 
 Cheerp is an open-source **C/C++ to WebAssembly compiler**. It compiles virtually any C/C++ code to WebAssembly and JavaScript.
 

diff --git a/src/content/docs/cheerpj2/index.md → src/content/docs/cheerpj2/index.mdx b/src/content/docs/cheerpj2/index.md → src/content/docs/cheerpj2/index.mdx
@@ -1,8 +1,12 @@
 ---
-title: CheerpJ 2
+title: CheerpJ
 subtitle: JVM replacement for the browser
 ---
 
+import LatestBlogPostPill from "@/components/LatestBlogPostPill.astro";
+
+<LatestBlogPostPill />
+
 CheerpJ is a **drop-in replacement** for the JVM, and is compatible with 100% of Java 8, including Swing, reflection and dynamic class loading.
 
 ![](/cheerpj2/assets/cheerpj_visual_2.png)
@@ -19,18 +23,24 @@ With CheerpJ, you can:
 Know what you're building? Jump straight to the relevant tutorial:
 
 <div class="not-prose grid grid-cols-2 font-medium gap-2 text-stone-100">
-  <a href="/cheerpj2/getting-started/Java-app" class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg">
-    Application
-  </a>
-  <a href="/cheerpj2/getting-started/Java-applet" class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg">
-    Applet
-  </a>
-  <!--<a href="/cheerpj2/getting-started/Java-app" class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg">
-    Java Web Start / JNLP
-  </a>-->
-  <a href="/cheerpj2/getting-started/Java-library" class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg">
-    Library
-  </a>
+	<a
+		href="/cheerpj2/getting-started/Java-app"
+		class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg"
+	>
+		Application
+	</a>
+	<a
+		href="/cheerpj2/getting-started/Java-applet"
+		class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg"
+	>
+		Applet
+	</a>
+	<a
+		href="/cheerpj2/getting-started/Java-library"
+		class="px-8 py-6 bg-stone-800 hover:bg-stone-700 text-lg"
+	>
+		Library
+	</a>
 </div>
 
 ## What is CheerpJ?

diff --git a/src/content/docs/cheerpj3/index.mdx b/src/content/docs/cheerpj3/index.mdx
@@ -1,9 +1,12 @@
 ---
-title: CheerpJ 3
+title: CheerpJ
 subtitle: JVM replacement for the browser
 ---
 
-import BlogPostCard from "../../../components/BlogPostCard.astro";
+import BlogPostCard from "@/components/BlogPostCard.astro";
+import LatestBlogPostPill from "@/components/LatestBlogPostPill.astro";
+
+<LatestBlogPostPill />
 
 **Coming soon!**
 

diff --git a/src/content/docs/cheerpx/index.md → src/content/docs/cheerpx/index.mdx b/src/content/docs/cheerpx/index.md → src/content/docs/cheerpx/index.mdx
@@ -3,6 +3,10 @@ title: CheerpX
 subtitle: Native code virtualization for the modern Web
 ---
 
+import LatestBlogPostPill from "@/components/LatestBlogPostPill.astro";
+
+<LatestBlogPostPill />
+
 CheerpX is a state-of-the-art x86 virtual machine that runs purely client side in your browser.
 
 CheerpX is **coming soon**. [Join our Discord](https://discord.gg/qBMHpK9Kqv) for updates!
@@ -24,11 +28,14 @@ Try this live at: [https://repl.leaningtech.com/](https://repl.leaningtech.com/)
 Yuri Iozzelli talks about CheerpX internals at WasmSF:
 
 <div style="width:100%; display: flex; place-content:center;">
-<div style="width:70%; max-width:700px; position:relative;">
-<div style="padding-top: 60%">
-<iframe width="100%" height="100%" style="position:absolute; top:0; right:0; left:0; bottom:0;"
-src="https://www.youtube.com/embed/7JUs4c99-mo">
-</iframe>
-</div>
-</div>
+	<div style="width:70%; max-width:700px; position:relative;">
+		<div style="padding-top: 60%">
+			<iframe
+				width="100%"
+				height="100%"
+				style="position:absolute; top:0; right:0; left:0; bottom:0;"
+				src="https://www.youtube.com/embed/7JUs4c99-mo"
+			></iframe>
+		</div>
+	</div>
 </div>
diff --git a/src/lib/products.ts b/src/lib/products.ts
@@ -26,7 +26,7 @@ export const products: { [product in Product]: ProductData } = {
 	},
 	cheerpj2: {
 		id: "cheerpj2",
-		name: "CheerpJ 2",
+		name: "CheerpJ",
 		href: "/cheerpj2",
 		logotype: cheerpjLogotype,
 		favicon: "/cheerpj2/favicon.ico",
@@ -36,7 +36,7 @@ export const products: { [product in Product]: ProductData } = {
 	},
 	cheerpj3: {
 		id: "cheerpj3",
-		name: "CheerpJ 3",
+		name: "CheerpJ",
 		href: "/cheerpj3",
 		logotype: cheerpjLogotype,
 		favicon: "/cheerpj2/favicon.ico",