From eb022c92e86d44e95c5ff382fb59ba7b08fd133c Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Sun, 4 Dec 2022 19:56:33 +0000
Subject: [PATCH] feat: make internal app URLs permalinks (#329)

---
 components/account/AccountMoreButton.vue      |  2 +-
 components/status/StatusActionsMore.vue       |  6 +--
 components/status/StatusNotFound.vue          |  2 +-
 composables/content.ts                        |  5 +-
 composables/masto.ts                          | 20 +++++---
 composables/users.ts                          | 20 ++++++--
 middleware/auth.ts                            |  4 +-
 middleware/permalink.global.ts                | 51 +++++++++++++++++++
 pages/[...permalink].vue                      | 40 ++++-----------
 .../{ => [[server]]}/@[account]/[status].vue  |  0
 pages/{ => [[server]]}/@[account]/index.vue   |  0
 .../@[account]/index/followers.vue            |  0
 .../@[account]/index/following.vue            |  0
 .../@[account]/index/index.vue                |  0
 pages/{ => [[server]]}/explore.vue            |  0
 pages/{ => [[server]]}/public/index.vue       |  0
 pages/{ => [[server]]}/public/local.vue       |  0
 pages/{ => [[server]]}/status/[status].vue    |  0
 pages/{ => [[server]]}/tags/[tag].vue         |  0
 19 files changed, 99 insertions(+), 51 deletions(-)
 create mode 100644 middleware/permalink.global.ts
 rename pages/{ => [[server]]}/@[account]/[status].vue (100%)
 rename pages/{ => [[server]]}/@[account]/index.vue (100%)
 rename pages/{ => [[server]]}/@[account]/index/followers.vue (100%)
 rename pages/{ => [[server]]}/@[account]/index/following.vue (100%)
 rename pages/{ => [[server]]}/@[account]/index/index.vue (100%)
 rename pages/{ => [[server]]}/explore.vue (100%)
 rename pages/{ => [[server]]}/public/index.vue (100%)
 rename pages/{ => [[server]]}/public/local.vue (100%)
 rename pages/{ => [[server]]}/status/[status].vue (100%)
 rename pages/{ => [[server]]}/tags/[tag].vue (100%)

diff --git a/components/account/AccountMoreButton.vue b/components/account/AccountMoreButton.vue
index 5f2f638a..fcb477f5 100644
--- a/components/account/AccountMoreButton.vue
+++ b/components/account/AccountMoreButton.vue
@@ -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"
diff --git a/components/status/StatusActionsMore.vue b/components/status/StatusActionsMore.vue
index 0dab1a7e..7cf740ba 100644
--- a/components/status/StatusActionsMore.vue
+++ b/components/status/StatusActionsMore.vue
@@ -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')"
diff --git a/components/status/StatusNotFound.vue b/components/status/StatusNotFound.vue
index ea722c30..b1b4e530 100644
--- a/components/status/StatusNotFound.vue
+++ b/components/status/StatusNotFound.vue
@@ -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') }}
diff --git a/composables/content.ts b/composables/content.ts
index 54c71f51..4d44ad59 100644
--- a/composables/content.ts
+++ b/composables/content.ts
@@ -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}`
       }
     }
   }
diff --git a/composables/masto.ts b/composables/masto.ts
index 0824b14d..1b798994 100644
--- a/composables/masto.ts
+++ b/composables/masto.ts
@@ -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
diff --git a/composables/users.ts b/composables/users.ts
index fc769f19..8e7c9390 100644
--- a/composables/users.ts
+++ b/composables/users.ts
@@ -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)
 }
diff --git a/middleware/auth.ts b/middleware/auth.ts
index 23f66476..87aa1413 100644
--- a/middleware/auth.ts
+++ b/middleware/auth.ts
@@ -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')
 })
diff --git a/middleware/permalink.global.ts b/middleware/permalink.global.ts
new file mode 100644
index 00000000..c0350207
--- /dev/null
+++ b/middleware/permalink.global.ts
@@ -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'
+})
diff --git a/pages/[...permalink].vue b/pages/[...permalink].vue
index ef658e52..303c1c28 100644
--- a/pages/[...permalink].vue
+++ b/pages/[...permalink].vue
@@ -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>
diff --git a/pages/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue
similarity index 100%
rename from pages/@[account]/[status].vue
rename to pages/[[server]]/@[account]/[status].vue
diff --git a/pages/@[account]/index.vue b/pages/[[server]]/@[account]/index.vue
similarity index 100%
rename from pages/@[account]/index.vue
rename to pages/[[server]]/@[account]/index.vue
diff --git a/pages/@[account]/index/followers.vue b/pages/[[server]]/@[account]/index/followers.vue
similarity index 100%
rename from pages/@[account]/index/followers.vue
rename to pages/[[server]]/@[account]/index/followers.vue
diff --git a/pages/@[account]/index/following.vue b/pages/[[server]]/@[account]/index/following.vue
similarity index 100%
rename from pages/@[account]/index/following.vue
rename to pages/[[server]]/@[account]/index/following.vue
diff --git a/pages/@[account]/index/index.vue b/pages/[[server]]/@[account]/index/index.vue
similarity index 100%
rename from pages/@[account]/index/index.vue
rename to pages/[[server]]/@[account]/index/index.vue
diff --git a/pages/explore.vue b/pages/[[server]]/explore.vue
similarity index 100%
rename from pages/explore.vue
rename to pages/[[server]]/explore.vue
diff --git a/pages/public/index.vue b/pages/[[server]]/public/index.vue
similarity index 100%
rename from pages/public/index.vue
rename to pages/[[server]]/public/index.vue
diff --git a/pages/public/local.vue b/pages/[[server]]/public/local.vue
similarity index 100%
rename from pages/public/local.vue
rename to pages/[[server]]/public/local.vue
diff --git a/pages/status/[status].vue b/pages/[[server]]/status/[status].vue
similarity index 100%
rename from pages/status/[status].vue
rename to pages/[[server]]/status/[status].vue
diff --git a/pages/tags/[tag].vue b/pages/[[server]]/tags/[tag].vue
similarity index 100%
rename from pages/tags/[tag].vue
rename to pages/[[server]]/tags/[tag].vue