From cce66b19c4ba82886694a09f1a82b3187fef8dca Mon Sep 17 00:00:00 2001
From: mat <git@matdoes.dev>
Date: Tue, 1 Oct 2024 20:42:15 +0000
Subject: [PATCH] add yui button and fix bugs with /buttons page

---
 src/routes/buttons/+layout.svelte |   3 +-
 src/routes/buttons/+page.svelte   |  74 ++++++++++++++++++++++--------
 src/routes/buttons/88x31.ts       |  25 ++++++++--
 src/routes/retro/+page.svelte     |   3 +-
 static/retro/buttons/yui.gif      | Bin 0 -> 1108 bytes
 5 files changed, 81 insertions(+), 24 deletions(-)
 create mode 100644 static/retro/buttons/yui.gif

diff --git a/src/routes/buttons/+layout.svelte b/src/routes/buttons/+layout.svelte
index acb85b7..fe1a583 100644
--- a/src/routes/buttons/+layout.svelte
+++ b/src/routes/buttons/+layout.svelte
@@ -27,7 +27,8 @@
 
 <header>
 	<nav>
-		<a href="/buttons" class:selected={selectedPage === 'buttons'}>Buttons</a>
+		<!-- the # is necessary to make onhashchange work -->
+		<a href="/buttons#" class:selected={selectedPage === 'buttons'}>Buttons</a>
 		<!-- <a href="/buttons/sites" class:selected={selectedPage === 'sites'}>Sites</a> -->
 		<a
 			href="/buttons/degrees{$selectedPageName ? `#${$selectedPageName}` : ''}"
diff --git a/src/routes/buttons/+page.svelte b/src/routes/buttons/+page.svelte
index 6414d26..98d16d5 100644
--- a/src/routes/buttons/+page.svelte
+++ b/src/routes/buttons/+page.svelte
@@ -1,13 +1,19 @@
 <script lang="ts">
 	import { onDestroy, onMount } from 'svelte'
-	import { buttonIndexFromHash, buttonUrlFromIndex, data, pageIndexFromName } from './88x31'
+	import {
+		buttonIndexFromHash,
+		buttonUrlFromIndex,
+		data,
+		downloadData,
+		pageIndexFromName,
+	} from './88x31'
 	import { writable } from 'svelte/store'
 	import { page } from '$app/stores'
 	import ButtonLink from './ButtonLink.svelte'
 	import ExternalLinkIcon from './ExternalLinkIcon.svelte'
 	import ExternalLink from './ExternalLink.svelte'
-	import type { UIEventHandler } from 'svelte/elements'
 	import { browser } from '$app/environment'
+	import LoadingDots from '$lib/LoadingDots.svelte'
 
 	let searchQuery = writable('')
 	let sort = writable('relevance')
@@ -40,7 +46,16 @@
 	})
 
 	let refs: HTMLDivElement[] = []
