Add setup section to about page

src/lib/components/about/setup/SetupFetch.svelte

@@ -0,0 +1,141 @@
+<script lang="ts">
+	import type { DesktopSetup } from '#lib/content/types';
+
+	let { setup }: { setup: DesktopSetup } = $props();
+
+	const title = $derived(`${setup.user}@${setup.host}`);
+	const dotfilesLabel = $derived(setup.dotfilesUrl.replace(/^https?:\/\//, ''));
+	const paletteColors = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'foreground'];
+</script>
+
+<div class="fetch">
+	<div class="art" aria-hidden="true">
+		<pre class="steam">{#each setup.steam as line, index (index)}<span style:animation-delay="{index * 0.4}s">{line}</span>
+{/each}</pre>
+		<pre class="cup">{setup.art.join('\n')}</pre>
+	</div>
+
+	<div class="info">
+		<div class="heading">
+			<span class="accent">{setup.user}</span><span class="muted">@</span><span class="accent">{setup.host}</span>
+		</div>
+		<div class="muted">{'-'.repeat(title.length)}</div>
+		{#each setup.specs as spec (spec.label)}
+			<div class="row"><span class="label">{spec.label}</span><span>{spec.value}</span></div>
+		{/each}
+		<div class="row">
+			<span class="label">dotfiles</span>
+			<a class="link" href={setup.dotfilesUrl} target="_blank" rel="noopener noreferrer">{dotfilesLabel}</a>
+		</div>
+		<div class="palette" aria-hidden="true">
+			{#each paletteColors as color (color)}
+				<span style:background="var(--{color})"></span>
+			{/each}
+		</div>
+	</div>
+</div>
+
+<style>
+	.fetch {
+		display: flex;
+		align-items: flex-start;
+		gap: 1.5rem;
+	}
+
+	.art {
+		flex-shrink: 0;
+		align-self: center;
+	}
+
+	.art pre {
+		margin: 0;
+		font-size: 1.2rem;
+		line-height: 1.2;
+	}
+
+	.steam {
+		color: var(--muted);
+	}
+
+	.steam span {
+		display: inline-block;
+		animation: steam-rise 2.4s ease-in-out infinite;
+	}
+
+	.steam {
+		font-weight: 700;
+	}
+
+	.cup {
+		color: var(--accent);
+		line-height: 1;
+	}
+
+	@keyframes steam-rise {
+		0%,
+		100% {
+			opacity: 0.35;
+			transform: translateY(2px);
+		}
+		50% {
+			opacity: 1;
+			transform: translateY(-2px);
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.steam span {
+			animation: none;
+		}
+	}
+
+	.info {
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+		line-height: 1.5;
+	}
+
+	.accent {
+		color: var(--accent);
+		font-weight: 700;
+	}
+
+	.row {
+		display: grid;
+		grid-template-columns: 5.5rem minmax(0, 1fr);
+		gap: 0.5rem;
+	}
+
+	.label {
+		color: var(--blue);
+		font-weight: 700;
+	}
+
+	.link {
+		overflow: hidden;
+		color: var(--green);
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.link:hover {
+		text-decoration: underline;
+	}
+
+	.palette {
+		display: flex;
+		margin-top: 0.6rem;
+	}
+
+	.palette span {
+		width: 1.5rem;
+		height: 0.9rem;
+	}
+
+	@container (max-width: 700px) {
+		.art {
+			display: none;
+		}
+	}
+</style>

src/lib/components/about/setup/SetupSection.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import type { DesktopSetup } from '#lib/content/types';
+	import Panel from '../../ui/Panel.svelte';
+	import SetupFetch from './SetupFetch.svelte';
+
+	let { setup }: { setup: DesktopSetup } = $props();
+</script>
+
+<Panel title="fastfetch" icon="mdi:console">
+	<SetupFetch {setup} />
+</Panel>

src/lib/content/types.ts

@@ -138,9 +138,24 @@ export interface RatedTitle {
 }
 
 export interface AboutContent {
+export interface LabeledValue {
+	label: string;
+	value: string;
+}
+
+export interface DesktopSetup {
+	user: string;
+	host: string;
+	steam: string[];
+	art: string[];
+	specs: LabeledValue[];
+	dotfilesUrl: string;
+}
+
 	anilistUsername?: string;
 	lastfmUsername?: string;
 	hobbies: Hobby[];
+	setup?: DesktopSetup;
 	games: Game[];
 	shows: RatedTitle[];
 	movies: RatedTitle[];