feat: 🎨 Design refactor of all pages

components/skeleton/Skeleton.vue

@@ -21,6 +21,7 @@ const props = withDefaults(
         maxWidth?: number;
         widthUnit?: "px" | "%";
         class?: string;
+        lines?: number;
     }>(),
     {
         shape: "rect",
@@ -49,5 +50,5 @@ const getWidth = (index: number, lines: number) => {
     return undefined;
 };
 
-const lines = isContent.value ? Math.ceil(Math.random() * 5) : 1;
+const lines = isContent.value ? props.lines ?? Math.ceil(Math.random() * 5) : 1;
 </script>

components/social-elements/instance/Presentation.vue

@@ -0,0 +1,25 @@
+<template>
+    <div class="flex flex-col p-10 gap-4">
+        <div
+            class="aspect-video shrink-0 w-full rounded ring-white/5 bg-dark-800 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="instance?.contact_account" class="flex flex-col gap-2 mt-auto">
+            <h2 class="text-gray-200 font-semibold uppercase text-xs">Administrator</h2>
+            <SocialElementsUsersSmallCard :account="instance.contact_account" />
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+const client = await useMegalodon();
+const instance = await useInstance(client);
+const description = await useExtendedDescription(client);
+</script>

components/social-elements/notes/note.vue

@@ -101,13 +101,14 @@ const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
 const { copy } = useClipboard();
 const client = await useMegalodon();
 const mentions = await useResolveMentions(props.note?.mentions ?? [], client);
-const content = props.note
-    ? await useParsedContent(
-          props.note.content,
-          props.note.emojis,
-          mentions.value,
-      )
-    : "";
+const content =
+    props.note && process.client
+        ? await useParsedContent(
+              props.note.content,
+              props.note.emojis,
+              mentions.value,
+          )
+        : "";
 const numberFormat = (number = 0) =>
     new Intl.NumberFormat(undefined, {
         notation: "compact",

components/social-elements/users/Account.vue

@@ -0,0 +1,132 @@
+<template>
+    <ClientOnly>
+        <div class="w-full rounded ring-1 ring-white/10 pb-10">
+            <Skeleton :enabled="skeleton" class="!w-full !h-full !aspect-[8/3]">
+                <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>
+            </Skeleton>
+
+            <div class="flex items-start justify-between px-4 py-3">
+                <div class="h-32 w-32 -mt-[4.5rem] z-10 bg-dark-700 rounded overflow-hidden">
+                    <Skeleton :enabled="skeleton" class="!h-full !w-full">
+                        <img class="cursor-pointer bg-dark-700 ring-1 ring-white/10" :src="account?.avatar" />
+                    </Skeleton>
+                </div>
+                <ButtonsSecondary v-if="account">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">
+                    <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"
+                            title="This account manually approves its followers" />
+                    </Skeleton>
+                </h2>
+                <span class="text-gray-400 block mt-2">
+                    <Skeleton :enabled="skeleton" :min-width="130" :max-width="250">@{{ account?.acct }}</Skeleton>
+                </span>
+            </div>
+
+            <div class="mt-4 px-4">
+                <Skeleton :enabled="true" v-if="skeleton" class="!h-6" :min-width="50" :max-width="100" width-unit="%"
+                    shape="rect" type="content">
+                </Skeleton>
+                <div class="prose prose-invert" v-html="parsedNote" v-else></div>
+            </div>
+
+            <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" />
+                        <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" />
+                    <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">
+                    <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
+                        <span class="font-bold text-gray-200">{{ account?.statuses_count }}</span>
+                        <span class="text-gray-400">Posts</span>
+                    </Skeleton>
+                </div>
+                <div class="cursor-pointer hover:underline space-x-1">
+                    <Skeleton :enabled="skeleton" :min-width="100" :max-width="150" shape="rect">
+                        <span class="font-bold text-gray-200">{{ account?.following_count }}</span>
+                        <span class="text-gray-400">Following</span>
+                    </Skeleton>
+                </div>
+            </div>
+
+            <div v-if="!skeleton && parsedFields.length > 0" class="mt-4 px-4 flex-col flex space-y-3">
+                <div v-for="field of parsedFields" :key="field.name" class="flex flex-col gap-1">
+                    <span class="text-pink-500 font-semibold" v-html="field.name"></span>
+                    <span class="text-gray-200 prose prose-invert break-all" v-html="field.value"></span>
+                </div>
+            </div>
+
+            <div v-else-if="skeleton" class="mt-4 px-4 flex-col space-y-3">
+                <div v-for="_ of 3" class="flex flex-col gap-1">
+                    <Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
+                    </Skeleton>
+                    <Skeleton :enabled="skeleton" :min-width="10" :max-width="100" width-unit="%" shape="rect">
+                    </Skeleton>
+                </div>
+            </div>
+        </div>
+    </ClientOnly>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "~/types/mastodon/account";
+
+const props = defineProps<{
+    account?: Account;
+}>();
+
+const skeleton = computed(() => !props.account);
+
+const formattedJoin = computed(() => Intl.DateTimeFormat("en-US", {
+    month: "long",
+    year: "numeric",
+}).format(new Date(props.account?.created_at ?? 0)));
+
+const parsedNote = ref("");
+const parsedFields: Ref<{
+    name: string;
+    value: string;
+}[]> = ref([]);
+
+watch(skeleton, async () => {
+    if (skeleton.value) return;
+    parsedNote.value = (await useParsedContent(
+        props.account?.note ?? "",
+        props.account?.emojis ?? [],
+        [],
+    )).value;
+    parsedFields.value = await Promise.all(
+        props.account?.fields.map(async (field) => ({
+            name: await (await useParsedContent(
+                field.name,
+                props.account?.emojis ?? [],
+                []
+            )).value,
+            value: await (await useParsedContent(
+                field.value,
+                props.account?.emojis ?? [],
+                []
+            )).value,
+        })) ?? [],
+    );
+}, {
+    immediate: true,
+});
+</script>

components/social-elements/users/SmallCard.vue

@@ -0,0 +1,42 @@
+<template>
+    <NuxtLink :href="accountUrl" class="flex flex-row">
+        <Skeleton :enabled="skeleton" shape="rect" class="!h-12 w-12">
+            <div>
+                <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="account?.avatar" alt="" />
+            </div>
+        </Skeleton>
+        <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">
+                <div class="font-semibold text-gray-200 line-clamp-1 break-all">
+                    <Skeleton :enabled="skeleton" :min-width="90" :max-width="170" shape="rect">
+                        {{
+        account?.display_name }}
+                    </Skeleton>
+                </div>
+            </div>
+            <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+                <Skeleton :enabled="skeleton" :min-width="130" :max-width="250" shape="rect">
+                    @{{
+        account?.acct
+                    }}
+                </Skeleton>
+            </span>
+        </div>
+    </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from "~/types/mastodon/account";
+
+const props = withDefaults(
+    defineProps<{
+        account?: Account;
+        skeleton?: boolean;
+    }>(),
+    {
+        skeleton: false,
+    },
+);
+
+const accountUrl = props.account && `/@${props.account.acct}`;
+</script>

components/timelines/Public.vue

@@ -0,0 +1,49 @@
+<template>
+    <ClientOnly>
+
+        <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>
+    </ClientOnly>
+</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>

composables/Account.ts

@@ -4,7 +4,7 @@ export const useAccount = async (
     client: Mastodon | null,
     accountId: string,
 ) => {
-    if (process.server || !client) {
+    if (!client) {
         return null;
     }
 

composables/AccountSearch.ts

@@ -1,7 +1,7 @@
 import type { Mastodon } from "megalodon";
 
 export const useAccountSearch = async (client: Mastodon | null, q: string) => {
-    if (process.server || !client) {
+    if (!client) {
         return null;
     }
 

composables/AccountTimeline.ts

@@ -3,7 +3,7 @@ import type { Status } from "~/types/mastodon/status";
 
 export const useAccountTimeline = (
     client: Mastodon | null,
-    id: string | null,
+    id: MaybeRef<string | null>,
     options: MaybeRef<
         Partial<{
             limit?: number | undefined;
@@ -21,7 +21,7 @@ export const useAccountTimeline = (
     loadNext: () => Promise<void>;
     loadPrev: () => Promise<void>;
 } => {
-    if (!client || !id) {
+    if (!client) {
         return {
             timeline: ref([]),
             loadNext: async () => {},
@@ -35,7 +35,7 @@ export const useAccountTimeline = (
     let prevMinId: string | undefined = undefined;
 
     const loadNext = async () => {
-        const response = await client.getAccountStatuses(id, {
+        const response = await client.getAccountStatuses(ref(id).value ?? "", {
             only_media: false,
             ...ref(options).value,
             max_id: nextMaxId,
@@ -57,7 +57,7 @@ export const useAccountTimeline = (
     };
 
     const loadPrev = async () => {
-        const response = await client.getAccountStatuses(id, {
+        const response = await client.getAccountStatuses(ref(id).value ?? "", {
             only_media: false,
             ...ref(options).value,
             min_id: prevMinId,
@@ -79,11 +79,11 @@ export const useAccountTimeline = (
     };
 
     watch(
-        () => ref(options).value,
-        async ({ max_id, min_id }) => {
+        [() => ref(id).value, () => ref(options).value],
+        async ([id, { max_id, min_id }]) => {
             nextMaxId = max_id;
             prevMinId = min_id;
-            await loadNext();
+            id && (await loadNext());
         },
         { immediate: true },
     );

composables/Instance.ts

@@ -8,5 +8,6 @@ export const useInstance = async (client: Mastodon | null) => {
 
     return (await client.getInstance()).data as Instance & {
         banner?: string;
+        lysand_version?: string;
     };
 };

composables/Megalodon.ts

@@ -1,9 +1,9 @@
 import { Mastodon } from "megalodon";
 
-export const useMegalodon = async () => {
-    /*     if (process.server) {
+export const useMegalodon = async (disableOnServer = false) => {
+    if (disableOnServer && process.server) {
         return null;
-    } */
+    }
 
     const baseUrl = useBaseUrl().value;
 

composables/Note.ts

@@ -1,7 +1,7 @@
 import type { Mastodon } from "megalodon";
 
 export const useNote = async (client: Mastodon | null, noteId: string) => {
-    if (process.server || !client) {
+    if (!client) {
         return null;
     }
 

layouts/app.vue

@@ -0,0 +1,67 @@
+<template>
+    <div class="from-dark-600 to-dark-900 bg-gradient-to-tl min-h-dvh">
+        <SidebarsNavigation />
+        <div class="relative md:pl-20 min-h-dvh flex flex-row justify-center lg:justify-between">
+            <aside
+                class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 hidden lg:flex p-10 flex-col gap-10">
+                <div class="grow">
+                    <button type="button"
+                        class="relative block w-full h-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" />
+                        <span class="mt-3 block text-sm font-semibold text-gray-200 max-w-56 mx-auto">Notifications will
+                            appear here
+                            when you
+                            sign in</span>
+                    </button>
+                </div>
+                <div class="mt-auto prose prose-invert prose-sm flex flex-col gap-4">
+                    <div class="text-center">
+                        <strong
+                            class="bg-gradient-to-tr from-pink-300 via-purple-300 to-indigo-400 text-transparent bg-clip-text">Lysand
+                            {{ instance?.lysand_version ?? instance?.version }}</strong> • <a
+                            href="https://github.com/lysand-org/lysand" target="_blank">Source Code</a>• <a
+                            href="https://github.com/lysand-org/lysand/issues" target="_blank">Report an Issue</a>
+                    </div>
+
+
+                    <NuxtLink href="https://github.com/lysand-org/lysand" target="_blank">
+                        <ButtonsSecondary class="w-full">
+                            Create your own instance
+                        </ButtonsSecondary>
+                    </NuxtLink>
+
+                    <NuxtLink href="/about/apps" target="_blank">
+                        <ButtonsSecondary class="w-full">
+                            Mobile apps
+                        </ButtonsSecondary>
+                    </NuxtLink>
+                </div>
+            </aside>
+            <div class="w-full max-h-dvh overflow-y-auto">
+                <slot />
+            </div>
+            <aside class="max-w-md max-h-dvh overflow-y-auto w-full bg-dark-900 ring-1 ring-white/10 lg:block hidden">
+                <slot name="right">
+                    <SocialElementsInstancePresentation />
+                </slot>
+            </aside>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { convert } from "html-to-text";
+
+const client = await useMegalodon();
+const instance = await useInstance(client);
+const description = await useExtendedDescription(client);
+
+useServerSeoMeta({
+    title: instance?.title,
+    ogImage: instance?.banner,
+    description: convert(description?.content ?? ""),
+    ogSiteName: "Lysand",
+    colorScheme: "dark",
+    referrer: "no-referrer",
+});
+</script>

package.json

@@ -32,6 +32,7 @@
         "@vee-validate/nuxt": "^4.12.6",
         "@vee-validate/zod": "^4.12.6",
         "c12": "^1.10.0",
+        "html-to-text": "^9.0.5",
         "megalodon": "^10.0.0",
         "nuxt": "^3.11.2",
         "nuxt-headlessui": "^1.2.0",
@@ -47,6 +48,7 @@
         "@nuxtjs/seo": "^2.0.0-rc.10",
         "@nuxtjs/tailwindcss": "^6.11.4",
         "@tailwindcss/forms": "^0.5.7",
+        "@types/html-to-text": "^9.0.4",
         "@vue-email/nuxt": "^0.8.19"
     },
     "trustedDependencies": [

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>