versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 16:38:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: ⚡ Ditch nuxt-icon in favour of iconify's native WebComponent

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 23:04:00 -10:00
parent e622c1625f
commit 52c1f1c57f
No known key found for this signature in database
20 changed files with 146 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
app.vue
View file

@ -8,6 +8,7 @@
<script setup lang="ts">
import { convert } from "html-to-text";
import "iconify-icon";
// Use SSR-safe IDs for Headless UI
provideHeadlessUseId(() => useId());

BIN
bun.lockb
View file

Binary file not shown.

2
components/buttons/DropdownElement.vue
View file

@ -1,7 +1,7 @@
<template>
<ButtonsBase
class="bg-white/10 hover:bg-white/20 !text-left flex flex-row gap-x-3 !rounded-none !ring-0 !p-4 sm:!p-3">
<Icon :name="icon" class="h-5 w-5 text-gray-200" aria-hidden="true" />
<iconify-icon :icon="icon" width="1.25rem" height="1.25rem" class="text-gray-200" aria-hidden="true" />
<slot />
</ButtonsBase>
</template>

2
components/buttons/base.vue
View file

@ -2,7 +2,7 @@
<button v-bind="$props" type="button" :disabled="loading"
:class="['rounded-md duration-200 relative hover:shadow disabled:opacity-70 content-none disabled:cursor-not-allowed px-3 py-2 text-sm font-semibold text-white shadow-sm', loading && '[&>*]:invisible']">
<div v-if="loading" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 !visible">
<Icon name="tabler:loader-2" class="animate-spin w-5 h-5" />
<iconify-icon icon="tabler:loader-2" height="1.25rem" width="1.25rem" class="animate-spin" />
</div>
<slot />
</button>

19
components/composer/composer.vue
View file

@ -3,11 +3,13 @@
<div class="py-2 relative">
<div v-if="respondingTo" class="mb-4">
<span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:arrow-back-up" class="h-4 w-4 text-gray-400 mb-0.5" aria-hidden="true" />
<iconify-icon width="1rem" height="1rem" icon="tabler:arrow-back-up" class="text-gray-400 mb-0.5"
aria-hidden="true" />
Replying to
</span>
<span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
<Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
<iconify-icon width="1rem" height="1rem" icon="tabler:quote" class="text-gray-400"
aria-hidden="true" />
Quoting
</span>
<OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
@ -28,22 +30,23 @@
</div>
<div class="flex flex-row gap-1 border-white/20">
<ComposerButton title="Mention someone">
<Icon name="tabler:at" class="size-6" aria-hidden="true" />
<iconify-icon height="1.5rem" width="1.5rem" icon="tabler:at" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
<Icon :name="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" class="size-6" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem"
:icon="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Use a custom emoji">
<Icon name="tabler:mood-smile" class="size-6" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:mood-smile" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add media">
<Icon name="tabler:photo-up" class="size-6" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:photo-up" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add a file">
<Icon name="tabler:file-upload" class="size-6" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:file-upload" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null">
<Icon name="tabler:rating-18-plus" class="size-6" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:rating-18-plus" aria-hidden="true" />
</ComposerButton>
<ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
<span>Send!</span>

4
components/headers/navbar.vue
View file

@ -23,7 +23,7 @@
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-200"
@click="mobileMenuOpen = true">
<span class="sr-only">Open main menu</span>
<Icon name="tabler:menu-2" class="h-6 w-6" aria-hidden="true" />
<iconify-icon icon="tabler:menu-2" width="1.5rem" height="1.5rem" aria-hidden="true" />
</button>
</div>
<div class="hidden lg:flex lg:gap-x-12">
@ -45,7 +45,7 @@
</NuxtLink>
<button type="button" class="-m-2.5 rounded-md p-2.5 text-gray-200" @click="mobileMenuOpen = false">
<span class="sr-only">Close menu</span>
<Icon name="tabler:x" class="h-6 w-6" aria-hidden="true" />
<iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" aria-hidden="true" />
</button>
</div>
<div class="mt-6 flow-root">

