refactor(website): use predefined target names

website/src/lib/registry-api.ts

@@ -26,7 +26,14 @@ export type TargetInfo = {
 	bin: boolean
 }
 
-export type TargetKind = "roblox" | "lune" | "luau"
+export type TargetKind = "roblox" | "roblox_server" | "lune" | "luau"
+
+export const TARGET_KIND_DISPLAY_NAMES: Record<TargetKind, string> = {
+	roblox: "Roblox",
+	roblox_server: "Roblox (server)",
+	lune: "Lune",
+	luau: "Luau",
+}
 
 export class RegistryHttpError extends Error {
 	name = "RegistryError"

website/src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { formatDistanceToNow } from "date-fns"
 
+	import { TARGET_KIND_DISPLAY_NAMES } from "$lib/registry-api"
 	import Hero from "./Hero.svelte"
 
 	const { data } = $props()
@@ -15,7 +16,7 @@
 <Hero />
 
 <section class="mx-auto max-w-screen-lg px-4 pb-32">
-	<h2 class="mb-4 text-2xl font-semibold text-heading">
+	<h2 class="text-heading mb-4 text-2xl font-semibold">
 		<a id="recently-published" href="#recently-published">Recently Published</a>
 	</h2>
 
@@ -24,25 +25,23 @@
 			{@const [scope, name] = pkg.name.split("/")}
 
 			<article
-				class="relative overflow-hidden rounded bg-card px-5 py-4 transition hover:bg-card-hover"
+				class="bg-card hover:bg-card-hover relative overflow-hidden rounded px-5 py-4 transition"
 			>
 				<h3 class="truncate text-xl font-semibold">
 					<a href={`/packages/${pkg.name}`} class="after:absolute after:inset-0 after:content-['']">
 						<span class="text-heading">{scope}/</span><span class="text-light">{name}</span>
 					</a>
 				</h3>
-				<div class="mb-3 flex overflow-hidden whitespace-nowrap text-sm font-semibold text-primary">
+				<div class="text-primary mb-3 flex overflow-hidden whitespace-nowrap text-sm font-semibold">
 					<span class="truncate">v{pkg.version}</span>
 					<span class="whitespace-pre"
 						>{` · ${pkg.targets
-							.map((target) => {
+							.map((target) => TARGET_KIND_DISPLAY_NAMES[target.kind])
-								return target.kind[0].toUpperCase() + target.kind.slice(1)
-							})
 							.join(", ")}`}</span
 					>
 				</div>
 				<p class="mb-3 line-clamp-2 h-[2lh] overflow-hidden text-sm">{pkg.description}</p>
-				<div class="text-sm font-semibold text-heading">
+				<div class="text-heading text-sm font-semibold">
 					<time datetime={pkg.published_at} class:invisible={!displayDates}>
 						{#if displayDates}
 							{formatDistanceToNow(new Date(pkg.published_at), { addSuffix: true })}

website/src/routes/packages/[scope]/[name]/[[version]]/[[target]]/TargetSelector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from "$app/navigation"
 	import { page } from "$app/stores"
+	import { TARGET_KIND_DISPLAY_NAMES, type TargetKind } from "$lib/registry-api"
 	import { ChevronDownIcon } from "lucide-svelte"
 
 	const { id }: { id: string } = $props()
@@ -21,11 +22,11 @@
 	})
 </script>
 
-<div class="mb-1 text-lg font-semibold text-heading">
+<div class="text-heading mb-1 text-lg font-semibold">
 	<label for={id}>Target</label>
 </div>
 <div
-	class="relative mb-6 flex h-11 w-full items-center rounded border border-input-border bg-input-bg ring-0 ring-primary-bg/20 transition focus-within:border-primary focus-within:ring-4 has-[:disabled]:opacity-50"
+	class="border-input-border bg-input-bg ring-primary-bg/20 focus-within:border-primary relative mb-6 flex h-11 w-full items-center rounded border ring-0 transition focus-within:ring-4 has-[:disabled]:opacity-50"
 >
 	<select
 		class="absolute inset-0 appearance-none bg-transparent px-4 outline-none"
@@ -41,7 +42,7 @@
 	>
 		{#each $page.data.pkg.targets as target}
 			<option value={target.kind} class="bg-card" selected={target.kind === defaultTarget}>
-				{target.kind[0].toUpperCase() + target.kind.slice(1)}
+				{TARGET_KIND_DISPLAY_NAMES[target.kind as TargetKind]}
 			</option>
 		{/each}
 	</select>

website/src/routes/packages/[scope]/[name]/versions/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { TARGET_KIND_DISPLAY_NAMES } from "$lib/registry-api.js"
 	import { formatDistanceToNow } from "date-fns"
 
 	const { data } = $props()
@@ -14,11 +15,11 @@
 		{@const isLatest = index === 0}
 
 		<article
-			class={`relative overflow-hidden rounded bg-card px-5 py-4 transition hover:bg-card-hover ${
+			class={`bg-card hover:bg-card-hover relative overflow-hidden rounded px-5 py-4 transition ${
-				isLatest ? "ring-2 ring-inset ring-primary" : ""
+				isLatest ? "ring-primary ring-2 ring-inset" : ""
 			}`}
 		>
-			<h2 class="font-semibold text-heading">
+			<h2 class="text-heading font-semibold">
 				<a
 					href={`/packages/${pkg.name}/${pkg.version}/any`}
 					class="after:absolute after:inset-0 after:content-['']"
@@ -38,11 +39,7 @@
 					{/if}
 				</time>
 				·
-				{pkg.targets
+				{pkg.targets.map((target) => TARGET_KIND_DISPLAY_NAMES[target.kind]).join(", ")}
-					.map((target) => {
-						return target.kind[0].toUpperCase() + target.kind.slice(1)
-					})
-					.join(", ")}
 			</div>
 		</article>
 	{/each}