feat: use full id in url

zio/stable
Anthony Fu 2022-11-26 01:50:03 +08:00
parent 008db64987
commit 2ed22678ed
6 changed files with 32 additions and 13 deletions

View File

@ -59,7 +59,7 @@ function getFieldNameIcon(fieldName: string) {
<div flex flex-col> <div flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" /> <ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50> <p op50>
{{ getAccountHandle(account) }} {{ getShortHandle(account) }}
</p> </p>
</div> </div>
</div> </div>
@ -86,13 +86,13 @@ function getFieldNameIcon(fieldName: string) {
</div> </div>
</div> </div>
<div flex gap-5> <div flex gap-5>
<NuxtLink :to="`/${getAccountHandle(account)}/`" exact-active-class="text-primary"> <NuxtLink :to="`/${getFullHandle(account)}/`" exact-active-class="text-primary">
<span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span> <span font-bold>{{ account.statusesCount }}</span> <span op50>Posts</span>
</NuxtLink> </NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/following`" exact-active-class="text-primary"> <NuxtLink :to="`/${getFullHandle(account)}/following`" exact-active-class="text-primary">
<span font-bold>{{ account.followingCount }}</span> <span op50>Following</span> <span font-bold>{{ account.followingCount }}</span> <span op50>Following</span>
</NuxtLink> </NuxtLink>
<NuxtLink :to="`/${getAccountHandle(account)}/followers`" exact-active-class="text-primary"> <NuxtLink :to="`/${getFullHandle(account)}/followers`" exact-active-class="text-primary">
<span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span> <span font-bold>{{ account.followersCount }}</span> <span op50>Followers</span>
</NuxtLink> </NuxtLink>
</div> </div>

View File

@ -10,15 +10,15 @@ defineProps<{
<div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card"> <div bg-base border="~ base" rounded w-80 z-900 overflow-hidden p-4 class="account-hover-card">
<AccountInfo :account="account" /> <AccountInfo :account="account" />
<div text-sm flex flex-row text-gray mt-4> <div text-sm flex flex-row text-gray mt-4>
<NuxtLink :to="`/${getAccountHandle(account)}/`"> <NuxtLink :to="`/${getShortHandle(account)}/`">
{{ account.statusesCount }} Posts {{ account.statusesCount }} Posts
</NuxtLink> </NuxtLink>
<span flex-1 text-center> </span> <span flex-1 text-center> </span>
<NuxtLink :to="`/${getAccountHandle(account)}/following`"> <NuxtLink :to="`/${getShortHandle(account)}/following`">
{{ account.followingCount }} Following {{ account.followingCount }} Following
</NuxtLink> </NuxtLink>
<span flex-1 text-center> </span> <span flex-1 text-center> </span>
<NuxtLink :to="`/${getAccountHandle(account)}/followers`"> <NuxtLink :to="`/${getShortHandle(account)}/followers`">
{{ account.followersCount }} Followers {{ account.followersCount }} Followers
</NuxtLink> </NuxtLink>
</div> </div>

View File

@ -54,7 +54,7 @@
<span>Bookmarks</span> <span>Bookmarks</span>
</div> </div>
</NuxtLink> </NuxtLink>
<NuxtLink :to="`/@${currentUser.account?.username}`" active-class="text-primary" group> <NuxtLink :to="getAccountPath(currentUser.account)" active-class="text-primary" group>
<div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active> <div flex w-fit px5 py2 gap2 items-center transition-100 rounded-10 hover:bg-active>
<AccountAvatar :account="currentUser.account" h="1.2em" /> <AccountAvatar :account="currentUser.account" h="1.2em" />
<span>Profile</span> <span>Profile</span>

View File

@ -41,7 +41,7 @@ const sorted = computed(() => {
@click="signout" @click="signout"
> >
<div i-ri:logout-box-line /> <div i-ri:logout-box-line />
Sign out {{ getAccountHandle(currentUser.account) }} Sign out {{ getShortHandle(currentUser.account) }}
</button> </button>
</div> </div>
</div> </div>

View File

@ -33,12 +33,28 @@ export function getDisplayName(account: Account) {
return account.displayName || account.username return account.displayName || account.username
} }
export function getAccountHandle(account: Account) { export function getShortHandle(account: Account) {
return `@${account.acct}` return `@${account.acct}`
} }
export function getFullHandle(account: Account) {
const handle = `@${account.acct}`
if (!currentUser.value || account.acct.includes('@'))
return handle
return `${handle}@${account.url.match(UserLinkRE)?.[1] || currentUser.value.server}`
}
export function toShortHandle(fullHandle: string) {
if (!currentUser.value)
return fullHandle
const server = currentUser.value.server
if (fullHandle.endsWith(`@${server}`))
return fullHandle.slice(0, -server.length - 1)
return fullHandle
}
export function getAccountPath(account: Account) { export function getAccountPath(account: Account) {
return `/${getAccountHandle(account)}` return `/${getFullHandle(account)}`
} }
export function getStatusPath(status: Status) { export function getStatusPath(status: Status) {
@ -46,7 +62,10 @@ export function getStatusPath(status: Status) {
} }
export function useAccountHandle(account: Account, fullServer = true) { export function useAccountHandle(account: Account, fullServer = true) {
return computed(() => fullServer && !account.acct.includes('@') ? `@${account.acct}@${account.url.match(UserLinkRE)?.[1]}` : getAccountHandle(account)) return computed(() => fullServer
? getFullHandle(account)
: getShortHandle(account),
)
} }
// Batch requests for relationships when used in the UI // Batch requests for relationships when used in the UI

View File

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
const params = useRoute().params const params = useRoute().params
const accountName = $computed(() => params.account as string) const accountName = $computed(() => toShortHandle(params.account as string))
const account = await fetchAccountByName(accountName).catch(() => null) const account = await fetchAccountByName(accountName).catch(() => null)