Latestblog (#201)

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="w-full max-w-screen-2xl mx-auto px-16">
+			<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="w-full max-w-screen-2xl mx-auto px-16">
+			<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"
 	>