Search resources

package.json

@@ -33,6 +33,7 @@
   },
   "type": "module",
   "dependencies": {
+    "fuse.js": "^6.6.2",
     "ts-node": "^10.4.0",
     "vitest": "^0.26.2"
   }

src/lib/components/Search.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+	import ButtonLinks from "./ButtonLinks.svelte";
+	import { createEventDispatcher } from "svelte";
+
+    let searchTerm = '';
+
+    const dispatch = createEventDispatcher();
+
+    function onSubmit(){
+        dispatch("search", {searchTerm})
+    }
+
+</script>
+
+<form on:submit|preventDefault={onSubmit} class="mb-3" role="search">
+	<label for="search" />
+	<input
+		type="search"
+		aria-label="search text"
+		bind:value={searchTerm}
+		placeholder="Search by keyword"
+		id="search"
+		name="search"
+		class="p-2 rounded-lg border-2 border-green-500 dark:border-green-700 text-green-700 dark:text-green-500 dark:bg-transparent"
+	/>
+	<ButtonLinks
+		type="submit"
+		version="filled"
+		color="green"
+	>
+		<span slot="label">Search</span>
+	</ButtonLinks>
+</form>

src/routes/resources/+page.svelte

@@ -2,19 +2,25 @@
   import type { PageData } from "./$types";
   import { onMount } from "svelte";
   import { DEFAULT_DISPLAY_LIMIT } from "$lib/constants";
-  import type { Tag, FilterOption, FilterLogic } from "$lib/interfaces";
+  import type { Tag, FilterOption, FilterLogic, Resource } from "$lib/interfaces";
   import { setIntersection } from "$lib/utils";
+  import Search from "$lib/components/Search.svelte";
   import ListItem from "./ListItem.svelte";
   import ResourceNav from "$lib/components/ResourceNav.svelte";
   import ScrollTopButton from "$lib/components/ScrollTopButton.svelte";
   import FilterForm from "$lib/components/FilterForm.svelte";
   export let data: PageData;
+  import Fuse from 'fuse.js';
 
   let displayedResourceLimit: number = DEFAULT_DISPLAY_LIMIT;
   $: displayedResourceLimit
   let resources = data.payload.resources;
   let displayedResources = resources;
-  let tagLogicAnd: boolean = true;
+  let filterByTags: Resource[];
+  let tagLogicAnd: boolean = true; // Whether all the selected tags must match the resource (vs any of the selected tags)
+  // TODO: make this a user preference
+  $: tagLogic = tagLogicAnd ? "and" : "or";
+
   let tags: Tag[] = data.payload.tags;
   let tags_count = data.payload.tags_count;
 
@@ -30,8 +36,29 @@
     filterObject.push(tagOption)
   }
 
+  function filterBySearchInput(event: CustomEvent<{searchTerm: string}>) {
+    const { searchTerm } = event.detail;
+
+    const options = {
+      includeScore: true,
+      threshold: 0.25,
+      keys: ['description', 'title']
+    }
+
+    const fuse = new Fuse(resources, options);
+
+    const results = fuse.search(searchTerm);
+
+    const searchResults = results.map((result) => {
+      return result.item;
+    })
+
+    displayedResources = searchResults;
+  }
+
   const filterResources = (event: CustomEvent<{filterOptions: FilterOption[], filterLogic: FilterLogic}>) => {
     const {filterOptions, filterLogic} = event.detail
+
     // Reset displayed resources
     displayedResources = [];
 
@@ -55,10 +82,14 @@
       }
     }
 
+    // search to rely on displayedResources
+    filterByTags = displayedResources;
+
     // Force svelte re-render
     displayedResources = displayedResources;
   }
 
+  // Update the displayedResourceLimit based on the scroll position
   const updateLimit = (event: CustomEvent<{displayLimit: number}>) => {
     const {displayLimit} = event.detail
     displayedResourceLimit = displayLimit
@@ -70,6 +101,7 @@
   <p class="italic">{resources.length} resources and counting!!</p>
 </div>
 <ResourceNav />
+<Search on:search={filterBySearchInput}></Search>
 <FilterForm filterOptions={filterObject} filterLogicAnd={tagLogicAnd} on:filter={filterResources} />
 
 <ol

yarn.lock

@@ -21,10 +21,10 @@
   dependencies:
     "@jridgewell/trace-mapping" "0.3.9"
 
-"@esbuild/linux[email protected]":
+"@esbuild/darwin[email protected]":
   version "0.18.15"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.18.15.tgz"
-  integrity sha512-MsHtX0NgvRHsoOtYkuxyk4Vkmvk3PLRWfA4okK7c+6dT0Fu4SUqXAr9y4Q3d8vUf1VWWb6YutpL4XNe400iQ1g==
+  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.18.15.tgz"
+  integrity sha512-bMqBmpw1e//7Fh5GLetSZaeo9zSC4/CMtrVFdj+bqKPGJuKyfNJ5Nf2m3LknKZTS+Q4oyPiON+v3eaJ59sLB5A==
 
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
@@ -643,11 +643,21 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz"
   integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
 
+fuse.js@^6.6.2:
+  version "6.6.2"
+  resolved "https://registry.npmjs.org/fuse.js/-/fuse.js-6.6.2.tgz"
+  integrity sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==
+
 get-caller-file@^2.0.1:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"