[FA-misc] Astro migration works, probably want to touchup the frontend but that can be in Phase 4

fictionarchive-web-astro/src/lib/components/NovelCard.svelte

@@ -0,0 +1,45 @@
+<script lang="ts" module>
+	import type { NovelsQuery } from '$lib/graphql/__generated__/graphql';
+
+	export type NovelNode = NonNullable<NonNullable<NovelsQuery['novels']>['edges']>[number]['node'];
+
+	export interface NovelCardProps {
+		novel: NovelNode;
+	}
+</script>
+
+<script lang="ts">
+	import { Card, CardContent, CardHeader, CardTitle } from '$lib/components/ui/card';
+
+	let { novel }: NovelCardProps = $props();
+
+	function pickText(novelText?: NovelNode['name'] | NovelNode['description']) {
+		const texts = novelText?.texts ?? [];
+		const english = texts.find((t) => t.language === 'EN');
+		return (english ?? texts[0])?.text ?? 'No description available.';
+	}
+
+	const title = $derived(pickText(novel.name));
+	const description = $derived(pickText(novel.description));
+	const coverSrc = $derived(novel.coverImage?.newPath ?? novel.coverImage?.originalPath);
+</script>
+
+<Card class="overflow-hidden border shadow-sm transition-shadow hover:shadow-md">
+	{#if coverSrc}
+		<div class="aspect-[3/4] w-full overflow-hidden bg-muted/50">
+			<img src={coverSrc} alt={title} class="h-full w-full object-cover" loading="lazy" />
+		</div>
+	{:else}
+		<div class="aspect-[3/4] w-full bg-muted/50"></div>
+	{/if}
+	<CardHeader class="space-y-2">
+		<CardTitle class="line-clamp-2 text-lg leading-tight">
+			{title}
+		</CardTitle>
+	</CardHeader>
+	<CardContent class="pt-0">
+		<p class="line-clamp-3 text-sm text-muted-foreground">
+			{description}
+		</p>
+	</CardContent>
+</Card>