Latestblog

README.md

@@ -0,0 +1,42 @@
+# Labs
+
+Labs is the monorepo codebase for Leaning Technologies developer sites. It contains technical writing (documentation and blog posts) for Cheerp, CheerpJ, CheerpX and other projects.
+
+Visit our sites:
+
+- [Labs](https://labs.leaningtech.com/)
+- [Cheerp.io](https://cheerp.io/)
+- [CheerpX.io](https://cheerpx.io/)
+- [CheerpJ.com](https://cheerpj.com/)
+
+# Running locally
+
+## Setup
+
+Make sure you have [Node.js](https://nodejs.org/en/download/package-manager) and [pnpm](https://pnpm.io/installation) installed.
+
+## Clone this repository
+
+```shell
+git clone https://github.com/leaningtech/labs.git
+```
+
+## Install dependencies
+
+```shell
+cd labs
+pnpm install
+```
+
+## Run a site
+
+The sites under this repository must be run individually. Pick a site you want to run, for example [Cheerp.io](https://cheerp.io/):
+
+```shell
+cd /sites/cheerp
+pnpm start
+```
+
+# Contributing
+
+For more information about contributing, please [visit this page](https://labs.leaningtech.com/docs/contributing)

packages/astro-theme/components/BlogPostCard.astro

@@ -3,6 +3,9 @@ import { getEntry, type CollectionEntry } from "astro:content";
 import FormattedDate from "./FormattedDate.astro";
 import { resolveAuthors } from "../lib/blog";
 import { Image } from "astro:assets";
+import { productFromUrl } from "../lib/products";
+
+const product = productFromUrl(Astro.url);
 
 interface Props {
 	post: CollectionEntry<"blog"> | CollectionEntry<"blog">["slug"];
@@ -16,6 +19,9 @@ const post =
 		? await getEntry("blog", postOrSlug)
 		: postOrSlug;
 const authors = await resolveAuthors(post.data.authors);
+
+//choose hover link color based on product
+const productName = typeof product === "undefined" ? "Labs" : product.name;
 ---
 
 <a
@@ -35,7 +41,10 @@ const authors = await resolveAuthors(post.data.authors);
 	}
 	<h3
 		class:list={{
-			"font-bold text-balance text-white group-hover:text-primary-400 grow": true,
+			"font-bold text-balance text-white grow": true,
+			"group-hover:text-cheerp grow": productName === "Cheerp",
+			"group-hover:text-[#6386a5] grow": productName === "CheerpX",
+			"group-hover:text-primary-400 grow": productName === "Labs",
 			"text-2xl leading-7": size === "wide",
 			"text-xl leading-6": size === "narrow",
 		}}

packages/astro-theme/components/BlogPostCardSet.astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection, type CollectionEntry } from "astro:content";
 import BlogPostCard from "./BlogPostCard.astro";
+import { productFromUrl } from "../lib/products";
 
 interface Props {
 	// Only show posts if they have at least one of these tags
@@ -11,6 +12,8 @@ interface Props {
 }
 
 const { tags, exclude } = Astro.props;
+const product = productFromUrl(Astro.url);
+const productName = typeof product === "undefined" ? "Labs" : product.name;
 
 function sortCalc(post: CollectionEntry<"blog">): number {
 	let relevancy =
@@ -25,10 +28,15 @@ function sortCalc(post: CollectionEntry<"blog">): number {
 
 const posts = (
 	await getCollection("blog", (post) => {
-		if (post.data.draft || exclude?.includes(post.id)) {
+		if (
+			post.data.draft ||
+			exclude?.includes(post.id) ||
+			!(post.data?.tags?.includes(productName) || productName === "Labs")
+		) {
 			return false;
+		} else {
+			return true;
 		}
-		return true;
 	})
 )
 	.sort((a, b) => sortCalc(b) - sortCalc(a))

sites/cheerp/src/pages/index.astro

@@ -9,6 +9,7 @@ import IconLayers from "../assets/layers.png";
 import DrawingSourcerer from "../assets/sourcerer.png";
 import { Image } from "astro:assets";
 import { DISCORD_URL } from "@leaningtech/astro-theme/consts";
+import BlogPostCardSet from "@leaningtech/astro-theme/components/BlogPostCardSet.astro";
 ---
 
 <ProductHome style="w-full pt-8 bg-gradient-to-b from-stone-900 to-cheerp">
@@ -181,6 +182,23 @@ import { DISCORD_URL } from "@leaningtech/astro-theme/consts";
 			</div>
 		</div>
 	</section>
+	<section class="bg-stone-900 py-16">
+		<div class="px-4 sm:p-8 md:px-16 lg:px-32 xl:px-56 2xl:px-60">
+			<div class="mb-8">
+				<p class="text-lg text-stone-400">Cheerp blog</p>
+				<h2 class="text-4xl font-bold text-white">Latest news</h2>
+			</div>
+			<BlogPostCardSet />
+			<div class="mt-8">
+				<LinkButton
+					type="secondary-cheerp"
+					href="/blog"
+					label="View all blog posts"
+					iconRight="mi:arrow-right"
+				/>
+			</div>
+		</div>
+	</section>
 	<section
 		class="bg-gradient-to-b from-stone-900 to-[#474484] pb-48 text-center pb-28 md:px-8 md:pt-16 lg:px-32 lg:pt-32 xl:pt-42 xl:px-28 2xl:px-60 2xl:pt-60"
 	>

sites/cheerpx/src/pages/index.astro

@@ -9,6 +9,7 @@ import Screenshot from "../assets/screenshots.png";
 import { Image } from "astro:assets";
 import { DISCORD_URL } from "@leaningtech/astro-theme/consts";
 import MonitorDoodle from "../assets/hero_illustration.png";
+import BlogPostCardSet from "@leaningtech/astro-theme/components/BlogPostCardSet.astro";
 ---
 
 <ProductHome style="w-full pt-8 bg-gradient-to-b from-stone-900 to-[#00254d]">
@@ -213,6 +214,23 @@ import MonitorDoodle from "../assets/hero_illustration.png";
 			</div>
 		</div>
 	</section>
+	<section class="bg-black py-16">
+		<div class="px-4 sm:p-8 md:px-16 lg:px-32 xl:px-56 2xl:px-60">
+			<div class="mb-8">
+				<p class="text-lg text-stone-400">CheerpX blog</p>
+				<h2 class="text-4xl font-bold text-white">Latest news</h2>
+			</div>
+			<BlogPostCardSet />
+			<div class="mt-8">
+				<LinkButton
+					type="secondary-cheerpx"
+					href="/blog"
+					label="View all blog posts"
+					iconRight="mi:arrow-right"
+				/>
+			</div>
+		</div>
+	</section>
 	<section
 		class="bg-gradient-to-b from-black to-[#00254d] pb-48 text-center pb-28 md:px-8 md:pt-16 lg:px-32 pt-12 lg:pt-32 xl:pt-42 xl:px-28 2xl:px-60 2xl:pt-60"
 	>