Merge pull request #519 from pheralb/next

✨ New app improvements

.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 URL I have provided is optimized for web use.
+- [ ] The .svg size is less than **20kb**.

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.

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;
+}

src/components/copySvg.svelte

@@ -309,5 +309,13 @@
         </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>

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>

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>

src/data/svgs.ts

@@ -2667,6 +2667,7 @@ export const svgs: iSVG[] = [
       light: '/library/vercel_wordmark.svg',
       dark: '/library/vercel_wordmark_dark.svg'
     },
+    brandUrl: 'https://vercel.com/geist/brands',
     url: 'https://vercel.com/'
   },
   {

src/docs/api.md

@@ -39,17 +39,18 @@ export interface Category {
 - For SVGs:
 
 ```ts
-type ThemeOptions = {
-  light: string;
+export type ThemeOptions = {
   dark: string;
+  light: string;
 };
 
 export interface iSVG {
-  id: number;
+  id?: number;
   title: string;
-  category: string | string[];
+  category: tCategory | tCategory[];
   route: string | ThemeOptions;
   wordmark?: string | ThemeOptions;
+  brandUrl?: string;
   url: string;
 }
 ```

src/routes/api/+page.svelte

@@ -42,7 +42,7 @@
     'prose dark:prose-invert',
     'mx-auto max-w-3xl px-4 py-10',
     'prose-h2:font-medium prose-h2:tracking-tight prose-h2:underline prose-h2:decoration-neutral-300 prose-h2:underline-offset-[6px] prose-h2:transition-opacity hover:prose-h2:opacity-70 dark:prose-h2:decoration-neutral-700/65',
-    'prose-pre:m-0 prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
+    'prose-pre:m-0 prose-pre:border prose-pre:border-neutral-200 dark:prose-pre:border dark:prose-pre:border-neutral-800/65'
   )}
 >
   <svelte:component this={data.content} />

src/types/svg.ts

@@ -11,5 +11,6 @@ export interface iSVG {
   category: tCategory | tCategory[];
   route: string | ThemeOptions;
   wordmark?: string | ThemeOptions;
+  brandUrl?: string;
   url: string;
 }

src/ui/popover/popover-content.svelte

@@ -21,7 +21,7 @@
   {sideOffset}
   {...$$restProps}
   class={cn(
-    'z-50 w-auto rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
+    'z-50 w-auto max-w-96 rounded-md border border-neutral-200 bg-white p-3 shadow-md outline-none dark:border-neutral-800 dark:bg-neutral-900',
     className
   )}
 >

svelte.config.js

@@ -36,11 +36,19 @@ const mdsvexOptions = {
   highlight: {
     highlighter: async (code, lang = 'text') => {
       const highlighter = await getHighlighter({
-        themes: ['vesper'],
+        themes: ['github-light', 'github-dark'],
         langs: ['javascript', 'typescript', 'bash', 'json']
       });
       await highlighter.loadLanguage('javascript', 'typescript', 'bash');
-      const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme: 'vesper' }));
+      const html = escapeSvelte(
+        highlighter.codeToHtml(code, {
+          lang,
+          themes: {
+            light: 'github-light',
+            dark: 'github-dark'
+          }
+        })
+      );
       return `{@html \`${html}\` }`;
     }
   }