changes

Author: hyperdefined

src/lib/components/RandomWolf.svelte

@@ -1,36 +1,85 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	let photo: { raw: string; source_redirect?: string; source?: string } | null = null;
+	export let hash: string | null = null;
+	export let width: string = '100%';
+
+	let photo: {
+		raw: string;
+		source_redirect?: string;
+		source?: string;
+		mime?: string;
+		hash?: string;
+	} | null = null;
 	let error: string | null = null;
 	let loading = true;
 
+	let mounted = false;
+	let lastHash: string | null = null;
+
+	function isVideo(item: any) {
+		return typeof item?.mime === 'string' && item.mime.startsWith('video/');
+	}
+
+	function getPhotoLink(item: typeof photo) {
+		return item?.source_redirect || item?.source || null;
+	}
+
 	async function getRandomPhoto() {
 		try {
-			const resp = await fetch('https://api.canine.tools/wolf/');
+			const url = `https://api.canine.tools/wolf/random?t=${Date.now()}`;
+			const resp = await fetch(url, {
+				cache: 'no-store'
+			});
+
 			if (!resp.ok) throw new Error(`API error ${resp.status}`);
-			const photos = await resp.json();
+			return await resp.json();
+		} catch (err) {
+			console.error('Failed to load random wolf photo:', err);
+			return null;
+		}
+	}
 
-			if (!Array.isArray(photos) || photos.length === 0) return null;
-			const idx = Math.floor(Math.random() * photos.length);
-			return photos[idx];
+	async function getByHash(h: string) {
+		try {
+			const resp = await fetch(`https://api.canine.tools/wolf/${h.trim().toLowerCase()}`, {
+				cache: 'no-store'
+			});
+
+			if (!resp.ok) throw new Error(`API error ${resp.status}`);
+			return await resp.json();
 		} catch (err) {
-			console.error('Failed to load photos:', err);
+			console.error('Failed to load photo by hash:', err);
 			return null;
 		}
 	}
 
-	onMount(async () => {
-		const result = await getRandomPhoto();
+	async function load() {
+		loading = true;
+		error = null;
+
+		const result = hash ? await getByHash(hash) : await getRandomPhoto();
+
 		if (!result) {
-			error = 'No wolfy photo available :(';
+			error = hash ? `No wolf found for hash: ${hash}` : 'No wolfy photo available :(';
+			photo = null;
 		} else {
-			console.log('Selected Photo:', result.raw);
-			console.log('Source:', result.source ? result.source : 'No source available');
 			photo = result;
 		}
+
 		loading = false;
+	}
+
+	onMount(async () => {
+		mounted = true;
+		lastHash = hash;
+		await load();
 	});
+
+	$: if (mounted && hash !== lastHash) {
+		lastHash = hash;
+		load();
+	}
 </script>
 
 <div class="random-wolf">
@@ -39,12 +88,32 @@
 	{:else if error}
 		<p>{error}</p>
 	{:else if photo}
-		{#if photo.source_redirect}
-			<a href={photo.source_redirect} target="_blank" rel="noopener noreferrer">
-				<img src={photo.raw} alt="Random Wolf" />
+		{#if getPhotoLink(photo)}
+			<a href={getPhotoLink(photo)} target="_blank" rel="noopener noreferrer">
+				{#if isVideo(photo)}
+					<video
+						src={photo.raw}
+						autoplay
+						muted
+						loop
+						playsinline
+						style={`width: ${width}; height: auto;`}
+					></video>
+				{:else}
+					<img src={photo.raw} alt="Random Wolf" style={`width: ${width}; height: auto;`} />
+				{/if}
 			</a>
+		{:else if isVideo(photo)}
+			<video
+				src={photo.raw}
+				autoplay
+				muted
+				loop
+				playsinline
+				style={`width: ${width}; height: auto;`}
+			></video>
 		{:else}
-			<img src={photo.raw} alt="Random Wolf" />
+			<img src={photo.raw} alt="Random Wolf" style={`width: ${width}; height: auto;`} />
 		{/if}
 	{/if}
 </div>
@@ -54,18 +123,8 @@
 		text-align: center;
 	}
 
-	.random-wolf img {
-		width: 80%;
-	}
-
-	@media screen and (max-width: 1030px) {
-		.random-wolf img {
-			width: 60%;
-		}
-	}
-	@media screen and (max-width: 500px) {
-		.random-wolf img {
-			width: 70%;
-		}
+	.random-wolf img,
+	.random-wolf video {
+		border-radius: 8px;
 	}
-</style>
+</style>

src/routes/contact/+page.svelte

@@ -13,11 +13,12 @@
 	<meta name="twitter:description" content="hyperdefined's contact information." />
 </svelte:head>
 
-<h2>Projects</h2>
+<h2>Contact</h2>
 <p>You can find me on most social media sites as <code>hyperdefined</code>.</p>
 <ul>
 	<li>Twitter - <a href="https://twitter.com/hyperdefined">@hyperdefined</a></li>
-	<li>Telegram - <a href="https://t.me/hyperdefined">@hyperdefined</a> (slow response)</li>
+	<li>Bluesky - <a href="https://bsky.app/profile/hyper.lol">@hyper.lol</a></li>
+	<li>Telegram - <a href="https://t.me/hyperdefined">@hyperdefined</a> (slow response, rarely check)</li>
 </ul>
 <p>
 	I do use Discord, but I don't accept random friend requests unless we move a conversation over