feat: 🎨 Design refactor of all pages

pages/[username]/[uuid].vue

@@ -14,4 +14,10 @@ const client = await useMegalodon();
 const uuid = route.params.uuid as string;
 
 const note = await useNote(client, uuid);
+
+useServerSeoMeta({
+    title: note?.account.display_name,
+    description: note?.content,
+    ogImage: note?.media_attachments[0]?.preview_url,
+});
 </script>

pages/[username]/index.vue

@@ -1,60 +1,6 @@
 <template>
-    <div
-        class="flex mx-auto md:pl-20 max-w-7xl min-h-screen flex-col gap-x-6 md:flex-row justify-center items-start md:py-12 lg:pr-8 relative">
-        <div v-if="account" class="w-full rounded ring-1 md:max-w-lg ring-white/10 pb-10">
-            <div class="w-full aspect-[8/3] border-b border-white/10 bg-dark-700">
-                <img v-if="account.header" :src="account.header" class="object-cover w-full h-full" />
-            </div>
-
-            <div class="flex items-start justify-between px-4 py-3">
-                <img class="-mt-[4.5rem] h-32 w-32 cursor-pointer rounded ring-white/10 ring-1 bg-dark-700"
-                    :src="account.avatar" />
-                <ButtonsSecondary>Edit Profile</ButtonsSecondary>
-            </div>
-
-            <div class="mt-2 px-4">
-                <h2
-                    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">
-                    {{ account.display_name }}
-                    <Icon v-if="account.locked" name="tabler:lock" class="w-5 h-5 mb-0.5 text-gray-400 cursor-pointer"
-                        title="This account manually approves its followers" />
-                </h2>
-                <span class="text-gray-400">@{{ account.acct }}</span>
-            </div>
-
-            <div class="mt-4 px-4">
-                <div class="prose prose-invert" v-html="parsedNote"></div>
-            </div>
-
-            <div class="mt-3 flex items-center space-x-4 px-4">
-                <div class="flex items-center space-x-1">
-                    <Icon name="tabler:calendar" class="w-5 h-5 text-gray-400" />
-                    <span class="text-gray-400">Created {{ formattedJoin }}</span>
-                </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" />
-                    <span class="text-gray-400">Bot</span>
-                </div>
-            </div>
-
-            <div class="mt-3 flex items-center space-x-4 px-4">
-                <div class="cursor-pointer hover:underline space-x-1">
-                    <span class="font-bold text-gray-200">{{ account.following_count }}</span>
-                    <span class="text-gray-400">Following</span>
-                </div>
-                <div class="cursor-pointer hover:underline space-x-1">
-                    <span class="font-bold text-gray-200">{{ account.followers_count }}</span>
-                    <span class="text-gray-400">Followers</span>
-                </div>
-            </div>
-
-            <div v-if="parsedFields.length > 0" class="mt-4 px-4 flex-col flex gap-y-3">
-                <div v-for="field of parsedFields" :key="field.name.value" class="flex flex-col gap-1">
-                    <span class="text-pink-500 font-semibold" v-html="field.name.value"></span>
-                    <span class="text-gray-200 prose prose-invert break-all" v-html="field.value.value"></span>
-                </div>
-            </div>
-        </div>
+    <NuxtLayout name="app">
+        <SocialElementsUsersAccount v-if="isMobile" :account="account ?? undefined" />
         <ClientOnly>
             <div class="w-full">
                 <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
@@ -68,51 +14,38 @@
                 </div>
             </div>
         </ClientOnly>
-    </div>
+
+        <template #right>
+            <SocialElementsUsersAccount v-if="!isMobile" :account="account ?? undefined" />
+            <div v-else>
+
+            </div>
+        </template>
+    </NuxtLayout>
 </template>
 
 <script setup lang="ts">
-import { useRoute } from "vue-router";
+import type { Account } from '~/types/mastodon/account';
 
