feat: profile page

app/components/Header/AuthModal.client.vue

@@ -2,6 +2,8 @@
 import { useAtproto } from '~/composables/atproto/useAtproto'
 import { authRedirect } from '~/utils/atproto/helpers'
 
+const authModal = useModal('auth-modal')
+
 const handleInput = shallowRef('')
 const route = useRoute()
 const { user, logout } = useAtproto()
@@ -33,12 +35,27 @@
           </p>
         </div>
       </div>
-      <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="logout"
-      >
-        {{ $t('auth.modal.disconnect') }}
-      </button>
+
+      <div class="flex flex-col space-y-4">
+        <NuxtLink
+          :to="{ name: 'profile-handle', params: { handle: user.handle } }"
+          :prefetch-on="prefetch ? 'visibility' : 'interaction'"
+        >
+          <button
+            class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+            @click="authModal.close()"
+          >
+            Profile
+          </button>
+        </NuxtLink>
+
+        <button
+          class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
+          @click="logout"
+        >
+          {{ $t('auth.modal.disconnect') }}
+        </button>
+      </div>
     </div>
 
     <!-- Disconnected state -->

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

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { debounce } from 'perfect-debounce'
+import { normalizeSearchParam } from '#shared/utils/url'
+
+const route = useRoute('/profile/[handle]')
+const router = useRouter()
+
+const handle = computed(() => route.params.handle)
+
+const { data: profile }: { data?: NPMXProfile } = useFetch(
+  () => `/api/social/profile/${handle.value}`,
+  {
+    default: () => ({ profile: { displayName: handle.value } }),
+    server: false,
+  },
+)
+
+useSeoMeta({
+  title: () => `${handle.value} - npmx`,
+  description: () => `npmx profile by ${handle.value}`,
+})
+
+/**
+defineOgImageComponent('Default', {
+  title: () => `~${username.value}`,
+  description: () => (results.value ? `${results.value.total} packages` : 'npm user profile'),
+  primaryColor: '#60a5fa',
+})
+**/
+</script>
+
+<template>
+  <main class="container flex-1 flex flex-col py-8 sm:py-12 w-full">
+    <!-- Header -->
+    <header class="mb-8 pb-8 border-b border-border">
+      <div class="flex flex-wrap items-center gap-4">
+        <div>
+          <h1 class="font-mono text-2xl sm:text-3xl font-medium">{{ profile.displayName }}</h1>
+          <h2>@{{ handle }}</h2>
+          <p v-if="profile.description">{{ profile.description }}</p>
+        </div>
+      </div>
+    </header>
+
+    <!-- Empty state (no packages found for user) -->
+    <div class="flex-1 flex items-center justify-center">
+      <div class="text-center">
+        <p class="text-fg-muted font-mono">
+          {{ $t('user.page.no_packages') }} <span class="text-fg">~{{ handle }}</span>
+        </p>
+        <p class="text-fg-subtle text-sm mt-2">{{ $t('user.page.no_packages_hint') }}</p>
+      </div>
+    </div>
+  </main>
+</template>

lexicons/dev/npmx/actor/profile.json

@@ -0,0 +1,37 @@
+{
+  "lexicon": 1,
+  "id": "dev.npmx.actor.profile",
+  "defs": {
+    "main": {
+      "key": "literal:self",
+      "type": "record",
+      "record": {
+        "type": "object",
+        "properties": {
+          "avatar": {
+            "type": "blob",
+            "accept": ["image/png", "image/jpeg"],
+            "maxSize": 1000000,
+            "description": "AKA, 'profile picture'"
+          },
+          "website": {
+            "type": "string",
+            "format": "uri"
+          },
+          "description": {
+            "type": "string",
+            "maxLength": 2560,
+            "description": "Free-form profile description text.",
+            "maxGraphemes": 256
+          },
+          "displayName": {
+            "type": "string",
+            "maxLength": 640,
+            "maxGraphemes": 64
+          }
+        }
+      },
+      "description": "A declaration of an npmx account profile."
+    }
+  }
+}

