Merge branch 'main' into logo/motion

pheralb · Jan 19, 2025 · c0e7b69 · c0e7b69
2 parents ab43630 + 974cf4b
commit c0e7b69
Show file tree

Hide file tree

Showing 63 changed files with 457 additions and 40 deletions.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,16 @@
+## 📝 About your SVG:
+
+- **Title**:
+- **Category**:
+- **Website URL**:
+- **Description**:
+
+## 📷 Screenshots:
+
+✨ Add screenshots of the logo.
+
+## ✅ Checklist
+
+- [ ] I have permission to use this logo.
+- [ ] The ``.svg`` file is optimized for web use.
+- [ ] The ``.svg`` size is less than **20kb**.
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
         Discover
     </a>
     <span>&nbsp;✦&nbsp;</span>
-    <a href="https://github.com/pheralb/svgl/issues/new?assignees=pheralb&labels=request&projects=&template=request-svg-.md&title=%5BRequest%5D%3A">
+    <a href="https://github.com/pheralb/svgl/issues/new?assignees=&labels=request&projects=&template=request-svg.yml&title=%5B%F0%9F%94%94+Request+SVG%5D%3A+">
         Request logo
     </a>
     <span>&nbsp;✦&nbsp;</span>
@@ -138,6 +138,19 @@ pnpm install
 }
 ```
 
+- **Add brand guidelines**:
+
+```json
+{
+  "title": "Title",
+  "category": "Category",
+  "route": "/library/your_logo.svg",
+  "wordmark": "/library/your_logo_wordmark.svg",
+  "brandUrl": "https://assets.website.com/brand-guidelines",
+  "url": "Website"
+}
+```
+
 > [!NOTE]
 >
 > - The list of categories is here: [`src/types/categories.ts`](https://github.com/pheralb/svgl/blob/main/src/types/categories.ts). You can add a new category if you need it.

diff --git a/src/app.css b/src/app.css
@@ -72,3 +72,12 @@
   src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2');
   font-display: swap;
 }
+
+html.dark .shiki,
+html.dark .shiki span {
+  color: var(--shiki-dark) !important;
+  background-color: transparent !important;
+  font-style: var(--shiki-dark-font-style) !important;
+  font-weight: var(--shiki-dark-font-weight) !important;
+  text-decoration: var(--shiki-dark-text-decoration) !important;
+}
diff --git a/src/components/copySvg.svelte b/src/components/copySvg.svelte
@@ -15,11 +15,13 @@
   import { buttonStyles } from '@/ui/styles';
   import { cn } from '@/utils/cn';
   import { componentTemplate } from '@/utils/componentTemplate';
+  import { generateAngularComponent } from '@/utils/generateAngularComponent';
 
   //Icons:
   import ReactIcon from './icons/reactIcon.svelte';
   import VueIcon from './icons/vueIcon.svelte';
   import SvelteIcon from './icons/svelteIcon.svelte';
+  import AngularIcon from './icons/angularIcon.svelte';
 
   // Props:
   export let iconSize = 24;
@@ -163,6 +165,33 @@
       toast.error(`Failed to copy ${framework} component`);
     }
   };
+
+  // Copy SVG as Standalone Angular component:
+  const convertSvgAngularComponent = async () => {
+    isLoading = true;
+    optionsOpen = false;
+
+    const title = svgInfo.title.split(' ').join('');
+    const svgUrlToCopy = getSvgUrl();
+    const content = await getSvgContent(svgUrlToCopy);
+
+    if (!content) {
+      toast.error('Failed to fetch the SVG content', {
+        duration: 5000
+      });
+      isLoading = false;
+      return;
+    }
+
+    const angularComponent = generateAngularComponent(content, title);
+    await clipboard(angularComponent);
+
+    toast.success(`Copied as Standalone Angular component`, {
+      description: `${svgInfo.title} - ${svgInfo.category}`
+    });
+
+    isLoading = false;
+  };
 </script>
 
 <Popover.Root open={optionsOpen} onOpenChange={(isOpen) => (optionsOpen = isOpen)}>
@@ -185,6 +214,7 @@
         <Tabs.Trigger value="react">React</Tabs.Trigger>
         <Tabs.Trigger value="vue">Vue</Tabs.Trigger>
         <Tabs.Trigger value="svelte">Svelte</Tabs.Trigger>
+        <Tabs.Trigger value="angular">Angular</Tabs.Trigger>
       </Tabs.List>
       <Tabs.Content value="source">
         <section class="flex flex-col space-y-2">
@@ -265,6 +295,27 @@
           </button>
         </section>
       </Tabs.Content>
+      <Tabs.Content value="angular">
+        <section class="flex flex-col space-y-2">
+          <button
+            class={cn(buttonStyles, 'w-full rounded-md')}
+            title="Copy as Standalone Component"
+            disabled={isLoading}
+            on:click={() => convertSvgAngularComponent()}
+          >
+            <AngularIcon iconSize={18} />
+            <span>Copy Standalone Component</span>
+          </button>
+        </section>
+      </Tabs.Content>
     </Tabs.Root>
+    <div
+      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. Modification is not
+        allowed.
+      </p>
+    </div>
   </Popover.Content>
 </Popover.Root>
diff --git a/src/components/icons/angularIcon.svelte b/src/components/icons/angularIcon.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+  export let iconSize: number;
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width={iconSize || 16}
+  height={iconSize || 16}
+  viewBox="0 0 242 256"
+  ><g clip-path="url(#a)"
+    ><mask
+      id="b"
+      width="242"
+      height="256"
+      x="0"
+      y="0"
+      maskUnits="userSpaceOnUse"
+      style="mask-type:luminance"><path fill="#fff" d="M0 0h242v256H0V0Z" /></mask
+    ><g mask="url(#b)"
+      ><path
+        fill="url(#c)"
+        d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z"
+      /><path
+        fill="url(#d)"
+        d="m241 43-9 136L149 0l92 43Zm-58 176-62 36-63-36 12-31h101l12 31ZM121 68l32 80H88l33-80ZM9 179 0 43 92 0 9 179Z"
+      /></g
+    ></g
+  ><defs
+    ><linearGradient id="c" x1="53.2" x2="245" y1="231.9" y2="140.7" gradientUnits="userSpaceOnUse"
+      ><stop stop-color="#E40035" /><stop offset=".2" stop-color="#F60A48" /><stop
+        offset=".4"
+        stop-color="#F20755"
+      /><stop offset=".5" stop-color="#DC087D" /><stop offset=".7" stop-color="#9717E7" /><stop
+        offset="1"
+        stop-color="#6C00F5"
+      /></linearGradient
+    >
+    <linearGradient id="d" x1="44.5" x2="170" y1="30.7" y2="174" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FF31D9" /><stop
+        offset="1"
+        stop-color="#FF5BE1"
+        stop-opacity="0"
+      /></linearGradient
+    ><clipPath id="a"><path fill="#fff" d="M0 0h242v256H0z" /></clipPath></defs
+  ></svg
+>
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte
@@ -13,7 +13,8 @@
     Sparkles,
     EllipsisIcon,
     TagIcon,
-    XIcon
+    XIcon,
+    PaletteIcon
   } from 'lucide-svelte';
 
   // Components & styles:
@@ -57,8 +58,10 @@
   let maxVisibleCategories = 1;
   let moreTagsOptions = false;
 
-  // Global Images Styles:
+  // Global Styles:
   const globalImageStyles = 'mb-4 mt-2 h-10 select-none pointer-events-none';
+  const btnStyles =
+    'flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40';
 </script>
 
 <div
@@ -175,7 +178,7 @@
               : 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"
+        class={btnStyles}
       >
         <ChevronsRight size={iconSize} strokeWidth={iconStroke} />
       </button>
@@ -200,7 +203,7 @@
       title="Website"
       target="_blank"
       rel="noopener noreferrer"
-      class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+      class={btnStyles}
     >
       <LinkIcon size={iconSize} strokeWidth={iconStroke} />
     </a>
@@ -210,7 +213,7 @@
         on:click={() => {
           wordmarkSvg = !wordmarkSvg;
         }}
-        class="flex items-center space-x-2 rounded-md p-2 duration-100 hover:bg-neutral-200 dark:hover:bg-neutral-700/40"
+        class={btnStyles}
       >
         {#if wordmarkSvg}
           <Sparkles size={iconSize} strokeWidth={iconStroke} />
@@ -219,5 +222,16 @@
         {/if}
       </button>
     {/if}
+    {#if svgInfo.brandUrl !== undefined}
+      <a
+        href={svgInfo.brandUrl}
+        title="Brand Assets"
+        target="_blank"
+        rel="noopener noreferrer"
+        class={btnStyles}
+      >
+        <PaletteIcon size={iconSize} strokeWidth={iconStroke} />
+      </a>
+    {/if}
   </div>
 </div>
diff --git a/src/components/warning.svelte b/src/components/warning.svelte
@@ -5,28 +5,28 @@
   import { cn } from '@/utils/cn';
 
   let warning = false;
-  let warningName = 'svgl_warning_message';
+  let warningName = 'svgl_warn_message';
   const initialValue = browser ? window.localStorage.getItem(warningName) : true;
 </script>
 
 {#if !warning && !initialValue}
   <div
-    class="flex items-center w-full justify-between md:flex-row flex-col md:space-x-2 space-x-0 space-y-2 md:space-y-0 py-2 px-3 bg-neutral-100/60 dark:bg-neutral-800/40 text-neutral-700 dark:text-neutral-300 border-b border-neutral-200 dark:border-neutral-800"
+    class="flex w-full flex-col items-center justify-between space-x-0 space-y-2 border-b border-neutral-200 bg-neutral-100/60 px-3 py-2 text-neutral-700 dark:border-neutral-800 dark:bg-neutral-800/40 dark:text-neutral-300 md:flex-row md:space-x-2 md:space-y-0"
   >
     <div class="flex items-center space-x-2">
       <AlertTriangleIcon
         size={18}
         strokeWidth={2}
-        class="mr-1 flex-shrink-0 text-yellow-600 dark:text-yellow-500 animate-pulse"
+        class="mr-1 flex-shrink-0 animate-pulse text-yellow-600 dark:text-yellow-500"
       />
       <p>
         All SVGs include links to the respective products or companies that own them. <strong
-          >Please contact the owner directly if you intend to use their logo.</strong
+          >Please contact the owner directly if you need to use their logo.</strong
         >
-        If you are the owner of an SVG and prefer it not to be displayed here,
+        If you are the owner of an SVG and would like it removed,
         <a
           target="_blank"
-          class="underline underline-offset-4 decoration-dotted decoration-neutral-500"
+          class="underline decoration-neutral-500 decoration-dotted underline-offset-4"
           href="https://github.com/pheralb/svgl/issues/new">create an issue</a
         > on GitHub.
       </p>