2
components/sidebars/collapsible-aside.vue
View file

@ -7,7 +7,7 @@
</OverlayScrollbarsComponent>
<button @click="open = !open"
class="h-full bg-dark-700 hover:bg-dark-400 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<Icon name="tabler:chevron-right"
<iconify-icon icon="tabler:chevron-right"
:class="['text-gray-200 duration-200', direction === 'left' ? open ? 'rotate-180' : 'rotate-0' : open ? 'rotate-0' : 'rotate-180']"
aria-hidden="true" />
</button>

28
components/sidebars/navigation.vue
View file

@ -13,7 +13,7 @@
<NuxtLink v-for="timeline in visibleTimelines" :key="timeline.href" :to="timeline.href">
<ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon :name="timeline.icon" class="shrink-0 text-2xl" />
<iconify-icon :icon="timeline.icon" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">{{ timeline.name }}</span>
</ButtonsBase>
</NuxtLink>
@ -27,18 +27,18 @@
<ButtonsBase v-if="tokenData" @click="signOut().finally(() => loadingAuth = false)"
:loading="loadingAuth"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:logout" class="shrink-0 text-2xl" />
<iconify-icon icon="tabler:logout" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign Out</span>
</ButtonsBase>
<ButtonsBase v-else @click="signIn().finally(() => loadingAuth = false)" :loading="loadingAuth"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:login" class="shrink-0 text-2xl" />
<iconify-icon icon="tabler:login" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Sign In</span>
</ButtonsBase>
<NuxtLink href="/register" v-if="!tokenData">
<ButtonsBase
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:certificate" class="shrink-0 text-2xl" />
<iconify-icon icon="tabler:certificate" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Register</span>
</ButtonsBase>
</NuxtLink>
@ -47,16 +47,18 @@
Posts</h3>
<ButtonsBase v-if="tokenData" @click="compose" title="Open composer (shortcut: n)"
class="flex flex-row text-left items-center justify-start gap-3 text-lg hover:ring-1 ring-white/10 bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:writing" class="shrink-0 text-2xl" />
<iconify-icon icon="tabler:writing" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Compose</span>
<kbd class="text-xs font-semibold rounded bg-dark-500 font-mono px-1 flex flex-row">
<Icon name="tabler:keyboard" class="size-4 inline" aria-hidden="true" />
<Icon name="tabler:letter-n-small" class="size-4 inline -mr-1" aria-hidden="true" />
<iconify-icon icon="tabler:keyboard" height="1rem" width="1rem" class="inline"
aria-hidden="true" />
<iconify-icon icon="tabler:letter-n-small" height="1rem" width="1rem" class="inline -mr-1"
aria-hidden="true" />
</kbd>
</ButtonsBase>
<ButtonsBase v-if="$pwa?.needRefresh" @click="$pwa?.updateServiceWorker()" title="Update service worker"
class="flex flex-row text-left items-center justify-start gap-3 text-lg ring-2 ring-pink-600 overflow-hidden h-12 w-full duration-200">
<Icon name="tabler:refresh" class="shrink-0 text-2xl" />
<iconify-icon icon="tabler:refresh" class="shrink-0 text-2xl" />
<span class="pr-28 line-clamp-1">Update</span>
</ButtonsBase>
</ClientOnly>
@ -69,7 +71,7 @@
<DropdownsAdaptiveDropdown>
<template #button>
<HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:home" class="text-2xl" />
<iconify-icon icon="tabler:home" class="text-2xl" />
<span class="text-xs">Timelines</span>
</HeadlessMenuButton>
</template>
@ -88,20 +90,20 @@
</template>
</DropdownsAdaptiveDropdown>
<NuxtLink href="/notifications" class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:bell" class="text-2xl" />
<iconify-icon icon="tabler:bell" class="text-2xl" />
<span class="text-xs">Notifications</span>
</NuxtLink>
<ClientOnly v-if="$pwa?.needRefresh">
<button class="flex flex-col items-center justify-center p-2 rounded ring-2 ring-pink-600"
@click="$pwa?.updateServiceWorker(true)">
<Icon name="tabler:refresh" class="text-2xl" />
<iconify-icon icon="tabler:refresh" class="text-2xl" />
<span class="text-xs">Update</span>
</button>
</ClientOnly>
<DropdownsAdaptiveDropdown v-else>
<template #button>
<HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
<Icon name="tabler:user" class="text-2xl" />
<iconify-icon icon="tabler:user" class="text-2xl" />
<span class="text-xs">Account</span>
</HeadlessMenuButton>
</template>
@ -132,7 +134,7 @@
</DropdownsAdaptiveDropdown>
<button @click="compose" v-if="tokenData"
class="flex flex-col items-center justify-center p-2 rounded bg-gradient-to-tr from-pink-300/70 via-purple-300/70 to-indigo-400/70">
<Icon name="tabler:writing" class="text-2xl" />
<iconify-icon icon="tabler:writing" class="text-2xl" />
<span class="text-xs">Compose</span>
</button>
</ClientOnly>

