feat(frontend): add main release page, fix broken animation, better code

Author: WarningImHack3r

src/lib/components/renderers/ListElementRenderer.svelte

@@ -56,7 +56,7 @@
 		<Button
 			href={ghLinkToHref(allLinks[0] ?? "")}
 			variant="link"
-			class="ml-2 !inline-flex h-auto p-0 transition-[transform,_opacity] duration-300 group-hover:translate-x-0 group-hover:opacity-100 md:ml-4 md:-translate-x-2 md:opacity-0 lg:mr-8"
+			class="ml-2 !inline-flex h-auto p-0 transition-[translate,_opacity] duration-300 group-hover:translate-x-0 group-hover:opacity-100 md:ml-4 md:-translate-x-2 md:opacity-0 lg:mr-8"
 		>
 			Open details
 			<ArrowRight class="ml-2 size-4" />

src/lib/components/ui/card/card-content.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+	{@render children?.()}
+</p>

src/lib/components/ui/card/card-footer.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card-header.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card-title.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		level = 3,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
+	} = $props();
+</script>
+
+<div
+	role="heading"
+	aria-level={level}
+	bind:this={ref}
+	class={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/card.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

src/lib/components/ui/card/index.ts

@@ -0,0 +1,22 @@
+import Root from "./card.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+};

src/routes/+layout.server.ts

@@ -5,18 +5,14 @@ export async function load() {
 
 	return {
 		// The displayable data, available to load from clients
-		displayablePackages: categorizedPackages
-			.map(res => ({
-				...res,
-				packages: res.packages.map(
+		displayablePackages: categorizedPackages.map(res => ({
+			...res,
+			packages: res.packages
+				.map(
 					// eslint-disable-next-line @typescript-eslint/no-unused-vars
 					({ dataFilter, metadataFromTag, changelogContentsReplacer, ...rest }) => rest
 				)
-			}))
-			// Sort the packages by name
-			.map(res => ({
-				...res,
-				packages: res.packages.toSorted((a, b) => a.packageName.localeCompare(b.packageName))
-			}))
+				.toSorted((a, b) => a.packageName.localeCompare(b.packageName))
+		}))
 	};
 }

src/routes/package/[...package]/+page.svelte

@@ -1,7 +1,47 @@
 <script lang="ts">
+	import { LoaderCircle } from "@lucide/svelte";
+	import ReleaseCard from "./ReleaseCard.svelte";
+	import SidePanel from "./SidePanel.svelte";
+	import * as Accordion from "$lib/components/ui/accordion";
+
 	let { data } = $props();
 </script>
 
-{#await data.releases then release}
-	{JSON.stringify(release, null, 2)}
+{#await data.releases}
+	<span class="inline-flex items-center justify-center">
+		<LoaderCircle class="mr-2 size-4 animate-spin" />
+		Loading...
+	</span>
+{:then releases}
+	<div class="my-8">
+		<h1 class="text-5xl font-semibold text-primary">{data.currentPackage.packageName}</h1>
+		<h2 class="text-xl text-muted-foreground">
+			{data.currentPackage.owner}/{data.currentPackage.repoName}
+		</h2>
+	</div>
+	<div class="flex gap-8">
+		<Accordion.Root
+			type="multiple"
+			value={releases
+				// Only expand releases that are less than a week old
+				.filter(({ created_at }) => {
+					return new Date(created_at).getTime() > new Date().getTime() - 1000 * 60 * 60 * 24 * 7;
+				})
+				.map(({ id }) => id.toString())}
+			class="w-full"
+		>
+			{#each releases as release (release.id)}
+				<ReleaseCard
+					packageName={data.currentPackage.packageName}
+					repo={{ owner: data.currentPackage.owner, name: data.currentPackage.repoName }}
+					{release}
+				/>
+			{/each}
+		</Accordion.Root>
+		<SidePanel
+			packageName={data.currentPackage.packageName}
+			allPackages={data.displayablePackages}
+			class="h-fit w-2/5"
+		/>
+	</div>
 {/await}