Merge pull request #57 from pheralb/dev

🚀 v3.2.2
2024-11-10 14:46:54 +08:00 · 2023-11-14 10:52:05 +00:00 · 2023-11-14 10:52:05 +00:00 · 51809f10e5
commit 51809f10e5
parent 550696e4a7 723cf85b6c
7 changed files with 124 additions and 51 deletions
--- a/README.md
+++ b/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
--- a/package.json
+++ b/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",
--- a/src/components/cardSpotlight.svelte
+++ b/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>
--- a/src/components/svgCard.svelte
+++ b/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,9 +39,8 @@
  };
 </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"
->
+<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>
@ -77,4 +77,5 @@
        <Link size={17} />
      </a>
    </div>
-</div>
+  </div>
+</CardSpotlight>
--- a/src/data/svgs.ts
+++ b/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'
  }
 ];
--- a/src/routes/+layout.svelte
+++ b/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,8 +81,9 @@
          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"
@ -85,6 +91,7 @@
          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>
--- a/static/library/x.svg
+++ b/static/library/x.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1227" fill="none" viewBox="0 0 1200 1227"><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>
				`@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="1227" fill="none" viewBox="0 0 1200 1227"><path fill="#fff" d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"/></svg>`