-const route = useRoute();
-const client = await useMegalodon();
-const username = (route.params.username as string).replace("@", "");
-const accounts = await useAccountSearch(client, username);
-const account =
-    (await accounts?.find((account) => account.acct === username)) ?? null;
-const formattedJoin = Intl.DateTimeFormat("en-US", {
-    month: "long",
-    year: "numeric",
-}).format(new Date(account?.created_at ?? 0));
-
-useServerSeoMeta({
-    title: account?.display_name,
-    description: account?.note,
-    ogImage: account?.avatar,
+definePageMeta({
+    layout: false,
 });
 
-const isLoadingTimeline = ref(true);
+const { width } = useWindowSize();
+const isMobile = computed(() => width.value < 1024);
 
-const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = useAccountTimeline(
-    client,
-    account?.id ?? null,
-    timelineParameters,
-);
-const skeleton = ref<HTMLSpanElement | null>(null);
+const route = useRoute();
+const client = await useMegalodon(true);
+const username = (route.params.username as string).replace("@", "");
 
-const parsedNote = account
-    ? await useParsedContent(account?.note, account?.emojis, [])
-    : ref("");
-const parsedFields = await Promise.all(
-    account?.fields.map(async (field) => ({
-        name: await useParsedContent(field.name, account.emojis, []),
-        value: await useParsedContent(field.value, account.emojis, []),
-    })) ?? [],
-);
+const account: Ref<Account | null> = ref(null);
+const accountId = computed(() => account.value?.id ?? null);
+
+onMounted(async () => {
+    const accounts = await useAccountSearch(client, username);
+    account.value =
+        (await accounts?.find((account) => account.acct === username)) ?? null;
 
-onMounted(() => {
     useIntersectionObserver(skeleton, async (entries) => {
         if (
             entries[0].isIntersecting &&
@@ -123,8 +56,26 @@ onMounted(() => {
             await loadNext();
         }
     });
+})
+
+useServerSeoMeta({
+    title: account.value?.display_name,
+    description: account.value?.note,
+    ogImage: account.value?.avatar,
+    profileUsername: account.value?.acct,
 });
 
+const isLoadingTimeline = ref(true);
+
+const timelineParameters = ref({});
+const hasReachedEnd = ref(false);
+const { timeline, loadNext, loadPrev } = useAccountTimeline(
+    client,
+    accountId,
+    timelineParameters,
+);
+const skeleton = ref<HTMLSpanElement | null>(null);
+
 watch(timeline, (newTimeline, oldTimeline) => {
     isLoadingTimeline.value = false;
     // If less than NOTES_PER_PAGE statuses are returned, we have reached the end

pages/index.vue

@@ -1,106 +1,9 @@
 <template>
-    <div class="relative min-h-dvh flex flex-row justify-center lg:justify-between">
-        <div class="max-w-md w-full hidden lg:block">
-
-        </div>
-        <div class="flex flex-col justify-center max-w-lg w-full py-32 sm:py-48 px-6 lg:px-8">
-            <div class="hidden sm:mb-8 sm:flex sm:justify-center">
-                <div
-                    class="relative rounded px-3 py-1 text-sm leading-6 text-gray-300 ring-1 ring-white/10 hover:ring-white/20">
-                    You are using <span class="font-semibold text-pink-400">Lysand 0.5-dev</span>
-                </div>
-            </div>
-            <div class="text-center">
-                <h1
-                    class="text-4xl font-bold tracking-tight bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text sm:text-5xl">
-                    Welcome to Lysand</h1>
-                <p class="mt-6 text-lg leading-8 text-gray-300">You can login to this server by pointing any
-                    Mastodon
-                    client at <strong class="font-bold">{{ baseUrl }}</strong></p>
-                <div class="mt-10 flex items-center justify-center gap-6 md:flex-row flex-col">
-                    <NuxtLink href="/public">
-                        <ButtonsPrimary>
-                            Public timeline
-                        </ButtonsPrimary>
-                    </NuxtLink>
-                    <a href="https://github.com/lysand-org/lysand" target="_blank">
-                        <ButtonsSecondary>
-                            Create your own instance
-                        </ButtonsSecondary>
-                    </a>
-                </div>
-
-                <p class="mt-6 text-lg leading-8 text-gray-300">Here are some recommended clients:</p>
-                <ul class="w-full mx-auto max-w-md flex flex-col gap-3 mt-4">
-                    <li v-for="client of useConfig().RECOMMENDED_CLIENTS" :key="client.name" class="w-full">
-                        <a :href="client.link" target="_blank"
-                            class="rounded-sm ring-2 ring-white/10 px-4 py-2 w-full flex flex-row gap-3 items-center">
-                            <img :src="client.icon" :alt="client.name" class="h-10 w-10" />
-                            <div class="flex flex-col justify-between items-start">
-                                <h2 class="font-bold text-gray-100">{{ client.name }}</h2>
-                                <span class="underline text-pink-700">{{ client.link }}</span>
-                            </div>
-                        </a>
-                    </li>
-                </ul>
-                <p class="mt-6 text-lg leading-8 text-gray-300">
-                    Many other clients exist, but <strong class="font-bold">they may have not been tested for
-                        compatibility</strong>. Bug reports are nevertheless welcome.
-                </p>
-
-                <p class="mt-6 text-lg leading-8 text-gray-300">
-                    Found a problem? Report it on <a href="https://github.com/lysand-org/lysand/issues/new/choose"
-                        target="_blank" class="underline text-pink-800">the issue tracker</a>.
-                </p>
-            </div>
-        </div>
-        <aside
-            class="max-w-md max-h-dvh overflow-y-scroll w-full bg-dark-700 ring-1 ring-white/10 hidden lg:flex p-10 flex-col gap-4">
-            <div
-                class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-900 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
-                <img class="object-cover w-full h-full duration-150 hover:scale-[102%] ease-in-out"
-                    v-if="instance?.banner" :src="instance.banner" />
-            </div>
-
-            <div class="prose prose-invert prose-sm">
-                <h2 class="text-center mb-10">{{ instance?.title }}</h2>
-                <div v-html="description?.content"></div>
-            </div>
-
-            <div v-if="contact" class="flex flex-col gap-2 mt-auto">
-                <h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
-                <div class="flex flex-row">
-                    <NuxtLink :href="''">
-                        <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="contact.avatar" alt="" />
-                    </NuxtLink>
-                    <div class="flex flex-col items-start justify-around ml-4 grow overflow-hidden">
-                        <div class="flex flex-row items-center justify-between w-full">
-                            <NuxtLink :href="''" class="font-semibold text-gray-200 line-clamp-1 break-all">
-                                {{
-                        contact.display_name }}
-                            </NuxtLink>
-                        </div>
-                        <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
-                            @{{
-                        contact.acct
-                            }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </aside>
-    </div>
+    <TimelinesPublic />
 </template>
 
 <script setup lang="ts">
-const baseUrl = useBaseUrl();
-const client = await useMegalodon();
-// TODO: Add banner to the instance
-const instance = await useInstance(client);
-const description = await useExtendedDescription(client);
-const contact = instance?.contact_account;
-
-useServerSeoMeta({
-    title: "Welcome to Lysand!",
+definePageMeta({
+    layout: "app",
 });
 </script>

pages/local.vue

@@ -1,20 +1,21 @@
 <template>
     <ClientOnly>
-        <div class="max-w-2xl mx-auto md:py-20 md:px-10">
-            <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-            <span ref="skeleton"></span>
-            <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
+        <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
+        <span ref="skeleton"></span>
+        <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
 
-            <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" />
-                <span>No more posts, you've seen them all</span>
-            </div>
+        <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" />
+            <span>No more posts, you've seen them all</span>
         </div>
     </ClientOnly>
 </template>
 
 <script lang="ts" setup>
+definePageMeta({
+    layout: "app",
+});
 const client = await useMegalodon();
 
 const isLoading = ref(true);

pages/public.vue

@@ -1,50 +1,9 @@
 <template>
-    <ClientOnly>
-        <div class="max-w-2xl mx-auto md:py-20 md:px-10">
-            <SocialElementsNotesNote v-for="note of timeline" :key="note.id" :note="note" />
-            <span ref="skeleton"></span>
-            <SocialElementsNotesNote v-for="index of 5" v-if="!hasReachedEnd" :skeleton="true" />
-
-            <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" />
-                <span>No more posts, you've seen them all</span>
-            </div>
-        </div>
-    </ClientOnly>
+    <TimelinesPublic />
 </template>
 
-<script lang="ts" setup>
-const client = await useMegalodon();
-
-const isLoading = ref(true);
-
-const timelineParameters = ref({});
-const hasReachedEnd = ref(false);
-const { timeline, loadNext, loadPrev } = usePublicTimeline(
-    client,
-    timelineParameters,
-);
-const skeleton = ref<HTMLSpanElement | null>(null);
-
-onMounted(() => {
-    useIntersectionObserver(skeleton, async (entries) => {
-        if (
-            entries[0].isIntersecting &&
-            !hasReachedEnd.value &&
-            !isLoading.value
-        ) {
-            isLoading.value = true;
-            await loadNext();
-        }
-    });
-});
-
-watch(timeline, (newTimeline, oldTimeline) => {
-    isLoading.value = false;
-    // If less than NOTES_PER_PAGE statuses are returned, we have reached the end
-    if (newTimeline.length - oldTimeline.length < useConfig().NOTES_PER_PAGE) {
-        hasReachedEnd.value = true;
-    }
+<script setup lang="ts">
+definePageMeta({
+    layout: "app",
 });
 </script>