Merge pull request #5 from fatfingers23/feat/profile-page

extras

Author: zeucapua

app/pages/profile/[handle]/index.vue

@@ -4,11 +4,18 @@ import { updateProfile as updateProfileUtil } from '~/utils/atproto/profile'
 const route = useRoute('profile-handle')
 const handle = computed(() => route.params.handle)
 
-const { data: profile } = await useFetch<NPMXProfile>(() => `/api/social/profile/${handle.value}`, {
-  default: () => ({ displayName: handle.value, description: '', website: '' }),
-})
-
-if (!profile.value) {
+const { data: profile, error: profileError } = await useFetch<NPMXProfile>(
+  () => `/api/social/profile/${handle.value}`,
+  {
+    default: () => ({
+      displayName: handle.value,
+      description: '',
+      website: '',
+      recordExists: false,
+    }),
+  },
+)
+if (!profile.value || profileError.value?.statusCode === 404) {
   throw createError({
     statusCode: 404,
     statusMessage: $t('profile.not_found'),
@@ -46,6 +53,7 @@ async function updateProfile() {
     displayName: displayNameInput.value,
     description: descriptionInput.value || undefined,
     website: websiteInput.value || undefined,
+    recordExists: true,
   }
 
   try {
@@ -70,6 +78,20 @@ async function updateProfile() {
 
 const { data: likes, status } = useProfileLikes(handle)
 
+const showInviteSection = computed(() => {
+  return (
+    profile.value.recordExists === false &&
+    status.value === 'success' &&
+    !likes.value?.records?.length &&
+    user.value?.handle !== handle.value
+  )
+})
+
+const inviteUrl = computed(() => {
+  const text = $t('profile.invite.compose_text', { handle: handle.value })
+  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 }),
@@ -175,6 +197,19 @@ defineOgImageComponent('Default', {
       <div v-else-if="likes?.records" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <PackageLikeCard v-for="like in likes.records" :packageUrl="like.value.subjectRef" />
       </div>
+
+      <!-- Invite section: shown when user does not have npmx profile or any like lexicons -->
+      <div
+        v-if="showInviteSection"
+        class="flex flex-col items-start gap-4 p-6 bg-bg-subtle border border-border rounded-lg"
+      >
+        <p class="text-fg-muted">
+          {{ $t('profile.invite.message') }}
+        </p>
+        <LinkBase variant="button-secondary" classicon="i-simple-icons:bluesky" :to="inviteUrl">
+          {{ $t('profile.invite.share_button') }}
+        </LinkBase>
+      </div>
     </section>
   </main>
 </template>

i18n/locales/en.json

@@ -160,7 +160,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a browser for the npm registry that's fast, modern, and open-source.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",

i18n/schema.json

@@ -486,6 +486,21 @@
         },
         "not_found_message": {
           "type": "string"
+        },
+        "invite": {
+          "type": "object",
+          "properties": {
+            "message": {
+              "type": "string"
+            },
+            "share_button": {
+              "type": "string"
+            },
+            "compose_text": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
         }
       },
       "additionalProperties": false

lexicons/blue/microcosm/repo/get-record-by-uri.ts

@@ -159,7 +159,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a fast, modern browser for the npm registry.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",

lunaria/files/en-GB.json

@@ -159,7 +159,12 @@
     "seo_title": "{handle} - npmx",
     "seo_description": "npmx profile by {handle}",
     "not_found": "Profile Not Found",
-    "not_found_message": "The profile for {handle} could not be found."
+    "not_found_message": "The profile for {handle} could not be found.",
+    "invite": {
+      "message": "It doesn't look like they're using npmx... yet. Want to tell them about it?",
+      "share_button": "Share on Bluesky",
+      "compose_text": "Hey {'@'}{handle}! Have you checked out npmx.dev yet? It's a fast, modern browser for the npm registry.\nhttps://npmx.dev"
+    }
   },
   "package": {
     "not_found": "Package Not Found",

lunaria/files/en-US.json

@@ -6,16 +6,17 @@ import { SLINGSHOT_HOST } from '#shared/utils/constants'
 import { useServerSession } from '#server/utils/server-session'
 import { handleApiError } from '#server/utils/error-handler'
 import type { DidString } from '@atproto/lex'
-import { Client } from '@atproto/lex'
-import * as com from '#shared/types/lexicons/com'
+import { Client, isAtUriString } from '@atproto/lex'
 import * as app from '#shared/types/lexicons/app'
+import * as blue from '#shared/types/lexicons/blue'
 import { isAtIdentifierString } from '@atproto/lex'
 import { scope } from '#server/utils/atproto/oauth'
 import { UNSET_NUXT_SESSION_PASSWORD } from '#shared/utils/constants'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
 
 const OAUTH_REQUEST_COOKIE_PREFIX = 'atproto_oauth_req'
+const slingshotClient = new Client({ service: `https://${SLINGSHOT_HOST}` })
 
 export default defineEventHandler(async event => {
   const config = useRuntimeConfig(event)
@@ -224,8 +225,7 @@ function decodeOAuthState(event: H3Event, state: string | null): OAuthStateData
  * @returns An object containing the user's DID, handle, PDS, and avatar URL (if available)
  */
 async function getMiniProfile(authSession: OAuthSession) {
-  const client = new Client({ service: `https://${SLINGSHOT_HOST}` })
-  const response = await client.xrpcSafe(com['bad-example'].identity.resolveMiniDoc, {
+  const response = await slingshotClient.xrpcSafe(blue.microcosm.identity.resolveMiniDoc, {
     headers: { 'User-Agent': 'npmx' },
     params: { identifier: authSession.did },
   })
@@ -289,16 +289,17 @@ async function getNpmxProfile(handle: string, authSession: OAuthSession) {
 
   // get existing npmx profile OR create a new one
   const profileUri = `at://${client.did}/dev.npmx.actor.profile/self`
+  if (!isAtUriString(profileUri)) {
+    throw new Error(`Invalid at-uri: ${profileUri}`)
+  }
 
-  // TODO: update with safe client rpc, see `getMiniProfile` response variable
-  const profileResponse = await fetch(
-    `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.repo.getRecordByUri?at_uri=${encodeURIComponent(profileUri)}`,
-    { headers: { 'User-Agent': 'npmx' }, signal: AbortSignal.timeout(5_000) },
-  )
+  const profileResult = await slingshotClient.xrpcSafe(blue.microcosm.repo.getRecordByUri, {
+    headers: { 'User-Agent': 'npmx' },
+    params: { at_uri: profileUri },
+  })
 
-  if (profileResponse.ok) {
-    const profile = await profileResponse.json()
-    return profile
+  if (profileResult.success) {
+    return profileResult.body.value
   } else {
     const profile = {
       website: '',

server/api/auth/atproto.get.ts

@@ -1,4 +1,7 @@
-import type { MiniDoc, NPMXProfile } from '~~/shared/types/social'
+import type { MiniDoc, NPMXProfile } from '#shared/types/social'
+import * as blue from '#shared/types/lexicons/blue'
+import * as dev from '#shared/types/lexicons/dev'
+import { Client, isAtIdentifierString, isAtUriString } from '@atproto/lex'
 
 //Cache keys and helpers
 const CACHE_PREFIX = 'atproto-profile:'
@@ -12,10 +15,11 @@ const CACHE_MAX_AGE = CACHE_MAX_AGE_ONE_MINUTE * 5
  */
 export class ProfileUtils {
   private readonly cache: CacheAdapter
-  // TODO: create Slingshot client (like Constellation class)
+  private readonly slingshotClient: Client
 
   constructor() {
     this.cache = getCacheAdapter('generic')
+    this.slingshotClient = new Client({ service: `https://${SLINGSHOT_HOST}` })
   }
 
   private async slingshotMiniDoc(handle: string) {
@@ -26,20 +30,28 @@ export class ProfileUtils {
     if (cachedMiniDoc) {
       miniDoc = cachedMiniDoc
     } else {
-      const resolveUrl = `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.identity.resolveMiniDoc?identifier=${encodeURIComponent(handle)}`
-      const response = await fetch(resolveUrl, {
+      if (!isAtIdentifierString(handle)) {
+        throw createError({
+          status: 400,
+          message: `Invalid at-identifier: ${handle}`,
+        })
+      }
+
+      const response = await this.slingshotClient.xrpcSafe(blue.microcosm.identity.resolveMiniDoc, {
         headers: { 'User-Agent': 'npmx' },
+        params: { identifier: handle },
       })
-      if (!response.ok) {
+      if (!response.success) {
+        // Not always, but usually this will mean the profile cannot be found
+        // and can be assumed most of the time it does not exists
         throw createError({
-          status: response.status,
+          status: 404,
           message: `Failed to resolve MiniDoc for ${handle}`,
         })
       }
-      const value = (await response.json()) as MiniDoc
 
-      miniDoc = value
-      await this.cache.set(miniDocKey, value, CACHE_MAX_AGE)
+      miniDoc = response.body
+      await this.cache.set(miniDocKey, miniDoc, CACHE_MAX_AGE)
     }
 
     return miniDoc
@@ -60,16 +72,29 @@ export class ProfileUtils {
       profile = cachedProfile
     } else {
       const profileUri = `at://${miniDoc.did}/dev.npmx.actor.profile/self`
-      const response = await fetch(
-        `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.repo.getRecordByUri?at_uri=${profileUri}`,
-        {
-          headers: { 'User-Agent': 'npmx' },
-        },
-      )
-      if (response.ok) {
-        const { value } = (await response.json()) as { value: NPMXProfile }
-        profile = value
+      if (!isAtUriString(profileUri)) {
+        throw new Error(`Invalid at-uri: ${profileUri}`)
+      }
+
+      const response = await this.slingshotClient.xrpcSafe(blue.microcosm.repo.getRecordByUri, {
+        headers: { 'User-Agent': 'npmx' },
+        params: { at_uri: profileUri },
+      })
+
+      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)
+      } else {
+        if (response.error === 'RecordNotFound') {
+          return {
+            recordExists: false,
+            displayName: miniDoc.handle,
+            description: '',
+            website: '',
+          }
+        }
+        throw new Error(`Failed to fetch profile: ${response.error}`)
       }
     }
 

server/utils/atproto/utils/profile.ts

@@ -27,4 +27,6 @@ export type NPMXProfile = {
   displayName: string
   website?: string
   description?: string
+  // If the atproto record exists for the profile
+  recordExists: boolean
 }