🎨 Design improvements + fixed content page size + improve accessibility

src/components/layout/showCategories.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { tCategory } from "@/types/categories";
+  import type { Category } from "@/types/categories";
 
   import { cn } from "@/utils/cn";
   import { svgs } from "@/data/svgs";
@@ -10,7 +10,7 @@
   import { sidebarBadgeClasses } from "./sidebarBadgeClasses";
 
   // Get category counts:
-  const categories: tCategory[] = getCategories();
+  const categories: Category[] = getCategories();
   let categoryCounts: Record<string, number> = {};
   categories.forEach((category) => {
     categoryCounts[category] = svgs.filter((svg) =>

src/components/layout/sidebar.svelte

@@ -20,7 +20,7 @@
       <ShowSidebarLinks />
     </nav>
     <Separator orientation="horizontal" />
-    <nav class="flex flex-col space-y-0.5 overflow-y-auto">
+    <nav class="relative flex h-auto flex-col space-y-0.5 overflow-y-auto">
       <ShowCategories />
     </nav>
   </aside>

src/components/logos/svgl.svelte

@@ -5,70 +5,14 @@
 </script>
 
 <svg
+  name="SVGL Logo"
+  xmlns="http://www.w3.org/2000/svg"
   width={props.size}
   height={props.size}
-  name="SVGL Logo"
+  fill="currentColor"
-  viewBox="0 0 512 512"
+  viewBox="0 0 256 256"
-  fill="none"
+  ><path d="M216,136c-8,24-56,72-80,80V184a48,48,0,0,1,48-48Z" opacity="0.2"
-  xmlns="http://www.w3.org/2000/svg"
+  ></path><path
-  xmlns:xlink="http://www.w3.org/1999/xlink"
+    d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
-  class={props.className}
+  ></path>
->
-  <rect
-    id="svgl__r4"
-    width="512"
-    height="512"
-    x="0"
-    y="0"
-    rx="128"
-    fill="#222"
-    stroke="#FFFFFF"
-    stroke-width="0"
-    stroke-opacity="100%"
-    paint-order="stroke"
-  /><rect
-    width="512"
-    height="512"
-    x="0"
-    y="0"
-    fill="url(#svgl__r6)"
-    rx="128"
-    style="mix-blend-mode: overlay;"
-  /><clipPath id="svgl__clip"><use xlink:href="#svgl__r4" /></clipPath><defs
-    ><linearGradient
-      id="svgl__r5"
-      gradientUnits="userSpaceOnUse"
-      gradientTransform="rotate(135)"
-      style="transform-origin: center center;"
-      ><stop stop-color="#222" /><stop
-        offset="1"
-        stop-color="#222222"
-      /></linearGradient
-    ><radialGradient
-      id="svgl__r6"
-      cx="0"
-      cy="0"
-      r="1"
-      gradientUnits="userSpaceOnUse"
-      gradientTransform="translate(256) rotate(90) scale(512)"
-      ><stop stop-color="white" /><stop
-        offset="1"
-        stop-color="white"
-        stop-opacity="0"
-      /></radialGradient
-    ></defs
-  ><svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="310"
-    height="310"
-    fill="#e8e8e8"
-    viewBox="0 0 256 256"
-    x="101"
-    y="101"
-    alignment-baseline="middle"
-    style="color: rgb(255, 255, 255);"
-    ><path
-      d="M168,32H88A56.06,56.06,0,0,0,32,88v80a56.06,56.06,0,0,0,56,56h48a8.07,8.07,0,0,0,2.53-.41c26.23-8.75,76.31-58.83,85.06-85.06A8.07,8.07,0,0,0,224,136V88A56.06,56.06,0,0,0,168,32ZM48,168V88A40,40,0,0,1,88,48h80a40,40,0,0,1,40,40v40H184a56.06,56.06,0,0,0-56,56v24H88A40,40,0,0,1,48,168Zm96,35.14V184a40,40,0,0,1,40-40h19.14C191,163.5,163.5,191,144,203.14Z"
-    /></svg
-  >
 </svg>

src/components/svgs/addToFavorite.svelte

@@ -22,7 +22,7 @@
 <button
   class={cn(
     "cursor-pointer transition-colors hover:animate-pulse",
-    "text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-400",
+    "text-neutral-500 hover:text-red-700 dark:text-neutral-400 dark:hover:text-red-600",
     isFavorite && "text-red-500",
   )}
   onclick={toggleFavorite}
@@ -36,6 +36,6 @@
   <HeartIcon
     size={16}
     strokeWidth={1.8}
-    class={cn(isFavorite && "fill-red-500")}
+    class={cn(isFavorite && "fill-red-500 dark:fill-red-600")}
   />
 </button>

src/components/svgs/copySvg.svelte

@@ -564,8 +564,8 @@
       class="mt-1 flex w-full items-center text-center text-[12px] text-neutral-600 dark:text-neutral-400"
     >
       <p>
-        Remember to request permission from the creators for the use of the SVG.
+        Please ensure you have permission from the creators before using the
-        Modification is not allowed.
+        SVG. Modifications are not permitted.
       </p>
     </div>
   </Popover.Content>

src/components/svgs/downloadSvg.svelte

@@ -306,11 +306,15 @@
           </div>
         {/if}
       </div>
-      <Dialog.Footer class="text-xs text-neutral-600 dark:text-neutral-400">
+      <Dialog.Footer>
-        <p>
+        <div
-          Remember to request permission from the creators for the use of the
+          class="mt-2 flex w-full items-center justify-center text-sm text-neutral-600 dark:text-neutral-400"
-          SVG. Modification is not allowed.
+        >
-        </p>
+          <p class="w-full text-center text-sm">
+            Please ensure you have permission from the creators before using the
+            SVG. Modifications are not permitted.
+          </p>
+        </div>
       </Dialog.Footer>
     </Dialog.Content>
   </Dialog.Root>

src/markdown/rehypeCopyBtn.ts

@@ -90,9 +90,9 @@ export const rehypeCopyBtn = () => {
             type: "button",
             title: "Copy code to clipboard",
             class: cn(
-              "cursor-pointer absolute top-0 right-0 px-1.5 py-0.5 rounded-bl-md",
+              "cursor-pointer z-40 absolute top-[1px] right-[1px] px-1.5 py-0.5 rounded-bl-md",
               "border-b border-l border-neutral-200 dark:border-neutral-800",
-              "transition-colors hover:text-neutral-700 dark:hover:text-neutral-300",
+              "transition-colors text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-white",
             ),
             onclick: `
             const button = this;

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

@@ -1,16 +1,22 @@
 <script lang="ts">
   import type { PageProps } from "./$types";
+  import { cn } from "@/utils/cn";
 
   import PageCard from "@/components/pageCard.svelte";
-  import PageHeader from "@/components/pageHeader.svelte";
-
   import Container from "@/components/container.svelte";
+  import PageHeader from "@/components/pageHeader.svelte";
+  import TableOfContents from "@/components/tableOfContents/tableOfContents.svelte";
+  import * as Collapsible from "@/components/ui/collapsible";
+
   import FileText from "@lucide/svelte/icons/file-text";
 
   // Markdown:
   import "@/styles/markdown.css";
+  import { buttonVariants } from "@/components/ui/button";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
 
   let { data }: PageProps = $props();
+  let tocOpen = $state(false);
   const document = $derived(data.document);
 </script>
 
@@ -21,7 +27,7 @@
 
 <PageCard
   containerClass="mt-0"
-  contentCardClass="max-h-[calc(100vh-5rem)] min-h-[calc(100vh-5rem)]"
+  contentCardClass="min-h-[calc(100vh-5.4rem)] md:min-h-[calc(100vh-5rem)]"
 >
   <PageHeader>
     <div
@@ -33,7 +39,42 @@
       </p>
     </div>
   </PageHeader>
-  <Container className="my-6">
+  <Collapsible.Root class="block lg:hidden" bind:open={tocOpen}>
-    <article class="markdown">{@html document.html}</article>
+    <Collapsible.Trigger
-  </Container>
+      class={buttonVariants({
+        variant: "outline",
+        class: "mb-4 w-full rounded-none border-x-0 border-t-0",
+      })}
+    >
+      <span>On this page</span>
+      <ChevronDown
+        size={14}
+        class={cn(
+          "transition-transform duration-200",
+          tocOpen ? "rotate-180" : "rotate-0",
+        )}
+      />
+    </Collapsible.Trigger>
+    <Collapsible.Content class="px-4">
+      <TableOfContents toc={document.tableOfContents} />
+    </Collapsible.Content>
+  </Collapsible.Root>
+  <div class="flex min-h-screen gap-8 lg:gap-12">
+    <Container
+      className={cn(
+        "flex-1 mt-8 mb-6 max-w-3xl",
+        "animate-in duration-500 fill-mode-backwards fade-in slide-in-from-bottom-4",
+      )}
+    >
+      <article class="markdown">{@html document.html}</article>
+    </Container>
+    <aside class="sticky top-20 hidden w-60 flex-shrink-0 self-start lg:block">
+      <div
+        class="mb-2 text-sm font-medium text-neutral-900 dark:text-neutral-50"
+      >
+        On this page
+      </div>
+      <TableOfContents toc={document.tableOfContents} />
+    </aside>
+  </div>
 </PageCard>

src/routes/extensions/+page.svelte

@@ -103,7 +103,7 @@
   </section>
   <Container
     className={cn(
-      "max-w-3xl",
+      "max-w-4xl",
       "animate-in delay-500 duration-500 fill-mode-backwards fade-in slide-in-from-bottom-4",
     )}
   >