basic filtering

src/app.css

@@ -77,4 +77,10 @@
 	.pbw-text-color-secondary {
 		@apply text-gray-500 dark:text-gray-300;
 	}
+
+	.filter-component { @apply grow; }
+	.filter-component label, .filter-component input { @apply block; }
+	.filter-component label { @apply uppercase text-black/60; }
+	.filter-component input { @apply border py-1 px-2 border-black/40 rounded bg-black/5; }
+	.filter { @apply mt-4 mb-2 text-lg flex; }
 }

src/lib/components/CollectionList.svelte

@@ -36,6 +36,7 @@
 	const _url = (col, item) => (item.hidden ? '' : `/${entry}/${col}/${item.id}`);
 </script>
 
+
 {#each arr.map((k) => findObject(k)) as item}
 	<div
 		class="{size === 'small' ? 'p-0.5 lg:p-1' : 'p-1 lg:p-1.5'} {!item.hidden

src/routes/[entry]/[type]/+page.svelte

@@ -21,11 +21,17 @@
 	export let data;
 
 	let entry = $page.params.entry;
+	let q = '';
+
+	let total = 0
+	let scores = {}
+
 	$: type = $page.params.type;
 	$: tc = config.collections[type];
 	$: items = type === 'speakers' ? processItemsList(data.bundle[type]) : data.bundle[type];
 
-	function processItems(_items, query = {}) {
+
+	function processItems(_items, query = {}, q = '') {
 		if (!_items) return [];
 		_items = [..._items];
 		if (type === 'events') {
@@ -50,10 +56,37 @@
 			_items = _items.sort((x, y) => (x.capacity > y.capacity ? -1 : 1));
 		}
 
+		const normalize = str => {
+			if (typeof str.replace !== "function") {
+				return str
+			}
+			return str.normalize("NFD").toLowerCase().replace(/[\u0300-\u036F]/g, "")
+		}
+		
+		// filters
+		console.log('@@@@', q)
+		if (q) {
+			scores = {}
+			_items = _items.map(i => {
+				const cols = [["name", 50], ["tags", 30], ["caption", 20], ["venueName"], ["venueAddress"], ["org"], ["chains"], ["description"], ["twitter"], ["country"]]
+				scores[i.id] = 0
+				for (const [ c, cs = 20 ] of cols) {
+					let ctag = typeof i[c] === "array" ? i[c].join(", ") : i[c]
+					if (typeof ctag === "string" && normalize(ctag).match(new RegExp(normalize(q), "si"))) {
+						scores[i.id] += cs
+					}
+				}
+				return i
+			}).filter(i => scores[i.id] > 0).sort((x, y) => scores[x.id] > scores[y.id] ? -1 : 1)
+		} else {
+			total = _items.filter((e) => !e.hidden).length
+		}
+		
 		return _items;
 	}
 
-	$: processedItems = processItems(items); //, Object.fromEntries($page.url.searchParams))
+	$: processedItems = processItems(items, {}, q); //, Object.fromEntries($page.url.searchParams))
+	$: currentTotal = processedItems.filter((e) => !e.hidden).length
 
 	onMount(async () => {
 		if (!config.collections[$page.params.type]) {
@@ -78,8 +111,14 @@
 		<div class="max-w-7xl mx-auto pt-5 md:pt-10">
 			<div class="mx-4 xl:mx-0">
 				<h2 class="text-2xl uppercase font-bold pbw-text-color-secondary">
-					{tc.title} ({processedItems.filter((e) => !e.hidden).length})
+					{tc.title} ({currentTotal}{#if currentTotal !== total}/{total}{/if})
 				</h2>
+				<div class="filter">
+					<div class="filter-component">
+						<label for="q">Search{#if q}: "{q}"{/if}</label>
+						<input type="text" id="q" class="w-full" bind:value={q} />
+					</div>
+				</div>
 				<div class="text-xl mt-6 pbw-text-color-base">
 					<table class="w-full table-auto">
 						<thead>
@@ -119,7 +158,7 @@
 						</thead>
 						<tbody>
 							{#each processedItems as item}
-								<tr class="hover:bg-pbw-yellow/20 dark:hover:bg-pbw-white/10">
+								<tr class="hover:bg-pbw-yellow/20 dark:hover:bg-pbw-white/10" id={item.id}>
 									{#if type === 'events'}
 										<td class="text-right pr-2 md:pr-4 text-base md:text-xl"
 											>{formatItemDate(item)}</td
@@ -202,7 +241,7 @@
 												>
 											{/if}
 										</td>
-										<td class="hidden md:table-cell"><SvelteMarkdown source={item.caption} /></td>
+										<td class="hidden md:table-cell"><SvelteMarkdown source={item.caption || ''} /></td>
 									{/if}
 									{#if type === 'media-partners'}
 										<td class="w-20">