mirror of
https://github.com/versia-pub/frontend.git
synced 2025-12-06 08:28:20 +01:00
68 lines
1.9 KiB
Vue
68 lines
1.9 KiB
Vue
<template>
|
|
<div v-if="loaded" class="mx-auto max-w-2xl w-full pb-72 *:rounded space-y-4 *:border *:border-border/50">
|
|
<Note v-for="note of context?.ancestors" :note="note" />
|
|
<Note v-if="note" :note="note" />
|
|
<Note v-for="note of context?.descendants" :note="note" />
|
|
</div>
|
|
|
|
<div v-else class="p-4 flex items-center justify-center h-48">
|
|
<Loader class="size-8 animate-spin" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { Loader } from "lucide-vue-next";
|
|
import Note from "~/components/notes/note.vue";
|
|
|
|
definePageMeta({
|
|
layout: "app",
|
|
breadcrumbs: [
|
|
{
|
|
text: "Note",
|
|
},
|
|
],
|
|
});
|
|
|
|
const element = ref<HTMLElement | null>(null);
|
|
const route = useRoute();
|
|
const uuid = route.params.uuid as string;
|
|
|
|
const note = useNote(client, uuid);
|
|
const noteId = computed(() => note.value?.id ?? null);
|
|
const context = useNoteContext(client, noteId);
|
|
const loaded = computed(() => note.value !== null && context.value !== null);
|
|
|
|
// If ancestors changes, scroll down so that the initial note stays at the same place
|
|
watch(
|
|
[() => context.value?.ancestors, loaded],
|
|
async () => {
|
|
if (context.value?.ancestors.length === 0) {
|
|
return;
|
|
}
|
|
if (!loaded.value) {
|
|
return;
|
|
}
|
|
await nextTick();
|
|
// Wait for 200ms
|
|
await new Promise((resolve) => setTimeout(resolve, 200));
|
|
element.value?.scrollIntoView({
|
|
behavior: "smooth",
|
|
});
|
|
},
|
|
{
|
|
immediate: true,
|
|
},
|
|
);
|
|
|
|
useServerSeoMeta({
|
|
title: note.value?.account.display_name,
|
|
description: note.value?.content,
|
|
ogImage: note.value?.media_attachments[0]?.preview_url,
|
|
robots: computed(() => ({
|
|
noindex: !!note.value?.account.noindex,
|
|
nofollow: !!note.value?.account.noindex,
|
|
noarchive: !!note.value?.account.noindex,
|
|
noimageindex: !!note.value?.account.noindex,
|
|
})),
|
|
});
|
|
</script> |