Nikurasu/elk
1
0
Fork 0
forked from Mirrors/elk
Code Pull requests Releases 2 Packages 1 Activity

feat: use nested routes for profile

Browse source
This commit is contained in:
Anthony Fu 2022-11-24 14:18:05 +08:00
parent e81273e944
commit 1ee945447d
12 changed files with 56 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
components/account/AccountHeader.vue
View file

@ -25,7 +25,7 @@ const createdAt = $computed(() => {
</NuxtLink>
</div>
<div flex flex-col>
<CommonRichContent font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold text-2xl :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50>
{{ getAccountHandle(account) }}
</p>
@ -66,13 +66,13 @@ const createdAt = $computed(() => {
</div>
<div flex gap-5>
<NuxtLink :to="`/${getAccountHandle(account)}/`" active-class="text-primary">
<span font-bold>{{ account.statusesCount }}</span> Posts
<span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
</NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/following`" active-class="text-primary">
<span font-bold>{{ account.followingCount }}</span> Following
<span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
</NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" active-class="text-primary">
<span font-bold>{{ account.followersCount }}</span> Followers
<span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
</NuxtLink>
</div>
</div>

2
components/account/AccountInfo.vue
View file

@ -18,7 +18,7 @@ const id = computed(() => fullServer && !account.acct.includes('@') ? `@${accoun
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
{{ id }}
</p>

2
components/account/AccountInlineInfo.vue
View file

@ -9,6 +9,6 @@ defineProps<{
<template>
<NuxtLink :href="getAccountPath(account)" flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>
</template>

2
components/account/AccountPaginator.vue
View file

@ -11,7 +11,7 @@ const { paginator } = defineProps<{
<template #default="{ item }">
<AccountCard
:account="item"
border="b base" p1
border="b base" py2 px4
/>
</template>
</CommonPaginator>

0
components/common/CommonRichContent.ts → components/content/ContentRich.ts
View file

7
components/main/MainContent.vue
View file

@ -7,7 +7,12 @@
>
<div flex justify-between px5 py4>
<div flex gap-1>
<slot name="title" />
<slot name="title">
<NuxtLink flex="~ gap1" items-center btn-text p-0 @click="$router.go(-1)">
<div i-ri-arrow-left-line />
Back
</NuxtLink>
</slot>
</div>
<div flex>
<slot name="actions" />

2
components/status/StatusBody.vue
View file

@ -8,6 +8,6 @@ const { status } = defineProps<{
<template>
<div class="status-body">
<CommonRichContent :content="status.content" :emojis="status.emojis" />
<ContentRich :content="status.content" :emojis="status.emojis" />
</div>
</template>

31
pages/@[account].vue Normal file
View file

@ -0,0 +1,31 @@
<script setup lang="ts">
const props = defineProps<{
modelValue?: boolean
}>()
const params = useRoute().params
const accountName = $computed(() => params.account as string)
const account = await fetchAccountByName(accountName)
const tabNames = ['Posts', 'Posts and replies'] as const
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
const tab = $ref('Posts')
const paginator = $computed(() => {
return masto.accounts.getStatusesIterable(account.id, { excludeReplies: tab === 'Posts' } as any)
})
</script>
<template>
<MainContent>
<template v-if="account">
<AccountHeader :account="account" border="b base" />
<NuxtPage />
</template>
<CommonNotFound v-else>
Account @{{ params.user }} not found
</CommonNotFound>
</MainContent>
</template>

7
pages/@[account]/followers.vue
View file

@ -8,13 +8,6 @@ const paginator = account ? masto.accounts.getFollowersIterable(account!.id!, {}
<template>
<template v-if="account">
<div>
<AccountHeader :account="account" />
</div>
<AccountPaginator :paginator="paginator" />
</template>
<CommonNotFound v-else>
Account @{{ params.user }} not found
</CommonNotFound>
</template>

9
pages/@[account]/following.vue
View file

@ -3,18 +3,11 @@ const params = useRoute().params
const accountName = $computed(() => params.account as string)
const account = await fetchAccountByName(accountName)
const paginator = account ? masto.accounts.getFollowingIterable(account!.id!, {}) : null
const paginator = account ? masto.accounts.getFollowingIterable(account.id, {}) : null
</script>
<template>
<template v-if="account">
<div>
<AccountHeader :account="account" />
</div>
<AccountPaginator :paginator="paginator" />
</template>
<CommonNotFound v-else>
Account @{{ params.user }} not found
</CommonNotFound>
</template>

20
pages/@[account]/index.vue
View file

@ -12,21 +12,19 @@ const tabNames = ['Posts', 'Posts and replies'] as const
// Don't use local storage because it is better to default to Posts every time you visit a user's profile.
const tab = $ref('Posts')
const paginator1 = masto.accounts.getStatusesIterable(account.id, { excludeReplies: true })
const paginator2 = masto.accounts.getStatusesIterable(account.id, { excludeReplies: false })
const paginator = $computed(() => {
return masto.accounts.getStatusesIterable(account.id, { excludeReplies: tab === 'Posts' } as any)
return tab === 'Posts' ? paginator1 : paginator2
})
</script>
<template>
<template v-if="account">
<div>
<AccountHeader :account="account" />
</div>
<div>
<CommonTabs v-model="tab" :options="tabNames" />
<TimelinePaginator :key="tab" :paginator="paginator" />
</template>
<CommonNotFound v-else>
Account @{{ params.user }} not found
</CommonNotFound>
<KeepAlive>
<TimelinePaginator :key="tab" :paginator="paginator" />
</KeepAlive>
</div>
</template>

2
unocss.config.ts
View file

@ -21,7 +21,7 @@ export default defineConfig({
'interact-disabled': 'disabled:opacity-50 disabled:pointer-events-none disabled:saturate-0',
'btn-solid': 'px-4 py-2 rounded text-white bg-$c-primary hover:bg-$c-primary-active interact-disabled',
'btn-outline': 'px-4 py-2 rounded text-$c-primary border border-$c-primary hover:bg-$c-primary hover:text-white interact-disabled',
'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled',
'btn-text': 'px-4 py-2 text-$c-primary hover:text-$c-primary-active interact-disabled cursor-pointer',
},
],
presets: [