zio/elk
2
0
Fork 0
Code Releases 2 Packages 1 Activity

feat: resolve status paths with router (#258)

Browse source
This commit is contained in:
Daniel Roe 2022-11-30 17:15:18 +00:00 • committed by GitHub
parent 24bbe9135b
commit 4ed1816806
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
22 changed files with 106 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountCard.vue
View file

@ -14,7 +14,7 @@ cacheAccount(account)
<AccountInfo
:account="account" hover p1 as="router-link"
:hover-card="hoverCard"
:to="getAccountPath(account)"
:to="getAccountRoute(account)"
/>
<div h-full p1>
<AccountFollowButton :account="account" />

2
components/account/AccountHoverCard.vue
View file

@ -9,7 +9,7 @@ defineProps<{
<template>
<div flex="~ col gap2" rounded min-w-90 max-w-120 z-100 overflow-hidden p-4>
<div flex="~ gap2" items-center>
<NuxtLink :to="getAccountPath(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
<NuxtLink :to="getAccountRoute(account)" flex-auto rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountInfo :account="account" />
</NuxtLink>
<AccountFollowButton text-sm :account="account" />

2
components/account/AccountInlineInfo.vue
View file

@ -10,7 +10,7 @@ const { link = true } = defineProps<{
<template>
<AccountHoverWrapper :account="account">
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
:to="link ? getAccountRoute(account) : undefined"
:class="link ? 'text-link-rounded ml-0 pl-0' : ''"
min-w-0 flex gap-1 items-center
>

6
components/account/AccountPostsFollowers.vue
View file

@ -8,21 +8,21 @@ defineProps<{
<template>
<div flex gap-5>
<NuxtLink :to="getAccountPath(account)" text-secondary exact-active-class="text-primary">
<NuxtLink :to="getAccountRoute(account)" text-secondary exact-active-class="text-primary">
<template #default="{ isExactActive }">
<i18n-t keypath="account.posts_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ formattedNumber(account.statusesCount) }}</span>
</i18n-t>
</template>
</NuxtLink>
<NuxtLink :to="`${getAccountPath(account)}/following`" text-secondary exact-active-class="text-primary">
<NuxtLink :to="getAccountFollowingRoute(account)" text-secondary exact-active-class="text-primary">
<template #default="{ isExactActive }">
<i18n-t keypath="account.following_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followingCount) }}</span>
</i18n-t>
</template>
</NuxtLink>
<NuxtLink :to="`${getAccountPath(account)}/followers`" text-secondary exact-active-class="text-primary">
<NuxtLink :to="getAccountFollowersRoute(account)" text-secondary exact-active-class="text-primary">
<template #default="{ isExactActive }">
<i18n-t keypath="account.followers_count">
<span font-bold :class="isExactActive ? 'text-primary' : 'text-base'">{{ humanReadableNumber(account.followersCount) }}</span>

2
components/nav/NavSide.vue
View file

@ -18,7 +18,7 @@ const { t } = useI18n()
<NavSideItem
v-if="isMediumScreen"
:text="currentUser.account.displayName"
:to="getAccountPath(currentUser.account)"
:to="getAccountRoute(currentUser.account)"
icon="i-ri:account-circle-line"
>
<template #icon>

4
components/nav/NavSideItem.vue
View file

@ -2,7 +2,7 @@
const props = defineProps<{
text?: string
icon: string
to: string
to: string | Record<string, string>
}>()
defineSlots<{
@ -15,7 +15,7 @@ const router = useRouter()
useCommand({
scope: 'Navigation',
name: () => props.text ?? props.to,
name: () => props.text ?? typeof props.to === 'string' ? props.to as string : props.to.name,
icon: () => props.icon,
onActivate() {

2
components/notification/NotificationGroupedFollow.vue
View file

@ -29,7 +29,7 @@ const isExpanded = ref(false)
:key="item.id"
:account="item.account"
>
<NuxtLink :to="getAccountPath(item.account)">
<NuxtLink :to="getAccountRoute(item.account)">
<AccountAvatar :account="item.account" w-8 h-8 />
</NuxtLink>
</AccountHoverWrapper>

2
components/publish/PublishWidget.vue
View file

@ -157,7 +157,7 @@ const { isOverDropZone } = useDropZone(dropZoneRef, onDrop)
</template>
<div p4 flex gap-4>
<NuxtLink w-12 h-12 :to="getAccountPath(currentUser.account)">
<NuxtLink w-12 h-12 :to="getAccountRoute(currentUser.account)">
<AccountAvatar :account="currentUser.account" w-12 h-12 />
</NuxtLink>
<div

2
components/status/StatusAccountDetails.vue
View file

@ -9,7 +9,7 @@ const { account, link = true } = defineProps<{
<template>
<NuxtLink
:to="link ? getAccountPath(account) : undefined"
:to="link ? getAccountRoute(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
text-link-rounded
>

2
components/status/StatusActions.vue
View file

@ -77,7 +77,7 @@ const toggleTranslation = async () => {
}
const copyLink = async (status: Status) => {
const url = getStatusPermalink(status)
const url = getStatusPermalinkRoute(status)
if (url)
await clipboard.copy(`${location.origin}${url}`)
}

10
components/status/StatusCard.vue
View file

@ -30,13 +30,13 @@ function onclick(evt: MouseEvent | KeyboardEvent) {
}
function go(evt: MouseEvent | KeyboardEvent) {
const path = getStatusPath(status)
const route = getStatusRoute(status)
if (evt.metaKey || evt.ctrlKey) {
window.open(path)
window.open(route.href)
}
else {
cacheStatus(status)
router.push(path)
router.push(route)
}
}
@ -57,7 +57,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<div flex gap-4>
<div>
<AccountHoverWrapper :account="status.account">
<NuxtLink :to="getAccountPath(status.account)" rounded-full>
<NuxtLink :to="getAccountRoute(status.account)" rounded-full>
<AccountAvatar w-12 h-12 :account="status.account" />
</NuxtLink>
</AccountHoverWrapper>
@ -70,7 +70,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
<div flex-auto />
<div text-sm text-secondary flex="~ row nowrap" hover:underline>
<CommonTooltip :content="createdAt">
<a :title="status.createdAt" :href="getStatusPath(status)" @click.prevent="go($event)">
<a :title="status.createdAt" :href="getStatusRoute(status).href" @click.prevent="go($event)">
<time text-sm hover:underline :datetime="status.createdAt">
{{ timeago }}
</time>

2
components/status/StatusDetails.vue
View file

@ -19,7 +19,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
<template>
<div :id="`status-${status.id}`" flex flex-col gap-2 py3 px-4>
<NuxtLink :to="getAccountPath(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<NuxtLink :to="getAccountRoute(status.account)" rounded-full hover:bg-active transition-100 pr5 mr-a>
<AccountHoverWrapper :account="status.account">
<AccountInfo :account="status.account" />
</AccountHoverWrapper>

2
components/status/StatusReplyingTo.vue
View file

@ -12,7 +12,7 @@ const account = useAccountById(status.inReplyToAccountId!)
<NuxtLink
v-if="status.inReplyToId"
flex="~ wrap" items-center text-sm text-secondary
:to="getStatusInReplyToPath(status)"
:to="getStatusInReplyToRoute(status)"
:title="account ? `Replying to ${getDisplayName(account)}` : 'Replying to someone'"
>
<div i-ri:reply-fill rotate-180 text-secondary-light class="mr-1.5" />

2
components/user/UserSwitcher.vue
View file

@ -13,7 +13,7 @@ const sorted = computed(() => {
const router = useRouter()
const switchUser = (user: UserLogin) => {
if (user.account.id === currentUser.value?.account.id)
router.push(getAccountPath(user.account))
router.push(getAccountRoute(user.account))
else
loginTo(user)
}