From ba3c15386e457e5343ae3dc972d1605f6cc1c606 Mon Sep 17 00:00:00 2001 From: John Wesley Date: Tue, 2 Jul 2024 19:13:11 -0400 Subject: [PATCH] FIX: move icons to unplugin-icons to prevent ui shifts --- app.config.ts | 4 + package.json | 3 +- pnpm-lock.yaml | 167 ++++++++++++++++++++++++++++++++++++---- src/components/Chip.tsx | 13 ++-- src/routes/servers.tsx | 82 ++++++++++++-------- tsconfig.json | 10 +-- 6 files changed, 219 insertions(+), 60 deletions(-) diff --git a/app.config.ts b/app.config.ts index a9f684b..df39f24 100644 --- a/app.config.ts +++ b/app.config.ts @@ -1,4 +1,5 @@ import { defineConfig } from '@solidjs/start/config'; +import Icons from 'unplugin-icons/vite'; export default defineConfig({ ssr: true, @@ -8,4 +9,7 @@ export default defineConfig({ crawlLinks: true, }, }, + vite: { + plugins: [Icons({ compiler: 'solid' })], + }, }); diff --git a/package.json b/package.json index 30d2796..35266cd 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,7 @@ "initdata": "node ./src/initdata.js" }, "dependencies": { - "@iconify-icon/solid": "^2.1.1", + "@iconify-json/material-symbols": "^1.1.82", "@kobalte/core": "^0.13.3", "@solidjs/router": "^0.13.6", "@solidjs/start": "^1.0.2", @@ -21,6 +21,7 @@ "tailwind-merge": "^2.3.0", "tailwindcss": "^3.4.4", "tailwindcss-animate": "^1.0.7", + "unplugin-icons": "^0.19.0", "vinxi": "^0.3.12" }, "engines": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a6ea162..17fcfb1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,9 +8,9 @@ importers: .: dependencies: - '@iconify-icon/solid': - specifier: ^2.1.1 - version: 2.1.1(solid-js@1.8.18) + '@iconify-json/material-symbols': + specifier: ^1.1.82 + version: 1.1.82 '@kobalte/core': specifier: ^0.13.3 version: 0.13.3(solid-js@1.8.18) @@ -47,6 +47,9 @@ importers: tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.4) + unplugin-icons: + specifier: ^0.19.0 + version: 0.19.0 vinxi: specifier: ^0.3.12 version: 0.3.12(@opentelemetry/api@1.9.0)(@types/node@20.14.9)(ioredis@5.4.1)(terser@5.31.1) @@ -61,6 +64,12 @@ packages: resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} + '@antfu/install-pkg@0.1.1': + resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==} + + '@antfu/install-pkg@0.3.3': + resolution: {integrity: sha512-nHHsk3NXQ6xkCfiRRC8Nfrg8pU5kkr3P3Y9s9dKqiuRmBD0Yap7fymNDjGFKeWhZQHqqbCS5CfeMy9wtExM24w==} + '@antfu/utils@0.7.10': resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} @@ -488,14 +497,15 @@ packages: engines: {node: '>=6'} hasBin: true - '@iconify-icon/solid@2.1.1': - resolution: {integrity: sha512-1X7nt336uhilWO0iFPf5CCvYBgneiHaX2Fq254JPG9jasDW8/cXd2ZZbtmvSz7xra+Ve3uIn15n7f/8X6USmLg==} - peerDependencies: - solid-js: '>=1' + '@iconify-json/material-symbols@1.1.82': + resolution: {integrity: sha512-E67LgMFiAbEVF7rE38ulZU6NeXcPvayFF4hUUqt3g33tWrLsDNqEFTSsPt03l34rH5uGGtHIakTqtBlZ+/hRkw==} '@iconify/types@2.0.0': resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==} + '@iconify/utils@2.1.25': + resolution: {integrity: sha512-Y+iGko8uv/Fz5bQLLJyNSZGOdMW0G7cnlEX1CiNcKsRXX9cq/y/vwxrIAtLCZhKHr3m0VJmsjVPsvnM4uX8YLg==} + '@internationalized/date@3.5.4': resolution: {integrity: sha512-qoVJVro+O0rBaw+8HPjUB1iH8Ihf8oziEnqMnvhJUSuVIrHOuZ6eNLHNvzXJKUvAtaDiqMnRlg8Z2mgh09BlUw==} @@ -533,6 +543,10 @@ packages: '@js-sdsl/ordered-map@4.4.2': resolution: {integrity: sha512-iUKgm52T8HOE/makSxjqoWhe95ZJA1/G1sYsGev2JDKUSS14KAgg1LHb+Ba+IPow0xflbnSkOsZcO08C7w1gYw==} + '@jsdevtools/ez-spawn@3.0.4': + resolution: {integrity: sha512-f5DRIOZf7wxogefH03RjMPMdBF7ADTWUMoOs9kaJo06EfwF+aFhMZMDZxHg/Xe12hptN9xoZjGso2fdjapBRIA==} + engines: {node: '>=10'} + '@kobalte/core@0.13.3': resolution: {integrity: sha512-7ansvAwiIz2EYuifI8jmGj+ZNG/3R4hdkXZkCEFVKsQzq3vZpuSiAXgrdZeQOR4Zby7gxLOzpakjfv7D/3PPGw==} peerDependencies: @@ -1306,6 +1320,9 @@ packages: magicast: optional: true + call-me-maybe@1.0.2: + resolution: {integrity: sha512-HpX65o1Hnr9HH25ojC1YGs7HCQLq0GCOibSaWER0eNpgJ/Z1MZv2mTc7+xh6WOPxbRVcmgbv4hGU+uSQ/2xFZQ==} + camelcase-css@2.0.1: resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} engines: {node: '>= 6'} @@ -1684,6 +1701,10 @@ packages: resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} engines: {node: '>=8'} + find-up@5.0.0: + resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==} + engines: {node: '>=10'} + follow-redirects@1.15.6: resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==} engines: {node: '>=4.0'} @@ -1845,9 +1866,6 @@ packages: resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==} engines: {node: '>=16.17.0'} - iconify-icon@2.1.0: - resolution: {integrity: sha512-lto4XU3bwTQnb+D/CsJ4dWAo0aDe+uPMxEtxyOodw9l7R9QnJUUab3GCehlw2M8mDHdeUu/ufx8PvRQiJphhXg==} - ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} @@ -2008,6 +2026,9 @@ packages: knitwork@1.1.0: resolution: {integrity: sha512-oHnmiBUVHz1V+URE77PNot2lv3QiYU2zQf1JjOVkMt3YDKGbu8NAFr+c4mcNOhdsGrB/VpVbRwPwhiXrPhxQbw==} + kolorist@1.8.0: + resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==} + lazystream@1.0.1: resolution: {integrity: sha512-b94GiNHQNy6JNTrt5w6zNyffMrNkXZb3KTkCZJb2V1xaEGCk093vkZ2jk3tpaeP33/OiXC+WvK9AxUebnf5nbw==} engines: {node: '>= 0.6.3'} @@ -2031,6 +2052,10 @@ packages: resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==} engines: {node: '>=14'} + locate-path@6.0.0: + resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==} + engines: {node: '>=10'} + lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} @@ -2404,6 +2429,14 @@ packages: resolution: {integrity: sha512-c/hfooPx+RBIOPM09GSxABOZhYPblDoyaGhqBkD/59vtpN21jEuWKDlM0KYTvqJVlSYjKs0tBcIdeXKChlSPtw==} hasBin: true + p-limit@3.1.0: + resolution: {integrity: sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==} + engines: {node: '>=10'} + + p-locate@5.0.0: + resolution: {integrity: sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==} + engines: {node: '>=10'} + package-json-from-dist@1.0.0: resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==} @@ -2411,6 +2444,10 @@ packages: resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} engines: {node: '>= 0.8'} + path-exists@4.0.0: + resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} + engines: {node: '>=8'} + path-is-absolute@1.0.1: resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} @@ -2789,6 +2826,10 @@ packages: streamx@2.18.0: resolution: {integrity: sha512-LLUC1TWdjVdn1weXGcSxyTR3T4+acB6tVGXT95y0nGbca4t4o/ng1wKAGTljm9VicuCVLvRlqFYXYy5GwgM7sQ==} + string-argv@0.3.2: + resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==} + engines: {node: '>=0.6.19'} + string-width@4.2.3: resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} engines: {node: '>=8'} @@ -2925,6 +2966,10 @@ packages: tslib@2.6.3: resolution: {integrity: sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==} + type-detect@4.0.8: + resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==} + engines: {node: '>=4'} + type-fest@2.19.0: resolution: {integrity: sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==} engines: {node: '>=12.20'} @@ -2987,6 +3032,26 @@ packages: resolution: {integrity: sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==} engines: {node: '>= 10.0.0'} + unplugin-icons@0.19.0: + resolution: {integrity: sha512-u5g/gIZPZEj1wUGEQxe9nzftOSqmblhusc+sL3cawIRoIt/xWpE6XYcPOfAeFTYNjSbRrX/3QiX89PFiazgU1w==} + peerDependencies: + '@svgr/core': '>=7.0.0' + '@svgx/core': ^1.0.1 + '@vue/compiler-sfc': ^3.0.2 || ^2.7.0 + vue-template-compiler: ^2.6.12 + vue-template-es2015-compiler: ^1.9.0 + peerDependenciesMeta: + '@svgr/core': + optional: true + '@svgx/core': + optional: true + '@vue/compiler-sfc': + optional: true + vue-template-compiler: + optional: true + vue-template-es2015-compiler: + optional: true + unplugin@1.11.0: resolution: {integrity: sha512-3r7VWZ/webh0SGgJScpWl2/MRCZK5d3ZYFcNaeci/GQ7Teop7zf0Nl2pUuz7G21BwPd9pcUPOC5KmJ2L3WgC5g==} engines: {node: '>=14.0.0'} @@ -3199,6 +3264,10 @@ packages: resolution: {integrity: sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==} engines: {node: '>=12'} + yocto-queue@0.1.0: + resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==} + engines: {node: '>=10'} + zip-stream@6.0.1: resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==} engines: {node: '>= 14'} @@ -3218,6 +3287,15 @@ snapshots: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 + '@antfu/install-pkg@0.1.1': + dependencies: + execa: 5.1.1 + find-up: 5.0.0 + + '@antfu/install-pkg@0.3.3': + dependencies: + '@jsdevtools/ez-spawn': 3.0.4 + '@antfu/utils@0.7.10': {} '@babel/code-frame@7.24.7': @@ -3552,13 +3630,24 @@ snapshots: protobufjs: 7.3.2 yargs: 17.7.2 - '@iconify-icon/solid@2.1.1(solid-js@1.8.18)': + '@iconify-json/material-symbols@1.1.82': dependencies: - iconify-icon: 2.1.0 - solid-js: 1.8.18 + '@iconify/types': 2.0.0 '@iconify/types@2.0.0': {} + '@iconify/utils@2.1.25': + dependencies: + '@antfu/install-pkg': 0.1.1 + '@antfu/utils': 0.7.10 + '@iconify/types': 2.0.0 + debug: 4.3.5 + kolorist: 1.8.0 + local-pkg: 0.5.0 + mlly: 1.7.1 + transitivePeerDependencies: + - supports-color + '@internationalized/date@3.5.4': dependencies: '@swc/helpers': 0.5.11 @@ -3602,6 +3691,13 @@ snapshots: '@js-sdsl/ordered-map@4.4.2': {} + '@jsdevtools/ez-spawn@3.0.4': + dependencies: + call-me-maybe: 1.0.2 + cross-spawn: 7.0.3 + string-argv: 0.3.2 + type-detect: 4.0.8 + '@kobalte/core@0.13.3(solid-js@1.8.18)': dependencies: '@floating-ui/dom': 1.6.7 @@ -4465,6 +4561,8 @@ snapshots: pkg-types: 1.1.2 rc9: 2.1.2 + call-me-maybe@1.0.2: {} + camelcase-css@2.0.1: {} camelcase@7.0.1: {} @@ -4815,6 +4913,11 @@ snapshots: dependencies: to-regex-range: 5.0.1 + find-up@5.0.0: + dependencies: + locate-path: 6.0.0 + path-exists: 4.0.0 + follow-redirects@1.15.6: {} foreground-child@3.2.1: @@ -5004,10 +5107,6 @@ snapshots: human-signals@5.0.0: {} - iconify-icon@2.1.0: - dependencies: - '@iconify/types': 2.0.0 - ieee754@1.2.1: {} ignore@5.3.1: {} @@ -5140,6 +5239,8 @@ snapshots: knitwork@1.1.0: {} + kolorist@1.8.0: {} + lazystream@1.0.1: dependencies: readable-stream: 2.3.8 @@ -5178,6 +5279,10 @@ snapshots: mlly: 1.7.1 pkg-types: 1.1.2 + locate-path@6.0.0: + dependencies: + p-locate: 5.0.0 + lodash.camelcase@4.3.0: {} lodash.defaults@4.2.0: {} @@ -5773,10 +5878,20 @@ snapshots: undici: 5.28.4 yargs-parser: 21.1.1 + p-limit@3.1.0: + dependencies: + yocto-queue: 0.1.0 + + p-locate@5.0.0: + dependencies: + p-limit: 3.1.0 + package-json-from-dist@1.0.0: {} parseurl@1.3.3: {} + path-exists@4.0.0: {} + path-is-absolute@1.0.1: {} path-key@3.1.1: {} @@ -6193,6 +6308,8 @@ snapshots: optionalDependencies: bare-events: 2.4.2 + string-argv@0.3.2: {} + string-width@4.2.3: dependencies: emoji-regex: 8.0.0 @@ -6351,6 +6468,8 @@ snapshots: tslib@2.6.3: {} + type-detect@4.0.8: {} + type-fest@2.19.0: {} type-fest@3.13.1: {} @@ -6439,6 +6558,18 @@ snapshots: universalify@2.0.1: {} + unplugin-icons@0.19.0: + dependencies: + '@antfu/install-pkg': 0.3.3 + '@antfu/utils': 0.7.10 + '@iconify/utils': 2.1.25 + debug: 4.3.5 + kolorist: 1.8.0 + local-pkg: 0.5.0 + unplugin: 1.11.0 + transitivePeerDependencies: + - supports-color + unplugin@1.11.0: dependencies: acorn: 8.12.0 @@ -6684,6 +6815,8 @@ snapshots: y18n: 5.0.8 yargs-parser: 21.1.1 + yocto-queue@0.1.0: {} + zip-stream@6.0.1: dependencies: archiver-utils: 5.0.2 diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index ce2a27b..b7d1315 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,14 +1,17 @@ -import { ParentComponent, Show } from 'solid-js'; -import { Icon } from '@iconify-icon/solid'; +import { ComponentProps, JSX, ParentComponent, Show } from 'solid-js'; +import { Dynamic } from 'solid-js/web'; -const Chip: ParentComponent<{ icon?: string; title?: string }> = (props) => { +const Chip: ParentComponent<{ + icon?: (props: ComponentProps<'svg'>) => JSX.Element; + title?: string; +}> = (props) => { return ( - + {props.children} diff --git a/src/routes/servers.tsx b/src/routes/servers.tsx index 7e4e3fa..956edfd 100644 --- a/src/routes/servers.tsx +++ b/src/routes/servers.tsx @@ -18,6 +18,11 @@ import { AccordionTrigger, } from '~/components/ui/accordion'; import serversJson from '../../.output/data/servers.json'; +import MaterialSymbolsLanguage from '~icons/material-symbols/language'; +import MaterialSymbolsPerson from '~icons/material-symbols/person'; +import MaterialSymbolsPersonCheck from '~icons/material-symbols/person-check'; +import MaterialSymbolsNews from '~icons/material-symbols/news'; +import MaterialSymbolsComment from '~icons/material-symbols/comment'; const servers = serversJson as Server[]; @@ -70,16 +75,18 @@ export default function ServersPage() { }; return ( -
+

Mbin Servers

- Open Registration Only:{' '} - setFilterRegistration(e.target.checked)} - /> +
Language: +
+ {servers.length} servers + + {servers.reduce((v, server) => v + server.totalUsers, 0)} total users + + + {servers.reduce((v, server) => v + server.activeMonthUsers, 0)} active + users + +
{ const StatChips = () => ( <> - Version {server.version} - + Mbin {server.version} + {languageNames.of(server.language)} - + {server.totalUsers} - + {server.activeMonthUsers} /month @@ -113,9 +130,9 @@ export default function ServersPage() { ); return ( -
+

- {server.domain} +
{server.domain}
+ +
+ {server.name} +
+ - -
- {server.name} -
- +

{server.description}

-

{server.description}

- - +
+ +
-
+
{server.activeHalfyearUsers} /halfyear - + {server.localPosts} {server.localComments} @@ -205,9 +225,11 @@ export default function ServersPage() { Defederated Servers ({server.defederated.length}) - - {(server) => {server}} - +
+ + {(server) => {server}} + +
diff --git a/tsconfig.json b/tsconfig.json index 4a5c869..fca0f96 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,14 +10,10 @@ "allowJs": true, "noEmit": true, "strict": true, - "types": [ - "vinxi/types/client" - ], + "types": ["vinxi/types/client", "unplugin-icons/types/solid"], "isolatedModules": true, "paths": { - "~/*": [ - "./src/*" - ] + "~/*": ["./src/*"] } } -} \ No newline at end of file +}