Merge pull request #232 from davidho0403/main

Add search url parameter feature

package.json

@@ -64,6 +64,7 @@
     "prettier-plugin-tailwindcss": "0.5.11",
     "svelte": "4.2.9",
     "svelte-check": "3.6.3",
+    "sveltekit-search-params": "^2.1.0",
     "tailwindcss": "3.4.1",
     "tslib": "2.6.2",
     "typescript": "5.3.3",

pnpm-lock.yaml

@@ -103,6 +103,9 @@ devDependencies:
   svelte-check:
     specifier: 3.6.3
     version: 3.6.3(postcss@8.4.33)(svelte@4.2.9)
+  sveltekit-search-params:
+    specifier: ^2.1.0
+    version: 2.1.0(@sveltejs/kit@2.4.3)(svelte@4.2.9)
   tailwindcss:
     specifier: 3.4.1
     version: 3.4.1
@@ -2892,6 +2895,16 @@ packages:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
+  /sveltekit-search-params@2.1.0(@sveltejs/kit@2.4.3)(svelte@4.2.9):
+    resolution: {integrity: sha512-qP+epzWVm0gnfFRx4OYq4Ps77WrQ5D81je/nybXbNAj9qyiQhpvxqyqDAYVr8/fOpvF7OJnUS2LmcW3+Ujdc/Q==}
+    peerDependencies:
+      '@sveltejs/kit': ^1.0.0 || ^2.0.0
+      svelte: ^3.55.0 || ^4.0.0 || ^5.0.0
+    dependencies:
+      '@sveltejs/kit': 2.4.3(@sveltejs/vite-plugin-svelte@3.0.1)(svelte@4.2.9)(vite@5.0.12)
+      svelte: 4.2.9
+    dev: true
+
   /tabbable@6.2.0:
     resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
     dev: false

src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { iSVG } from '@/types/svg';
   import { cn } from '@/utils/cn';
+  import { queryParam } from 'sveltekit-search-params';
 
   // Get all svgs:
   import { svgsData } from '@/data';
@@ -13,6 +14,9 @@
   import Grid from '@/components/grid.svelte';
   import NotFound from '@/components/notFound.svelte';
 
+  // URL params
+  const searchParam = queryParam('search');
+
   // Icons:
   import { ArrowDown, ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte';
   import { buttonStyles } from '@/ui/styles';
@@ -22,7 +26,7 @@
   let showAll: boolean = false;
 
   // Search:
-  let searchTerm = '';
+  let searchTerm = $searchParam || '';
   let filteredSvgs: iSVG[] = [];
 
   // Order by last added:
@@ -43,6 +47,7 @@
 
   // Search svgs:
   const searchSvgs = () => {
+    $searchParam = searchTerm || null;
     loadSvgs();
     filteredSvgs = allSvgs.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
@@ -80,7 +85,11 @@
     });
   };
 
-  loadSvgs();
+  if ($searchParam) {
+    searchSvgs();
+  } else {
+    loadSvgs();
+  }
 </script>
 
 <svelte:head>

src/routes/directory/[slug]/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import type { PageData } from './$types';
   import type { iSVG } from '@/types/svg';
+  import { queryParam } from 'sveltekit-search-params';
 
   export let data: PageData;
   let svgsByCategory = data.svgs || [];
@@ -13,8 +14,11 @@
   import SvgCard from '@/components/svgCard.svelte';
   import NotFound from '@/components/notFound.svelte';
 
+  // URL params
+  const searchParam = queryParam('search');
+
   // Search:
-  let searchTerm = '';
+  let searchTerm = $searchParam || '';
   let filteredSvgs: iSVG[] = [];
 
   if (searchTerm.length === 0) {
@@ -24,6 +28,7 @@
   }
 
   const searchSvgs = () => {
+    $searchParam = searchTerm || null;
     return (filteredSvgs = svgsByCategory.filter((svg: iSVG) => {
       let svgTitle = svg.title.toLowerCase();
       return svgTitle.includes(searchTerm.toLowerCase());
@@ -34,6 +39,10 @@
     searchTerm = '';
     searchSvgs();
   };
+
+  if ($searchParam) {
+    searchSvgs();
+  }
 </script>
 
 <svelte:head>