6
components/social-elements/notes/attachment.vue
View file

@ -21,11 +21,11 @@
@click="lightbox = false">
<div class="w-full absolute inset-x-0 top-0 p-10 shrink text-gray-400 flex flex-row gap-3">
<a @click.stop :href="attachment.url" target="_blank" download class="ml-auto">
<Icon name="tabler:download" class="w-6 h-6" />
<iconify-icon icon="tabler:download" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span>
</a>
<button @click.stop="lightbox = false" class="">
<Icon name="tabler:x" class="w-6 h-6" />
<button @click.stop="lightbox = false">
<iconify-icon icon="tabler:x" width="1.5rem" height="1.5rem" />
<span class="sr-only">Close</span>
</button>
</div>

6
components/social-elements/notes/header.vue
View file

@ -48,11 +48,13 @@
}}</span>
<span @click="copyAccount" v-if="!hasCopied"
class="hidden select-none group-hover:flex cursor-pointer items-center gap-x-1">
<Icon name="tabler:clipboard" class="h-4 w-4 text-gray-200" aria-hidden="true" />
<iconify-icon icon="tabler:clipboard" height="1rem" width="1rem" class="text-gray-200"
aria-hidden="true" />
Click to copy
</span>
<span v-else class="hidden group-hover:flex select-none items-center gap-x-1">
<Icon name="tabler:check" class="h-4 w-4 text-green-500" aria-hidden="true" />
<iconify-icon icon="tabler:check" height="1rem" width="1rem" class="text-green-500"
aria-hidden="true" />
Copied!
</span>
</Skeleton>

11
components/social-elements/notes/note-content.vue
View file

@ -1,21 +1,18 @@
<template>
<div v-if="!collapsed">
<div class="mt-6 block relative">
<div v-if="!collapsed" class="mt-6">
<Skeleton :enabled="!props.note || !loaded" :min-width="50" :max-width="100" width-unit="%" shape="rect"
type="content">
<div v-if="content"
:class="['prose prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
:class="['prose block relative prose-invert duration-200 !max-w-full break-words prose-a:no-underline', $style.content]"
v-html="content">
</div>
</Skeleton>
</div>
<div v-if="note && note.media_attachments.length > 0" class="[&:not(:first-child)]:mt-6">
<SocialElementsNotesAttachment v-for="attachment of note.media_attachments" :key="attachment.id"
:attachment="attachment" />
</div>
<div v-if="isQuote && note?.reblog" class="mt-4">
<LazySocialElementsNotesNote :note="note?.reblog" :small="true" />
</div>
<LazySocialElementsNotesNote v-if="isQuote && note?.reblog" :note="note?.reblog" :small="true"
class="mt-4 !rounded" />
</div>
<div v-else
class="rounded text-center ring-1 !max-w-full ring-white/10 h-52 mt-6 prose prose-invert p-4 flex flex-col justify-center items-center">

