From 09291b90fe5f706542f7c6b0d2264dd84d8adb71 Mon Sep 17 00:00:00 2001 From: pheralb Date: Fri, 29 Aug 2025 00:14:31 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Refactor=20sidebar=20li?= =?UTF-8?q?nk=20activation,=20enhance=20PageCard=20and=20PageHeader=20comp?= =?UTF-8?q?onents,=20and=20improve=20badge=20styles?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/showSidebarLinks.svelte | 2 +- src/components/pageCard.svelte | 6 +++- src/components/pageHeader.svelte | 22 ++++++++++++++ src/components/ui/badge/badge.variants.ts | 2 +- src/components/ui/tabs/tabs-list.svelte | 2 +- src/components/ui/tabs/tabs-trigger.svelte | 2 +- src/routes/+page.svelte | 15 +++++----- src/routes/api/+page.server.ts | 5 ++++ src/routes/directory/[category]/+page.svelte | 29 ++++++++++--------- 9 files changed, 59 insertions(+), 26 deletions(-) create mode 100644 src/components/pageHeader.svelte create mode 100644 src/routes/api/+page.server.ts diff --git a/src/components/layout/showSidebarLinks.svelte b/src/components/layout/showSidebarLinks.svelte index 1e7f24b..197cecd 100644 --- a/src/components/layout/showSidebarLinks.svelte +++ b/src/components/layout/showSidebarLinks.svelte @@ -54,7 +54,7 @@ class={cn( sidebarItemClasses.base, "justify-start space-x-3", - String(page.url.pathname) === "/api" && sidebarItemClasses.active, + String(page.url.pathname) === "/docs/api" && sidebarItemClasses.active, )} > diff --git a/src/components/pageCard.svelte b/src/components/pageCard.svelte index 3d13789..708d221 100644 --- a/src/components/pageCard.svelte +++ b/src/components/pageCard.svelte @@ -4,9 +4,11 @@ interface PageCardProps { children: Snippet; + containerClass?: string; + contentCardClass?: string; } - let { children }: PageCardProps = $props(); + let { children, contentCardClass, containerClass }: PageCardProps = $props();
{@render children?.()} diff --git a/src/components/pageHeader.svelte b/src/components/pageHeader.svelte new file mode 100644 index 0000000..49648ae --- /dev/null +++ b/src/components/pageHeader.svelte @@ -0,0 +1,22 @@ + + +
+ {@render children?.()} +
diff --git a/src/components/ui/badge/badge.variants.ts b/src/components/ui/badge/badge.variants.ts index cbcf055..9052aa6 100644 --- a/src/components/ui/badge/badge.variants.ts +++ b/src/components/ui/badge/badge.variants.ts @@ -17,7 +17,7 @@ const badgeVariants = tv({ danger: "bg-red-100 text-red-800 border-red-200 dark:bg-red-900 dark:text-red-100 dark:border-red-800", outline: - "bg-transparent border border-neutral-300 text-neutral-700 dark:border-neutral-700 dark:text-neutral-400", + "bg-transparent border border-neutral-300 text-neutral-700 dark:border-neutral-800 dark:text-neutral-400", }, size: { sm: "text-xs px-2 py-0.5", diff --git a/src/components/ui/tabs/tabs-list.svelte b/src/components/ui/tabs/tabs-list.svelte index 306bfdb..46706e5 100644 --- a/src/components/ui/tabs/tabs-list.svelte +++ b/src/components/ui/tabs/tabs-list.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="tabs-list" class={cn( - "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-neutral-100 p-1 text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400", + "inline-flex h-9 items-center justify-center rounded-md border border-neutral-200 bg-white p-1 text-neutral-500 dark:border-neutral-800 dark:bg-neutral-900 dark:text-neutral-400", className, )} {...restProps} diff --git a/src/components/ui/tabs/tabs-trigger.svelte b/src/components/ui/tabs/tabs-trigger.svelte index 76f798b..6082852 100644 --- a/src/components/ui/tabs/tabs-trigger.svelte +++ b/src/components/ui/tabs/tabs-trigger.svelte @@ -13,7 +13,7 @@ bind:ref data-slot="tabs-trigger" class={cn( - "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-950 dark:data-[state=active]:text-neutral-50", + "inline-flex items-center justify-center rounded-md px-3 py-1 text-sm font-medium whitespace-nowrap ring-offset-white transition-all focus-visible:ring-2 focus-visible:ring-neutral-950 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-neutral-200 data-[state=active]:text-neutral-950 data-[state=active]:shadow dark:ring-offset-neutral-950 dark:focus-visible:ring-neutral-300 dark:data-[state=active]:bg-neutral-800 dark:data-[state=active]:text-neutral-50", className, )} {...restProps} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 846b6c8..ebd8af2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -14,6 +14,7 @@ import Container from "@/components/container.svelte"; import PageCard from "@/components/pageCard.svelte"; + import PageHeader from "@/components/pageHeader.svelte"; import FolderIcon from "@lucide/svelte/icons/folder"; import FolderSearchIcon from "@lucide/svelte/icons/folder-search"; @@ -64,6 +65,10 @@ }); + + A beautiful library with SVG logos - Svgl + + -
+
@@ -103,7 +102,7 @@ searchSvgs(); }} /> -
+ {#each displaySvgs as svg} diff --git a/src/routes/api/+page.server.ts b/src/routes/api/+page.server.ts new file mode 100644 index 0000000..85d93f8 --- /dev/null +++ b/src/routes/api/+page.server.ts @@ -0,0 +1,5 @@ +import { redirect } from "@sveltejs/kit"; + +export const load = async () => { + return redirect(307, "/docs/api"); +}; diff --git a/src/routes/directory/[category]/+page.svelte b/src/routes/directory/[category]/+page.svelte index f954968..2768503 100644 --- a/src/routes/directory/[category]/+page.svelte +++ b/src/routes/directory/[category]/+page.svelte @@ -2,6 +2,10 @@ import type { iSVG } from "@/types/svg"; import type { PageProps } from "./$types"; + import { page } from "$app/state"; + import { goto } from "$app/navigation"; + import { SvelteURLSearchParams } from "svelte/reactivity"; + import { cn } from "@/utils/cn"; import { searchWithFuse } from "@/utils/searchWithFuse"; @@ -12,16 +16,14 @@ import Container from "@/components/container.svelte"; import PageCard from "@/components/pageCard.svelte"; + import PageHeader from "@/components/pageHeader.svelte"; import FolderIcon from "@lucide/svelte/icons/folder-open"; import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left"; - - import { page } from "$app/state"; - import { goto } from "$app/navigation"; - import { SvelteURLSearchParams } from "svelte/reactivity"; import { buttonVariants } from "@/components/ui/button"; // SSR Data: let { data }: PageProps = $props(); + const directoryData = $derived(data); // States: let searchTerm = $state(data.searchTerm || ""); @@ -62,6 +64,9 @@ searchSvgs(); }; + const formatCategory = (category: string) => + category.charAt(0).toUpperCase() + category.slice(1); + $effect(() => { filteredSvgs = data.svgs.filter((svg: iSVG) => svg.title.toLowerCase().includes(searchTerm.toLowerCase()), @@ -69,6 +74,10 @@ }); + + {formatCategory(directoryData.category)} SVG logos - Svgl + + -
+
@@ -100,7 +103,7 @@

- {data.category.slice(0, 1).toUpperCase() + data.category.slice(1)} + {formatCategory(directoryData.category)}

- {#if !searchTerm} @@ -114,7 +117,7 @@

{/if}
-
+ {#each filteredSvgs as svg}