Kingsmai
f9e02372b2
This commit introduces a new section to showcase team members, starting with the founder's profile. - Adds a dynamic page route `/about/` to display individual member profiles. - Creates a new `about` content collection to source profile information from Markdown files. - Adds the first profile for 'Xiaomai', including a detailed resume and background image. - Integrates a 'Teams' dropdown into the main navigation header. - Implements a `copyToClipboard` utility with a toast notification for sharing profile links.
50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<script lang="ts" setup>
|
|
const route = useRoute();
|
|
|
|
const articleLink = computed(() => `${window?.location}`);
|
|
|
|
const { data: page } = await useAsyncData(route.path, () =>
|
|
queryCollection("about").path(`/about/${route.params.slug}`).first()
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<UPage>
|
|
<div
|
|
class="fixed top-0 left-0 -z-999 w-screen h-screen bg-[url('/images/xiaomai.png')] bg-cover lg:bg-contain bg-no-repeat opacity-40 animate-slide-in"
|
|
></div>
|
|
<UPageBody class="max-w-3xl mx-auto">
|
|
<ContentRenderer v-if="page?.body" :value="page" />
|
|
|
|
<div class="flex items-center justify-end gap-2 text-sm text-muted">
|
|
<UButton
|
|
size="sm"
|
|
variant="link"
|
|
color="neutral"
|
|
label="Copy link"
|
|
@click="
|
|
copyToClipboard(articleLink, 'Article link copied to clipboard')
|
|
"
|
|
/>
|
|
</div>
|
|
</UPageBody>
|
|
</UPage>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@keyframes slide-in {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 0.4;
|
|
}
|
|
}
|
|
|
|
.animate-slide-in {
|
|
animation: slide-in 1.2s ease-out forwards;
|
|
}
|
|
</style>
|