feat: make internal app URLs permalinks (#329)
parent
4f8f2ed1f1
commit
eb022c92e8
|
@ -44,7 +44,7 @@ const toggleBlockDomain = async () => {
|
|||
</button>
|
||||
|
||||
<template #popper>
|
||||
<NuxtLink :to="account.url" target="_blank">
|
||||
<NuxtLink :to="account.url" external target="_blank">
|
||||
<CommonDropdownItem
|
||||
:text="$t('menu.open_in_original_site')"
|
||||
icon="i-ri:arrow-right-up-line"
|
||||
|
|
|
@ -37,9 +37,9 @@ const toggleTranslation = async () => {
|
|||
}
|
||||
|
||||
const copyLink = async (status: Status) => {
|
||||
const url = getStatusPermalinkRoute(status)?.href
|
||||
const url = getStatusPermalinkRoute(status)
|
||||
if (url)
|
||||
await clipboard.copy(`${location.origin}${url}`)
|
||||
await clipboard.copy(`${location.origin}/${url}`)
|
||||
}
|
||||
const deleteStatus = async () => {
|
||||
// TODO confirm to delete
|
||||
|
@ -145,7 +145,7 @@ function editStatus() {
|
|||
@click="copyLink(status)"
|
||||
/>
|
||||
|
||||
<NuxtLink :to="status.url" target="_blank">
|
||||
<NuxtLink :to="status.url" external target="_blank">
|
||||
<CommonDropdownItem
|
||||
v-if="status.url"
|
||||
:text="$t('menu.open_in_original_site')"
|
||||
|
|
|
@ -19,7 +19,7 @@ const originalUrl = computed(() => {
|
|||
<div flex="~ col center gap2">
|
||||
<div>{{ $t('error.status_not_found') }}</div>
|
||||
|
||||
<NuxtLink v-if="originalUrl" :to="originalUrl" target="_blank">
|
||||
<NuxtLink v-if="originalUrl" :to="originalUrl" external target="_blank">
|
||||
<button btn-solid flex="~ center gap-2" text-sm px2 py1>
|
||||
<div i-ri:arrow-right-up-line />
|
||||
{{ $t('status.try_original_site') }}
|
||||
|
|
|
@ -18,15 +18,14 @@ function handleMention(el: Element) {
|
|||
const matchUser = href.value.match(UserLinkRE)
|
||||
if (matchUser) {
|
||||
const [, server, username] = matchUser
|
||||
// Handles need to ignore server subdomains
|
||||
const handle = `@${username}@${server.replace(/(.+\.)(.+\..+)/, '$2')}`
|
||||
href.value = `/${handle}`
|
||||
href.value = `/${server}/@${username}`
|
||||
return h(AccountHoverWrapper, { handle, class: 'inline-block' }, () => nodeToVNode(el))
|
||||
}
|
||||
const matchTag = href.value.match(TagLinkRE)
|
||||
if (matchTag) {
|
||||
const [, , name] = matchTag
|
||||
href.value = `/tags/${name}`
|
||||
href.value = `/${currentServer.value}/tags/${name}`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -64,10 +64,15 @@ export function toShortHandle(fullHandle: string) {
|
|||
}
|
||||
|
||||
export function getAccountRoute(account: Account) {
|
||||
let handle = getFullHandle(account).slice(1)
|
||||
if (handle.endsWith(`@${currentServer.value}`))
|
||||
handle = handle.slice(0, -currentServer.value.length - 1)
|
||||
|
||||
return useRouter().resolve({
|
||||
name: 'account-index',
|
||||
params: {
|
||||
account: getFullHandle(account).slice(1),
|
||||
server: currentServer.value,
|
||||
account: handle,
|
||||
},
|
||||
state: {
|
||||
account: account as any,
|
||||
|
@ -78,6 +83,7 @@ export function getAccountFollowingRoute(account: Account) {
|
|||
return useRouter().resolve({
|
||||
name: 'account-following',
|
||||
params: {
|
||||
server: currentServer.value,
|
||||
account: getFullHandle(account).slice(1),
|
||||
},
|
||||
state: {
|
||||
|
@ -89,6 +95,7 @@ export function getAccountFollowersRoute(account: Account) {
|
|||
return useRouter().resolve({
|
||||
name: 'account-followers',
|
||||
params: {
|
||||
server: currentServer.value,
|
||||
account: getFullHandle(account).slice(1),
|
||||
},
|
||||
state: {
|
||||
|
@ -101,6 +108,7 @@ export function getStatusRoute(status: Status) {
|
|||
return useRouter().resolve({
|
||||
name: 'status',
|
||||
params: {
|
||||
server: currentServer.value,
|
||||
account: getFullHandle(status.account).slice(1),
|
||||
status: status.id,
|
||||
},
|
||||
|
@ -111,18 +119,14 @@ export function getStatusRoute(status: Status) {
|
|||
}
|
||||
|
||||
export function getStatusPermalinkRoute(status: Status) {
|
||||
return status.url
|
||||
? useRouter().resolve({
|
||||
name: 'permalink',
|
||||
params: { permalink: withoutProtocol(status.url) },
|
||||
})
|
||||
: null
|
||||
return status.url ? withoutProtocol(status.url) : null
|
||||
}
|
||||
|
||||
export function getStatusInReplyToRoute(status: Status) {
|
||||
return useRouter().resolve({
|
||||
name: 'status-by-id',
|
||||
params: {
|
||||
server: currentServer.value,
|
||||
status: status.inReplyToId,
|
||||
},
|
||||
})
|
||||
|
@ -143,6 +147,8 @@ const requestedRelationships = new Map<string, Ref<Relationship | undefined>>()
|
|||
let timeoutHandle: NodeJS.Timeout | undefined
|
||||
|
||||
export function useRelationship(account: Account): Ref<Relationship | undefined> {
|
||||
if (!currentUser.value)
|
||||
return ref()
|
||||
let relationship = requestedRelationships.get(account.id)
|
||||
if (relationship)
|
||||
return relationship
|
||||
|
|
|
@ -21,11 +21,12 @@ export const currentUser = computed<UserLogin | undefined>(() => {
|
|||
})
|
||||
|
||||
export const publicServer = ref(DEFAULT_SERVER)
|
||||
const publicInstance = ref<Instance | null>(null)
|
||||
export const currentServer = computed<string>(() => currentUser.value?.server || publicServer.value)
|
||||
|
||||
export const useUsers = () => users
|
||||
|
||||
export const currentInstance = computed<null | Instance>(() => currentUserId.value ? servers.value[currentUserId.value] ?? null : null)
|
||||
export const currentInstance = computed<null | Instance>(() => currentUserId.value ? servers.value[currentUserId.value] ?? null : publicInstance.value)
|
||||
|
||||
export const characterLimit = computed(() => currentInstance.value?.configuration.statuses.maxCharacters ?? DEFAULT_POST_CHARS_LIMIT)
|
||||
|
||||
|
@ -37,14 +38,18 @@ export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: Ac
|
|||
}
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const server = user?.server || route.params.server as string || publicServer.value
|
||||
const masto = await loginMasto({
|
||||
url: `https://${user?.server || DEFAULT_SERVER}`,
|
||||
url: `https://${server}`,
|
||||
accessToken: user?.token,
|
||||
disableVersionCheck: !!config.public.disableVersionCheck,
|
||||
})
|
||||
|
||||
if (!user?.token) {
|
||||
publicServer.value = user?.server || DEFAULT_SERVER
|
||||
publicServer.value = server
|
||||
publicInstance.value = await masto.instances.fetch()
|
||||
}
|
||||
|
||||
else {
|
||||
|
@ -71,6 +76,13 @@ export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: Ac
|
|||
|
||||
setMasto(masto)
|
||||
|
||||
if ('server' in route.params) {
|
||||
await router.push({
|
||||
...route,
|
||||
force: true,
|
||||
})
|
||||
}
|
||||
|
||||
return masto
|
||||
}
|
||||
|
||||
|
@ -98,7 +110,7 @@ export async function signout() {
|
|||
currentUserId.value = users.value[0]?.account?.id
|
||||
|
||||
if (!currentUserId.value)
|
||||
await useRouter().push('/public')
|
||||
await useRouter().push(`/${currentServer.value}/public`)
|
||||
|
||||
await loginTo(currentUser.value)
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export default defineNuxtRouteMiddleware((from) => {
|
||||
export default defineNuxtRouteMiddleware((to) => {
|
||||
if (!currentUser.value)
|
||||
return navigateTo('/public')
|
||||
else if (from.path === '/')
|
||||
if (to.path === '/')
|
||||
return navigateTo('/home')
|
||||
})
|
||||
|
|
|
@ -0,0 +1,51 @@
|
|||
export default defineNuxtRouteMiddleware(async (to, from) => {
|
||||
// Skip running middleware before masto has been initialised
|
||||
if (!useNuxtApp().$masto)
|
||||
return
|
||||
|
||||
if (!('server' in to.params))
|
||||
return
|
||||
|
||||
if (!currentUser.value) {
|
||||
if (from.params.server !== to.params.server) {
|
||||
await loginTo({
|
||||
server: to.params.server as string,
|
||||
})
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
// No need to additionally resolve an id if we're already logged in
|
||||
if (currentUser.value.server === to.params.server)
|
||||
return
|
||||
|
||||
// Tags don't need to be redirected to a local id
|
||||
if (to.params.tag)
|
||||
return
|
||||
|
||||
// Handle redirecting to new permalink structure for users with old links
|
||||
if (!to.params.server) {
|
||||
return {
|
||||
...to,
|
||||
params: {
|
||||
...to.params,
|
||||
server: currentUser.value.server,
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
// If we're logged in, search for the local id the account or status corresponds to
|
||||
const { value } = await useMasto().search({ q: `https:/${to.fullPath}`, resolve: true, limit: 1 }).next()
|
||||
|
||||
const { accounts, statuses } = value
|
||||
if (statuses[0])
|
||||
return getStatusRoute(statuses[0])
|
||||
|
||||
if (accounts[0])
|
||||
return getAccountRoute(accounts[0])
|
||||
}
|
||||
catch {}
|
||||
|
||||
return '/home'
|
||||
})
|
|
@ -1,43 +1,23 @@
|
|||
<script setup lang="ts">
|
||||
import { parseURL } from 'ufo'
|
||||
import { HANDLED_MASTO_URLS } from '~/constants'
|
||||
import { hasProtocol, parseURL } from 'ufo'
|
||||
|
||||
definePageMeta({
|
||||
name: 'permalink',
|
||||
middleware: async (to) => {
|
||||
try {
|
||||
let permalink = Array.isArray(to.params.permalink)
|
||||
? to.params.permalink.join('/')
|
||||
: to.params.permalink
|
||||
const permalink = Array.isArray(to.params.permalink)
|
||||
? to.params.permalink.join('/')
|
||||
: to.params.permalink
|
||||
|
||||
if (!HANDLED_MASTO_URLS.test(permalink))
|
||||
return '/home'
|
||||
|
||||
if (!permalink.startsWith('http'))
|
||||
permalink = `https://${permalink}`
|
||||
|
||||
if (!currentUser.value) {
|
||||
const { host, pathname } = parseURL(permalink)
|
||||
await loginTo({ server: host! })
|
||||
|
||||
if (pathname.match(/^\/@[^/]+$/))
|
||||
return `${pathname}@${host}`
|
||||
if (hasProtocol(permalink)) {
|
||||
const { host, pathname } = parseURL(permalink)
|
||||
|
||||
if (host) {
|
||||
await loginTo({ server: host })
|
||||
return pathname
|
||||
}
|
||||
|
||||
const { value } = await useMasto().search({ q: permalink, resolve: true, limit: 1 }).next()
|
||||
|
||||
const { accounts, statuses } = value
|
||||
if (statuses[0])
|
||||
return getStatusRoute(statuses[0])
|
||||
|
||||
if (accounts[0])
|
||||
return getAccountRoute(accounts[0])
|
||||
}
|
||||
catch {}
|
||||
|
||||
return '/home'
|
||||
// We've reached a page that doesn't exist
|
||||
return false
|
||||
},
|
||||
})
|
||||
</script>
|
||||
|
|
Loading…
Reference in New Issue