feat: ♻️ Change code to build in static mode, add timelines, profiles and notes, new design

components/social-elements/notes/attachment.vue

@@ -0,0 +1,55 @@
+<template>
+    <div @click="lightbox = true"
+        class="aspect-video w-full rounded ring-white/5 shadow overflow-hidden ring-1 hover:ring-2 duration-100">
+        <img v-if="attachment.type === 'image'"
+            class="object-cover w-full h-full rounded duration-150 hover:scale-[102%] ease-in-out" :src="attachment.url"
+            :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
+        <video v-else-if="attachment.type === 'video'" class="object-cover w-full h-full rounded" controls
+            :alt="attachment.description ?? ''" :title="attachment.description ?? ''">
+            <source :src="attachment.url" type="video/mp4" />
+            Your browser does not support the video tag.
+        </video>
+    </div>
+    <HeadlessTransitionRoot appear :show="lightbox" as="template">
+        <HeadlessDialog @close="lightbox = false">
+            <div class="fixed inset-0 overflow-y-auto bg-black/70">
+                <div class="flex min-h-full items-center justify-center text-center">
+                    <HeadlessTransitionChild as="template" enter="duration-100 ease-out" enter-from="opacity-0 scale-95"
+                        enter-to="opacity-100 scale-100">
+                        <HeadlessDialogPanel
+                            class="w-screen h-screen flex justify-center items-center flex-col relative overflow-hidden p-10"
+                            @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" />
+                                    <span class="sr-only">Close</span>
+                                </a>
+                                <button @click.stop="lightbox = false" class="">
+                                    <Icon name="tabler:x" class="w-6 h-6" />
+                                    <span class="sr-only">Close</span>
+                                </button>
+                            </div>
+                            <img @click.stop v-if="attachment.type === 'image'"
+                                class="rounded max-w-full min-w-[30%] max-h-[70%]" :src="attachment.url"
+                                :alt="attachment.description ?? ''" :title="attachment.description ?? ''" />
+                            <span @click.stop v-if="attachment.description"
+                                class="text-gray-300 rounded mt-6 -mb-20 px-4 py-2 max-w-xl ring-1 ring-white/5 bg-dark-900 max-h-40 overflow-y-auto">
+                                {{ attachment.description }}
+                            </span>
+                        </HeadlessDialogPanel>
+                    </HeadlessTransitionChild>
+                </div>
+            </div>
+        </HeadlessDialog>
+    </HeadlessTransitionRoot>
+</template>
+
+<script lang="ts" setup>
+import type { Attachment } from '~/types/mastodon/attachment';
+
+const lightbox = ref(false);
+
+defineProps<{
+    attachment: Attachment;
+}>();
+</script>

components/social-elements/notes/mention.vue

@@ -0,0 +1,16 @@
+<template>
+    <span
+        class="shrink break-all rounded bg-pink-700/30 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.display_name }}
+    </span>
+</template>
+
+<script lang="ts" setup>
+import type { Account } from '~/types/mastodon/account';
+
+const props = defineProps<{
+    account: Account;
+}>();
+</script>

components/social-elements/notes/note.vue

@@ -0,0 +1,93 @@
+<template>
+    <div
+        class="first:rounded-t last:rounded-b ring-1 ring-white/5 p-6 flex flex-col bg-dark-800 hover:bg-dark-700 duration-200">
+        <div class="flex flex-row">
+            <Skeleton :enabled="isLoading" shape="rect" class="!h-12 w-12">
+                <NuxtLink :href="accountUrl">
+                    <img class="h-12 w-12 rounded ring-1 ring-white/5" :src="note?.account.avatar" alt="" />
+                </NuxtLink>
+            </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">
+                    <NuxtLink :href="accountUrl" class="font-semibold text-gray-200 line-clamp-1 break-all">
+                        <Skeleton :enabled="isLoading" :min-width="90" :max-width="170" shape="rect">
+                            {{
+                note?.account.display_name }}
+                        </Skeleton>
+                    </NuxtLink>
+                    <NuxtLink :href="noteUrl" class="text-gray-400 text-sm ml-2 line-clamp-1 break-all shrink-0">
+                        <Skeleton :enabled="isLoading" :min-width="50" :max-width="100" shape="rect">
+                            {{ timeAgo }}
+                        </Skeleton>
+                    </NuxtLink>
+                </div>
+                <span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
+                    <Skeleton :enabled="isLoading" :min-width="130" :max-width="250" shape="rect">
+                        @{{
+                note?.account.acct
+            }}
+                    </Skeleton>
+                </span>
+            </div>
+        </div>
+        <NuxtLink :href="noteUrl" class="mt-6">
+            <Skeleton :enabled="true" v-if="isLoading" :min-width="50" :max-width="100" width-unit="%" shape="rect"
+                type="content">
+            </Skeleton>
+            <div v-else-if="content" class="prose prose-invert prose-a:no-underline" v-html="content">
+            </div>
+            <div v-if="attachments.length > 0" class="[&:not(:first-child)]:mt-6">
+                <SocialElementsNotesAttachment v-for="attachment of attachments" :key="attachment.id"
+                    :attachment="attachment" />
+            </div>
+        </NuxtLink>
+        <Skeleton class="!h-10 w-full mt-6" :enabled="true" v-if="isLoading"></Skeleton>
+        <div v-else
+            class="mt-6 flex flex-row items-stretch justify-between text-sm h-10 hover:[&>button]:bg-dark-800 [&>button]:duration-200 [&>button]:rounded [&>button]:flex [&>button]:flex-1 [&>button]:flex-row [&>button]:items-center [&>button]:justify-center">
+            <button>
+                <Icon name="tabler:arrow-back-up" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.replies_count) }}</span>
+            </button>
+            <button>
+                <Icon name="tabler:heart" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.favourites_count) }}</span>
+            </button>
+            <button>
+                <Icon name="tabler:repeat" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(note?.reblogs_count) }}</span>
+            </button>
+            <button>
+                <Icon name="tabler:quote" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+                <span class="text-gray-400 mt-0.5 ml-2">{{ numberFormat(0) }}</span>
+            </button>
+            <button>
+                <Icon name="tabler:dots" class="h-5 w-5 text-gray-200" aria-hidden="true" />
+            </button>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import Skeleton from "~/components/skeleton/Skeleton.vue";
+import type { Status } from "~/types/mastodon/status";
+
+const props = defineProps<{
+    note?: Status;
+    skeleton?: boolean;
+}>();
+
+const isLoading = props.skeleton;
+const timeAgo = useTimeAgo(props.note?.created_at ?? 0);
+
+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 numberFormat = (number = 0) => new Intl.NumberFormat(undefined, {
+    notation: "compact",
+    compactDisplay: "short",
+    maximumFractionDigits: 1,
+}).format(number);
+const attachments = props.note?.media_attachments ?? [];
+const noteUrl = props.note && `/@${props.note.account.acct}/${props.note.id}`;
+const accountUrl = props.note && `/@${props.note.account.acct}`;
+</script>