Merge branch 'main' into multiple-category

src/components/cardSpotlight.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-  let div: HTMLDivElement;
+  let domElement: HTMLElement;
   let focused = false;
   let position = { x: 0, y: 0 };
   let opacity = 0;
 
   const handleMouseMove = (e: MouseEvent) => {
-    if (!div || focused) return;
+    if (!domElement || focused) return;
 
-    const rect = div.getBoundingClientRect();
+    const rect = domElement.getBoundingClientRect();
 
     position = {
       x: e.clientX - rect.left,
@@ -34,9 +34,8 @@
   };
 </script>
 
-<div
-  aria-hidden="true"
-  bind:this={div}
+<article
+  bind:this={domElement}
   on:mousemove={handleMouseMove}
   on:focus={handleFocus}
   on:blur={handleBlur}
@@ -52,4 +51,4 @@
 		`}
   />
   <slot />
-</div>
+</article>

src/components/navbar.svelte

@@ -27,13 +27,15 @@
       name: 'Extensions',
       url: 'https://github.com/pheralb/svgl?tab=readme-ov-file#-extensions',
       icon: ArrowUpRight,
-      external: true
+      external: true,
+      label: "Go to the SVGL's extensions section"
     },
     {
       name: 'Submit logo',
       url: 'https://github.com/pheralb/svgl#-getting-started',
       icon: ArrowUpRight,
-      external: true
+      external: true,
+      label: "Go to the SVGL's getting started section"
     }
   ];
 </script>
@@ -48,7 +50,7 @@
 >
   <div class="flex items-center justify-between mx-auto">
     <div class="flex items-center space-x-2">
-      <a href="/">
+      <a href="/" aria-label="Back to the SVGL home page">
         <div class="flex items-center space-x-2 hover:opacity-80 transition-opacity">
           <svelte:component this={Logo} />
           <span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
@@ -64,6 +66,7 @@
           <a
             href={link.url}
             target={link.external ? '_blank' : ''}
+            aria-label={link.label ?? link.name}
             class={cn(
               'flex items-center hover:opacity-80 transition-opacity text-[15px] pl-2 md:pl-3 group',
               currentPath === link.url &&

src/components/svgCard.svelte

@@ -209,6 +209,10 @@
           >
         {/if}
       </div>
+      <a
+        href={`/directory/${svgInfo.category.toLowerCase()}`}
+        class="text-sm lowercase text-neutral-400 hover:underline font-mono">{svgInfo.category}</a
+      >
     </div>
     <!-- Actions -->
     <div class="flex items-center space-x-1">

src/data/svgs.ts

@@ -1112,6 +1112,12 @@ export const svgs: iSVG[] = [
     route: '/library/stackblitz.svg',
     url: 'https://stackblitz.com/'
   },
+  {
+    title: 'Binance',
+    category: 'Crypto',
+    route: '/library/binance.svg',
+    url: 'https://binance.com/'
+  },
   {
     title: 'Messenger',
     category: 'Social',
@@ -1370,6 +1376,15 @@ export const svgs: iSVG[] = [
     route: '/library/crossplane.svg',
     url: 'https://crossplane.io/'
   },
+  {
+    title: 'Volta',
+    category: 'Software',
+    route: {
+      light: '/library/volta-dark.svg',
+      dark: '/library/volta-light.svg'
+    },
+    url: 'https://volta.net/'
+  },
   {
     title: 'Typesense',
     category: 'Software',
@@ -1413,15 +1428,13 @@ export const svgs: iSVG[] = [
     url: 'https://www.bnbchain.org/'
   },
   {
-    title: 'TRON',
-    category: 'Crypto',
-    route: '/library/trx.svg',
-    url: 'https://tron.network/'
-  },
-  {
-    title: 'Chainlink',
+    title: 'Link',
     category: 'Crypto',
     route: '/library/link.svg',
+    wordmark: {
+      light: '/library/link-wordmark-light.svg',
+      dark: '/library/link-wordmark-dark.svg'
+    },
     url: 'https://chain.link/'
   },
   {
@@ -1550,6 +1563,12 @@ export const svgs: iSVG[] = [
     route: '/library/datadog.svg',
     url: 'https://www.datadoghq.com/'
   },
+  {
+    title: 'Tron',
+    category: 'Crypto',
+    route: '/library/tron.svg',
+    url: 'https://tron.network/'
+  },
   {
     title: 'Randevum',
     category: 'Software',