diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md new file mode 100644 index 0000000..21ec51d --- /dev/null +++ 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 URL I have provided is optimized for web use. +- [ ] The .svg size is less than **20kb**. diff --git a/README.md b/README.md index 7485fdb..3dd28ed 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ Discover  ✦  - + Request logo  ✦  @@ -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 index f85c976..0f54e63 100644 --- 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 index 4f3ecaa..526319d 100644 --- a/src/components/copySvg.svelte +++ b/src/components/copySvg.svelte @@ -309,5 +309,13 @@ +
+

+ Remember to request permission from the creators for the use of the SVG. Modification is not + allowed. +

+
diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte index 078370b..09cc8ab 100644 --- 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';
@@ -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} > @@ -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} @@ -219,5 +222,16 @@ {/if} {/if} + {#if svgInfo.brandUrl !== undefined} + + + + {/if}
diff --git a/src/components/warning.svelte b/src/components/warning.svelte index 8a7b9a3..dd3e224 100644 --- 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; {#if !warning && !initialValue}

All SVGs include links to the respective products or companies that own them. Please contact the owner directly if you intend to use their logo.Please contact the owner directly if you need to use their logo. - 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, create an issue on GitHub.

diff --git a/src/data/svgs.ts b/src/data/svgs.ts index c513b88..94389b9 100644 --- a/src/data/svgs.ts +++ b/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/' }, { diff --git a/src/docs/api.md b/src/docs/api.md index 76dc803..fd8e41f 100644 --- a/src/docs/api.md +++ b/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; } ``` diff --git a/src/routes/api/+page.svelte b/src/routes/api/+page.svelte index b6d4ae5..323430c 100644 --- a/src/routes/api/+page.svelte +++ b/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' )} > diff --git a/src/types/svg.ts b/src/types/svg.ts index 6d568e3..6402e5b 100644 --- a/src/types/svg.ts +++ b/src/types/svg.ts @@ -11,5 +11,6 @@ export interface iSVG { category: tCategory | tCategory[]; route: string | ThemeOptions; wordmark?: string | ThemeOptions; + brandUrl?: string; url: string; } diff --git a/src/ui/popover/popover-content.svelte b/src/ui/popover/popover-content.svelte index d6e3f76..796ce56 100644 --- a/src/ui/popover/popover-content.svelte +++ b/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 )} > diff --git a/svelte.config.js b/svelte.config.js index aaa6f5c..4d22dda 100644 --- a/svelte.config.js +++ b/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}\` }`; } }