From bab6c1a80c42223b592c1d057928da6de186c63a Mon Sep 17 00:00:00 2001 From: Roshanjossey Date: Thu, 23 Oct 2025 01:13:28 +0200 Subject: [PATCH] Added typescript, biome, vitest, organized code, and made tooltips --- biome.json | 38 ++ package.json | 70 +-- pnpm-lock.yaml | 419 ++++++++++++++++++ src/app.css | 39 +- src/app.d.ts | 16 +- src/app.html | 39 +- src/components/DarkModeToggle.svelte | 21 - src/components/Footer.svelte | 52 --- src/components/Header.svelte | 91 ---- src/components/IconGrid.svelte | 27 -- src/components/IconModal.svelte | 69 --- src/components/IconVersions.svelte | 88 ---- src/components/Modal.svelte | 21 - src/components/SearchFilter.svelte | 143 ------ src/components/darkMode/DarkModeToggle.svelte | 41 ++ src/components/filters/FiltersBar.svelte | 9 + src/components/filters/SearchBar.svelte | 34 ++ src/components/filters/TagsDropdown.svelte | 99 +++++ src/components/footer/Footer.svelte | 62 +++ src/components/header/Header.svelte | 34 ++ src/components/header/HeaderSnippet.svelte | 37 ++ src/components/header/HeaderStats.svelte | 19 + src/components/iconGrid/IconGrid.svelte | 52 +++ src/components/modal/IconModal.svelte | 53 +++ .../{ => modal}/IconModalHeader.svelte | 10 +- .../IconSelector/FontVersionSelector.svelte | 68 +++ .../IconSelector/SVGVersionSelector.svelte | 74 ++++ src/components/modal/Modal.svelte | 21 + .../widgets/contact/ContactLinks.svelte | 42 ++ src/components/widgets/tooltip/Tooltip.svelte | 50 +++ src/lib/common/copyToClipboard.ts | 2 + src/lib/stores/iconStore.js | 119 ----- src/lib/stores/iconStore.ts | 99 +++++ src/lib/types/types.ts | 26 ++ src/routes/+layout.svelte | 17 +- src/routes/+page.server.ts | 35 ++ src/routes/+page.svelte | 82 ++-- svelte.config.js | 44 +- tsconfig.json | 34 +- vite.config.ts | 14 +- 40 files changed, 1490 insertions(+), 820 deletions(-) create mode 100644 biome.json delete mode 100644 src/components/DarkModeToggle.svelte delete mode 100644 src/components/Footer.svelte delete mode 100644 src/components/Header.svelte delete mode 100644 src/components/IconGrid.svelte delete mode 100644 src/components/IconModal.svelte delete mode 100644 src/components/IconVersions.svelte delete mode 100644 src/components/Modal.svelte delete mode 100644 src/components/SearchFilter.svelte create mode 100644 src/components/darkMode/DarkModeToggle.svelte create mode 100644 src/components/filters/FiltersBar.svelte create mode 100644 src/components/filters/SearchBar.svelte create mode 100644 src/components/filters/TagsDropdown.svelte create mode 100644 src/components/footer/Footer.svelte create mode 100644 src/components/header/Header.svelte create mode 100644 src/components/header/HeaderSnippet.svelte create mode 100644 src/components/header/HeaderStats.svelte create mode 100644 src/components/iconGrid/IconGrid.svelte create mode 100644 src/components/modal/IconModal.svelte rename src/components/{ => modal}/IconModalHeader.svelte (69%) create mode 100644 src/components/modal/IconSelector/FontVersionSelector.svelte create mode 100644 src/components/modal/IconSelector/SVGVersionSelector.svelte create mode 100644 src/components/modal/Modal.svelte create mode 100644 src/components/widgets/contact/ContactLinks.svelte create mode 100644 src/components/widgets/tooltip/Tooltip.svelte create mode 100644 src/lib/common/copyToClipboard.ts delete mode 100644 src/lib/stores/iconStore.js create mode 100644 src/lib/stores/iconStore.ts create mode 100644 src/lib/types/types.ts create mode 100644 src/routes/+page.server.ts diff --git a/biome.json b/biome.json new file mode 100644 index 0000000..b174f05 --- /dev/null +++ b/biome.json @@ -0,0 +1,38 @@ +{ + "$schema": "https://biomejs.dev/schemas/2.2.0/schema.json", + "vcs": { + "enabled": false, + "clientKind": "git", + "useIgnoreFile": false + }, + "files": { + "ignoreUnknown": false, + "includes": ["**", "!.svelte-kit", "!build"] + }, + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 2 + }, + "linter": { + "enabled": true, + "rules": { + "recommended": true + } + }, + "javascript": { + "formatter": { + "quoteStyle": "double", + "indentWidth": 2, + "semicolons": "asNeeded" + } + }, + "assist": { + "enabled": true, + "actions": { + "source": { + "organizeImports": "on" + } + } + } +} diff --git a/package.json b/package.json index ef707f3..e727b7d 100644 --- a/package.json +++ b/package.json @@ -1,34 +1,38 @@ { - "name": "devicons.dev", - "private": true, - "version": "0.0.1", - "type": "module", - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "prepare": "svelte-kit sync || echo ''", - "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch" - }, - "devDependencies": { - "@sveltejs/adapter-auto": "^4.0.0", - "@sveltejs/adapter-static": "^3.0.10", - "@sveltejs/kit": "^2.20.6", - "@sveltejs/vite-plugin-svelte": "^5.0.0", - "svelte": "^5.0.0", - "svelte-check": "^4.0.0", - "typescript": "^5.0.0", - "vite": "^6.4.1" - }, - "pnpm": { - "onlyBuiltDependencies": [ - "esbuild" - ] - }, - "dependencies": { - "@tailwindcss/vite": "^4.0.12", - "devicon": "^2.17.0", - "tailwindcss": "^4.0.12" - } -} \ No newline at end of file + "name": "devicons.dev", + "private": true, + "version": "0.0.1", + "type": "module", + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "prepare": "svelte-kit sync || echo ''", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "format": "biome format --write .", + "lint": "biome lint --write ." + }, + "devDependencies": { + "@biomejs/biome": "2.2.0", + "@sveltejs/adapter-auto": "^4.0.0", + "@sveltejs/adapter-static": "^3.0.10", + "@sveltejs/kit": "^2.20.6", + "@sveltejs/vite-plugin-svelte": "^5.0.0", + "svelte": "^5.0.0", + "svelte-check": "^4.0.0", + "typescript": "^5.0.0", + "vite": "^6.4.1", + "vitest": "^3.2.4" + }, + "pnpm": { + "onlyBuiltDependencies": [ + "esbuild" + ] + }, + "dependencies": { + "@tailwindcss/vite": "^4.0.12", + "devicon": "^2.17.0", + "tailwindcss": "^4.0.12" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b8785b..b4524fb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,6 +18,9 @@ importers: specifier: ^4.0.12 version: 4.0.12 devDependencies: + '@biomejs/biome': + specifier: 2.2.0 + version: 2.2.0 '@sveltejs/adapter-auto': specifier: ^4.0.0 version: 4.0.0(@sveltejs/kit@2.20.6(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.20.5)(vite@6.4.1(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.20.5)(vite@6.4.1(jiti@2.4.2)(lightningcss@1.29.2))) @@ -42,6 +45,9 @@ importers: vite: specifier: ^6.4.1 version: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + vitest: + specifier: ^3.2.4 + version: 3.2.4(jiti@2.4.2)(lightningcss@1.29.2) packages: @@ -49,6 +55,59 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} + '@biomejs/biome@2.2.0': + resolution: {integrity: sha512-3On3RSYLsX+n9KnoSgfoYlckYBoU6VRM22cw1gB4Y0OuUVSYd/O/2saOJMrA4HFfA1Ff0eacOvMN1yAAvHtzIw==} + engines: {node: '>=14.21.3'} + hasBin: true + + '@biomejs/cli-darwin-arm64@2.2.0': + resolution: {integrity: sha512-zKbwUUh+9uFmWfS8IFxmVD6XwqFcENjZvEyfOxHs1epjdH3wyyMQG80FGDsmauPwS2r5kXdEM0v/+dTIA9FXAg==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [darwin] + + '@biomejs/cli-darwin-x64@2.2.0': + resolution: {integrity: sha512-+OmT4dsX2eTfhD5crUOPw3RPhaR+SKVspvGVmSdZ9y9O/AgL8pla6T4hOn1q+VAFBHuHhsdxDRJgFCSC7RaMOw==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [darwin] + + '@biomejs/cli-linux-arm64-musl@2.2.0': + resolution: {integrity: sha512-egKpOa+4FL9YO+SMUMLUvf543cprjevNc3CAgDNFLcjknuNMcZ0GLJYa3EGTCR2xIkIUJDVneBV3O9OcIlCEZQ==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-arm64@2.2.0': + resolution: {integrity: sha512-6eoRdF2yW5FnW9Lpeivh7Mayhq0KDdaDMYOJnH9aT02KuSIX5V1HmWJCQQPwIQbhDh68Zrcpl8inRlTEan0SXw==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-x64-musl@2.2.0': + resolution: {integrity: sha512-I5J85yWwUWpgJyC1CcytNSGusu2p9HjDnOPAFG4Y515hwRD0jpR9sT9/T1cKHtuCvEQ/sBvx+6zhz9l9wEJGAg==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-linux-x64@2.2.0': + resolution: {integrity: sha512-5UmQx/OZAfJfi25zAnAGHUMuOd+LOsliIt119x2soA2gLggQYrVPA+2kMUxR6Mw5M1deUF/AWWP2qpxgH7Nyfw==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-win32-arm64@2.2.0': + resolution: {integrity: sha512-n9a1/f2CwIDmNMNkFs+JI0ZjFnMO0jdOyGNtihgUNFnlmd84yIYY2KMTBmMV58ZlVHjgmY5Y6E1hVTnSRieggA==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [win32] + + '@biomejs/cli-win32-x64@2.2.0': + resolution: {integrity: sha512-Nawu5nHjP/zPKTIryh2AavzTc/KEg4um/MxWdXW0A6P/RZOyIpa7+QSjeXwAwX/utJGaCoXRPWtF3m5U/bB3Ww==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [win32] + '@esbuild/aix-ppc64@0.25.11': resolution: {integrity: sha512-Xt1dOL13m8u0WE8iplx9Ibbm+hFAO0GsU2P34UNoDGvZYkY8ifSiy6Zuc1lYxfG7svWE2fzqCUmFp5HCn51gJg==} engines: {node: '>=18'} @@ -451,15 +510,50 @@ packages: peerDependencies: vite: ^5.2.0 || ^6 + '@types/chai@5.2.3': + resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==} + '@types/cookie@0.6.0': resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + '@types/deep-eql@4.0.2': + resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==} + '@types/estree@1.0.6': resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} '@types/estree@1.0.8': resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==} + '@vitest/expect@3.2.4': + resolution: {integrity: sha512-Io0yyORnB6sikFlt8QW5K7slY4OjqNX9jmJQ02QDda8lyM6B5oNgVWoSoKPac8/kgnCUzuHQKrSLtu/uOqqrig==} + + '@vitest/mocker@3.2.4': + resolution: {integrity: sha512-46ryTE9RZO/rfDd7pEqFl7etuyzekzEhUbTW3BvmeO/BcCMEgq59BKhek3dXDWgAj4oMK6OZi+vRr1wPW6qjEQ==} + peerDependencies: + msw: ^2.4.9 + vite: ^5.0.0 || ^6.0.0 || ^7.0.0-0 + peerDependenciesMeta: + msw: + optional: true + vite: + optional: true + + '@vitest/pretty-format@3.2.4': + resolution: {integrity: sha512-IVNZik8IVRJRTr9fxlitMKeJeXFFFN0JaB9PHPGQ8NKQbGpfjlTx9zO4RefN8gp7eqjNy8nyK3NZmBzOPeIxtA==} + + '@vitest/runner@3.2.4': + resolution: {integrity: sha512-oukfKT9Mk41LreEW09vt45f8wx7DordoWUZMYdY/cyAk7w5TWkTRCNZYF7sX7n2wB7jyGAl74OxgwhPgKaqDMQ==} + + '@vitest/snapshot@3.2.4': + resolution: {integrity: sha512-dEYtS7qQP2CjU27QBC5oUOxLE/v5eLkGqPE0ZKEIDGMs4vKWe7IjgLOeauHsR0D5YuuycGRO5oSRXnwnmA78fQ==} + + '@vitest/spy@3.2.4': + resolution: {integrity: sha512-vAfasCOe6AIK70iP5UD11Ac4siNUNJ9i/9PZ3NKx07sG6sUxeag1LWdNrMWeKKYBLlzuK+Gn65Yd5nyL6ds+nw==} + + '@vitest/utils@3.2.4': + resolution: {integrity: sha512-fB2V0JFrQSMsCo9HiSq3Ezpdv4iYaXRG1Sx8edX3MwxfyNn83mKiGzOcH+Fkxt4MHxr3y42fQi1oeAInqgX2QA==} + acorn-typescript@1.4.13: resolution: {integrity: sha512-xsc9Xv0xlVfwp2o7sQ+GCQ1PgbkdcpWdTzrwXxO3xDMTAywVS3oXVOcOHuRjAPkS4P9b+yc/qNF15460v+jp4Q==} peerDependencies: @@ -474,10 +568,26 @@ packages: resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} engines: {node: '>= 0.4'} + assertion-error@2.0.1: + resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==} + engines: {node: '>=12'} + axobject-query@4.1.0: resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} engines: {node: '>= 0.4'} + cac@6.7.14: + resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} + engines: {node: '>=8'} + + chai@5.3.3: + resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==} + engines: {node: '>=18'} + + check-error@2.1.1: + resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==} + engines: {node: '>= 16'} + chokidar@4.0.3: resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==} engines: {node: '>= 14.16.0'} @@ -499,6 +609,19 @@ packages: supports-color: optional: true + debug@4.4.3: + resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==} + engines: {node: '>=6.0'} + peerDependencies: + supports-color: '*' + peerDependenciesMeta: + supports-color: + optional: true + + deep-eql@5.0.2: + resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==} + engines: {node: '>=6'} + deepmerge@4.3.1: resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} engines: {node: '>=0.10.0'} @@ -517,6 +640,9 @@ packages: resolution: {integrity: sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==} engines: {node: '>=10.13.0'} + es-module-lexer@1.7.0: + resolution: {integrity: sha512-jEQoCwk8hyb2AZziIOLhDqpm5+2ww5uIE6lkO/6jcOCusfk6LhMHpXXfBLXTZ7Ydyt0j4VoUQv6uGNYbdW+kBA==} + esbuild@0.25.11: resolution: {integrity: sha512-KohQwyzrKTQmhXDW1PjCv3Tyspn9n5GcY2RTDqeORIdIJY8yKIF7sTSopFmn/wpMPW4rdPXI0UE5LJLuq3bx0Q==} engines: {node: '>=18'} @@ -528,6 +654,13 @@ packages: esrap@1.4.5: resolution: {integrity: sha512-CjNMjkBWWZeHn+VX+gS8YvFwJ5+NDhg8aWZBSFJPR8qQduDNjbJodA2WcwCm7uQa5Rjqj+nZvVmceg1RbHFB9g==} + estree-walker@3.0.3: + resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} + + expect-type@1.2.2: + resolution: {integrity: sha512-JhFGDVJ7tmDJItKhYgJCGLOWjuK9vPxiXoUFLwLDc99NlmklilbiQJwoctZtt13+xMw91MCk/REan6MWHqDjyA==} + engines: {node: '>=12.0.0'} + fdir@6.4.3: resolution: {integrity: sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==} peerDependencies: @@ -563,6 +696,9 @@ packages: resolution: {integrity: sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==} hasBin: true + js-tokens@9.0.1: + resolution: {integrity: sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==} + kleur@4.1.5: resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} engines: {node: '>=6'} @@ -634,6 +770,9 @@ packages: locate-character@3.0.0: resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} + loupe@3.2.1: + resolution: {integrity: sha512-CdzqowRJCeLU72bHvWqwRBBlLcMEtIvGrlvef74kMnV2AolS9Y8xUv1I0U/MNAWMhBlKIoyuEgoJ0t/bbwHbLQ==} + magic-string@0.30.17: resolution: {integrity: sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==} @@ -656,6 +795,13 @@ packages: engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} hasBin: true + pathe@2.0.3: + resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==} + + pathval@2.0.1: + resolution: {integrity: sha512-//nshmD55c46FuFw26xV/xFAaB5HF9Xdap7HJBBnrKdAd6/GxDBaNA1870O79+9ueg61cZLSVc+OaFlfmObYVQ==} + engines: {node: '>= 14.16'} + picocolors@1.1.1: resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} @@ -683,6 +829,9 @@ packages: set-cookie-parser@2.7.1: resolution: {integrity: sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==} + siginfo@2.0.0: + resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==} + sirv@3.0.2: resolution: {integrity: sha512-2wcC/oGxHis/BoHkkPwldgiPSYcpZK3JU28WoMVv55yHJgcZ8rlXvuG9iZggz+sU1d4bRgIGASwyWqjxu3FM0g==} engines: {node: '>=18'} @@ -691,6 +840,15 @@ packages: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} + stackback@0.0.2: + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} + + std-env@3.10.0: + resolution: {integrity: sha512-5GS12FdOZNliM5mAOxFRg7Ir0pWz8MdpYm6AY6VPkGpbA7ZzmbzNcBJQ0GPvvyWgcY7QAhCgf9Uy89I03faLkg==} + + strip-literal@3.1.0: + resolution: {integrity: sha512-8r3mkIM/2+PpjHoOtiAW8Rg3jJLHaV7xPwG+YRGrv6FP0wwk/toTpATxWYOW0BKdWwl82VT2tFYi5DlROa0Mxg==} + svelte-check@4.1.4: resolution: {integrity: sha512-v0j7yLbT29MezzaQJPEDwksybTE2Ups9rUxEXy92T06TiA0cbqcO8wAOwNUVkFW6B0hsYHA+oAX3BS8b/2oHtw==} engines: {node: '>= 18.0.0'} @@ -710,10 +868,28 @@ packages: resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==} engines: {node: '>=6'} + tinybench@2.9.0: + resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + + tinyexec@0.3.2: + resolution: {integrity: sha512-KQQR9yN7R5+OSwaK0XQoj22pwHoTlgYqmUscPYoknOoWCWfj/5/ABTMRi69FrKU5ffPVh5QcFikpWJI/P1ocHA==} + tinyglobby@0.2.15: resolution: {integrity: sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==} engines: {node: '>=12.0.0'} + tinypool@1.1.1: + resolution: {integrity: sha512-Zba82s87IFq9A9XmjiX5uZA/ARWDrB03OHlq+Vw1fSdt0I+4/Kutwy8BP4Y/y/aORMo61FQ0vIb5j44vSo5Pkg==} + engines: {node: ^18.0.0 || >=20.0.0} + + tinyrainbow@2.0.0: + resolution: {integrity: sha512-op4nsTR47R6p0vMUUoYl/a+ljLFVtlfaXkLQmqfLR1qHma1h/ysYk4hEXZ880bf2CYgTskvTa/e196Vd5dDQXw==} + engines: {node: '>=14.0.0'} + + tinyspy@4.0.4: + resolution: {integrity: sha512-azl+t0z7pw/z958Gy9svOTuzqIk6xq+NSheJzn5MMWtWTFywIacg2wUlzKFGtt3cthx0r2SxMK0yzJOR0IES7Q==} + engines: {node: '>=14.0.0'} + totalist@3.0.1: resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==} engines: {node: '>=6'} @@ -723,6 +899,11 @@ packages: engines: {node: '>=14.17'} hasBin: true + vite-node@3.2.4: + resolution: {integrity: sha512-EbKSKh+bh1E1IFxeO0pg1n4dvoOTt0UDiXMd/qn++r98+jPO1xtJilvXldeuQ8giIB5IkpjCgMleHMNEsGH6pg==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + vite@6.4.1: resolution: {integrity: sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==} engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} @@ -771,6 +952,39 @@ packages: vite: optional: true + vitest@3.2.4: + resolution: {integrity: sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==} + engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0} + hasBin: true + peerDependencies: + '@edge-runtime/vm': '*' + '@types/debug': ^4.1.12 + '@types/node': ^18.0.0 || ^20.0.0 || >=22.0.0 + '@vitest/browser': 3.2.4 + '@vitest/ui': 3.2.4 + happy-dom: '*' + jsdom: '*' + peerDependenciesMeta: + '@edge-runtime/vm': + optional: true + '@types/debug': + optional: true + '@types/node': + optional: true + '@vitest/browser': + optional: true + '@vitest/ui': + optional: true + happy-dom: + optional: true + jsdom: + optional: true + + why-is-node-running@2.3.0: + resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==} + engines: {node: '>=8'} + hasBin: true + zimmerframe@1.1.2: resolution: {integrity: sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==} @@ -781,6 +995,41 @@ snapshots: '@jridgewell/gen-mapping': 0.3.8 '@jridgewell/trace-mapping': 0.3.25 + '@biomejs/biome@2.2.0': + optionalDependencies: + '@biomejs/cli-darwin-arm64': 2.2.0 + '@biomejs/cli-darwin-x64': 2.2.0 + '@biomejs/cli-linux-arm64': 2.2.0 + '@biomejs/cli-linux-arm64-musl': 2.2.0 + '@biomejs/cli-linux-x64': 2.2.0 + '@biomejs/cli-linux-x64-musl': 2.2.0 + '@biomejs/cli-win32-arm64': 2.2.0 + '@biomejs/cli-win32-x64': 2.2.0 + + '@biomejs/cli-darwin-arm64@2.2.0': + optional: true + + '@biomejs/cli-darwin-x64@2.2.0': + optional: true + + '@biomejs/cli-linux-arm64-musl@2.2.0': + optional: true + + '@biomejs/cli-linux-arm64@2.2.0': + optional: true + + '@biomejs/cli-linux-x64-musl@2.2.0': + optional: true + + '@biomejs/cli-linux-x64@2.2.0': + optional: true + + '@biomejs/cli-win32-arm64@2.2.0': + optional: true + + '@biomejs/cli-win32-x64@2.2.0': + optional: true + '@esbuild/aix-ppc64@0.25.11': optional: true @@ -1055,12 +1304,61 @@ snapshots: tailwindcss: 4.0.12 vite: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + '@types/chai@5.2.3': + dependencies: + '@types/deep-eql': 4.0.2 + assertion-error: 2.0.1 + '@types/cookie@0.6.0': {} + '@types/deep-eql@4.0.2': {} + '@types/estree@1.0.6': {} '@types/estree@1.0.8': {} + '@vitest/expect@3.2.4': + dependencies: + '@types/chai': 5.2.3 + '@vitest/spy': 3.2.4 + '@vitest/utils': 3.2.4 + chai: 5.3.3 + tinyrainbow: 2.0.0 + + '@vitest/mocker@3.2.4(vite@6.4.1(jiti@2.4.2)(lightningcss@1.29.2))': + dependencies: + '@vitest/spy': 3.2.4 + estree-walker: 3.0.3 + magic-string: 0.30.19 + optionalDependencies: + vite: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + + '@vitest/pretty-format@3.2.4': + dependencies: + tinyrainbow: 2.0.0 + + '@vitest/runner@3.2.4': + dependencies: + '@vitest/utils': 3.2.4 + pathe: 2.0.3 + strip-literal: 3.1.0 + + '@vitest/snapshot@3.2.4': + dependencies: + '@vitest/pretty-format': 3.2.4 + magic-string: 0.30.19 + pathe: 2.0.3 + + '@vitest/spy@3.2.4': + dependencies: + tinyspy: 4.0.4 + + '@vitest/utils@3.2.4': + dependencies: + '@vitest/pretty-format': 3.2.4 + loupe: 3.2.1 + tinyrainbow: 2.0.0 + acorn-typescript@1.4.13(acorn@8.14.0): dependencies: acorn: 8.14.0 @@ -1069,8 +1367,22 @@ snapshots: aria-query@5.3.2: {} + assertion-error@2.0.1: {} + axobject-query@4.1.0: {} + cac@6.7.14: {} + + chai@5.3.3: + dependencies: + assertion-error: 2.0.1 + check-error: 2.1.1 + deep-eql: 5.0.2 + loupe: 3.2.1 + pathval: 2.0.1 + + check-error@2.1.1: {} + chokidar@4.0.3: dependencies: readdirp: 4.1.2 @@ -1083,6 +1395,12 @@ snapshots: dependencies: ms: 2.1.3 + debug@4.4.3: + dependencies: + ms: 2.1.3 + + deep-eql@5.0.2: {} + deepmerge@4.3.1: {} detect-libc@2.0.3: {} @@ -1096,6 +1414,8 @@ snapshots: graceful-fs: 4.2.11 tapable: 2.2.1 + es-module-lexer@1.7.0: {} + esbuild@0.25.11: optionalDependencies: '@esbuild/aix-ppc64': 0.25.11 @@ -1131,6 +1451,12 @@ snapshots: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 + estree-walker@3.0.3: + dependencies: + '@types/estree': 1.0.8 + + expect-type@1.2.2: {} + fdir@6.4.3(picomatch@4.0.3): optionalDependencies: picomatch: 4.0.3 @@ -1152,6 +1478,8 @@ snapshots: jiti@2.4.2: {} + js-tokens@9.0.1: {} + kleur@4.1.5: {} lightningcss-darwin-arm64@1.29.2: @@ -1201,6 +1529,8 @@ snapshots: locate-character@3.0.0: {} + loupe@3.2.1: {} + magic-string@0.30.17: dependencies: '@jridgewell/sourcemap-codec': 1.5.0 @@ -1217,6 +1547,10 @@ snapshots: nanoid@3.3.11: {} + pathe@2.0.3: {} + + pathval@2.0.1: {} + picocolors@1.1.1: {} picomatch@4.0.3: {} @@ -1263,6 +1597,8 @@ snapshots: set-cookie-parser@2.7.1: {} + siginfo@2.0.0: {} + sirv@3.0.2: dependencies: '@polka/url': 1.0.0-next.29 @@ -1271,6 +1607,14 @@ snapshots: source-map-js@1.2.1: {} + stackback@0.0.2: {} + + std-env@3.10.0: {} + + strip-literal@3.1.0: + dependencies: + js-tokens: 9.0.1 + svelte-check@4.1.4(picomatch@4.0.3)(svelte@5.20.5)(typescript@5.8.2): dependencies: '@jridgewell/trace-mapping': 0.3.25 @@ -1304,15 +1648,46 @@ snapshots: tapable@2.2.1: {} + tinybench@2.9.0: {} + + tinyexec@0.3.2: {} + tinyglobby@0.2.15: dependencies: fdir: 6.5.0(picomatch@4.0.3) picomatch: 4.0.3 + tinypool@1.1.1: {} + + tinyrainbow@2.0.0: {} + + tinyspy@4.0.4: {} + totalist@3.0.1: {} typescript@5.8.2: {} + vite-node@3.2.4(jiti@2.4.2)(lightningcss@1.29.2): + dependencies: + cac: 6.7.14 + debug: 4.4.3 + es-module-lexer: 1.7.0 + pathe: 2.0.3 + vite: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + transitivePeerDependencies: + - '@types/node' + - jiti + - less + - lightningcss + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + vite@6.4.1(jiti@2.4.2)(lightningcss@1.29.2): dependencies: esbuild: 0.25.11 @@ -1330,4 +1705,48 @@ snapshots: optionalDependencies: vite: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + vitest@3.2.4(jiti@2.4.2)(lightningcss@1.29.2): + dependencies: + '@types/chai': 5.2.3 + '@vitest/expect': 3.2.4 + '@vitest/mocker': 3.2.4(vite@6.4.1(jiti@2.4.2)(lightningcss@1.29.2)) + '@vitest/pretty-format': 3.2.4 + '@vitest/runner': 3.2.4 + '@vitest/snapshot': 3.2.4 + '@vitest/spy': 3.2.4 + '@vitest/utils': 3.2.4 + chai: 5.3.3 + debug: 4.4.3 + expect-type: 1.2.2 + magic-string: 0.30.19 + pathe: 2.0.3 + picomatch: 4.0.3 + std-env: 3.10.0 + tinybench: 2.9.0 + tinyexec: 0.3.2 + tinyglobby: 0.2.15 + tinypool: 1.1.1 + tinyrainbow: 2.0.0 + vite: 6.4.1(jiti@2.4.2)(lightningcss@1.29.2) + vite-node: 3.2.4(jiti@2.4.2)(lightningcss@1.29.2) + why-is-node-running: 2.3.0 + transitivePeerDependencies: + - jiti + - less + - lightningcss + - msw + - sass + - sass-embedded + - stylus + - sugarss + - supports-color + - terser + - tsx + - yaml + + why-is-node-running@2.3.0: + dependencies: + siginfo: 2.0.0 + stackback: 0.0.2 + zimmerframe@1.1.2: {} diff --git a/src/app.css b/src/app.css index f5479df..9a8622d 100644 --- a/src/app.css +++ b/src/app.css @@ -1,19 +1,24 @@ @import "tailwindcss"; +@custom-variant dark (&:where(.dark, .dark *)); @theme { - --color-green-50: #F2FAF8; - --color-green-100: #E6F5F0; - --color-green-200: #C3E6D9; - --color-green-300: #4AB475; - --color-green-400: #6BB590; - --color-green-500: #3D9561; - --color-green-600: #318552; - --color-green-700: #2D804E; - --color-green-800: #16592D; - --color-green-900: #0C421C; - --color-green-950: #052B0F; - --color-black-950: #000000AA; - - --primaryColor: #3D9561; - --primaryColorDark: #2D804E; - --primaryColorLight: #4AB475; - } \ No newline at end of file + --color-green-50: #f2faf8; + --color-green-100: #e6f5f0; + --color-green-200: #c3e6d9; + --color-green-300: #4ab475; + --color-green-400: #6bb590; + --color-green-500: #3d9561; + --color-green-600: #318552; + --color-green-700: #2d804e; + --color-green-800: #16592d; + --color-green-900: #0c421c; + --color-green-950: #052b0f; + --color-black-950: #000000aa; + + --primaryColor: #3d9561; + --primaryColorDark: #2d804e; + --primaryColorLight: #4ab475; +} + +.base-container { + @apply mx-auto w-full px-4 py-6 sm:max-w-[45rem] md:max-w-[55rem] lg:max-w-[64rem] xl:max-w-[100rem]; +} diff --git a/src/app.d.ts b/src/app.d.ts index da08e6d..c0c0816 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,13 +1,13 @@ // See https://svelte.dev/docs/kit/types#app.d.ts // for information about these interfaces declare global { - namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface PageState {} - // interface Platform {} - } + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface PageState {} + // interface Platform {} + } } -export {}; +export {} diff --git a/src/app.html b/src/app.html index c51a6c9..9bb37dc 100644 --- a/src/app.html +++ b/src/app.html @@ -1,21 +1,24 @@ - - - - - - - - - %sveltekit.head% - - -
%sveltekit.body%
- + + + + + + + + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/components/DarkModeToggle.svelte b/src/components/DarkModeToggle.svelte deleted file mode 100644 index 0087e71..0000000 --- a/src/components/DarkModeToggle.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - \ No newline at end of file diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte deleted file mode 100644 index 7bce50d..0000000 --- a/src/components/Footer.svelte +++ /dev/null @@ -1,52 +0,0 @@ - diff --git a/src/components/Header.svelte b/src/components/Header.svelte deleted file mode 100644 index 83fca1b..0000000 --- a/src/components/Header.svelte +++ /dev/null @@ -1,91 +0,0 @@ - - -
-
- Devicon - - v2.15.1 - -
-

- Icons about programming languages, software development, and graphic design - tools. -

-
-

- - - Github - -

-

- - - - Discord -

-
-
-
-
Total Icons
-
- {$icons.length} -
-
-
-
Total Versions
-
- {$totalVersions} -
-
-
-

- For CSS usage, paste the code in the <head> of your HTML -

-
-
- -
- - <link rel="stylesheet" - href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"> - -
-
- - diff --git a/src/components/IconGrid.svelte b/src/components/IconGrid.svelte deleted file mode 100644 index c5c9d7f..0000000 --- a/src/components/IconGrid.svelte +++ /dev/null @@ -1,27 +0,0 @@ - - -
- {#each icons as icon} -
openIconModal(icon)} - on:keydown={(e) => e.key === 'Enter' && openIconModal(icon)} - tabindex="0" - role="button" - aria-label={`View ${icon.name} details`} - > -
- -
- -
-

{icon.name}

-
-
- {/each} -
\ No newline at end of file diff --git a/src/components/IconModal.svelte b/src/components/IconModal.svelte deleted file mode 100644 index d3c002b..0000000 --- a/src/components/IconModal.svelte +++ /dev/null @@ -1,69 +0,0 @@ - - - - - - {#if $selectedIcon} - - - - {/if} - \ No newline at end of file diff --git a/src/components/IconVersions.svelte b/src/components/IconVersions.svelte deleted file mode 100644 index 7f19ca4..0000000 --- a/src/components/IconVersions.svelte +++ /dev/null @@ -1,88 +0,0 @@ - - -

{title}

-
- {#if versions.length > 0} -
- {#each versions as version} - {#if type === "font"} - - {:else} - - {/if} - {/each} -
-
-
- -
- - {getIconCode()} - -
- {:else} -

- No {type === "font" ? "font" : "SVG"} versions available -

- {/if} -
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte deleted file mode 100644 index 0555fad..0000000 --- a/src/components/Modal.svelte +++ /dev/null @@ -1,21 +0,0 @@ - - - {#if isOpen} -
- -
- {/if} \ No newline at end of file diff --git a/src/components/SearchFilter.svelte b/src/components/SearchFilter.svelte deleted file mode 100644 index 60a659c..0000000 --- a/src/components/SearchFilter.svelte +++ /dev/null @@ -1,143 +0,0 @@ - - -
-
- setSearchTerm(e.target.value)} - placeholder="Type to search..." - class="w-full p-2 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white" - /> -
- -
-
- - - {/each} -
- {/if} - - - - - - {#if isDropdownOpen} - -
- -
- {#if $selectedTags.length > 0} -
- -
- {/if} - -
- {#each $availableTags as tag} -
toggleTag(tag)} - > - toggleTag(tag)} - /> - -
- {/each} -
-
- {/if} -
-
- diff --git a/src/components/darkMode/DarkModeToggle.svelte b/src/components/darkMode/DarkModeToggle.svelte new file mode 100644 index 0000000..6d0f04d --- /dev/null +++ b/src/components/darkMode/DarkModeToggle.svelte @@ -0,0 +1,41 @@ + + + diff --git a/src/components/filters/FiltersBar.svelte b/src/components/filters/FiltersBar.svelte new file mode 100644 index 0000000..05930c8 --- /dev/null +++ b/src/components/filters/FiltersBar.svelte @@ -0,0 +1,9 @@ + + +
+ + +
diff --git a/src/components/filters/SearchBar.svelte b/src/components/filters/SearchBar.svelte new file mode 100644 index 0000000..a70b967 --- /dev/null +++ b/src/components/filters/SearchBar.svelte @@ -0,0 +1,34 @@ + + +
+ + + + + +
diff --git a/src/components/filters/TagsDropdown.svelte b/src/components/filters/TagsDropdown.svelte new file mode 100644 index 0000000..e98c4b5 --- /dev/null +++ b/src/components/filters/TagsDropdown.svelte @@ -0,0 +1,99 @@ + + +
+ + + {#if isDropdownOpen} + + + +
+ +
+ {#each $availableTags as tag} + + {/each} +
+ + +
+ +
+
+ {/if} +
diff --git a/src/components/footer/Footer.svelte b/src/components/footer/Footer.svelte new file mode 100644 index 0000000..59ba044 --- /dev/null +++ b/src/components/footer/Footer.svelte @@ -0,0 +1,62 @@ + + + + + diff --git a/src/components/header/Header.svelte b/src/components/header/Header.svelte new file mode 100644 index 0000000..0b8c3c7 --- /dev/null +++ b/src/components/header/Header.svelte @@ -0,0 +1,34 @@ + + +
+
+ Devicon + + v2.15.1 + +
+

+ Icons about programming languages, software development, and graphic design + tools. +

+ + + + +
+ + diff --git a/src/components/header/HeaderSnippet.svelte b/src/components/header/HeaderSnippet.svelte new file mode 100644 index 0000000..f90e1ca --- /dev/null +++ b/src/components/header/HeaderSnippet.svelte @@ -0,0 +1,37 @@ + + +
+

For CSS usage, paste the code in the <head> of your HTML

+
+ {snippet} + + + +
+
diff --git a/src/components/header/HeaderStats.svelte b/src/components/header/HeaderStats.svelte new file mode 100644 index 0000000..03bfcb8 --- /dev/null +++ b/src/components/header/HeaderStats.svelte @@ -0,0 +1,19 @@ + +
+
+
Total Icons
+
+ {$icons.length} +
+
+
+
Total Versions
+
+ {$totalVersions} +
+
+
\ No newline at end of file diff --git a/src/components/iconGrid/IconGrid.svelte b/src/components/iconGrid/IconGrid.svelte new file mode 100644 index 0000000..db54e99 --- /dev/null +++ b/src/components/iconGrid/IconGrid.svelte @@ -0,0 +1,52 @@ + + +
+

+ {icons.length} Icons Found +

+ +
+ {#each icons as icon} + + {/each} +
+
diff --git a/src/components/modal/IconModal.svelte b/src/components/modal/IconModal.svelte new file mode 100644 index 0000000..d706991 --- /dev/null +++ b/src/components/modal/IconModal.svelte @@ -0,0 +1,53 @@ + + + + + + {#if $selectedIcon} + + + + {/if} + diff --git a/src/components/IconModalHeader.svelte b/src/components/modal/IconModalHeader.svelte similarity index 69% rename from src/components/IconModalHeader.svelte rename to src/components/modal/IconModalHeader.svelte index e8325b6..ab42d51 100644 --- a/src/components/IconModalHeader.svelte +++ b/src/components/modal/IconModalHeader.svelte @@ -1,14 +1,14 @@ - -
+

{title}

+ {/each} +
+ +
+ {codeSnippet} + + + +
+{:else} +

No font versions available

+{/if} diff --git a/src/components/modal/IconSelector/SVGVersionSelector.svelte b/src/components/modal/IconSelector/SVGVersionSelector.svelte new file mode 100644 index 0000000..952fcf2 --- /dev/null +++ b/src/components/modal/IconSelector/SVGVersionSelector.svelte @@ -0,0 +1,74 @@ + + +

{title}

+ +{#if versions.length > 0} +
+ {#each versions as version} + + {/each} +
+ +
+ + {codeSnippet} + + + +
+{:else} +

No SVG versions available

+{/if} diff --git a/src/components/modal/Modal.svelte b/src/components/modal/Modal.svelte new file mode 100644 index 0000000..f353f8c --- /dev/null +++ b/src/components/modal/Modal.svelte @@ -0,0 +1,21 @@ + + +{#if isOpen} + +{/if} diff --git a/src/components/widgets/contact/ContactLinks.svelte b/src/components/widgets/contact/ContactLinks.svelte new file mode 100644 index 0000000..4aeba74 --- /dev/null +++ b/src/components/widgets/contact/ContactLinks.svelte @@ -0,0 +1,42 @@ +
+ + + + + Github + + + + + Discord + +
diff --git a/src/components/widgets/tooltip/Tooltip.svelte b/src/components/widgets/tooltip/Tooltip.svelte new file mode 100644 index 0000000..8c3cfed --- /dev/null +++ b/src/components/widgets/tooltip/Tooltip.svelte @@ -0,0 +1,50 @@ + + + + + diff --git a/src/lib/common/copyToClipboard.ts b/src/lib/common/copyToClipboard.ts new file mode 100644 index 0000000..2c44184 --- /dev/null +++ b/src/lib/common/copyToClipboard.ts @@ -0,0 +1,2 @@ +export const copyToClipboard = async (text: string) => + navigator.clipboard?.writeText(text) diff --git a/src/lib/stores/iconStore.js b/src/lib/stores/iconStore.js deleted file mode 100644 index 7f5eeca..0000000 --- a/src/lib/stores/iconStore.js +++ /dev/null @@ -1,119 +0,0 @@ -import { writable, derived } from 'svelte/store'; - -// Create the main stores -export const icons = writable([]); -export const availableTags = writable([]); -export const searchTerm = writable(''); -export const selectedTags = writable([]); -export const isDarkMode = writable(false); -export const selectedIcon = writable(null); -export const isModalOpen = writable(false); - -// Load icons data from GitHub API -export async function loadIconsData() { - try { - const response = await fetch('https://raw.githubusercontent.com/devicons/devicon/master/devicon.json'); - - if (!response.ok) { - throw new Error(`Failed to fetch icons: ${response.statusText}`); - } - - const iconsData = await response.json(); - - // Extract all available tags - const availableTagsData = new Set(); - iconsData.forEach(icon => { - if (icon.tags && Array.isArray(icon.tags)) { - icon.tags.forEach(tag => availableTagsData.add(tag)); - } - }); - - // Set the data in stores - icons.set(iconsData); - availableTags.set(Array.from(availableTagsData).sort()); - - return { icons: iconsData, availableTags: Array.from(availableTagsData).sort() }; - } catch (error) { - console.error('Error fetching icons:', error); - icons.set([]); - availableTags.set([]); - throw error; - } -} - -// Initialize store with dark mode preference -export function initializeStore() { - // Check local storage for dark mode preference - if (typeof window !== 'undefined') { - const storedDarkMode = localStorage.getItem('darkMode') === 'true'; - isDarkMode.set(storedDarkMode); - - // Apply theme to document - if (storedDarkMode) { - document.documentElement.classList.add('dark'); - } - } -} - -// Derived store for filtered icons -export const filteredIcons = derived( - [icons, searchTerm, selectedTags], - ([$icons, $searchTerm, $selectedTags]) => { - return $icons.filter(icon => { - const matchesSearch = $searchTerm === '' || - icon.name.toLowerCase().includes($searchTerm.toLowerCase()) || - icon.altnames.some(altname => altname.toLowerCase().includes($searchTerm.toLowerCase())); - - const matchesTags = $selectedTags.length === 0 || - (icon.tags && $selectedTags.every(tag => icon.tags.includes(tag))); - - return matchesSearch && matchesTags; - }); - } -); - -export const totalVersions = derived( - [icons], - ([$icons]) => $icons.reduce((acc, icon) => acc + icon?.versions?.font?.length + icon?.versions?.svg?.length, 0) -) - -// Actions to update the store -export function setSearchTerm(term) { - searchTerm.set(term); -} - -export function setSelectedTags(tags) { - selectedTags.set(tags); - } - -export function clearFilters() { - searchTerm.set(''); - selectedTags.set([]); -} - -export function toggleDarkMode() { - isDarkMode.update(current => { - const newValue = !current; - - if (typeof window !== 'undefined') { - localStorage.setItem('darkMode', newValue.toString()); - - if (newValue) { - document.documentElement.classList.add('dark'); - } else { - document.documentElement.classList.remove('dark'); - } - } - - return newValue; - }); - } - - export function openIconModal(icon) { - selectedIcon.set(icon); - isModalOpen.set(true); - } - - export function closeIconModal() { - isModalOpen.set(false); - } diff --git a/src/lib/stores/iconStore.ts b/src/lib/stores/iconStore.ts new file mode 100644 index 0000000..6041ac2 --- /dev/null +++ b/src/lib/stores/iconStore.ts @@ -0,0 +1,99 @@ +import { writable, derived, type Writable, type Readable } from "svelte/store" +import type { IIcon } from "$lib/types/types" + +export const icons: Writable = writable([]) +export const availableTags: Writable = writable([]) +export const searchTerm: Writable = writable("") +export const selectedTags: Writable = writable([]) +export const isDarkMode: Writable = writable(false) +export const selectedIcon: Writable = writable(null) +export const isModalOpen: Writable = writable(false) + +export function initializeStore( + initialIcons: IIcon[], + initialTags: string[], +): void { + icons.set(initialIcons) + availableTags.set(initialTags) + + // Check local storage for dark mode preference + if (typeof window !== "undefined") { + const storedDarkMode = localStorage.getItem("darkMode") === "true" + isDarkMode.set(storedDarkMode) + + // Apply theme to document + if (storedDarkMode) { + document.documentElement.classList.add("dark") + } + } +} + +export const filteredIcons: Readable = derived( + [icons, searchTerm, selectedTags], + ([$icons, $searchTerm, $selectedTags]) => { + return $icons.filter((icon) => { + const matchesSearch = + $searchTerm === "" || + icon.name.toLowerCase().includes($searchTerm.toLowerCase()) || + icon.altnames.some((altname) => + altname.toLowerCase().includes($searchTerm.toLowerCase()), + ) + + const matchesTags = + $selectedTags.length === 0 || + (icon.tags && $selectedTags.every((tag) => icon.tags!.includes(tag))) + + return matchesSearch && matchesTags + }) + }, +) + +export const totalVersions: Readable = derived([icons], ([$icons]) => + $icons.reduce( + (acc, icon) => + acc + + (icon?.versions?.font?.length ?? 0) + + (icon?.versions?.svg?.length ?? 0), + 0, + ), +) + +export function setSearchTerm(term: string): void { + searchTerm.set(term) +} + +export function setSelectedTags(tags: string[]): void { + selectedTags.set(tags) +} + +export function clearFilters(): void { + searchTerm.set("") + selectedTags.set([]) +} + +export function toggleDarkMode(): void { + isDarkMode.update((current) => { + const newValue = !current + + if (typeof window !== "undefined") { + localStorage.setItem("darkMode", newValue.toString()) + + if (newValue) { + document.documentElement.classList.add("dark") + } else { + document.documentElement.classList.remove("dark") + } + } + + return newValue + }) +} + +export function openIconModal(icon: IIcon): void { + selectedIcon.set(icon) + isModalOpen.set(true) +} + +export function closeIconModal(): void { + isModalOpen.set(false) +} diff --git a/src/lib/types/types.ts b/src/lib/types/types.ts new file mode 100644 index 0000000..ba27992 --- /dev/null +++ b/src/lib/types/types.ts @@ -0,0 +1,26 @@ +export const CURRENT_VERSION = "2.17.0" + +export type IconVersions = + | "plain" + | "line" + | "original" + | "plain-wordmark" + | "line-wordmark" + | "original-wordmark" + +export type IconType = "svg" | "font" + +export interface IIcon { + name: string + altnames: string[] + tags: string[] + versions: { + svg: IconVersions[] + font: IconVersions[] + } + color: string + aliases: { + base: IconVersions + alias: IconVersions + }[] +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index cc5f7f8..c476be9 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,14 +1,15 @@
{@render children()} - -