mirror of
https://github.com/elk-zone/elk.git
synced 2024-09-06 20:29:08 +01:00
feat: use full id in url
This commit is contained in:
parent
008db64987
commit
2ed22678ed
6 changed files with 32 additions and 13 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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)
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue