shocase page files minimum edition

Author: GabrielaReyna

packages/astro-theme/components/nav/product/Nav.astro

@@ -24,8 +24,10 @@ const firstDocsEntry = getLocalisedProductNav(
 )[0];
 if (!firstDocsEntry) throw new Error("must have a docs entry");
 let blogref = "/blog";
+let showcaseref = "/showcase";
 if (product.id.includes("cheerpj")) {
 	blogref = "/docs/blog";
+	showcaseref = "/docs/showcase";
 }
 ---
 
@@ -53,8 +55,11 @@ if (product.id.includes("cheerpj")) {
 		<Search filterProductId={product.id} />
 
 		<div class="flex items-stretch gap-2 ml-auto px-2">
+			
 			<Link label={t("Docs", Astro.currentLocale)} href={firstDocsEntry.href} />
 			<Link label={t("Blog", Astro.currentLocale)} href={blogref} />
+			<Link label={t("Demos", Astro.currentLocale)} href={showcaseref} />
+			
 		</div>
 
 		<div class="flex items-center gap-4 flex-none text-stone-200">

packages/astro-theme/pages/showcase/[...slug].astro

@@ -0,0 +1,20 @@
+---
+import { CollectionEntry, getCollection } from "astro:content";
+import BlogPost from "../../layouts/BlogPost.astro";
+
+export async function getStaticPaths() {
+	const posts = await getCollection("showcase");
+	return posts.map((project) => ({
+		params: { slug: project.slug },
+		props: project,
+	}));
+}
+type Props = CollectionEntry<"showcase">;
+
+const project = Astro.props;
+const { Content, headings } = await project.render();
+---
+
+<BlogPost {...project.data} {headings} id={project.id}>
+	<Content />
+</BlogPost>

packages/astro-theme/pages/showcase/blog-doodle.png

@@ -0,0 +1,74 @@
+---
+import { getCollection } from "astro:content";
+import { Image } from "astro:assets";
+import BlogPostCard from "../../components/BlogPostCard.astro";
+import Shell from "../../layouts/Shell.astro";
+import Footer from "../../components/Footer.astro";
+import BlogDoodle from "./blog-doodle.png";
+import { productFromUrl } from "../../lib/products";
+import ProductNav from "../../components/nav/product/Nav.astro";
+
+const product = productFromUrl(Astro.url);
+
+const [project1, project2, ...restProjects] = (
+	await getCollection(
+		"showcase",
+		({ data }) =>
+			(!product || data?.tags?.includes(product.name))
+	)
+);
+---
+
+<Shell
+	title={`${product?.name ?? "Demo"} Showcase`}
+	description="Read the latest updates from the Leaning Technologies development team about WebAssembly, compilers, and more."
+>
+	{product && <ProductNav {product} />}
+	<header class="text-center text-stone-100 py-16">
+		<div class="flex justify-center items-center">
+			<Image
+				src={BlogDoodle}
+				width="150"
+				height="129"
+				class="invisible md:visible"
+				alt="person reading a newspaper"
+			/>
+		</div>
+
+		<h1 class="text-5xl font-semibold text-balance">
+			{product?.name ?? "Engineering"} blog
+		</h1>
+		<p class="text-lg text-balance my-8 text-stone-400">
+			News, technical writeups, and announcements directly from the development
+			team.
+		</p>
+		<div
+			class="bg-gradient-to-b from-primary-600 to-transparent opacity-20 w-full h-[40rem] absolute inset-0 -z-10"
+		>
+			<!-- cool background -->
+		</div>
+	</header>
+
+	<section class="pb-24 px-6 mx-auto w-full max-w-screen-xl">
+		<ul class="grid md:grid-cols-2 gap-8 mb-8">
+			{
+				[project1, project2].map((project) => (
+					<li class="flex md:justify-stretch md:items-stretch">
+						{project && <BlogPostCard {project} showMetadata size="wide" />}
+					</li>
+				))
+			}
+		</ul>
+		<ul class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+			{
+				restProjects.map((project) => (
+					<li class="flex md:justify-stretch md:items-stretch">
+						<BlogPostCard {project} showMetadata />
+					</li>
+				))
+			}
+		</ul>
+	</section>
+
+	<Footer />
+</Shell>

packages/astro-theme/pages/showcase/index.astro

@@ -0,0 +1,6 @@
+title: iText
+description: Edit PDFs fully client side using the industry standard iText library converted to JavaScript.
+url: https://cheerpjdemos.leaningtech.com/iTextDemo.html
+heroImage: ./itext.png
+tags:
+  - CheerpJ

sites/cheerp/src/content/showcase/browsercraft.png

@@ -0,0 +1,6 @@
+title: OpenAstexViewer
+description: A complex Java applet with 3D rendering running in any browser using CheerpJ.
+url: https://cheerpjdemos.leaningtech.com/OpenAstexViewer.html
+heroImage: ./openastex.png
+tags:
+  - CheerpJ