Add /@username routes for profile pages

https://codeberg.org/silverpill/mitra/issues/22

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
 ## [Unreleased]
 
+### Added
+
+- Added `/@username` routes for profile pages.
+
 ### Changed
 
 - Changed text on Ethereum page.

src/api/users.ts

@@ -187,6 +187,19 @@ export async function getCurrentUser(authToken: string): Promise<User | null> {
   return data
 }
 
+export async function lookupProfile(
+  authToken: string | null,
+  acct: string,
+): Promise<Profile> {
+  const url = `${BACKEND_URL}/api/v1/accounts/lookup`
+  const response = await http(url, { authToken, queryParams: { acct } })
+  const data = await response.json()
+  if (response.status !== 200) {
+    throw new Error(data.message)
+  }
+  return data
+}
+
 export async function getProfile(
   authToken: string | null,
   profileId: string,

src/router/index.ts

@@ -146,6 +146,12 @@ const routes: Array<RouteRecordRaw> = [
     component: SubscriptionsSettings,
     meta: { onlyAuthenticated: true },
   },
+  {
+    path: "/@:acct(.*)",
+    name: "profile-by-acct",
+    component: ProfileView,
+    meta: { },
+  },
   {
     path: "/:pathMatch(.*)*",
     redirect: { name: "home" },

src/views/Profile.vue

@@ -256,6 +256,7 @@ import {
 import { getReceivedSubscriptions } from "@/api/subscriptions-common"
 import {
   getProfile,
+  lookupProfile,
   Profile,
   ProfileField,
   ProfileWrapper,
@@ -296,10 +297,18 @@ let followListNextPageUrl = $ref<string | null>(null)
 onMounted(async () => {
   isLoading = true
   try {
-    const _profile = await getProfile(
+    let _profile
-      authToken,
+    if (route.params.acct) {
-      route.params.profileId as string,
+      _profile = await lookupProfile(
-    )
+        authToken,
+        route.params.acct as string,
+      )
+    } else {
+      _profile = await getProfile(
+        authToken,
+        route.params.profileId as string,
+      )
+    }
     profile = new ProfileWrapper(_profile)
   } catch (error: any) {
     if (error.message === "profile not found") {