versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: 🎨 Design refactor of all pages

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-04-25 19:54:02 -10:00
parent 9467cef34b
commit a45c04258e
No known key found for this signature in database
20 changed files with 407 additions and 267 deletions
Download patch file Download diff file Expand all files Collapse all files

6
pages/[username]/[uuid].vue
View file

@ -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>

135
pages/[username]/index.vue
View file

@ -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