fix: 🐛 Bugixes, add automatic GitHub Actions deployment

2025-12-06 08:28:20 +01:00 · 2024-05-11 22:37:57 -10:00 · 2024-05-11 22:37:57 -10:00 · e622c1625f
parent 6e8f4ae8e1
commit e622c1625f
10 changed files with 156 additions and 76 deletions
--- a/.github/workflows/deploy.yml
+++ b/.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
--- a/app.vue
+++ b/app.vue
@ -1,5 +1,6 @@
 <template>
    <NuxtPwaAssets />
+    <Loading />
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
--- a/components/loading.vue
+++ b/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>
--- a/components/sidebars/navigation.vue
+++ b/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>

@ -227,7 +231,7 @@ const signOut = async () => {
            tokenData.value.access_token,
            tokenData.value.access_token,
        )
-        .catch(() => {});
+        .catch(() => { });

    tokenData.value = null;
    me.value = null;
--- a/components/social-elements/notes/header.vue
+++ b/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">
--- a/components/social-elements/notes/mention.vue
+++ b/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>
--- a/components/social-elements/notes/note.vue
+++ b/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>
--- a/components/social-elements/notifications/notif.vue
+++ b/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
--- a/components/social-elements/users/SmallCard.vue
+++ b/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>
--- a/layouts/app.vue
+++ b/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">