-	onMount(() => {
+	let buttonEntries: [number, string][] = []
+
+	onMount(async () => {
+		await downloadData()
+		if (!data) throw new Error("data should've been downloaded")
+		buttonEntries = [...data.buttons.entries()]
+
+		updateSearch()
+		updateFromHash()
+
 		buttonContainerObserver.observe(buttonsEl, {
 			childList: true,
 		})
@@ -60,12 +75,12 @@
 
 	let matchingTextIndexes = new Set<number>()
 
-	let buttonEntries: [number, string][] = [...data.buttons.entries()]
-
 	searchQuery.subscribe(updateSearch)
 	sort.subscribe(updateSearch)
 
 	function popularityScore(buttonIndex: number): number {
+		if (!data) return 0
+
 		const backlinks = new Set(
 			data.button_backlinks[buttonIndex].map((i) => data.pages[i].split('/')[0])
 		)
@@ -76,6 +91,8 @@
 	}
 
 	function updateSearch() {
+		if (!data) return 0
+
 		const value = $searchQuery
 		let sortValue = $sort
 
@@ -134,24 +151,32 @@
 	let selectedPageName = writable<string | null>(null)
 	$: selectedPageIndex = $selectedPageName === null ? null : pageIndexFromName($selectedPageName)
 
-	page.subscribe(async (page) => {
-		// this is to work around a sveltekit bug that makes it click the hash twice, which clicks the wrong link the second time
-		await new Promise((r) => requestAnimationFrame(r))
+	function updateFromHash() {
+		const hash = location.hash.slice(1)
+		console.log('updateFromHash', hash)
 
-		// hash
-		const hash = page.url.hash.slice(1)
 		// if the hash has a . then it's a page name
 		if (hash === '') {
-			selectedButtonHash.set(null)
-			selectedPageName.set(null)
+			$selectedButtonHash = null
+			$selectedPageName = null
 		} else if (hash.includes('.')) {
-			selectedButtonHash.set(null)
-			selectedPageName.set(hash)
+			$selectedButtonHash = null
+			$selectedPageName = null // force selectedPageIndex to be recalculated
+			$selectedPageName = hash
 		} else {
-			selectedButtonHash.set(hash)
-			selectedPageName.set(null)
+			$selectedButtonHash = null // force selectedButtonIndex to be recalculated
+			$selectedButtonHash = hash
+			$selectedPageName = null
 		}
-	})
+	}
+
+	// page.subscribe(async (page) => {
+	// 	// this is to work around a sveltekit bug that makes it click the hash twice, which clicks the wrong link the second time
+	// 	await new Promise((r) => requestAnimationFrame(r))
+	// 	// set
+
+	// 	updateFromHash()
+	// })
 
 	let cutOffButtonEntries = 500
 	let isCurrentlyAdding = false
@@ -188,7 +213,7 @@
 	}
 </script>
 
-<svelte:window bind:scrollY />
+<svelte:window bind:scrollY on:hashchange={updateFromHash} />
 
 {#if selectedButtonIndex !== null}
 	<h1>
@@ -254,7 +279,13 @@
 		<option value="random">Random</option>
 	</select>
 
-	<p><b>{buttonEntries.length.toLocaleString()}</b> buttons</p>
+	{#if buttonEntries.length === 0}
+		<div class="loading-indicator">
+			<LoadingDots />
+		</div>
+	{:else}
+		<p><b>{buttonEntries.length.toLocaleString()}</b> buttons</p>
+	{/if}
 
 	<div class="compact-button-grid" bind:this={buttonsEl}>
 		{#each buttonEntries.slice(0, cutOffButtonEntries) as [index, buttonHash] (buttonHash)}
@@ -296,4 +327,9 @@
 		display: flex;
 		gap: 1rem;
 	}
+
+	.loading-indicator {
+		fill: #fff;
+		margin-top: 1em;
+	}
 </style>
diff --git a/src/routes/buttons/88x31.ts b/src/routes/buttons/88x31.ts
index cc116c8..779ab2e 100644
--- a/src/routes/buttons/88x31.ts
+++ b/src/routes/buttons/88x31.ts
@@ -19,9 +19,27 @@ interface Data {
 	backlink_buttons: number[][]
 }
 
-const res = await fetch('https://matdoes.dev/buttons/88x31.cbor')
-const buffer = await res.arrayBuffer()
-export const data: Data = decode(new Uint8Array(buffer))
+export let data: Data = {
+	pages: [],
+	buttons: [],
+	texts: [],
+	button_file_exts: [],
+	button_names: [],
+	button_links: [],
+	button_backlinks: [],
+	links: [],
+	link_buttons: [],
+	link_button_alts: [],
+	link_button_titles: [],
+	backlinks: [],
+	backlink_buttons: [],
+}
+
+export async function downloadData() {
+	const res = await fetch('https://matdoes.dev/buttons/88x31.cbor')
+	const buffer = await res.arrayBuffer()
+	data = decode(new Uint8Array(buffer))
+}
 
 export function buttonUrlFromIndex(index: number) {
 	const hash = buttonHashFromIndex(index)
@@ -54,6 +72,7 @@ function binarySearch<T>(arr: T[], key: T): number | null {
 }
 
 export function pageIndexFromName(name: string): number | null {
+	console.log('pageIndexFromName', name, binarySearch(data.pages, name))
 	return binarySearch(data.pages, name)
 }
 
diff --git a/src/routes/retro/+page.svelte b/src/routes/retro/+page.svelte
index b7d4c42..f9ed204 100644
--- a/src/routes/retro/+page.svelte
+++ b/src/routes/retro/+page.svelte
@@ -270,10 +270,11 @@
 								<Button href="//haylinmoore.com/" src="haylin.png" alt="haylin moore" />
 								<Button href="//ezri.pet/" src="ezri.png" alt="ezri" />
 								<Button
-									href="//thomasricci.dev/"
+									href="//thomasricci.dev"
 									src="rudrecciah.png"
 									alt="thomas ricci aka rudrecciah"
 								/>
+								<Button href="//zptr.cc" src="yui.gif" alt="yui aka zeroptr" />
 								<Button href="//archlinux.org" src="archbtw.png" alt="archbtw" />
 								<Button href="//github.com/mat-1" src="github.gif" alt="github" />
 								<Button href="//ko-fi.com/matdoesdev" src="kofi.gif" alt="kofi" />
diff --git a/static/retro/buttons/yui.gif b/static/retro/buttons/yui.gif
new file mode 100644
index 0000000000000000000000000000000000000000..9c4bd3876c1f767ddee0213f01bb7cc530a702e6
GIT binary patch
literal 1108
zcmZ?wbhEHbj9`#w_{zW_C@3f+DkCPQAStOYCugT2sbL~(qM)Fludi=yZEa^~r=;Yo
zrWUQOo#mk9;H~EEqvjK?6`rh@oM)U@WnSgt;^O1u<K`9<8X6iM9i5exRbF0RSy^dp
z++l6K%)w!ci^~yT--iJKA3{U_w_3MObeK5TW$sFkm0Nta91J*kCiF~4N5}N((`U|{
zxpe8$!-o$aIdbIErArSVKK$_E!~g&P83+Nz|J;7AA;Hd$0j@@R2F#2=^*|xd+{E-$
z-^BFH<ZRyb#N6COTLV24Qxj8D2F0H&3`Pw98FWAfgTjD;?f-#k1s*z5{U??bos40c
zcVR_|*V?G{H*!QTU#i;wz+jrT-t6<Y^{URYO}_oX;;ZiZ<1fG2NUeY0{<E$zvLRbT
zL#S3pFSR8@OG`LTPfv1^o}uw%j=ZcO;rR>Z^9wCp<j*(1Uu`}E+k8fW1&sbCCfb2a
zvb%T!IJ8al^o_K&XUDgwomB7FYS+-xJgKIk%ElmgvR~um^?m`BOPd)C45R{>comeC
z<+&MH#0^Zk48_FQ=Y;c}nRs3$KqX{G$0v<TlR3^PrDO^)IdljrOSNS%ESTmhCH5(F
z=7BQ@h3gqug<4ox7j`j)WZj+hi1ASeV_?{U6&bH1)HOxstt?P@cXL}$%EdK~nh~D_
zPibnc6o@z=($FLxkb0)V@caxhC*cw&p|5XTR<H+k$eDPxM!4zh>)=#QGj(j;UU1*d
zQElxymI+~#G;5d?XIhv^MfluwSX1zDr}^dwq9Mx#A0H2pajw&;+_d1-w7&`G)}$M!
zThFsU&8aKJ_wrJX-{O0hnVMf;-;jKIp6~8$Z*T9&W@j9YJrZNDnT*)``pQ@1(xX`u
z7%q7kwfZZl2p@N2=61{9cm)(`4-W_MDBG>6*tp<W-(QEmHR(pF*3<M)pIjr!_xxOr
ZT{9@sUS3`iygKgeuC2h>iv~uTH2|Xop2GkD

literal 0
HcmV?d00001