(feat) Discord build share

src/routes/builds/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { gearSlots } from '$lib/builder/loadout';
 	import AgentIdentityLink from '$lib/components/AgentIdentityLink.svelte';
+	import BuildShareControl from '$lib/components/BuildShareControl.svelte';
 	import LoadoutStatsSummary from '$lib/components/builder/LoadoutStatsSummary.svelte';
 	import PlannedCombatModel from '$lib/components/builder/PlannedCombatModel.svelte';
 	let { data } = $props();
@@ -17,14 +18,37 @@
 		.join(' · ');
 	const coreLine = (selection: { firepower: number; toughness: number; engineering: number }) =>
 		`FP ${number.format(selection.firepower)} · TGH ${number.format(selection.toughness)} · ENG ${number.format(selection.engineering)}`;
+	const description = $derived(`${data.build.title}, a Division Resurgence Build by ${data.build.author}. View its equipped weapons, gear, Skill Chips, and known Agent stats on SHD.build.`);
+	const canonicalUrl = $derived(new URL(`/builds/${encodeURIComponent(data.build.slug)}`, data.publicOrigin).toString());
+	const previewUrl = $derived(new URL(`${canonicalUrl}/preview.png`).toString());
 </script>
 
-<svelte:head><title>{data.build.title} — SHD.build</title></svelte:head>
+<svelte:head>
+	<title>{data.build.title} — SHD.build</title>
+	<meta name="description" content={description}/>
+	<link rel="canonical" href={canonicalUrl}/>
+	<meta property="og:type" content="website"/>
+	<meta property="og:site_name" content="SHD.build"/>
+	<meta property="og:title" content={`${data.build.title} — SHD.build`}/>
+	<meta property="og:description" content={description}/>
+	<meta property="og:url" content={canonicalUrl}/>
+	{#if data.build.visibility !== 'private'}
+		<meta property="og:image" content={previewUrl}/>
+		<meta property="og:image:width" content="1200"/>
+		<meta property="og:image:height" content="630"/>
+		<meta property="og:image:type" content="image/png"/>
+		<meta property="og:image:alt" content={`Build preview for ${data.build.title}`}/>
+		<meta name="twitter:card" content="summary_large_image"/>
+		<meta name="twitter:image" content={previewUrl}/>
+	{/if}
+	{#if data.build.visibility !== 'public'}<meta name="robots" content="noindex,nofollow"/>{/if}
+</svelte:head>
 <main class="app-page shared-build-page">
 	<header class="shared-build-command">
 		<div><p class="eyebrow"><span></span> SHD LOADOUT ARCHIVE / {data.build.visibility.toUpperCase()}</p><h1>{data.build.title}</h1><AgentIdentityLink size="compact" linked={data.build.profileAvailable} agent={{ id: data.build.ownerId, displayName: data.build.author, publicSlug: data.build.authorPublicSlug, avatarUrl: data.build.authorAvatarUrl }} meta={`UPDATED ${new Date(data.build.updatedAt).toLocaleDateString()}`}/></div>
 		<div>{#if data.build.owner}<a class="secondary" href={`/guides/new?build=${encodeURIComponent(data.build.id)}`}>CREATE GUIDE FOR BUILD</a><a class="secondary" href={`/builder?build=${data.build.slug}`}>EDIT LOADOUT</a>{/if}<a class="primary" href="/builder">NEW BUILD ＋</a></div>
 	</header>
+	<BuildShareControl title={data.build.title} slugOrUrl={canonicalUrl} visibility={data.build.visibility}/>
 	<div class="shared-build-intelligence">
 		<LoadoutStatsSummary summary={data.summary} attributes={data.attributes} talents={data.talents} headingId="shared-known-stats-heading" layout="page" />
 		<PlannedCombatModel headingId="shared-planned-model-heading" headingLevel="h2" variant="compact" />