feat(site): add infinite scroll & in-page topic filtering with content-visibility optimization

Author: codercatdev

apps/site/src/components/ContentCard.astro

@@ -4,23 +4,33 @@ import CoverImage from "@/components/CoverImage.astro";
 import FormattedDate from "@/components/FormattedDate.astro";
 import { type ContentListItem, isPerson } from "@/lib/content";
 import { resolveHref } from "@/lib/sanity/resolve-href";
+import { matchTopicsForText } from "@/lib/topics";
 
 interface Props {
 	item: ContentListItem;
 	priority?: boolean;
+	deferred?: boolean;
 }
 
-const { item, priority = false } = Astro.props;
+const { item, priority = false, deferred = !priority } = Astro.props;
 
 const href = resolveHref(item._type, item.slug ?? undefined);
 const person = isPerson(item._type);
 const people = [
 	...(item.author ?? []).map((p) => ({ ...p, type: "author" })),
 	...(item.guest ?? []).map((p) => ({ ...p, type: "guest" })),
 ];
+const matchedTopics = !person
+	? matchTopicsForText(item.title, item.excerpt).slice(0, 2)
+	: [];
 ---
 
-<article class="duo-card hand-border group flex h-full flex-col overflow-hidden p-5 transition-all duration-200 hover:-translate-y-1.5 hover:border-[#7C3AED] dark:hover:border-[#C084FC]">
+<article
+	class:list={[
+		"duo-card hand-border group flex h-full flex-col overflow-hidden p-5 transition-all duration-200 hover:-translate-y-1.5 hover:border-[#7C3AED] dark:hover:border-[#C084FC]",
+		deferred && "infinite-card-deferred",
+	]}
+>
 	{
 		href && (
 			<a href={href} class="mb-4 block overflow-hidden rounded-2xl border-2 border-[#2A1155] bg-[#2A1155] dark:border-white/20 dark:bg-[#060E20]">
@@ -48,9 +58,41 @@ const people = [
 	<div class="flex flex-1 flex-col justify-between">
 		<div>
 			{
-				!person && item.date && (
-					<div class="mb-2 inline-flex rounded-full border border-[#2A1155]/30 bg-[#EDE9FE] px-3 py-0.5 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/30 dark:bg-purple-950/80 dark:text-purple-200">
-						<FormattedDate dateString={item.date} />
+				!person && (item.date || matchedTopics.length > 0) && (
+					<div class="mb-2.5 flex flex-wrap items-center gap-1.5">
+						{item.date && (
+							<div class="inline-flex rounded-full border border-[#2A1155]/30 bg-[#EDE9FE] px-3 py-0.5 font-mono text-xs font-extrabold uppercase tracking-wider text-[#7C3AED] dark:border-purple-400/30 dark:bg-purple-950/80 dark:text-purple-200">
+								<FormattedDate dateString={item.date} />
+							</div>
+						)}
+						{matchedTopics.map((topic) => (
+							<a
+								href={`/topic/${topic.slug}`}
+								class="inline-flex items-center gap-1.5 rounded-full border border-[#2A1155] bg-white px-2.5 py-0.5 font-mono text-[11px] font-bold text-[#2A1155] transition-colors hover:bg-[#EDE9FE] dark:border-white/25 dark:bg-[#0B1326] dark:text-slate-200 dark:hover:bg-purple-950/60"
+							>
+								{topic.symbolLight && (
+									<img
+										src={topic.symbolLight}
+										alt=""
+										aria-hidden="true"
+										class="h-3 w-auto object-contain dark:hidden"
+										loading="lazy"
+										decoding="async"
+									/>
+								)}
+								{topic.symbolDark && (
+									<img
+										src={topic.symbolDark}
+										alt=""
+										aria-hidden="true"
+										class="hidden h-3 w-auto object-contain dark:block"
+										loading="lazy"
+										decoding="async"
+									/>
+								)}
+								<span>{topic.title}</span>
+							</a>
+						))}
 					</div>
 				)
 			}

apps/site/src/components/CoverImage.astro

@@ -79,7 +79,7 @@ const alt = rawAlt && rawAlt.trim().length > 0 ? rawAlt : fallbackAlt;
 				height={maxHeight}
 				alt={alt}
 				loading={priority ? "eager" : "lazy"}
-				fetchpriority={priority ? "high" : "auto"}
+				fetchpriority={priority ? "high" : undefined}
 				decoding={priority ? "sync" : "async"}
 				sizes={sizes}
 			/>