Merge pull request #57 from pheralb/dev

🚀 v3.2.2

README.md

@@ -9,15 +9,15 @@
     <a href="https://svgl.vercel.app/" target="_blank">
         Discover
     </a>
-    <span>&nbsp;●&nbsp;</span>
+    <span>&nbsp;⁘&nbsp;</span>
     <a href="#-getting-started">
         Submit logo
     </a>
-    <span>&nbsp;●&nbsp;</span>
+    <span>&nbsp;⁘&nbsp;</span>
     <a href="#%EF%B8%8F-stack">
         Stack
     </a>
-    <span>&nbsp;●&nbsp;</span>
+    <span>&nbsp;⁘&nbsp;</span>
     <a href="#%EF%B8%8F-contributing">
         Contributing
     </a>
@@ -27,12 +27,13 @@
 
 <div align="center">
 
+![Svelte Badge](https://img.shields.io/badge/Svelte-FF3E00?logo=svelte&logoColor=fff&style=flat)
 [![Build Status](https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fpheralb%2Fsvgl%2Fbadge%3Fref%3Dmain&style=flat)](https://actions-badge.atrox.dev/pheralb/svgl/goto?ref=main)
 ![GitHub stars](https://img.shields.io/github/stars/pheralb/svgl)
 ![GitHub issues](https://img.shields.io/github/issues/pheralb/svgl)
 ![GitHub forks](https://img.shields.io/github/forks/pheralb/svgl)
-![GitHub license](https://img.shields.io/github/license/pheralb/svgl)
 ![GitHub PRs](https://img.shields.io/github/issues-pr/pheralb/svgl)
+![Tailwind CSS Badge](https://img.shields.io/badge/Tailwind%20CSS-06B6D4?logo=tailwindcss&logoColor=fff&style=flat)
 
 </div>
 
@@ -43,6 +44,7 @@
 - [**Tailwindcss**](https://tailwindcss.com/) - A utility-first CSS framework for rapidly building custom designs.
 - [**Prettier**](https://prettier.io/) + [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) - An opinionated code formatter.
 - [**phosphor-svelte**](https://github.com/haruaki07/phosphor-svelte) - A clean and friendly icon family for Svelte.
+- [**svelte-sonner**](https://github.com/wobsoriano/svelte-sonner) - An opinionated toast component for Svelte.
 - [**Vitest**](https://vitest.dev/) - Blazing Fast Unit Test Framework.
 
 ## 🚀 Getting Started

package.json

@@ -1,7 +1,7 @@
 {
   "name": "svgl",
   "author": "@pheralb_",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "A beautiful library with SVG logos.",
   "private": true,
   "license": "MIT",

src/components/cardSpotlight.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  let div: HTMLDivElement;
+  let focused = false;
+  let position = { x: 0, y: 0 };
+  let opacity = 0;
+
+  const handleMouseMove = (e: MouseEvent) => {
+    if (!div || focused) return;
+
+    const rect = div.getBoundingClientRect();
+
+    position = {
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top
+    };
+  };
+
+  const handleFocus = () => {
+    focused = true;
+    opacity = 1;
+  };
+
+  const handleBlur = () => {
+    focused = false;
+    opacity = 0;
+  };
+
+  const handleMouseEnter = () => {
+    opacity = 1;
+  };
+
+  const handleMouseLeave = () => {
+    opacity = 0;
+  };
+</script>
+
+<div
+  aria-hidden="true"
+  bind:this={div}
+  on:mousemove={handleMouseMove}
+  on:focus={handleFocus}
+  on:blur={handleBlur}
+  on:mouseenter={handleMouseEnter}
+  on:mouseleave={handleMouseLeave}
+  class="relative flex items-center justify-center overflow-hidden rounded-md border border-neutral-200 dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800/20"
+>
+  <div
+    class="pointer-events-none absolute -inset-px opacity-0 transition duration-300"
+    style={`
+			opacity: ${opacity};
+			background: radial-gradient(600px circle at ${position.x}px ${position.y}px, rgba(97, 97, 97, 0.1), transparent 40%);
+		`}
+  />
+  <slot />
+</div>

src/components/svgCard.svelte

@@ -9,6 +9,7 @@
   import Copy from 'phosphor-svelte/lib/Copy';
   import Link from 'phosphor-svelte/lib/Link';
   import Star from 'phosphor-svelte/lib/Star';
+  import CardSpotlight from './cardSpotlight.svelte';
 
   // Props:
   export let svgInfo: iSVG;
@@ -38,43 +39,43 @@
   };
 </script>
 
-<div
-  class="flex flex-col items-center justify-center rounded-md border border-neutral-300 bg-neutral-100 p-4 dark:border-neutral-800 dark:bg-neutral-700/10"
->
-  <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
-  <div class="mb-3 flex flex-col items-center justify-center">
-    <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
-    <a
-      href={`/directory/${svgInfo.category.toLowerCase()}`}
-      class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
-    >
+<CardSpotlight>
+  <div class="flex flex-col items-center justify-center rounded-md p-4">
+    <img src={svgInfo.route} alt={svgInfo.title} class="mb-4 mt-2 h-10" />
+    <div class="mb-3 flex flex-col items-center justify-center">
+      <p class="truncate text-[15px] font-medium">{svgInfo.title}</p>
+      <a
+        href={`/directory/${svgInfo.category.toLowerCase()}`}
+        class="text-sm lowercase text-neutral-500 hover:underline">{svgInfo.category}</a
+      >
+    </div>
+    <div class="flex items-center space-x-1">
+      <button
+        title="Copy to clipboard"
+        on:click={() => {
+          copyToClipboard(svgInfo.route);
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <Copy size={17} />
+      </button>
+      <button
+        title="Download"
+        on:click={() => {
+          downloadSvg(svgInfo.route);
+        }}
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <DownloadSimple size={17} />
+      </button>
+      <a
+        href={svgInfo.url}
+        title="Website"
+        target="_blank"
+        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      >
+        <Link size={17} />
+      </a>
+    </div>
   </div>
-  <div class="flex items-center space-x-1">
-    <button
-      title="Copy to clipboard"
-      on:click={() => {
-        copyToClipboard(svgInfo.route);
-      }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <Copy size={17} />
-    </button>
-    <button
-      title="Download"
-      on:click={() => {
-        downloadSvg(svgInfo.route);
-      }}
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <DownloadSimple size={17} />
-    </button>
-    <a
-      href={svgInfo.url}
-      title="Website"
-      target="_blank"
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
-    >
-      <Link size={17} />
-    </a>
-  </div>
-</div>
+</CardSpotlight>

src/data/svgs.ts

@@ -1498,5 +1498,12 @@ export const svgs: iSVG[] = [
     category: 'Crypto',
     route: '/library/matic.svg',
     url: 'https://polygon.technology/'
+  },
+  {
+    id: 215,
+    title: 'X',
+    category: 'Social',
+    route: '/library/x.svg',
+    url: 'https://x.com'
   }
 ];

src/routes/+layout.svelte

@@ -16,6 +16,8 @@
   import ArrowUpRight from 'phosphor-svelte/lib/ArrowUpRight';
   import ArrowLeft from 'phosphor-svelte/lib/ArrowLeft';
   import Star from 'phosphor-svelte/lib/Star';
+  import GithubLogo from 'phosphor-svelte/lib/GithubLogo';
+  import Box from 'phosphor-svelte/lib/Cube';
 
   // Toaster:
   import { Toaster } from 'svelte-sonner';
@@ -38,7 +40,7 @@
               class="flex items-center space-x-2 duration-150 hover:text-neutral-500 dark:hover:text-neutral-300"
             >
               <h3 class="text-xl font-medium">svgl</h3>
-              <p class="text-neutral-500">v3.2.1</p>
+              <p class="text-neutral-500">v3.2.2</p>
             </div>
           </a>
           <Theme />
@@ -50,18 +52,21 @@
       >
         <a
           href="/"
-          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
-              ${data.pathname === `/` ? 'bg-neutral-200 dark:bg-neutral-700/30' : ''}`}
+          class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 ${
+            data.pathname === `/`
+              ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
+              : ''
+          }`}
           data-sveltekit-preload-data>All</a
         >
         <!-- Order alfabetically: -->
         {#each categories.sort() as category}
           <a
             href={`/directory/${category.toLowerCase()}`}
-            class={`flex w-full items-center rounded-md p-2 transition-none duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
+            class={`flex w-full items-center rounded-md p-2 transition-none duration-100 text-neutral-600 hover:text-dark dark:hover:text-white dark:text-neutral-400 hover:bg-neutral-200 dark:hover:bg-neutral-700/40
               ${
                 data.pathname === `/directory/${category.toLowerCase()}`
-                  ? 'bg-neutral-200 dark:bg-neutral-700/30'
+                  ? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
                   : ''
               }`}
             data-sveltekit-preload-data>{category}</a
@@ -76,15 +81,17 @@
           target="_blank"
           class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
         >
+          <div><Box size={18} /></div>
           <span>Submit logo</span>
-          <div><ArrowUpRight size={16} /></div>
+          <div><ArrowUpRight size={12} /></div>
         </a>
         <a
           href="https://github.com/pheralb/svgl"
           target="_blank"
           class="flex w-full items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
         >
           <div class="flex items-center space-x-2">
+            <div><GithubLogo size={18} /></div>
             <span class="flex items-center justify-center">Repository</span>
             {#if data.stars}
               <div class="flex items-center space-x-1 text-neutral-600 dark:text-neutral-400">
@@ -94,7 +101,7 @@
                 <span>{data.stars}</span>
               </div>
             {/if}
-            <div><ArrowUpRight size={16} /></div>
+            <div><ArrowUpRight size={12} /></div>
           </div>
         </a>
       </div>