diff --git a/src/components/grid.svelte b/src/components/grid.svelte index 47b3936..953c2da 100644 --- a/src/components/grid.svelte +++ b/src/components/grid.svelte @@ -2,13 +2,21 @@ import type { Snippet } from "svelte"; import { cn } from "@/utils/cn"; - let { className, children }: { className?: string; children?: Snippet } = - $props(); + interface GridProps { + columns?: "default" | "4" | "3" | "2"; + className?: string; + children?: Snippet; + } + + let { className, columns, children }: GridProps = $props();
diff --git a/src/components/layout/header.svelte b/src/components/layout/header.svelte index 08260ed..cfbe10c 100644 --- a/src/components/layout/header.svelte +++ b/src/components/layout/header.svelte @@ -14,7 +14,7 @@ import SendIcon from "@/components/ui/moving-icons/send-icon.svelte"; interface HeaderProps { - githubStars: number; + githubStars?: number; } let { githubStars }: HeaderProps = $props(); @@ -55,22 +55,36 @@ />
- - - - {githubStars >= 1000 - ? `${(githubStars / 1000).toFixed(1)}k` - : githubStars.toLocaleString()} - - + {#if githubStars !== undefined} + + + + {githubStars >= 1000 + ? `${(githubStars / 1000).toFixed(1)}k` + : githubStars.toLocaleString()} + + + {:else} + + + + {/if} void; placeholder?: string; + iconSize?: number; + inputClass?: string; } - let { searchValue, onSearch, placeholder }: Props = $props(); + let { searchValue, onSearch, placeholder, iconSize, inputClass }: Props = + $props(); let inputElement: HTMLInputElement; const onInput = (event: Event) => { @@ -42,7 +45,7 @@
{#if !searchValue} diff --git a/src/components/svgs/copySvg.svelte b/src/components/svgs/copySvg.svelte index 5ec90a2..dfb9f64 100644 --- a/src/components/svgs/copySvg.svelte +++ b/src/components/svgs/copySvg.svelte @@ -477,17 +477,6 @@ Copy JS - -
{:else} @@ -149,10 +150,10 @@ {svgInfo.title} {/if} @@ -205,10 +215,10 @@ {svgInfo.title} {/if} @@ -231,10 +244,10 @@ ? svgInfo.wordmark.dark : svgInfo.wordmark.light} alt={svgInfo.title} - class="my-4 h-10" + class={imgStyles} /> {/if} - +

Remember to request permission from the creators for the use of the SVG. Modification is not allowed. diff --git a/src/components/ui/dialog/dialog-content.svelte b/src/components/ui/dialog/dialog-content.svelte index 786107a..aad1959 100644 --- a/src/components/ui/dialog/dialog-content.svelte +++ b/src/components/ui/dialog/dialog-content.svelte @@ -27,7 +27,8 @@ bind:ref data-slot="dialog-content" class={cn( - "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-2 rounded-lg border border-neutral-200 bg-white p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg dark:border-neutral-800 dark:bg-neutral-900", + "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-2 rounded-lg p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-2xl", + "border border-neutral-200 bg-white dark:border-neutral-800 dark:bg-neutral-900", className, )} {...restProps} @@ -35,7 +36,10 @@ {@render children?.()} {#if showCloseButton} Close diff --git a/src/components/viewTransitions.svelte b/src/components/viewTransitions.svelte deleted file mode 100644 index 793404e..0000000 --- a/src/components/viewTransitions.svelte +++ /dev/null @@ -1,12 +0,0 @@ - diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index 98b5872..9264983 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -5,10 +5,6 @@ export const load: LayoutServerLoad = async ({ fetch, setHeaders }) => { try { const response = await fetch(globals.apiGithubUrl); - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - const data = await response.json(); // 1 day cache: @@ -22,7 +18,7 @@ export const load: LayoutServerLoad = async ({ fetch, setHeaders }) => { } catch (error) { console.error("Error fetching GitHub data:", error); return { - stars: 0, + stars: null, error: "Failed to fetch repository data", }; } diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 47cae69..9526051 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -10,7 +10,6 @@ // Providers: import { ModeWatcher } from "mode-watcher"; import Sidebar from "@/components/layout/sidebar.svelte"; - import ViewTransitions from "@/components/viewTransitions.svelte"; import Sonner from "@/components/ui/sonner/sonner.svelte"; // SSR Data: @@ -18,7 +17,6 @@ -

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 86e30f1..4da1c3b 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,7 +5,7 @@ import { cn } from "@/utils/cn"; import { deleteParam } from "@/utils/searchParams"; import { svgsData } from "@/data"; - import { searchWithFuse } from "@/utils/searchWithFuse"; + import { searchSvgsWithFuse } from "@/utils/searchWithFuse"; // Components: import Grid from "@/components/grid.svelte"; @@ -17,6 +17,7 @@ import PageCard from "@/components/pageCard.svelte"; import FolderIcon from "@lucide/svelte/icons/folder"; + import ChevronDownIcon from "@lucide/svelte/icons/chevron-down"; import PageHeader from "@/components/pageHeader.svelte"; import Button from "@/components/ui/button/button.svelte"; @@ -43,17 +44,9 @@ updateDisplaySvgs(); return; } - if (searchTerm.length < 3) { - filteredSvgs = (sorted ? alphabeticallySorted : latestSorted).filter( - (svg: iSVG) => - svg.title.toLowerCase().includes(searchTerm.toLowerCase()), - ); - } else { - filteredSvgs = searchWithFuse(filteredSvgs) - .search(searchTerm) - .map((result) => result.item); - } - + filteredSvgs = searchSvgsWithFuse(filteredSvgs) + .search(searchTerm) + .map((result) => result.item); updateDisplaySvgs(); }; @@ -125,5 +118,16 @@ {/each} + {#if showAll === false && filteredSvgs.length > maxDisplay} +
+ +
+ {/if} diff --git a/src/routes/+page.ts b/src/routes/+page.ts index 0fbbedb..a7f6899 100644 --- a/src/routes/+page.ts +++ b/src/routes/+page.ts @@ -2,7 +2,7 @@ import type { iSVG } from "@/types/svg"; import type { Load } from "@sveltejs/kit"; import { svgsData } from "@/data"; -import { searchWithFuse } from "@/utils/searchWithFuse"; +import { searchSvgsWithFuse } from "@/utils/searchWithFuse"; export const load: Load = ({ url }) => { const searchParam = url.searchParams.get("search") || ""; @@ -17,17 +17,10 @@ export const load: Load = ({ url }) => { if (!searchParam) { filteredSvgs = sortParam ? alphabeticallySorted : latestSorted; } else { - if (searchParam.length < 3) { - const baseData = sortParam ? alphabeticallySorted : latestSorted; - filteredSvgs = baseData.filter((svg: iSVG) => - svg.title.toLowerCase().includes(searchParam.toLowerCase()), - ); - } else { - const baseData = sortParam ? alphabeticallySorted : latestSorted; - filteredSvgs = searchWithFuse(baseData) - .search(searchParam) - .map((result) => result.item); - } + const baseData = sortParam ? alphabeticallySorted : latestSorted; + filteredSvgs = searchSvgsWithFuse(baseData) + .search(searchParam) + .map((result) => result.item); } return { diff --git a/src/routes/directory/+page.server.ts b/src/routes/directory/+page.server.ts new file mode 100644 index 0000000..8f4d59c --- /dev/null +++ b/src/routes/directory/+page.server.ts @@ -0,0 +1,5 @@ +import { redirect } from "@sveltejs/kit"; + +export const load = async () => { + return redirect(307, "/"); +}; diff --git a/src/routes/directory/[category]/+page.svelte b/src/routes/directory/[category]/+page.svelte index d0900de..a4c0c85 100644 --- a/src/routes/directory/[category]/+page.svelte +++ b/src/routes/directory/[category]/+page.svelte @@ -2,11 +2,8 @@ import type { iSVG } from "@/types/svg"; import type { PageProps } from "./$types"; - import { page } from "$app/state"; - import { SvelteURLSearchParams } from "svelte/reactivity"; - import { cn } from "@/utils/cn"; - import { searchWithFuse } from "@/utils/searchWithFuse"; + import { searchSvgsWithFuse } from "@/utils/searchWithFuse"; // Components: import Grid from "@/components/grid.svelte"; @@ -45,17 +42,9 @@ updateDisplaySvgs(); return; } - if (searchTerm.length < 3) { - filteredSvgs = ( - sorted ? data.alphabeticallySorted : data.latestSorted - ).filter((svg: iSVG) => - svg.title.toLowerCase().includes(searchTerm.toLowerCase()), - ); - } else { - filteredSvgs = searchWithFuse(filteredSvgs) - .search(searchTerm) - .map((result) => result.item); - } + filteredSvgs = searchSvgsWithFuse(filteredSvgs) + .search(searchTerm) + .map((result) => result.item); updateDisplaySvgs(); }; diff --git a/src/routes/directory/[category]/+page.ts b/src/routes/directory/[category]/+page.ts index cb3c5be..ddf7184 100644 --- a/src/routes/directory/[category]/+page.ts +++ b/src/routes/directory/[category]/+page.ts @@ -3,7 +3,7 @@ import type { iSVG } from "@/types/svg"; import { error } from "@sveltejs/kit"; import { getSvgsByCategory } from "@/data"; -import { searchWithFuse } from "@/utils/searchWithFuse"; +import { searchSvgsWithFuse } from "@/utils/searchWithFuse"; export const load: PageLoad = (async ({ params, url }) => { const { category } = params; @@ -26,17 +26,10 @@ export const load: PageLoad = (async ({ params, url }) => { if (!searchParam) { filteredSvgs = sortParam ? alphabeticallySorted : latestSorted; } else { - if (searchParam.length < 3) { - const baseData = sortParam ? alphabeticallySorted : latestSorted; - filteredSvgs = baseData.filter((svg: iSVG) => - svg.title.toLowerCase().includes(searchParam.toLowerCase()), - ); - } else { - const baseData = sortParam ? alphabeticallySorted : latestSorted; - filteredSvgs = searchWithFuse(baseData) - .search(searchParam) - .map((result) => result.item); - } + const baseData = sortParam ? alphabeticallySorted : latestSorted; + filteredSvgs = searchSvgsWithFuse(baseData) + .search(searchParam) + .map((result) => result.item); } return { diff --git a/src/routes/docs/+page.server.ts b/src/routes/docs/+page.server.ts new file mode 100644 index 0000000..8f4d59c --- /dev/null +++ b/src/routes/docs/+page.server.ts @@ -0,0 +1,5 @@ +import { redirect } from "@sveltejs/kit"; + +export const load = async () => { + return redirect(307, "/"); +};