server/api/auth/atproto.get.ts

@@ -119,21 +119,57 @@ export default defineEventHandler(async event => {
   const agent = new Agent(authSession)
   event.context.agent = agent
 
-  const response = await fetch(
-    `https://${SLINGSHOT_HOST}/xrpc/com.bad-example.identity.resolveMiniDoc?identifier=${agent.did}`,
+  const miniDocResponse = await fetch(
+    `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.identity.resolveMiniDoc?identifier=${agent.did}`,
     { headers: { 'User-Agent': 'npmx' } },
   )
-  if (response.ok) {
-    const miniDoc: PublicUserSession = await response.json()
+
+  if (miniDocResponse.ok) {
+    const miniDoc: PublicUserSession = await miniDocResponse.json()
 
     let avatar: string | undefined = await getAvatar(authSession.did, miniDoc.pds)
 
-    await session.update({
-      public: {
-        ...miniDoc,
-        avatar,
-      },
-    })
+    // get existing npmx profile OR create a new one
+    const profileUri = `at://${agent.did}/dev.npmx.actor.profile/self`
+    const profileResponse = await fetch(
+      `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.repo.getRecordByUri?at_uri=${profileUri}`,
+      { headers: { 'User-Agent': 'npmx' } },
+    )
+
+    if (profileResponse.ok) {
+      const profile = await profileResponse.json()
+      await session.update({
+        public: {
+          ...miniDoc,
+          avatar,
+        },
+        profile: profile.value,
+      })
+    } else {
+      const profile = {
+        website: '',
+        displayName: miniDoc.handle,
+        description: '',
+      }
+
+      await agent.com.atproto.repo.createRecord({
+        repo: miniDoc.handle,
+        collection: 'dev.npmx.actor.profile',
+        rkey: 'self',
+        record: {
+          $type: 'dev.npmx.actor.profile',
+          ...profile,
+        },
+      })
+
+      await session.update({
+        public: {
+          ...miniDoc,
+          avatar,
+        },
+        profile: profile,
+      })
+    }
   } else {
     //If slingshot fails we still want to set some key info we need.
     const pdsBase = (await authSession.getTokenInfo()).aud

server/api/social/profile/[...handle].get.ts

@@ -0,0 +1,14 @@
+export default defineEventHandler(async event => {
+  const handle = getRouterParam(event, 'handle')
+  if (!handle) {
+    throw createError({
+      status: 400,
+      message: 'handle not provided',
+    })
+  }
+
+  const profileUtil = new ProfileUtils()
+  const profile = await profileUtil.getProfile(handle)
+  console.log('ENDPOINT', { handle, profile })
+  return profile
+})

server/utils/atproto/oauth.ts

@@ -4,12 +4,12 @@ import { NodeOAuthClient, AtprotoDohHandleResolver } from '@atproto/oauth-client
 import { parse } from 'valibot'
 import { getOAuthLock } from '#server/utils/atproto/lock'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
-import { LIKES_SCOPE } from '#shared/utils/constants'
+import { LIKES_SCOPE, PROFILE_SCOPE } from '#shared/utils/constants'
 import { OAuthMetadataSchema } from '#shared/schemas/oauth'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
 // TODO: If you add writing a new record you will need to add a scope for it
-export const scope = `atproto ${LIKES_SCOPE}`
+export const scope = `atproto ${LIKES_SCOPE} ${PROFILE_SCOPE}`
 
 /**
  * Resolves a did to a handle via DoH or via the http website calls

server/utils/atproto/utils/profile.ts

@@ -0,0 +1,85 @@
+import type { MiniDoc, NPMXProfile } from '~~/shared/types/social'
+
+//Cache keys and helpers
+const CACHE_PREFIX = 'atproto-profile:'
+const CACHE_PROFILE_MINI_DOC = (handle: string) => `${CACHE_PREFIX}${handle}:minidoc`
+const CACHE_PROFILE_KEY = (did: string) => `${CACHE_PREFIX}${did}:profile`
+
+const CACHE_MAX_AGE = CACHE_MAX_AGE_ONE_MINUTE * 5
+
+/**
+ * Logic to handle and update profile queries
+ */
+export class ProfileUtils {
+  private readonly constellation: Constellation
+  private readonly cache: CacheAdapter
+
+  constructor() {
+    this.constellation = new Constellation(
+      // Passes in a fetch wrapped as cachedfetch since are already doing some heavy caching here
+      async <T = unknown>(
+        url: string,
+        options: Parameters<typeof $fetch>[1] = {},
+        _ttl?: number,
+      ): Promise<CachedFetchResult<T>> => {
+        const data = (await $fetch<T>(url, options)) as T
+        return { data, isStale: false, cachedAt: null }
+      },
+    )
+    this.cache = getCacheAdapter('generic')
+  }
+
+  private async slingshotMiniDoc(handle: string) {
+    const miniDocKey = CACHE_PROFILE_MINI_DOC(handle)
+    const cachedMiniDoc = await this.cache.get<MiniDoc>(miniDocKey)
+
+    let miniDoc
+    if (cachedMiniDoc) {
+      miniDoc = cachedMiniDoc
+    } else {
+      const resolveUrl = `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.identity.resolveMiniDoc?identifier=${encodeURIComponent(handle)}`
+      console.log({ resolveUrl })
+      const response = await fetch(resolveUrl, {
+        headers: { 'User-Agent': 'npmx' },
+      })
+      const value = (await response.json()) as MiniDoc
+
+      miniDoc = value
+      await this.cache.set(miniDocKey, value, CACHE_MAX_AGE)
+    }
+    console.log({ miniDoc })
+
+    return miniDoc
+  }
+
+  /**
+   * Gets an npmx profile based on a handle
+   * @param handle
+   * @returns
+   */
+  async getProfile(handle: string) {
+    const profileKey = CACHE_PROFILE_KEY(handle)
+    const cachedProfile = await this.cache.get<NPMXProfile>(profileKey)
+
+    let profile: NPMXProfile | undefined
+    if (cachedProfile) {
+      profile = cachedProfile
+    } else {
+      const miniDoc = await this.slingshotMiniDoc(handle)
+      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
+        await this.cache.set(profileKey, profile, CACHE_MAX_AGE)
+      }
+    }
+
+    return profile
+  }
+}

shared/types/social.ts

@@ -7,3 +7,24 @@ export type PackageLikes = {
   // If the logged in user has liked the package, false if not logged in
   userHasLiked: boolean
 }
+
+/**
+ * A shortened DID Doc for AT Protocol accounts
+ * Returned by Slingshot's `/xrpc/blue.microcosm.identity.resolveMiniDoc` endpoint
+ */
+export type MiniDoc = {
+  did: string
+  handle: string
+  pds: string
+  signing_key: string
+}
+
+/**
+ * NPMX Profile details
+ * TODO: avatar
+ */
+export type NPMXProfile = {
+  displayName: string
+  website?: string
+  description?: string
+}

shared/types/userSession.ts

@@ -7,6 +7,11 @@ export interface UserServerSession {
     pds: string
     avatar?: string
   }
+  profile: {
+    website?: string
+    description?: string
+    displayName?: string
+  }
   // Only to be used in the atproto session and state stores
   // Will need to change to Record<string, T> and add a current logged in user if we ever want to support
   // multiple did logins per server session

shared/utils/constants.ts

@@ -43,6 +43,7 @@ export const PACKAGE_SUBJECT_REF = (packageName: string) =>
   `https://npmx.dev/package/${packageName}`
 // OAuth scopes as we add new ones we need to check these on certain actions. If not redirect the user to login again to upgrade the scopes
 export const LIKES_SCOPE = `repo:${dev.npmx.feed.like.$nsid}`
+export const PROFILE_SCOPE = `repo:${dev.npmx.actor.profile.$nsid}`
 
 // Theming
 export const ACCENT_COLORS = {