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

feat: resolve status paths with router (#258)

zio/stable
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
Show Stats 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)
}

65
composables/masto.ts
View File

@ -56,20 +56,69 @@ export function toShortHandle(fullHandle: string) {
return fullHandle
}
export function getAccountPath(account: Account) {
return `/${getFullHandle(account)}`
export function getAccountRoute(account: Account) {
return useRouter().resolve({
name: 'account-index',
params: {
account: getFullHandle(account).slice(1),
},
state: {
account: account as any,
},
})
}
export function getAccountFollowingRoute(account: Account) {
return useRouter().resolve({
name: 'account-following',
params: {
account: getFullHandle(account).slice(1),
},
state: {
account: account as any,
},
})
}
export function getAccountFollowersRoute(account: Account) {
return useRouter().resolve({
name: 'account-followers',
params: {
account: getFullHandle(account).slice(1),
},
state: {
account: account as any,
},
})
}
export function getStatusPath(status: Status) {
return `/${getFullHandle(status.account)}/${status.id}`
export function getStatusRoute(status: Status) {
return useRouter().resolve({
name: 'status',
params: {
account: getFullHandle(status.account).slice(1),
status: status.id,
},
state: {
status: status as any,
},
})
}
export function getStatusPermalink(status: Status) {
return status.url ? `/${withoutProtocol(status.url)}` : null
export function getStatusPermalinkRouteRoute(status: Status) {
return status.url
? useRouter().resolve({
name: 'permalink',
params: { permalink: withoutProtocol(status.url) },
})
: null
}
export function getStatusInReplyToPath(status: Status) {
return `/status/${status.inReplyToId}`
export function getStatusInReplyToRoute(status: Status) {
return useRouter().resolve({
name: 'status-by-id',
params: {
status: status.inReplyToId,
},
})
}
export function useAccountHandle(account: Account, fullServer = true) {

2
layouts/default.vue
View File

@ -25,7 +25,7 @@
<NuxtLink
p2 rounded-full text-start w-full
hover:bg-active cursor-pointer transition-100
:to="getAccountPath(currentUser.account)"
:to="getAccountRoute(currentUser.account)"
>
<AccountInfo :account="currentUser.account" md:break-words />
</NuxtLink>

6
pages/@[account]/[status].vue
View File

@ -2,12 +2,16 @@
import type { Status } from 'masto'
import type { ComponentPublicInstance } from 'vue'
definePageMeta({
name: 'status',
})
const route = useRoute()
const id = $(computedEager(() => route.params.status as string))
const main = ref<ComponentPublicInstance | null>(null)
let bottomSpace = $ref(0)
const { data: status, pending, refresh: refreshStatus } = useAsyncData(async () => (
const { data: status, pending, refresh: refreshStatus } = useAsyncData(`status:${id}`, async () => (
window.history.state?.status as Status | undefined)
?? await fetchStatus(id),
)

2
pages/@[account]/index/followers.vue
View File

@ -2,6 +2,8 @@
const params = useRoute().params
const handle = $(computedEager(() => params.account as string))
definePageMeta({ name: 'account-followers' })
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().accounts.getFollowersIterable(account.id, {}) : null
</script>

2
pages/@[account]/index/following.vue
View File

@ -2,6 +2,8 @@
const params = useRoute().params
const handle = $(computedEager(() => params.account as string))
definePageMeta({ name: 'account-following' })
const account = await fetchAccountByHandle(handle)
const paginator = account ? useMasto().accounts.getFollowingIterable(account.id, {}) : null
</script>

15
pages/@[account]/index/index.vue
View File

@ -1,13 +1,20 @@
<script setup lang="ts">
import type { Account } from 'masto'
const params = useRoute().params
const handle = $(computedEager(() => params.account as string))
const account = await fetchAccountByHandle(handle)
definePageMeta({ name: 'account-index' })
const { data: account } = await useAsyncData(`account:${handle}`, async () => (
window.history.state?.account as Account | undefined)
?? await fetchAccountByHandle(handle),
)
const { t } = useI18n()
const paginatorPosts = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: true })
const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.id, { excludeReplies: false })
const paginatorMedia = useMasto().accounts.getStatusesIterable(account.id, { onlyMedia: true, excludeReplies: false })
const paginatorPosts = useMasto().accounts.getStatusesIterable(account.value!.id, { excludeReplies: true })
const paginatorPostsWithReply = useMasto().accounts.getStatusesIterable(account.value!.id, { excludeReplies: false })
const paginatorMedia = useMasto().accounts.getStatusesIterable(account.value!.id, { onlyMedia: true, excludeReplies: false })
const tabs = $computed(() => [
{

14
pages/[...permalink].vue
View File

@ -2,6 +2,7 @@
import { parseURL } from 'ufo'
definePageMeta({
name: 'permalink',
middleware: async (to) => {
const HANDLED_MASTO_URL = /^(https?:\/\/)?(\w+\.)+\w+\/(@[@\w\d\.]+)(\/\d+)?$/
try {
@ -24,16 +25,11 @@ definePageMeta({
const { value } = await useMasto().search({ q: permalink, resolve: true, limit: 1 }).next()
const { accounts, statuses } = value
if (statuses[0]) {
return {
path: getStatusPath(statuses[0]),
state: {
status: statuses[0] as any,
},
}
}
if (statuses[0])
return getStatusRoute(statuses[0])
if (accounts[0])
return getAccountPath(accounts[0])
return getAccountRoute(accounts[0])
}
catch {}

8
pages/status/[status].vue
View File

@ -1,15 +1,11 @@
<script setup lang="ts">
definePageMeta({
name: 'status-by-id',
middleware: async (to) => {
const params = to.params
const id = params.status as string
const status = await fetchStatus(id)
return {
path: getStatusPath(status),
state: {
status: status as any,
},
}
return getStatusRoute(status)
},
})
</script>