qyg2297248353/svgl
1
0
Fork 0
mirror of https://github.com/pheralb/svgl.git synced 2025-12-29 08:01:36 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into hack-the-box-logo

Browse Source
This commit is contained in:
Camilo Garcia
2024-10-05 09:44:30 -05:00
committed by GitHub
parent d2264d0746 8be9ba72ad
commit 2e8dd4b82d
35 changed files with 1590 additions and 1122 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+4 -11
View File
@@ -15,22 +15,15 @@
<meta property="og:type" content="website" />
<meta property="og:title" content="svgl" />
<meta property="og:description" content="A beautiful library with SVG logos" />
<meta property="og:url" content="https://svgl.vercel.app/" />
<meta property="og:image" content="https://svgl.vercel.app/images/screenshot.png" />
<meta property="og:url" content="https://svgl.app" />
<meta property="og:image" content="https://svgl.app/images/screenshot.png" />
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Svgl" />
<meta name="twitter:description" content="A beautiful library with SVG logos" />
<meta name="twitter:creator" content="@pheralb_" />
<meta name="twitter:image" content="https://svgl.vercel.app/images/screenshot.png" />
<!-- Analytics -->
<script
async
src="https://umami.pheralb.dev/script.js"
data-website-id="50de464e-cf2c-4b76-b5e8-21c9259bc7be"
></script>
<meta name="twitter:image" content="https://svgl.app/images/screenshot.png" />
<!-- Title -->
<title>A beautiful library with SVG logos - Svgl</title>
@@ -38,7 +31,7 @@
</head>
<body
data-sveltekit-preload-data="hover"
class="min-h-screen bg-white font-sans text-mini dark:bg-dark dark:text-white antialiased selection:bg-neutral-200 scroll-smooth [text-rendering:optimizeLegibility;] dark:selection:bg-neutral-700"
class="min-h-screen scroll-smooth bg-white font-sans text-mini antialiased [text-rendering:optimizeLegibility;] selection:bg-neutral-200 dark:bg-dark dark:text-white dark:selection:bg-neutral-700"
>
<div>%sveltekit.body%</div>
</body>
src/components/headerLogoLink.svelte
+1 -1
View File
@@ -54,7 +54,7 @@
<div class="flex items-center space-x-2 opacity-100 hover:opacity-80 transition-opacity">
<svelte:component this={Logo} />
<span class="text-[19px] font-medium tracking-wide hidden md:block">svgl</span>
<p class="text-neutral-400 hidden md:block font-mono">v4.3</p>
<p class="text-neutral-400 hidden md:block font-mono tracking-tight">4.3</p>
</div>
</a>
</ContextMenu.Trigger>
src/components/navbar.svelte
+1 -1
View File
@@ -92,7 +92,7 @@
<XIcon iconSize={16} />
</a>
<a
href="https://svgl.app/git"
href="https://github.com/pheralb/svgl"
target="_blank"
class="flex items-center space-x-1 opacity-80 hover:opacity-100 transition-opacity"
title="GitHub"
src/components/svgCard.svelte
+5 -5
View File
@@ -56,7 +56,7 @@
</script>
<div
class="flex flex-col items-center justify-center rounded-md p-4 border border-neutral-200 dark:border-neutral-800 hover:bg-neutral-100/80 dark:hover:bg-neutral-800/20 transition-colors duration-100 group"
class="group flex flex-col items-center justify-center rounded-md border border-neutral-200 p-4 transition-colors duration-100 hover:bg-neutral-100/80 dark:border-neutral-800 dark:hover:bg-neutral-800/20"
>
<!-- Image -->
{#if wordmarkSvg == true}
@@ -95,11 +95,11 @@
/>
{/if}
<!-- Title -->
<div class="mb-3 flex flex-col space-y-1 items-center justify-center">
<p class="truncate text-[15px] font-medium text-balance text-center select-all">
<div class="mb-3 flex flex-col items-center justify-center space-y-1">
<p class="select-all truncate text-balance text-center text-[15px] font-medium">
{svgInfo.title}
</p>
<div class="flex items-center space-x-1 justify-center">
<div class="flex items-center justify-center space-x-1">
{#if Array.isArray(svgInfo.category)}
{#each svgInfo.category.slice(0, maxVisibleCategories) as c, index}
<a
@@ -126,7 +126,7 @@
{#each svgInfo.category.slice(maxVisibleCategories) as c}
<a
href={`/directory/${c.toLowerCase()}`}
class={cn(buttonStyles, 'rounded-md w-full')}
class={cn(buttonStyles, 'w-full rounded-md')}
>
<TagIcon size={15} strokeWidth={1.5} />
<span>{c}</span>
src/data/index.ts
+18 -1
View File
@@ -3,4 +3,21 @@ import { svgs } from './svgs';
export const svgsData = svgs.map((svg: iSVG, index: number) => {
return { id: index, ...svg };
});
});
export const getCategories = () => {
const categories = svgs
.flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
.filter((category, index, array) => array.indexOf(category) === index);
return categories;
};
export const getCategoriesForDirectory = () => {
const categories = svgs
.flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
.filter((category, index, array) => array.indexOf(category) === index)
.map((category) => ({
slug: category.toLowerCase()
}));
return categories;
};
src/data/svgs.ts
+54 -20
View File
@@ -2,14 +2,10 @@ import type { iSVG } from '../types/svg';
export const svgs: iSVG[] = [
{
title: 'Hack The Box',
category: 'Cybersecurity',
route: '/library/hack-the-box.svg',
wordmark: {
light: '/library/hack-the-box-wordmark-light.svg',
dark: '/library/hack-the-box-wordmark-dark.svg'
},
url: 'https://www.hackthebox.com/'
title: 'Google Drive',
category: 'Google',
route: '/library/drive.svg',
url: 'https://www.google.com/drive/'
},
{
title: 'Milanote',
@@ -289,12 +285,6 @@ export const svgs: iSVG[] = [
route: '/library/bootstrap.svg',
url: 'https://getbootstrap.com/'
},
{
title: 'Vite.js',
category: 'Compiler',
route: '/library/vitejs.svg',
url: 'https://vitejs.dev'
},
{
title: 'Facebook',
category: 'Social',
@@ -462,12 +452,6 @@ export const svgs: iSVG[] = [
route: '/library/kotlin.svg',
url: 'https://kotlinlang.org/'
},
{
title: 'Vitest',
category: 'Framework',
route: '/library/vitest.svg',
url: 'https://vitest.dev/'
},
{
title: 'Storybook',
category: 'Software',
@@ -2236,6 +2220,16 @@ export const svgs: iSVG[] = [
},
url: 'https://raycast.com/'
},
{
title: 'Hack The Box',
category: 'Cybersecurity',
route: '/library/hack-the-box.svg',
wordmark: {
light: '/library/hack-the-box-wordmark-light.svg',
dark: '/library/hack-the-box-wordmark-dark.svg'
},
url: 'https://www.hackthebox.com/'
},
{
title: 'Procure',
category: 'Marketplace',
@@ -2937,5 +2931,45 @@ export const svgs: iSVG[] = [
category: ['Hardware', 'Software'],
route: '/library/raspberry_pi.svg',
url: 'https://www.raspberrypi.com/'
},
{
title: 'Vite',
category: ['Devtool', 'void(0)'],
route: '/library/vitejs.svg',
url: 'https://vitejs.dev'
},
{
title: 'Vitest',
category: ['Framework', 'void(0)'],
route: '/library/vitest.svg',
url: 'https://vitest.dev/'
},
{
title: 'Oxc',
category: ['Devtool', 'void(0)'],
route: '/library/oxc.svg',
url: 'https://oxc.rs/'
},
{
title: 'Rolldown',
category: ['Compiler', 'void(0)'],
route: '/library/rolldown.svg',
url: 'https://rolldown.rs/'
},
{
title: 'ManzDev',
category: ['Community'],
route: '/library/manzdev.svg',
url: 'https://manz.dev/'
},
{
title: 'MediaWiki',
category: ['Software', 'CMS'],
"route": "/library/mediawiki.svg",
"wordmark": {
"light": "/library/mediawiki-wordmark-light.svg",
"dark": "/library/mediawiki-wordmark-dark.svg"
},
"url": "https://www.mediawiki.org/"
}
];
src/routes/+layout.svelte
+10 -11
View File
@@ -11,9 +11,7 @@
// Get categories:
import { svgs } from '@/data/svgs';
const categories = svgs
.flatMap((svg) => (Array.isArray(svg.category) ? svg.category : [svg.category]))
.filter((category, index, array) => array.indexOf(category) === index);
const categories = getCategories();
// Get category counts:
let categoryCounts: Record<string, number> = {};
@@ -30,6 +28,7 @@
// Layout:
import Navbar from '@/components/navbar.svelte';
import { getCategories } from '@/data';
</script>
<ModeWatcher />
@@ -38,22 +37,22 @@
<aside
class={cn(
'z-50 w-full overflow-y-auto overflow-x-hidden',
'dark:border-neutral-800 md:fixed md:left-0 md:w-56 md:pb-0 md:h-[calc(100vh-63px)]',
'dark:border-neutral-800 md:fixed md:left-0 md:h-[calc(100vh-63px)] md:w-56 md:pb-0',
'bg-white dark:bg-neutral-900',
'backdrop-blur-md opacity-95',
'border-b md:border-r border-neutral-200 dark:border-neutral-800'
'opacity-95 backdrop-blur-md',
'border-b border-neutral-200 dark:border-neutral-800 md:border-r'
)}
>
<div class="md:px-3 md:py-6">
<nav
class="flex items-center space-x-1 overflow-y-auto md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible px-6 md:px-0 pb-2 pt-2 md:pt-0"
class="flex items-center space-x-1 overflow-y-auto px-6 pb-2 pt-2 md:mb-3 md:flex-col md:space-x-0 md:space-y-1 md:overflow-y-visible md:px-0 md:pt-0"
>
<a
href="/"
class={cn(
sidebarItemStyles,
data.pathname === '/'
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
: ''
)}
data-sveltekit-preload-data>All</a
@@ -66,7 +65,7 @@
class={cn(
sidebarItemStyles,
data.pathname === `/directory/${category.toLowerCase()}`
? 'bg-neutral-200 dark:bg-neutral-700/30 font-medium dark:text-white text-dark'
? 'bg-neutral-200 font-medium text-dark dark:bg-neutral-700/30 dark:text-white'
: ''
)}
>
@@ -77,7 +76,7 @@
data.pathname === `/directory/${category.toLowerCase()}`
? 'border-neutral-300 dark:border-neutral-700'
: '',
'text-xs font-mono hidden md:inline'
'hidden font-mono text-xs md:inline'
)}>{categoryCounts[category]}</span
>
</a>
@@ -85,7 +84,7 @@
</nav>
</div>
</aside>
<div class="ml-0 md:ml-56 pb-6">
<div class="ml-0 pb-6 md:ml-56">
<Warning />
<Transition pathname={data.pathname}>
<slot />
src/routes/api/+page.svelte
+10 -10
View File
@@ -11,12 +11,12 @@
</svelte:head>
<section
class="bg-white dark:bg-neutral-900 bg-[url('/images/hero-pattern_light.svg')] dark:bg-[url('/images/hero-pattern_dark.svg')]"
class="bg-white bg-[url('/images/hero-pattern_light.svg')] dark:bg-neutral-900 dark:bg-[url('/images/hero-pattern_dark.svg')]"
>
<div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-20 z-10 relative">
<div class="flex items-center space-x-4 text-center justify-center">
<div class="relative z-10 mx-auto max-w-screen-xl px-4 py-8 text-center lg:py-20">
<div class="flex items-center justify-center space-x-4 text-center">
<h1
class="mb-4 text-4xl font-bold tracking-tight leading-none text-neutral-900 md:text-5xl lg:text-6xl dark:text-white"
class="mb-4 text-4xl font-bold leading-none tracking-tight text-neutral-900 dark:text-white md:text-5xl lg:text-6xl"
>
API Reference
</h1>
@@ -25,13 +25,13 @@
class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#f4f4f5_0%,#f4f4f5_50%,#737373_100%)] dark:bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
/>
<div
class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full bg-neutral-100 dark:bg-neutral-900 px-3 py-1 text-xs font-medium dark:text-white backdrop-blur-3xl border border-neutral-100 dark:border-neutral-800 font-mono"
class="inline-flex h-full w-full cursor-default items-center justify-center rounded-full border border-neutral-100 bg-neutral-100 px-3 py-1 font-mono text-xs font-medium backdrop-blur-3xl dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
>
beta
v1
</div>
</span>
</div>
<p class="text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-200">
<p class="text-lg font-normal text-gray-500 dark:text-gray-200 sm:px-16 lg:px-48 lg:text-xl">
The API reference is a detailed documentation of all the endpoints available in the API.
</p>
</div>
@@ -40,9 +40,9 @@
<article
class={cn(
'prose dark:prose-invert',
'mx-auto py-10 px-4 max-w-3xl',
'prose-h2:font-medium',
'prose-pre:m-0'
'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'
)}
>
<svelte:component this={data.content} />
src/routes/directory/[slug]/+page.ts
+16 -15
View File
@@ -1,33 +1,34 @@
import { error } from '@sveltejs/kit';
import type { PageLoad } from './$types';
import { svgs } from '@/data/svgs';
import type { PageLoad, EntryGenerator } from './$types';
import type { iSVG } from '@/types/svg';
import { error } from '@sveltejs/kit';
import { svgs } from '@/data/svgs';
import { getCategoriesForDirectory } from '@/data';
export const entries: EntryGenerator = () => {
const categories = getCategoriesForDirectory();
return categories;
};
export const prerender = true;
export const load = (async ({ params }) => {
const { slug } = params;
// Check if slug is valid:
if (!slug) {
return error(404, 'Not found');
}
// Filter out the svg with the matching slug:
const svgsByCategory = svgs.filter((svg: iSVG) => {
if (Array.isArray(svg.category)) {
return svg.category.some(categoryItem => categoryItem.toLowerCase() === slug);
return svg.category.some((categoryItem) => categoryItem.toLowerCase() === slug.toLowerCase());
} else {
return svg.category.toLowerCase() === slug;
return svg.category.toLowerCase() === slug.toLowerCase();
}
});
// If SVGs array is empty, category can't exist
if (svgsByCategory.length === 0) {
return error(404, 'Not found');
throw error(404, 'Category not found');
}
return {
category: slug as string,
category: slug,
svgs: svgsByCategory
};
}) satisfies PageLoad;
src/types/categories.ts
+2 -1
View File
@@ -24,4 +24,5 @@ export type tCategory =
| 'Music'
| 'Vercel'
| 'Google'
| 'Payment';
| 'Payment'
| 'void(0)';