fix: 🐛 Bugixes, add automatic GitHub Actions deployment

.github/workflows/deploy.yml

@@ -0,0 +1,43 @@
+name: Deploy to GitHub Pages
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v1
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Build
+        run: bun nuxt build --preset github_pages
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./.output/public
+
+  # Deployment job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write # to deploy to Pages
+      id-token: write # to verify the deployment originates from an appropriate source
+    # Deploy to the github_pages environment
+    environment:
+      name: github_pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

app.vue

@@ -1,5 +1,6 @@
 <template>
     <NuxtPwaAssets />
+    <Loading />
     <NuxtLayout>
         <NuxtPage />
     </NuxtLayout>

components/loading.vue

@@ -0,0 +1,32 @@
+<template>
+    <div v-if="loading" class="fixed inset-0 bg-black z-[500] flex items-center justify-center">
+        <!-- Progress bar stuck to top -->
+        <div class="fixed top-0 left-0 right-0 h-1.5 bg-pink-500" :style="{ width: `${progress}%` }"></div>
+        <div class="flex flex-col items-center justify-center gap-8">
+            <img src="https://cdn.lysand.org/logo.webp" class="size-20 animate-pulse" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const loading = ref(true);
+
+const estimatedProgress = (duration: number, elapsed: number) => (2 / Math.PI * 100) * Math.atan(elapsed / duration * 100 / 50);
+
+const progress = ref(0);
+const timeAtStart = performance.now();
+const app = useNuxtApp();
+
+const duration = 3000;
+
+useIntervalFn(() => {
+    const elapsed = performance.now() - timeAtStart;
+    progress.value = estimatedProgress(duration, elapsed);
+}, 1000 / 60);
+
+app.hook("page:finish", async () => {
+    // Wait until page has loaded for at least 1 second
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    loading.value = false;
+});
+</script>

components/sidebars/navigation.vue

@@ -1,8 +1,9 @@
 <template>
     <aside
         class="fixed h-dvh z-20 md:flex hidden flex-col p-4 bg-dark-800 gap-10 max-w-20 hover:max-w-72 duration-200 group">
-        <NuxtLink class="rounded w-11 h-11 ring-1 ring-white/10 hover:scale-105 duration-200" href="/">
-            <img crossorigin="anonymous" src="https://cdn.lysand.org/logo.webp" alt="Lysand logo" />
+        <NuxtLink href="/">
+            <img crossorigin="anonymous" class="size-11 rounded ring-1 ring-white/10 hover:scale-105 duration-200"
+                src="https://cdn.lysand.org/logo.webp" alt="Lysand logo" />
         </NuxtLink>
 
         <div class="flex flex-col gap-3">
@@ -64,6 +65,7 @@
     <!-- Mobile bottom navbar -->
     <nav
         class="fixed bottom-0 left-0 right-0 z-20 md:hidden flex justify-around p-2 *:shadow-xl bg-dark-900 ring-1 ring-white/10 text-gray-200">
+        <ClientOnly>
             <DropdownsAdaptiveDropdown>
                 <template #button>
                     <HeadlessMenuButton class="flex flex-col items-center justify-center p-2 rounded">
@@ -74,7 +76,8 @@
 
                 <template #items>
                     <ClientOnly>
-                    <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href" :href="timeline.href">
+                        <HeadlessMenuItem v-for="timeline in visibleTimelines" :key="timeline.href"
+                            :href="timeline.href">
                             <NuxtLink>
                                 <ButtonsDropdownElement :icon="timeline.icon" class="w-full">
                                     {{ timeline.name }}
@@ -132,6 +135,7 @@
                 <Icon name="tabler:writing" class="text-2xl" />
                 <span class="text-xs">Compose</span>
             </button>
+        </ClientOnly>
     </nav>
 </template>
 

components/social-elements/notes/header.vue

@@ -2,7 +2,7 @@
     <div v-if="small" class="flex flex-row">
         <NuxtLink :href="accountUrl" class="shrink-0">
             <AvatarsCentered :url="note?.account.avatar" :alt="`${note?.account.acct}'s avatar`"
-                class="h-6 w-6 rounded ring-1 ring-white/5" />
+                class="size-6 rounded ring-1 ring-white/5" />
         </NuxtLink>
         <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
             <div class="flex flex-row text-sm items-center justify-between w-full">

components/social-elements/notes/mention.vue

@@ -1,8 +1,8 @@
 <template>
     <a :href="`/@${account.acct}`"
         class="shrink break-all rounded bg-pink-700/80 text-pink-200 px-2 py-1 not-prose font-semibold cursor-pointer [&:not(:last-child)]:mr-1 duration-200 hover:bg-pink-600/30">
-        <img class="h-[1em] w-[1em] rounded ring-1 ring-white/5 inline align-middle mb-1 mr-1"
-            :src="account.avatar" :alt="`${account.acct}'s avatar'`" />
+        <img class="size-[1em] rounded ring-1 ring-white/5 !inline align-middle mb-1 mr-1" :src="account.avatar"
+            :alt="`${account.acct}'s avatar'`" />
         {{ account.display_name }}
     </a>
 </template>

components/social-elements/notes/note.vue

@@ -6,9 +6,9 @@
         </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="h-6 w-6" aria-hidden="true" />
-                <img v-if="reblog.avatar" :src="reblog.avatar" :alt="`${reblog.acct}'s avatar'`"
-                    class="h-6 w-6 rounded shrink-0 ring-1 ring-white/10" />
+                <Icon name="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>
             </Skeleton>
         </div>

components/social-elements/notifications/notif.vue

@@ -4,7 +4,7 @@
             <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" />
-                <img v-if="notification?.account?.avatar" :src="notification?.account.avatar"
+                <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" />
                 <span class="text-gray-200"><strong v-html="accountName"></strong> {{ text

components/social-elements/users/SmallCard.vue

@@ -2,7 +2,7 @@
     <NuxtLink :href="accountUrl" class="flex flex-row">
         <Skeleton :enabled="!account" shape="rect" class="!h-12 w-12">
             <div class="shrink-0">
-                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
+                <AvatarsCentered class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar"
                     :alt="`${account?.acct}'s avatar'`" />
             </div>
         </Skeleton>

layouts/app.vue

@@ -9,7 +9,7 @@
                 <LazySidebarsCollapsibleAside v-if="width > 1280 && tokenData" direction="right"
                     class="max-w-md max-h-dvh overflow-y-auto w-full hidden absolute inset-y-0 xl:flex">
                     <LazyTimelinesTimelineScroller>
-                        <LazyTimelinesLocal />
+                        <LazyTimelinesNotifications />
                     </LazyTimelinesTimelineScroller>
                     <!-- <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4 px-10 pb-10" v-if="!tokenData">
                         <div class="text-center">