fix: allow did in /profile urls as well as resolve a bug in first npmx profile create (#1806)

Author: fatfingers23

app/components/Header/AuthModal.client.vue

@@ -78,7 +78,7 @@ watch(user, async newUser => {
       <div class="flex flex-col space-y-4">
         <LinkBase
           variant="button-secondary"
-          :to="{ name: 'profile-handle', params: { handle: user.handle } }"
+          :to="{ name: 'profile-identity', params: { identity: user.handle } }"
           prefetch-on="interaction"
           class="w-full"
           @click="authModal.close()"

app/pages/profile/[handle]/index.vue app/pages/profile/[identity]/index.vueapp/pages/profile/[handle]/index.vue renamed to app/pages/profile/[identity]/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
 import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 
-const route = useRoute('profile-handle')
-const handle = computed(() => route.params.handle)
+const route = useRoute('profile-identity')
+const identity = computed(() => route.params.identity)
 
 const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
-  () => `/api/social/profile/${handle.value}`,
+  () => `/api/social/profile/${identity.value}`,
   {
     default: () => ({
-      displayName: handle.value,
+      displayName: identity.value,
       description: '',
       website: '',
       recordExists: false,
@@ -19,7 +19,7 @@ if (!profile.value || profileError.value?.statusCode === 404) {
   throw createError({
     statusCode: 404,
     statusMessage: $t('profile.not_found'),
-    message: $t('profile.not_found_message', { handle: handle.value }),
+    message: $t('profile.not_found_message', { handle: identity.value }),
   })
 }
 
@@ -53,11 +53,12 @@ async function updateProfile() {
     displayName: displayNameInput.value,
     description: descriptionInput.value || undefined,
     website: websiteInput.value || undefined,
+    handle: profile.value.handle,
     recordExists: true,
   }
 
   try {
-    const result = await updateProfileUtil(handle.value, {
+    const result = await updateProfileUtil(identity.value, {
       displayName: displayNameInput.value,
       description: descriptionInput.value || undefined,
       website: websiteInput.value || undefined,
@@ -76,25 +77,25 @@ async function updateProfile() {
   }
 }
 
-const { data: likes, status } = useProfileLikes(handle)
+const { data: likes, status } = useProfileLikes(identity)
 
 const showInviteSection = computed(() => {
   return (
     profile.value.recordExists === false &&
     status.value === 'success' &&
     !likes.value?.records?.length &&
-    user.value?.handle !== handle.value
+    user.value?.handle !== profile.value.handle
   )
 })
 
 const inviteUrl = computed(() => {
-  const text = $t('profile.invite.compose_text', { handle: handle.value })
+  const text = $t('profile.invite.compose_text', { handle: profile.value.handle })
   return `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`
 })
 
 useSeoMeta({
-  title: () => $t('profile.seo_title', { handle: handle.value }),
-  description: () => $t('profile.seo_description', { handle: handle.value }),
+  title: () => $t('profile.seo_title', { handle: identity.value }),
+  description: () => $t('profile.seo_description', { handle: identity.value }),
 })
 
 /**
@@ -143,7 +144,7 @@ defineOgImageComponent('Default', {
           />
         </label>
         <div class="flex gap-4 items-center font-mono text-sm">
-          <h2>@{{ handle }}</h2>
+          <h2>@{{ profile?.handle }}</h2>
           <ButtonBase @click="isEditing = false">
             {{ $t('common.cancel') }}
           </ButtonBase>
@@ -164,13 +165,13 @@ defineOgImageComponent('Default', {
         </h1>
         <p v-if="profile.description">{{ profile.description }}</p>
         <div class="flex gap-4 items-center font-mono text-sm">
-          <h2>@{{ handle }}</h2>
+          <h2>@{{ profile.handle ?? identity }}</h2>
           <LinkBase v-if="profile.website" :to="profile.website" classicon="i-lucide:link">
             {{ profile.website }}
           </LinkBase>
           <ButtonBase
             @click="isEditing = true"
-            :class="user?.handle === handle ? '' : 'invisible'"
+            :class="user?.handle === profile?.handle ? '' : 'invisible'"
             class="hidden sm:inline-flex"
           >
             {{ $t('common.edit') }}

server/api/auth/atproto.get.ts

@@ -302,9 +302,7 @@ async function getNpmxProfile(handle: string, authSession: OAuthSession) {
     return profileResult.body.value
   } else {
     const profile = {
-      website: '',
       displayName: handle,
-      description: '',
     }
 
     await client.createRecord(

server/utils/atproto/utils/profile.ts

@@ -82,16 +82,23 @@ export class ProfileUtils {
       })
 
       if (response.success) {
-        const validationResult = dev.npmx.actor.profile.$validate(response.body.value)
-        profile = { recordExists: true, ...validationResult }
-        await this.cache.set(profileKey, profile, CACHE_MAX_AGE)
+        try {
+          const validationResult = dev.npmx.actor.profile.$validate(response.body.value)
+          profile = { recordExists: true, handle: miniDoc.handle, ...validationResult }
+          await this.cache.set(profileKey, profile, CACHE_MAX_AGE)
+        } catch (error) {
+          //Most new profiles will error because of a bug of setting the website to a non uri string
+          console.error('[profile-get]', error)
+          profile = { recordExists: true, handle: miniDoc.handle, displayName: miniDoc.handle }
+        }
       } else {
         if (response.error === 'RecordNotFound') {
           return {
             recordExists: false,
             displayName: miniDoc.handle,
             description: '',
             website: '',
+            handle: miniDoc.handle,
           }
         }
         throw new Error(`Failed to fetch profile: ${response.error}`)
@@ -104,6 +111,7 @@ export class ProfileUtils {
   async updateProfileCache(handle: string, profile: NPMXProfile): Promise<NPMXProfile | undefined> {
     const miniDoc = await this.slingshotMiniDoc(handle)
     const profileKey = CACHE_PROFILE_KEY(miniDoc.did)
+    profile.handle = miniDoc.handle
     await this.cache.set(profileKey, profile, CACHE_MAX_AGE)
     return profile
   }

shared/types/social.ts

@@ -29,4 +29,5 @@ export type NPMXProfile = {
   description?: string
   // If the atproto record exists for the profile
   recordExists: boolean
+  handle?: string
 }