29
components/social-elements/notes/note.vue
View file

@ -6,7 +6,7 @@
</div>
<div v-if="reblog" class="mb-4 flex flex-row gap-2 items-center text-pink-500">
<Skeleton :enabled="!loaded" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:repeat" class="size-6" aria-hidden="true" />
<iconify-icon width="1.5rem" height="1.5rem" icon="tabler:repeat" class="size-6" aria-hidden="true" />
<AvatarsCentered v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
class="size-6 rounded shrink-0 ring-1 ring-white/10" />
<span><strong v-html="reblogDisplayName"></strong> reblogged</span>
@ -20,33 +20,34 @@
<div v-if="showInteractions"
class="mt-6 flex flex-row items-stretch disabled:*:opacity-70 [&>button]:max-w-28 disabled:*:cursor-not-allowed relative justify-around text-sm h-10 hover:enabled:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
<button class="group" @click="note && useEvent('note:reply', note)" :disabled="!isSignedIn">
<Icon name="tabler:arrow-back-up"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:arrow-back-up"
class="text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
</button>
<button class="group" :disabled="!isSignedIn">
<Icon name="tabler:heart" v-if="!note?.favourited"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
<Icon name="tabler:heart-filled" v-else
class="h-5 w-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart" v-if="!note?.favourited"
class="size-5 text-gray-200 group-hover:group-enabled:text-pink-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:heart-filled" v-else
class="size-5 text-pink-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
</button>
<button class="group" :disabled="!isSignedIn">
<Icon name="tabler:repeat" v-if="!note?.reblogged"
class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<Icon name="tabler:repeat-off" v-else
class="h-5 w-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat" v-if="!note?.reblogged"
class="size-5 text-gray-200 group-hover:group-enabled:text-green-600" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:repeat-off" v-else
class="size-5 text-green-600 group-hover:group-enabled:text-gray-200" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
</button>
<button class="group" @click="note && useEvent('note:quote', note)" :disabled="!isSignedIn">
<Icon name="tabler:quote" class="h-5 w-5 text-gray-200 group-hover:group-enabled:text-blue-600"
aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:quote"
class="size-5 text-gray-200 group-hover:group-enabled:text-blue-600" aria-hidden="true" />
<span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
</button>
<DropdownsAdaptiveDropdown>
<template #button>
<HeadlessMenuButton>
<Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
<iconify-icon width="1.25rem" height="1.25rem" icon="tabler:dots"
class="size-5 text-gray-200" aria-hidden="true" />
<span class="sr-only">Open menu</span>
</HeadlessMenuButton>
</template>

2
components/social-elements/notes/reply-header.vue
View file

@ -2,7 +2,7 @@
<NuxtLink :href="`/@${account?.acct}`"
class="mb-4 flex flex-row gap-2 items-center text-gray-300 opacity-70 line-clamp-1">
<Skeleton :enabled="!account" shape="rect" class="!h-6" :min-width="40" :max-width="100" width-unit="%">
<Icon name="tabler:arrow-back-up" class="size-6" aria-hidden="true" />
<iconify-icon icon="tabler:arrow-back-up" width="1.5rem" height="1.5rem" aria-hidden="true" />
<span class="flex flex-row items-center gap-2 overflow-hidden flex-wrap break-all">
Replying to
<AvatarsCentered v-if="account?.avatar" :url="account?.avatar" :alt="`${account?.acct}'s avatar'`"

2
components/social-elements/notifications/notif.vue
View file

