feat: implement elk permalinks (#229)

components/status/StatusActions.vue

@@ -76,8 +76,10 @@ const toggleTranslation = async () => {
   isLoading.translation = false
 }
 
-const copyLink = async (url: string) => {
+const copyLink = async (status: Status) => {
-  await clipboard.copy(url)
+  const url = getStatusPermalink(status)
+  if (url)
+    await clipboard.copy(`${location.origin}${url}`)
 }
 const deleteStatus = async () => {
   // TODO confirm to delete
@@ -194,7 +196,7 @@ function editStatus() {
             text="Copy link to this post"
             icon="i-ri:link"
             :command="command"
-            @click="copyLink(status.url)"
+            @click="copyLink(status)"
           />
 
           <NuxtLink :to="status.url" target="_blank">

components/user/UserSignInEntry.vue

@@ -1,8 +1,11 @@
 <template>
   <div p8 flex="~ col gap4">
-    <div text-sm text-secondary>
+    <p text-sm>
+      Viewing <strong>{{ currentServer }}</strong> public data
+    </p>
+    <p text-sm text-secondary>
       {{ $t('nav_user.sign_in_desc') }}
-    </div>
+    </p>
     <button class="btn-solid text-center" @click="openSigninDialog()">
       {{ $t('action.sign_in') }}
     </button>

composables/masto.ts

@@ -1,5 +1,6 @@
 import type { Ref } from 'vue'
 import type { Account, Relationship, Status } from 'masto'
+import { withoutProtocol } from 'ufo'
 
 // @unocss-include
 export const STATUS_VISIBILITIES = [
@@ -71,6 +72,10 @@ export function getStatusPath(status: Status) {
   return `/${getFullHandle(status.account)}/${status.id}`
 }
 
+export function getStatusPermalink(status: Status) {
+  return status.url ? `/${withoutProtocol(status.url)}` : null
+}
+
 export function getStatusInReplyToPath(status: Status) {
   return `/status/${status.inReplyToId}`
 }

composables/users.ts

@@ -20,7 +20,8 @@ export const currentUser = computed<UserLogin | undefined>(() => {
   return users.value[0]
 })
 
-export const currentServer = computed<string>(() => currentUser.value?.server || DEFAULT_SERVER)
+export const publicServer = ref(DEFAULT_SERVER)
+export const currentServer = computed<string>(() => currentUser.value?.server || publicServer.value)
 
 export const useUsers = () => users
 
@@ -40,7 +41,11 @@ export async function loginTo(user?: Omit<UserLogin, 'account'> & { account?: Ac
     accessToken: user?.token,
   })
 
-  if (user?.token) {
+  if (!user?.token) {
+    publicServer.value = user?.server || DEFAULT_SERVER
+  }
+
+  else {
     try {
       const me = await masto.accounts.verifyCredentials()
       user.account = me

pages/[...permalink].vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { parseURL } from 'ufo'
+
+definePageMeta({
+  middleware: async (to) => {
+    let permalink = Array.isArray(to.params.permalink)
+      ? to.params.permalink.join('/')
+      : to.params.permalink
+
+    if (!permalink.startsWith('http'))
+      permalink = `https://${permalink}`
+
+    if (!currentUser.value) {
+      const { host, pathname } = parseURL(permalink)
+      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 {
+        path: getStatusPath(statuses[0]),
+        state: {
+          status: statuses[0] as any,
+        },
+      }
+    }
+    if (accounts[0])
+      return getAccountPath(accounts[0])
+
+    return '/home'
+  },
+})
+</script>
+
+<template>
+  <div />
+</template>

types/index.ts

@@ -12,7 +12,7 @@ export interface AppInfo {
 
 export interface UserLogin {
   server: string
-  token: string
+  token?: string
   account: AccountCredentials
 }