diff --git a/README.md b/README.md index 3581f84..7f333cd 100644 --- a/README.md +++ b/README.md @@ -80,12 +80,8 @@ yarn install 4. Go to the [**`src/data/svgs.ts`**](https://github.com/pheralb/svgl/blob/main/src/data/svgs.ts) and add the information about your logo, following the structure: -> [!IMPORTANT] -> To avoid conflicts with other svgs IDs, generate a short random number for the id: [Generate (only check 'include numbers')](https://nanoid.yuuniworks.com/). - ```json { - "id": 45248, "title": "Title", "category": "Category", "route": "/library/your_logo.svg", @@ -97,7 +93,6 @@ or to support a different logo for light and dark themes: ```json { - "id": 45248, "title": "Title", "category": "Category", "route": { diff --git a/src/components/svgCard.svelte b/src/components/svgCard.svelte index fdb2582..740ca3c 100644 --- a/src/components/svgCard.svelte +++ b/src/components/svgCard.svelte @@ -58,7 +58,7 @@ loading="lazy" />
-

{svgInfo.title}

+

{svgInfo.title}

{svgInfo.category} { + svg.id = index; + return svg; +}); \ No newline at end of file diff --git a/src/data/svgs.ts b/src/data/svgs.ts index ede1077..0c04585 100644 --- a/src/data/svgs.ts +++ b/src/data/svgs.ts @@ -2,35 +2,30 @@ import type { iSVG } from '../types/svg'; export const svgs: iSVG[] = [ { - id: 1, title: 'Discord', category: 'Software', route: '/library/discord.svg', url: 'https://discord.com/' }, { - id: 2, title: 'Github', category: 'Software', route: '/library/github.svg', url: 'https://github.com/' }, { - id: 3, title: 'Preact', category: 'Library', route: '/library/preact.svg', url: 'https://preactjs.com/' }, { - id: 4, title: 'React', category: 'Library', route: '/library/react.svg', url: 'https://reactjs.org/' }, { - id: 5, title: 'Vercel', category: 'Hosting', route: { @@ -40,140 +35,120 @@ export const svgs: iSVG[] = [ url: 'https://vercel.com/' }, { - id: 6, title: 'Svelte', category: 'Library', route: '/library/svelte.svg', url: 'https://svelte.dev/' }, { - id: 7, title: 'Vue', category: 'Framework', route: '/library/vue.svg', url: 'https://vuejs.org/' }, { - id: 8, title: 'Nuxt', category: 'Framework', route: '/library/nuxt.svg', url: 'https://nuxtjs.org/' }, { - id: 9, title: 'Nextjs', category: 'Framework', route: '/library/nextjs.svg', url: 'https://nextjs.org/' }, { - id: 10, title: 'Visual Studio Code', category: 'Software', route: '/library/vscode.svg', url: 'https://code.visualstudio.com/' }, { - id: 11, title: 'JWT', category: 'Library', route: '/library/jwt.svg', url: 'https://jwt.io/' }, { - id: 12, title: 'Strapi', category: 'CMS', route: '/library/strapi.svg', url: 'https://strapi.io/' }, { - id: 13, title: 'Figma', category: 'Design', route: '/library/figma.svg', url: 'https://www.figma.com/' }, { - id: 14, title: 'Spotify', category: 'Software', route: '/library/spotify.svg', url: 'https://www.spotify.com/' }, { - id: 15, title: 'Postman', category: 'Software', route: '/library/postman.svg', url: 'https://www.getpostman.com/' }, { - id: 16, title: 'Algolia', category: 'Library', route: '/library/algolia.svg', url: 'https://www.algolia.com/' }, { - id: 17, title: 'Bootstrap', category: 'Framework', route: '/library/bootstrap.svg', url: 'https://getbootstrap.com/' }, { - id: 18, title: 'Firebase', category: 'Hosting', route: '/library/firebase.svg', url: 'https://firebase.google.com/' }, { - id: 19, title: 'Supabase', category: 'Database', route: '/library/supabase.svg', url: 'https://supabase.com/' }, { - id: 20, title: 'Vite.js', category: 'Compiler', route: '/library/vitejs.svg', url: 'https://vitejs.dev' }, { - id: 21, title: 'Facebook', category: 'Social', route: '/library/facebook.svg', url: 'https://www.facebook.com/' }, { - id: 22, title: 'Twitter', category: 'Social', route: '/library/twitter.svg', url: 'https://twitter.com/' }, { - id: 23, title: 'Node.js', category: 'Library', route: '/library/nodejs.svg', url: 'https://nodejs.org/' }, { - id: 24, title: 'Esbuild', category: 'Compiler', route: '/library/esbuild.svg', url: 'https://esbuild.github.io/' }, { - id: 25, title: 'Deno', category: 'Library', route: { @@ -183,91 +158,78 @@ export const svgs: iSVG[] = [ url: 'https://deno.land/' }, { - id: 26, title: 'Gatsby', category: 'Framework', route: '/library/gatsby.svg', url: 'https://www.gatsbyjs.org/' }, { - id: 27, title: 'NPM', category: 'Software', route: '/library/npm.svg', url: 'https://www.npmjs.com/' }, { - id: 28, title: 'Homebrew', category: 'Software', route: '/library/homebrew.svg', url: 'https://brew.sh/' }, { - id: 29, title: 'Sublime Text', category: 'Software', route: '/library/sublimetext.svg', url: 'https://www.sublimetext.com/' }, { - id: 30, title: 'TurboRepo', category: 'Library', route: '/library/turborepo.svg', url: 'https://turborepo.org/' }, { - id: 31, title: 'Tailwind CSS', category: 'Framework', route: '/library/tailwindcss.svg', url: 'https://tailwindcss.com/' }, { - id: 32, title: 'Styled Components', category: 'Library', route: '/library/styledcomponents.svg', url: 'https://styled-components.com/' }, { - id: 33, title: 'Angular', category: 'Framework', route: '/library/angular.svg', url: 'https://angular.dev/' }, { - id: 34, title: 'Blitz', category: 'Framework', route: '/library/blitzjs.svg', url: 'https://blitzjs.com/' }, { - id: 35, title: 'Lit', category: 'Library', route: '/library/lit.svg', url: 'https://lit.dev/' }, { - id: 36, title: 'Atom', category: 'Software', route: '/library/atom.svg', url: 'https://atom.io/' }, { - id: 37, title: 'YouTube', category: 'Social', route: '/library/youtube.svg', url: 'https://www.youtube.com/' }, { - id: 38, title: 'Astro', category: 'Framework', route: { @@ -277,14 +239,12 @@ export const svgs: iSVG[] = [ url: 'https://astro.build/' }, { - id: 39, title: 'Google', category: 'Social', route: '/library/google.svg', url: 'https://www.google.com/' }, { - id: 40, title: 'Framer', category: 'Software', route: { @@ -294,105 +254,90 @@ export const svgs: iSVG[] = [ url: 'https://framer.com/' }, { - id: 41, title: 'Netflix', category: 'Entertainment', route: '/library/netflix.svg', url: 'https://www.netflix.com/' }, { - id: 42, title: 'Firefox', category: 'Browser', route: '/library/firefox.svg', url: 'https://www.mozilla.org/en-US/firefox/' }, { - id: 43, title: 'LinkedIn', category: 'Social', route: '/library/linkedin.svg', url: 'https://www.linkedin.com/' }, { - id: 44, title: 'Telegram', category: 'Social', route: '/library/telegram.svg', url: 'https://web.telegram.org/' }, { - id: 45, title: 'WhatsApp', category: 'Social', route: '/library/whatsapp.svg', url: 'https://web.whatsapp.com/' }, { - id: 46, title: 'Headless UI', category: 'Library', route: '/library/headlessui.svg', url: 'https://headlessui.dev/' }, { - id: 47, title: 'Kotlin', category: 'Language', route: '/library/kotlin.svg', url: 'https://kotlinlang.org/' }, { - id: 48, title: 'Vitest', category: 'Framework', route: '/library/vitest.svg', url: 'https://vitest.dev/' }, { - id: 49, title: 'Storybook', category: 'Software', route: '/library/storybook.svg', url: 'https://storybook.js.org/' }, { - id: 50, title: 'Netlify', category: 'Hosting', route: '/library/netlify.svg', url: 'https://www.netlify.com/' }, { - id: 51, title: 'Solidjs', category: 'Framework', route: '/library/solidjs.svg', url: 'https://www.solidjs.com/' }, { - id: 52, title: 'MongoDB', category: 'Database', route: '/library/mongodb.svg', url: 'https://www.mongodb.com/' }, { - id: 53, title: 'Babel', category: 'Compiler', route: '/library/babel.svg', url: 'https://babeljs.io' }, { - id: 54, title: 'Moon', category: 'Framework', route: '/library/moon.svg', url: 'https://moonjs.org/' }, { - id: 55, title: 'Payload CMS', category: 'CMS', route: { @@ -402,35 +347,30 @@ export const svgs: iSVG[] = [ url: 'https://payloadcms.com' }, { - id: 56, title: 'Fly', category: 'Hosting', route: '/library/fly.svg', url: 'https://fly.io' }, { - id: 57, title: 'LearnThis', category: 'Education', route: '/library/learnthis.svg', url: 'https://learnthisacademy.com' }, { - id: 58, title: 'Visual Studio', category: 'Software', route: '/library/visual-studio.svg', url: 'https://visualstudio.microsoft.com' }, { - id: 59, title: 'Chakra UI', category: 'Library', route: '/library/chakra-ui.svg', url: 'https://chakra-ui.com' }, { - id: 60, title: 'Express.js', category: 'Framework', route: { @@ -440,7 +380,6 @@ export const svgs: iSVG[] = [ url: 'https://expressjs.com' }, { - id: 61, title: 'Fastify', category: 'Framework', route: { @@ -450,14 +389,12 @@ export const svgs: iSVG[] = [ url: 'https://www.fastify.io' }, { - id: 62, title: 'JavaScript', category: 'Language', route: '/library/javascript.svg', url: 'https://developer.mozilla.org/docs/Web/JavaScript' }, { - id: 63, title: 'jQuery', category: 'Language', route: { @@ -467,35 +404,30 @@ export const svgs: iSVG[] = [ url: 'https://jquery.com' }, { - id: 64, title: 'Rapid API', category: 'Software', route: '/library/rapidapi.svg', url: 'https://rapidapi.com' }, { - id: 65, title: 'TypeScript', category: 'Language', route: '/library/typescript.svg', url: 'https://www.typescriptlang.org' }, { - id: 66, title: 'Bun', category: 'Library', route: '/library/bun.svg', url: 'https://bun.sh' }, { - id: 67, title: 'Twilio', category: 'Software', route: '/library/twilio.svg', url: 'https://twilio.com' }, { - id: 68, title: 'Arc', category: 'Social', route: { @@ -505,35 +437,30 @@ export const svgs: iSVG[] = [ url: 'https://arc.dev' }, { - id: 69, title: 'Qwik', category: 'Framework', route: '/library/qwik.svg', url: 'https://qwik.builder.io/' }, { - id: 70, title: 'Authy', category: 'Software', route: '/library/authy.svg', url: 'https://authy.com/' }, { - id: 71, title: 'Notion', category: 'Software', route: '/library/notion.svg', url: 'https://notion.so/' }, { - id: 72, title: 'NestJS', category: 'Framework', route: '/library/nestjs.svg', url: 'https://nestjs.com/' }, { - id: 73, title: 'Github Copilot', category: 'Software', route: { @@ -543,7 +470,6 @@ export const svgs: iSVG[] = [ url: 'https://github.com/features/copilot' }, { - id: 74, title: 'Railway', category: 'Software', route: { @@ -553,21 +479,18 @@ export const svgs: iSVG[] = [ url: 'https://railway.app/' }, { - id: 75, title: 'Docusaurus', category: 'Software', route: '/library/docusaurus.svg', url: 'https://docusaurus.io/' }, { - id: 76, title: 'Twitch', category: 'Entertainment', route: '/library/twitch.svg', url: 'https://twitch.tv' }, { - id: 77, title: 'GoDaddy', category: 'Hosting', route: { @@ -577,7 +500,6 @@ export const svgs: iSVG[] = [ url: 'https://www.godaddy.com/' }, { - id: 78, title: 'Udemy', category: 'Education', route: { @@ -587,21 +509,18 @@ export const svgs: iSVG[] = [ url: 'https://www.udemy.com/' }, { - id: 79, title: 'GraphQL', category: 'Language', route: '/library/graphql.svg', url: 'https://graphql.org/' }, { - id: 80, title: 'GitLab', category: 'Software', route: '/library/gitlab.svg', url: 'https://gitlab.com/' }, { - id: 81, title: 'Prisma', category: 'Software', route: { @@ -611,7 +530,6 @@ export const svgs: iSVG[] = [ url: 'https://prisma.io/' }, { - id: 82, title: 'Go', category: 'Language', route: { @@ -621,77 +539,66 @@ export const svgs: iSVG[] = [ url: 'https://go.dev/' }, { - id: 83, title: 'Platzi', category: 'Education', route: '/library/platzi.svg', url: 'https://platzi.com/' }, { - id: 84, title: 'Coursera', category: 'Education', route: '/library/coursera.svg', url: 'https://www.coursera.org/' }, { - id: 85, title: 'Udacity', category: 'Education', route: '/library/udacity.svg', url: 'https://www.udacity.com/' }, { - id: 86, title: 'Kubernetes', category: 'Software', route: '/library/kubernetes.svg', url: 'https://kubernetes.io/' }, { - id: 87, title: 'Docker', category: 'Software', route: '/library/docker.svg', url: 'https://www.docker.com/' }, { - id: 88, title: 'Amazon Web Services', category: 'Software', route: '/library/aws.svg', url: 'https://aws.amazon.com/' }, { - id: 89, title: 'Microsoft Azure', category: 'Software', route: '/library/azure.svg', url: 'https://azure.microsoft.com/' }, { - id: 90, title: 'Heroku', category: 'Software', route: '/library/heroku.svg', url: 'https://www.heroku.com/' }, { - id: 91, title: 'JetBrains', category: 'Software', route: '/library/jetbrains.svg', url: 'https://www.jetbrains.com/' }, { - id: 92, title: 'JetBrains Rider', category: 'Software', route: '/library/rider.svg', url: 'https://www.jetbrains.com/rider/' }, { - id: 93, title: 'PlanetScale', category: 'Database', route: { @@ -701,245 +608,210 @@ export const svgs: iSVG[] = [ url: 'https://planetscale.com/' }, { - id: 94, title: 'Playwright', category: 'Framework', route: '/library/playwright.svg', url: 'https://playwright.dev/' }, { - id: 95, title: 'Atlassian', category: 'Software', route: '/library/atlassian.svg', url: 'https://www.atlassian.com/' }, { - id: 96, title: 'Discourse', category: 'Software', route: '/library/discourse.svg', url: 'https://discourse.org/' }, { - id: 97, title: 'Ember', category: 'Framework', route: '/library/ember.svg', url: 'https://emberjs.com/' }, { - id: 98, title: 'Expo', category: 'Software', route: '/library/expo.svg', url: 'https://expo.dev/' }, { - id: 99, title: 'Flutter', category: 'Framework', route: '/library/flutter.svg', url: 'https://flutter.dev/' }, { - id: 100, title: 'Fresh', category: 'Framework', route: '/library/fresh.svg', url: 'https://fresh.deno.dev/' }, { - id: 101, title: 'Git', category: 'Software', route: '/library/git.svg', url: 'https://git-scm.com/' }, { - id: 102, title: 'Hostgator', category: 'Hosting', route: '/library/hostgator.svg', url: 'https://www.hostgator.com/' }, { - id: 103, title: 'IntelliJ IDEA', category: 'Software', route: '/library/intellijidea.svg', url: 'https://www.jetbrains.com/idea/' }, { - id: 104, title: 'Jasmine', category: 'Framework', route: '/library/jasmine.svg', url: 'https://jasmine.github.io/' }, { - id: 105, title: 'Java', category: 'Language', route: '/library/java.svg', url: 'https://www.java.com/' }, { - id: 106, title: 'Jest', category: 'Framework', route: '/library/jest.svg', url: 'https://jestjs.io/' }, { - id: 107, title: 'JetBrains', category: 'Software', route: '/library/jetbrainsSolid.svg', url: 'https://www.jetbrains.com/' }, { - id: 108, title: 'KrakenJS', category: 'Framework', route: '/library/krakenjs.svg', url: 'https://krakenjs.com/' }, { - id: 109, title: 'Laravel', category: 'Framework', route: '/library/laravel.svg', url: 'https://laravel.com/' }, { - id: 110, title: 'MariaDB', category: 'Database', route: '/library/mariadb.svg', url: 'https://mariadb.org/' }, { - id: 111, title: 'Material UI', category: 'Framework', route: '/library/materialui.svg', url: 'https://mui.com/' }, { - id: 112, title: 'MySQL', category: 'Database', route: '/library/mysql.svg', url: 'https://www.mysql.com/' }, { - id: 113, title: 'Parcel', category: 'Compiler', route: '/library/parcel.svg', url: 'https://parceljs.org/' }, { - id: 114, title: 'PM2', category: 'Framework', route: '/library/pm2.svg', url: 'https://pm2.io/' }, { - id: 115, title: 'PostgreSQL', category: 'Database', route: '/library/postgresql.svg', url: 'https://www.postgresql.org/' }, { - id: 116, title: 'React Query', category: 'Framework', route: '/library/reactquery.svg', url: 'https://tanstack.com/query/v4' }, { - id: 117, title: 'Redis', category: 'Database', route: '/library/redis.svg', url: 'https://redis.io/' }, { - id: 118, title: 'RedwoodJS', category: 'Framework', route: '/library/redwoodjs.svg', url: 'https://redwoodjs.com/' }, { - id: 119, title: 'Ruby', category: 'Language', route: '/library/ruby.svg', url: 'https://www.ruby-lang.org/' }, { - id: 120, title: 'Scala', category: 'Language', route: '/library/scala.svg', url: 'https://www.scala-lang.org/' }, { - id: 121, title: 'Sequelize', category: 'Framework', route: '/library/sequelize.svg', url: 'https://sequelize.org/' }, { - id: 122, title: 'Spinnaker', category: 'Software', route: '/library/spinnaker.svg', url: 'https://spinnaker.io/' }, { - id: 123, title: 'SQLite', category: 'Database', route: '/library/sqlite.svg', url: 'https://www.sqlite.org/' }, { - id: 124, title: 'Swagger', category: 'Software', route: '/library/swagger.svg', url: 'https://swagger.io/' }, { - id: 125, title: 'Swift', category: 'Language', route: '/library/swift.svg', url: 'https://swift.org/' }, { - id: 126, title: 'Testing Library', category: 'Framework', route: '/library/testinglibrary.svg', url: 'https://testing-library.com/' }, { - id: 127, title: 'TypeORM', category: 'Database', route: '/library/typeorm.svg', url: 'https://typeorm.io/' }, { - id: 128, title: 'Unity', category: 'Software', route: { @@ -949,91 +821,78 @@ export const svgs: iSVG[] = [ url: 'https://unity.com/' }, { - id: 129, title: 'Vim', category: 'Software', route: '/library/vim.svg', url: 'https://www.vim.org/' }, { - id: 130, title: 'Pocketbase', category: 'Database', route: '/library/pocket-base.svg', url: 'https://pocketbase.io/' }, { - id: 131, title: 'OpenBootcamp', category: 'Education', route: '/library/openbootcamp.svg', url: 'https://open-bootcamp.com/' }, { - id: 132, title: 'Digital Ocean', category: 'Software', route: '/library/digitalocean.svg', url: 'https://www.digitalocean.com/' }, { - id: 133, title: 'Disney+', category: 'Entertainment', route: '/library/disneyplus.svg', url: 'https://www.disneyplus.com/' }, { - id: 134, title: 'React Router', category: 'Library', route: '/library/reactrouter.svg', url: 'https://reactrouter.com/en/main' }, { - id: 135, title: 'Developer Student Club', category: 'Education', route: '/library/gdsc.svg', url: 'https://gdsc.community.dev/' }, { - id: 136, title: 'Brave Browser', category: 'Browser', route: '/library/brave.svg', url: 'https://brave.com/' }, { - id: 137, title: 'Eclipse IDE', category: 'Software', route: '/library/eclipse.svg', url: 'https://www.eclipse.org/' }, { - id: 138, title: 'HTML5', category: 'Language', route: '/library/html5.svg', url: 'https://es.wikipedia.org/wiki/HTML5' }, { - id: 139, title: 'CSS', category: 'Language', route: '/library/css.svg', url: 'https://es.wikipedia.org/wiki/CSS' }, { - id: 140, title: 'midudev', category: 'Education', route: '/library/midudev.svg', url: 'https://midu.dev' }, { - id: 141, title: 'Apple', category: 'Software', route: { @@ -1043,231 +902,198 @@ export const svgs: iSVG[] = [ url: 'https://www.apple.com' }, { - id: 142, title: 'Android', category: 'Software', route: '/library/android.svg', url: 'https://www.android.com/' }, { - id: 143, title: 'Windows', category: 'Software', route: '/library/windows.svg', url: 'https://www.microsoft.com/windows' }, { - id: 144, title: 'Python', category: 'Language', route: '/library/python.svg', url: 'https://www.python.org/' }, { - id: 145, title: 'Turbopack', category: 'Software', route: '/library/turbopack.svg', url: 'https://turbo.build/' }, { - id: 146, title: 'Builder', category: 'CMS', route: '/library/builder.svg', url: 'https://builder.io/' }, { - id: 147, title: 'Surrealdb', category: 'Database', route: '/library/surrealdb.svg', url: 'https://surrealdb.com/' }, { - id: 148, title: 'Jetbrains Space', category: 'Software', route: '/library/jetbrains-space.svg', url: 'https://www.jetbrains.com/space/' }, { - id: 149, title: 'Gin', category: 'Framework', route: '/library/gin.svg', url: 'https://gin-gonic.com/' }, { - id: 150, title: 'Stimulus', category: 'Framework', route: '/library/stimulus.svg', url: 'https://stimulus.hotwired.dev/' }, { - id: 151, title: 'WindiCSS', category: 'Framework', route: '/library/windicss.svg', url: 'https://windicss.org/' }, { - id: 152, title: 'Mastodon', category: 'Social', route: '/library/mastodon.svg', url: 'https://joinmastodon.org/' }, { - id: 153, title: 'Upstash', category: 'Database', route: '/library/upstash.svg', url: 'https://upstash.com/' }, { - id: 154, title: 'Storyblok', category: 'CMS', route: '/library/storyblok.svg', url: 'https://www.storyblok.com/' }, { - id: 155, title: 'Cloudflare Workers', category: 'Software', route: '/library/cloudflare-workers.svg', url: 'https://workers.cloudflare.com/' }, { - id: 156, title: 'Cloudflare', category: 'Software', route: '/library/cloudflare.svg', url: 'https://www.cloudflare.com/' }, { - id: 157, title: 'Bing', category: 'Browser', route: '/library/bing.svg', url: 'https://www.bing.com/' }, { - id: 158, title: 'Cloudinary', category: 'Software', route: '/library/cloudinary.svg', url: 'https://cloudinary.com/' }, { - id: 159, title: 'Dart', category: 'Language', route: '/library/dart.svg', url: 'https://dart.dev/' }, { - id: 160, title: 'hCaptcha', category: 'Software', route: '/library/hcaptcha.svg', url: 'https://www.hcaptcha.com/' }, { - id: 161, title: 'Loom', category: 'Software', route: '/library/loom.svg', url: 'https://www.loom.com/' }, { - id: 162, title: 'Stackblitz', category: 'Software', route: '/library/stackblitz.svg', url: 'https://stackblitz.com/' }, { - id: 163, title: 'Messenger', category: 'Social', route: '/library/messenger.svg', url: 'https://www.messenger.com/' }, { - id: 164, title: 'NHost', category: 'Hosting', route: '/library/nhost.svg', url: 'https://nhost.io/' }, { - id: 165, title: 'Medusa', category: 'Software', route: '/library/medusa.svg', url: 'https://medusajs.com/' }, { - id: 166, title: 'WordPress', category: 'Software', route: '/library/wordpress.svg', url: 'https://wordpress.org/' }, { - id: 167, title: 'Microsoft', category: 'Software', route: '/library/microsoft.svg', url: 'https://www.microsoft.com/' }, { - id: 168, title: 'Elementor', category: 'Software', route: '/library/elementor.svg', url: 'https://elementor.com/' }, { - id: 169, title: 'Prime video', category: 'Entertainment', route: '/library/prime-video.svg', url: 'https://primevideo.com/' }, { - id: 170, title: 'Chrome', category: 'Browser', route: '/library/chrome.svg', url: 'https://chrome.com/' }, { - id: 171, title: 'RxJS', category: 'Library', route: '/library/rxjs.svg', url: 'https://rxjs.dev/' }, { - id: 172, title: 'Electron', category: 'Library', route: '/library/electron.svg', url: 'https://www.electronjs.org' }, { - id: 173, title: 'Redux', category: 'Library', route: '/library/redux.svg', url: 'https://redux.js.org/' }, { - id: 174, title: 'Php', category: 'Language', route: { @@ -1277,112 +1103,96 @@ export const svgs: iSVG[] = [ url: 'https://www.php.net/' }, { - id: 175, title: 'Hugo', category: 'Framework', route: '/library/hugo.svg', url: 'https://gohugo.io/' }, { - id: 176, title: 'Sass', category: 'Language', route: '/library/sass.svg', url: 'https://sass-lang.com/' }, { - id: 177, title: 'Arc', category: 'Browser', route: '/library/arc_browser.svg', url: 'https://arc.net/' }, { - id: 178, title: 'Pinia', category: 'Library', route: '/library/pinia.svg', url: 'https://pinia.vuejs.org/' }, { - id: 179, title: 'Neon', category: 'Database', route: '/library/neon.svg', url: 'https://neon.tech/' }, { - id: 180, title: 'Infojobs', category: 'Social', route: '/library/infojobs-logo.svg', url: 'https://www.infojobs.net/' }, { - id: 181, title: 'Linear', category: 'Software', route: '/library/linear.svg', url: 'https://linear.app/' }, { - id: 182, title: 'Tor', category: 'Browser', route: '/library/tor.svg', url: 'https://www.torproject.org/' }, { - id: 183, title: 'Codesandbox', category: 'Software', route: '/library/codesandbox-square.svg', url: 'https://codesandbox.io/' }, { - id: 184, title: 'Skype', category: 'Social', route: '/library/skype.svg', url: 'https://www.skype.com/' }, { - id: 185, title: 'Tauri', category: 'Library', route: '/library/tauri.svg', url: 'https://tauri.app/' }, { - id: 186, title: 'WebKit', category: 'Software', route: '/library/webkit.svg', url: 'https://webkit.org/' }, { - id: 187, title: 'Google Bard', category: 'AI', route: '/library/bard.svg', url: 'https://bard.google.com/' }, { - id: 188, title: 'Obsidian', category: 'Software', route: '/library/obsidian.svg', url: 'https://obsidian.md/' }, { - id: 189, title: 'Zod', category: 'Library', route: '/library/zod.svg', url: 'https://zod.dev/' }, { - id: 190, title: 'OpenAI', category: 'AI', route: { @@ -1392,14 +1202,12 @@ export const svgs: iSVG[] = [ url: 'https://openai.com/' }, { - id: 191, title: 'HuggingFace', category: 'AI', route: '/library/hf.svg', url: 'https://huggingface.co/' }, { - id: 192, title: 'Threads', category: 'Social', route: { @@ -1409,7 +1217,6 @@ export const svgs: iSVG[] = [ url: 'https://threads.net/' }, { - id: 193, title: 'Instagram', category: 'Social', route: { @@ -1419,154 +1226,132 @@ export const svgs: iSVG[] = [ url: 'https://www.instagram.com/' }, { - id: 194, title: 'VueUse', category: 'Library', route: '/library/vueuse.svg', url: 'https://vueuse.org/' }, { - id: 195, title: 'Microsoft SQL Server ', category: 'Database', route: '/library/sql-server.svg', url: 'https://www.microsoft.com/en-us/sql-server/' }, { - id: 196, title: 'Biomejs', category: 'Compiler', route: '/library/biomejs.svg', url: 'https://biomejs.dev/' }, { - id: 197, title: 'Hono', category: 'Framework', route: '/library/hono.svg', url: 'https://hono.dev/' }, { - id: 198, title: 'Million', category: 'Library', route: '/library/million.svg', url: 'https://million.dev/' }, { - id: 199, title: 'PandaCSS', category: 'Library', route: '/library/pandacss.svg', url: 'https://panda-css.com/' }, { - id: 200, title: 'Pulumi', category: 'Software', route: '/library/pulumi.svg', url: 'https://www.pulumi.com/' }, { - id: 201, title: 'FastAPI', category: 'Framework', route: '/library/fastapi.svg', url: 'https://fastapi.tiangolo.com/' }, { - id: 202, title: 'Codium', category: 'AI', route: '/library/codium.svg', url: 'https://www.codium.ai/' }, { - id: 203, title: 'Crossplane', category: 'Framework', route: '/library/crossplane.svg', url: 'https://crossplane.io/' }, { - id: 204, title: 'Typesense', category: 'Software', route: '/library/typesense.svg', url: 'https://typesense.org/' }, { - id: 205, title: 'Bitcoin', category: 'Crypto', route: '/library/btc.svg', url: 'https://bitcoin.org/' }, { - id: 206, title: 'Ethereum', category: 'Crypto', route: '/library/eth.svg', url: 'https://ethereum.org/' }, { - id: 207, title: 'Solana', category: 'Crypto', route: '/library/sol.svg', url: 'https://solana.com/' }, { - id: 208, title: 'Dogecoin', category: 'Crypto', route: '/library/doge.svg', url: 'https://dogecoin.com/' }, { - id: 209, title: 'XRP', category: 'Crypto', route: '/library/xrp.svg', url: 'https://xrpl.org/' }, { - id: 210, title: 'BNB', category: 'Crypto', route: '/library/bnb.svg', url: 'https://www.bnbchain.org/' }, { - id: 211, title: 'Cardano', category: 'Crypto', route: '/library/ada.svg', url: 'https://cardano.org/' }, { - id: 212, title: 'TRON', category: 'Crypto', route: '/library/trx.svg', url: 'https://tron.network/' }, { - id: 213, title: 'Chainlink', category: 'Crypto', route: '/library/link.svg', url: 'https://chain.link/' }, { - id: 214, title: 'Polygon', category: 'Crypto', route: '/library/matic.svg', url: 'https://polygon.technology/' }, { - id: 215, title: 'X', category: 'Social', route: { @@ -1576,98 +1361,84 @@ export const svgs: iSVG[] = [ url: 'https://x.com' }, { - id: 216, title: 'Adobe', category: 'Design', route: '/library/adobe.svg', url: 'https://x.com' }, { - id: 217, title: 'After Effects', category: 'Design', route: '/library/after-effects.svg', url: 'https://x.com' }, { - id: 218, title: 'Canva', category: 'Design', route: '/library/canva.svg', url: 'https://x.com' }, { - id: 219, title: 'Illustrator', category: 'Design', route: '/library/illustrator.svg', url: 'https://x.com' }, { - id: 220, title: 'InDesign', category: 'Design', route: '/library/indesign.svg', url: 'https://x.com' }, { - id: 221, title: 'Lightroom', category: 'Design', route: '/library/lightroom.svg', url: 'https://x.com' }, { - id: 222, title: 'Photoshop', category: 'Design', route: '/library/photoshop.svg', url: 'https://x.com' }, { - id: 223, title: 'Premiere', category: 'Design', route: '/library/premiere.svg', url: 'https://x.com' }, { - id: 224, title: 'VK', category: 'Social', route: '/library/vk.svg', url: 'https://vk.com' }, { - id: 225, title: 'Hoppscotch', category: 'Software', route: '/library/hoppscotch.svg', url: 'https://hoppscotch.com' }, { - id: 226, title: 'Dub', category: 'Software', route: '/library/dub.svg', url: 'https://dub.co' }, { - id: 227, title: 'Opera', category: 'Browser', route: '/library/opera.svg', url: 'https://www.opera.com' }, { - id: 228, title: 'Salesforce', category: 'Software', route: '/library/salesforce.svg', url: 'https://www.salesforce.com' }, { - id: 4929293, title: 'Unreal Engine', category: 'Software', route: { @@ -1677,84 +1448,72 @@ export const svgs: iSVG[] = [ url: 'https://www.unrealengine.com/' }, { - id: 229, title: 'Godot Engine', category: 'Software', route: '/library/godot_engine.svg', url: 'https://godotengine.org/' }, { - id: 230, title: 'Datadog', category: 'Software', route: '/library/datadog.svg', url: 'https://www.datadoghq.com/' }, { - id: 231, title: 'Randevum', category: 'Software', route: '/library/randevum.svg', url: 'https://www.randevum.co' }, { - id: 232, title: 'Chromium', category: 'Browser', route: '/library/chromium.svg', url: 'https://www.chromium.org' }, { - id: 233, title: 'Edge', category: 'Browser', route: '/library/edge.svg', url: 'https://www.microsoft.com/en-us/edge' }, { - id: 234, title: 'Safari', category: 'Browser', route: '/library/safari.svg', url: 'https://www.apple.com/safari' }, { - id: 235, title: 'Vivaldi', category: 'Browser', route: '/library/vivaldi.svg', url: 'https://vivaldi.com' }, { - id: 293291, title: 'Beacon', category: 'Software', route: '/library/Beacon-Logo.svg', url: 'https://www.beacon.com' }, { - id: 95775, title: 'Affinity Designer', category: 'Design', route: '/library/affinity_designer.svg', url: 'https://affinity.serif.com/en-us/designer/' }, { - id: 44448, title: 'Affinity Photo', category: 'Software', route: '/library/affinity_photo.svg', url: 'https://affinity.serif.com/en-us/photo/' }, { - id: 39170, title: 'Affinity Publisher', category: 'Software', route: '/library/affinity_publisher.svg', url: 'https://affinity.serif.com/en-us/publisher/' }, { - id: 24525, title: 'Roblox', category: 'Software', route: { @@ -1764,7 +1523,6 @@ export const svgs: iSVG[] = [ url: 'https://www.roblox.com/' }, { - id: 68067, title: 'Stately.ai', category: 'Software', route: { @@ -1774,7 +1532,6 @@ export const svgs: iSVG[] = [ url: 'https://stately.ai/' }, { - id: 233, title: 'XState', category: 'Library', route: { @@ -1784,63 +1541,54 @@ export const svgs: iSVG[] = [ url: 'https://github.com/statelyai/xstate' }, { - id: 232, title: 'Hashnode', category: 'Social', route: '/library/hashnode.svg', url: 'https://hashnode.com' }, { - id: 235, title: 'Rowy', category: 'CMS', route: '/library/rowy.svg', url: 'https://www.rowy.io/' }, { - id: 236, title: 'BuildShip', category: 'AI', route: '/library/buildship.svg', url: 'https://buildship.com/' }, { - id: 2464806, title: 'Cal.com', category: 'Software', route: '/library/cal.svg', url: 'https://cal.com' }, { - id: 3452, title: 'Midday.ai', category: 'Software', route: '/library/midday.svg', url: 'https://midday.ai' }, { - id: 238, title: 'Cursor AI', category: 'Software', route: '/library/cursor.svg', url: 'https://cursor.sh/' }, { - id: 239, title: 'Calendly', category: 'Software', route: '/library/calendly.svg', url: 'https://calendly.com/' }, { - id: 240, title: 'Mintlify', category: 'Software', route: '/library/mintlify.svg', url: 'https://mintlify.com/' }, { - id: 241, title: 'Patreon', category: 'Software', route: { @@ -1850,42 +1598,36 @@ export const svgs: iSVG[] = [ url: 'https://www.patreon.com/' }, { - id: 242, title: 'Peerlist', category: 'Social', route: '/library/peerlist.svg', url: 'https://www.peerlist.io/' }, { - id: 243, title: 'Product Hunt', category: 'Software', route: '/library/producthunt.svg', url: 'https://www.producthunt.com/' }, { - id: 244, title: 'Remotion', category: 'Framework', route: '/library/remotion.svg', url: 'https://www.remotion.dev/' }, { - id: 245, title: 'Warp', category: 'Software', route: '/library/warp.svg', url: 'https://www.warp.dev/' }, { - id: 7067478662, title: 'SST', category: 'Framework', route: '/library/sst.svg', url: 'https://sst.dev/' }, { - id: 2342453, title: 'Documenso', category: 'Software', route: { @@ -1895,7 +1637,6 @@ export const svgs: iSVG[] = [ url: 'https://documenso.com' }, { - id: 326851, title: 'Bash', category: 'Language', route: { @@ -1905,49 +1646,42 @@ export const svgs: iSVG[] = [ url: 'https://www.gnu.org/software/bash/' }, { - id: 740938, title: 'C', category: 'Language', route: '/library/c.svg', url: 'https://en.wikipedia.org/wiki/C_(programming_language)' }, { - id: 156807, title: 'C++', category: 'Language', route: '/library/c++.svg', url: 'https://en.wikipedia.org/wiki/C%2B%2B' }, { - id: 854167, title: 'Cobol', category: 'Language', route: '/library/cobol.svg', url: 'https://en.wikipedia.org/wiki/COBOL' }, { - id: 473965, title: 'Fortran', category: 'Language', route: '/library/fortran.svg', url: 'https://en.wikipedia.org/wiki/Fortran' }, { - id: 429673, title: 'Haskell', category: 'Language', route: '/library/haskell.svg', url: 'https://www.haskell.org/' }, { - id: 907583, title: 'matlab', category: 'Language', route: '/library/matlab.svg', url: 'https://www.mathworks.com/products/matlab.html' }, { - id: 754396, title: 'R', category: 'Language', route: { @@ -1957,7 +1691,6 @@ export const svgs: iSVG[] = [ url: 'https://www.r-project.org/' }, { - id: 783625, title: 'Rust', category: 'Language', route: { @@ -1967,14 +1700,12 @@ export const svgs: iSVG[] = [ url: 'https://www.rust-lang.org/' }, { - id: 586019, title: 'Zig', category: 'Language', route: '/library/zig.svg', url: 'https://ziglang.org/' }, { - id: 233, title: 'Instatus', category: 'Software', route: { @@ -1984,21 +1715,18 @@ export const svgs: iSVG[] = [ url: 'https://instatus.com' }, { - id: 6676113873388621, title: 'Front', category: 'Software', route: '/library/front.svg', url: 'https://front.com' }, { - id: 473836, title: 'Monero', category: 'Crypto', route: '/library/monero.svg', url: 'https://www.getmonero.org/' }, { - id: 775133760594, title: 'Axiom', category: 'Software', route: { @@ -2008,21 +1736,18 @@ export const svgs: iSVG[] = [ url: 'https://axiom.co/' }, { - id: 382900874177765, title: 'ArtisanLabs', category: 'Software', route: '/library/ArtisanLabs.svg', url: 'https://artisanlabs.io' }, { - id: 14839, title: 'Django', category: 'Framework', route: '/library/django.svg', url: 'https://www.djangoproject.com/' }, { - id: 246, title: 'Zeabur', category: 'Hosting', route: { @@ -2032,14 +1757,12 @@ export const svgs: iSVG[] = [ url: 'https://zeabur.com/' }, { - id: 247, title: 'MetaMask', category: 'Crypto', route: '/library/metamask.svg', url: 'https://metamask.io/' }, { - id: 248, title: 'shadcn/ui', category: 'Library', route: { @@ -2049,17 +1772,78 @@ export const svgs: iSVG[] = [ url: 'https://ui.shadcn.com/' }, { - id: 15762580, title: 'putio', category: 'Software', route: '/library/putio.svg', url: 'https://put.io/' }, { - id: 249, title: 'Pinterest', category: 'Software', route: '/library/pinterest.svg', url: 'https://pinterest.com/' + }, + { + title: 'Reflex', + category: 'Software', + route: { + light: '/library/reflex-dark.svg', + dark: '/library/reflex-light.svg' + }, + url: 'https://reflex.dev/' + }, + { + title: 'Stripe', + category: 'Software', + route: '/library/stripe.svg', + url: 'https://stripe.com/' + }, + { + title: 'Linux', + category: 'Software', + route: '/library/linux.svg', + url: 'https://www.linux.org/' + }, + { + title: 'XD', + category: 'Design', + route: '/library/adobe-xd.svg', + url: 'https://helpx.adobe.com/xd/get-started.html' + }, + { + title: 'Axure', + category: 'Design', + route: '/library/axure.svg', + url: 'https://www.axure.com/' + }, + { + title: 'Penpot', + category: 'Design', + route: '/library/penpot.svg', + url: 'https://penpot.app/' + }, + { + title: 'Sketch', + category: 'Design', + route: '/library/sketch.svg', + url: 'https://www.sketch.com/' + }, + { + title: 'Gimp', + category: 'Design', + route: '/library/gimp.svg', + url: 'https://www.gimp.org/' + }, + { + title: 'Ubuntu', + category: 'Software', + route: '/library/ubuntu.svg', + url: 'https://ubuntu.com/' + }, + { + title: 'Meta', + category: 'Social', + route: '/library/meta.svg', + url: 'https://meta.com/' } ]; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 77ce4c8..a99b890 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -12,6 +12,8 @@ import SvgCard from '@/components/svgCard.svelte'; import Grid from '@/components/grid.svelte'; import NotFound from '@/components/notFound.svelte'; + + // Icons: import { ArrowDownUpIcon, ArrowUpDownIcon } from 'lucide-svelte'; let sorted: boolean = false; @@ -61,7 +63,7 @@ // Sort by latest: const sortByLatest = () => { - filteredSvgs = allSvgs.sort((a: iSVG, b: iSVG) => { + filteredSvgs = filteredSvgs.sort((a: iSVG, b: iSVG) => { return b.id! - a.id!; }); }; diff --git a/src/routes/directory/[slug]/+page.svelte b/src/routes/directory/[slug]/+page.svelte index 685b8be..d16da26 100644 --- a/src/routes/directory/[slug]/+page.svelte +++ b/src/routes/directory/[slug]/+page.svelte @@ -19,7 +19,7 @@ if (searchTerm.length === 0) { filteredSvgs = svgsByCategory.sort((a: iSVG, b: iSVG) => { - return b.id! - a.id!; + return a.title.localeCompare(b.title); }); } diff --git a/src/types/svg.ts b/src/types/svg.ts index bdbeb0b..705ad40 100644 --- a/src/types/svg.ts +++ b/src/types/svg.ts @@ -1,7 +1,7 @@ import type { tCategory } from './categories'; export interface iSVG { - id: number; + id?: number; title: string; category: tCategory; route: diff --git a/static/library/adobe-xd.svg b/static/library/adobe-xd.svg new file mode 100644 index 0000000..b401cb7 --- /dev/null +++ b/static/library/adobe-xd.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/static/library/axure.svg b/static/library/axure.svg new file mode 100644 index 0000000..b9b5ef6 --- /dev/null +++ b/static/library/axure.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/static/library/gimp.svg b/static/library/gimp.svg new file mode 100644 index 0000000..cbf1432 --- /dev/null +++ b/static/library/gimp.svg @@ -0,0 +1,97 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/library/linux.svg b/static/library/linux.svg new file mode 100644 index 0000000..1c05d82 --- /dev/null +++ b/static/library/linux.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/meta.svg b/static/library/meta.svg new file mode 100644 index 0000000..131bfcd --- /dev/null +++ b/static/library/meta.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/static/library/penpot.svg b/static/library/penpot.svg new file mode 100644 index 0000000..57ba1d5 --- /dev/null +++ b/static/library/penpot.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/library/reflex-dark.svg b/static/library/reflex-dark.svg new file mode 100644 index 0000000..eaf5e7e --- /dev/null +++ b/static/library/reflex-dark.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/static/library/reflex-light.svg b/static/library/reflex-light.svg new file mode 100644 index 0000000..7607bd6 --- /dev/null +++ b/static/library/reflex-light.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/static/library/sketch.svg b/static/library/sketch.svg new file mode 100644 index 0000000..f2c1716 --- /dev/null +++ b/static/library/sketch.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/static/library/stripe.svg b/static/library/stripe.svg new file mode 100644 index 0000000..36e2dac --- /dev/null +++ b/static/library/stripe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/library/ubuntu.svg b/static/library/ubuntu.svg new file mode 100644 index 0000000..c348cc7 --- /dev/null +++ b/static/library/ubuntu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index fe79617..7435967 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -16,5 +16,14 @@ module.exports = { } } }, - plugins: [require('@tailwindcss/typography')] + plugins: [ + require('@tailwindcss/typography'), + ({ addUtilities }) => { + addUtilities({ + '.text-balance': { + 'text-wrap': 'balance' + } + }); + } + ] };