@ -3,7 +3,7 @@
<div class="px-4 pt-2 pb-3 flex flex-row gap-2 items-center">
<Skeleton :enabled="!notification" shape="rect" class="!h-6" :min-width="40" :max-width="100"
width-unit="%">
<Icon :name="icon" class="h-6 w-6 text-gray-200" aria-hidden="true" />
<iconify-icon :icon="icon" width="1.5rem" height="1.5rem" class="text-gray-200" aria-hidden="true" />
<AvatarsCentered v-if="notification?.account?.avatar" :src="notification?.account.avatar"
:alt="`${notification?.account.acct}'s avatar'`"
class="h-6 w-6 shrink-0 rounded ring-1 ring-white/10" />

8
components/social-elements/users/Account.vue
View file

@ -31,8 +31,8 @@
class="text-xl font-bold text-gray-100 tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">
<Skeleton :enabled="skeleton" :min-width="200" :max-width="350" class="h-6">
{{ account?.display_name }}
<Icon v-if="account?.locked" name="tabler:lock"
class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
<iconify-icon v-if="account?.locked" icon="tabler:lock" width="1.25rem" height="1.25rem"
class="text-gray-400 cursor-pointer align-text-top"
title="This account manually approves its followers" />
</Skeleton>
</h2>
@ -51,12 +51,12 @@
<div class="mt-3 flex items-center space-x-4 px-4">
<div class="flex items-center space-x-1">
<Skeleton :enabled="skeleton" :min-width="150" :max-width="150" shape="rect">
<Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
<iconify-icon icon="tabler:calendar" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Created {{ formattedJoin }}</span>
</Skeleton>
</div>
<div v-if="account?.bot" class="flex items-center space-x-1">
<Icon name="tabler:robot" class="w-5 h-5 text-gray-400" />
<iconify-icon icon="tabler:robot" width="1.25rem" height="1.25rem" class="text-gray-400" />
<span class="text-gray-400">Bot</span>
</div>
</div>

2
components/timelines/Notifications.vue
View file

@ -7,7 +7,7 @@
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" />
<iconify-icon name="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more notifications, you've seen them all</span>
</div>
</ClientOnly>

2
components/timelines/timeline.vue
View file

@ -9,7 +9,7 @@
<div v-if="hasReachedEnd"
class="text-center flex flex-row justify-center items-center py-10 text-gray-400 gap-3">
<Icon name="tabler:message-off" class="h-6 w-6" />
<iconify-icon icon="tabler:message-off" width="1.5rem" height="1.5rem" />
<span>No more posts, you've seen them all</span>
</div>
</ClientOnly>

6
nuxt.config.ts
View file

@ -6,12 +6,16 @@ export default defineNuxtConfig({
"@vueuse/nuxt",
"nuxt-headlessui",
"@nuxt/fonts",
"nuxt-icon",
//"nuxt-shiki",
"@vee-validate/nuxt",
"nuxt-security",
"@vite-pwa/nuxt",
],
vue: {
compilerOptions: {
isCustomElement: (tag) => tag === "iconify-icon",
},
},
pwa: {
manifest: {
name: "Lysand",

2
package.json
View file

@ -34,11 +34,11 @@
"@vite-pwa/nuxt": "^0.7.0",
"c12": "^1.10.0",
"html-to-text": "^9.0.5",
"iconify-icon": "^2.1.0",
"megalodon": "^10.0.0",
"mitt": "^3.0.1",
"nuxt": "^3.11.2",
"nuxt-headlessui": "^1.2.0",
"nuxt-icon": "^0.6.10",
"nuxt-security": "^2.0.0-beta.0",
"nuxt-shiki": "^0.3.0",
"overlayscrollbars": "^2.8.0",

2
pages/notifications.vue
View file

@ -4,7 +4,7 @@
<div class="shrink-0 p-10 h-dvh" v-if="!tokenData">
<button type="button"
class="relative block h-full w-full rounded-lg border-2 border-dashed border-dark-300 p-12 text-center">
<Icon name="tabler:notification" class="mx-auto h-12 w-12 text-gray-400" />
<iconify-icon name="tabler:notification" width="3rem" height="3rem" class="mx-auto text-gray-400" />
<span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications
will
appear here