FIX: move icons to unplugin-icons to prevent ui shifts

This commit is contained in:
John Wesley 2024-07-02 19:13:11 -04:00
parent 6ab2b70323
commit ba3c15386e
6 changed files with 219 additions and 60 deletions

View file

@ -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' })],
},
});

View file

@ -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": {

167
pnpm-lock.yaml generated
View file

@ -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

View file

@ -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 (
<span
class="p-1 m-1 border rounded-lg inline-flex items-center"
class="px-2 py-1 border rounded-lg inline-flex items-center"
title={props.title}
>
<Show when={props.icon}>
<Icon icon={props.icon!} class="pr-1" />
<Dynamic component={props.icon} class="pr-1" />
</Show>
{props.children}
</span>

View file

@ -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 (
<main class="text-center mx-auto text-gray-700 p-4 max-w-screen-xl">
<main class="mx-auto p-4 max-w-screen-xl">
<h1 class="max-6-xs text-6xl text-sky-600 font-extralight uppercase my-16">
Mbin Servers
</h1>
Open Registration Only:{' '}
<input
type="checkbox"
checked={filterRegistration()}
onChange={(e) => setFilterRegistration(e.target.checked)}
/>
<label>
Open Registration Only:{' '}
<input
type="checkbox"
checked={filterRegistration()}
onChange={(e) => setFilterRegistration(e.target.checked)}
/>
</label>
<br />
Language:
<select onChange={(e) => setLangFilter(e.target.value)}>
@ -88,8 +95,18 @@ export default function ServersPage() {
{(lang) => <option value={lang}>{languageNames.of(lang)}</option>}
</For>
</select>
<div class="my-4 flex flex-wrap gap-3 justify-center text-xl">
<Chip>{servers.length} servers</Chip>
<Chip>
{servers.reduce((v, server) => v + server.totalUsers, 0)} total users
</Chip>
<Chip>
{servers.reduce((v, server) => v + server.activeMonthUsers, 0)} active
users
</Chip>
</div>
<div
class="grid"
class="grid gap-4"
style={{
'grid-template-columns': 'repeat(auto-fit, minmax(350px, 1fr))',
}}
@ -98,14 +115,14 @@ export default function ServersPage() {
{(server) => {
const StatChips = () => (
<>
<Chip>Version {server.version}</Chip>
<Chip title="Language" icon="material-symbols:language">
<Chip title="Mbin Version">Mbin {server.version}</Chip>
<Chip title="Language" icon={MaterialSymbolsLanguage}>
{languageNames.of(server.language)}
</Chip>
<Chip title="Total users" icon="material-symbols:person">
<Chip title="Total users" icon={MaterialSymbolsPerson}>
{server.totalUsers}
</Chip>
<Chip title="Active users" icon="material-symbols:person-check">
<Chip title="Active users" icon={MaterialSymbolsPersonCheck}>
{server.activeMonthUsers}
<span class="opacity-75">/month</span>
</Chip>
@ -113,9 +130,9 @@ export default function ServersPage() {
);
return (
<div class="border rounded-lg p-4 m-4 text-white block relative">
<div class="border rounded-lg p-4 block relative">
<a
class="text-3xl text-sky-600 block text-center"
class="block text-center pb-1"
href={`https://${server.domain}`}
>
<img
@ -123,18 +140,21 @@ export default function ServersPage() {
class="inline-block size-16"
/>
<br />
{server.domain}
<div class="text-3xl text-sky-600">{server.domain}</div>
<Show
when={server.name != '' && server.name != server.domain}
>
<div class="text-2xl text-sky-600 font-light">
{server.name}
</div>
</Show>
</a>
<Show when={server.name != '' && server.name != server.domain}>
<div class="text-2xl text-sky-600 font-light">
{server.name}
</div>
</Show>
<p class="text-center">{server.description}</p>
<p>{server.description}</p>
<StatChips />
<div class="my-1 flex flex-wrap gap-1">
<StatChips />
</div>
<Dialog>
<DialogTrigger
@ -152,21 +172,21 @@ export default function ServersPage() {
</DialogDescription>
</DialogHeader>
<div>
<div class="flex flex-wrap gap-1">
<StatChips />
<Chip
title="Active users"
icon="material-symbols:person-check"
icon={MaterialSymbolsPersonCheck}
>
{server.activeHalfyearUsers}
<span class="opacity-75">/halfyear</span>
</Chip>
<Chip title="Local posts" icon="material-symbols:news">
<Chip title="Local posts" icon={MaterialSymbolsNews}>
{server.localPosts}
</Chip>
<Chip
title="Local comments"
icon="material-symbols:comment"
icon={MaterialSymbolsComment}
>
{server.localComments}
</Chip>
@ -205,9 +225,11 @@ export default function ServersPage() {
Defederated Servers ({server.defederated.length})
</AccordionTrigger>
<AccordionContent>
<For each={server.defederated}>
{(server) => <Chip>{server}</Chip>}
</For>
<div class="flex flex-wrap gap-1">
<For each={server.defederated}>
{(server) => <Chip>{server}</Chip>}
</For>
</div>
</AccordionContent>
</AccordionItem>
</Show>

View file

@ -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/*"]
}
}
}
}