add TODOs, use LinkBase for profile website

Author: zeucapua

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

@@ -119,7 +119,7 @@ defineOgImageComponent('Default', {
         <div class="flex gap-4 items-center font-mono text-sm">
           <h2>@{{ handle }}</h2>
           <div class="link-subtle font-mono text-sm inline-flex items-center gap-1.5">
-            <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+            <span class="text-white i-carbon:link w-4 h-4" aria-hidden="true" />
             <input
               name="website"
               type="url"
@@ -151,16 +151,9 @@ defineOgImageComponent('Default', {
         <p v-if="profile.description">{{ profile.description }}</p>
         <div class="flex gap-4 items-center font-mono text-sm">
           <h2>@{{ handle }}</h2>
-          <a
-            v-if="profile.website"
-            :href="profile.website"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link-subtle font-mono text-sm inline-flex items-center gap-1.5"
-          >
-            <span class="i-carbon:link w-4 h-4" aria-hidden="true" />
+          <LinkBase v-if="profile.website" :to="profile.website" classicon="i-lucide:link">
             {{ profile.website }}
-          </a>
+          </LinkBase>
           <button
             v-if="user?.handle === handle"
             @click="isEditing = true"

server/api/auth/atproto.get.ts

@@ -289,6 +289,8 @@ 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`
+
+  // TODO: update with safe client rpc, see `getMiniProfile` response variable
   const profileResponse = await fetch(
     `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.repo.getRecordByUri?at_uri=${profileUri}`,
     { headers: { 'User-Agent': 'npmx' } },

server/api/social/profile/[identifier]/index.put.ts

@@ -1,8 +1,8 @@
 import { parse } from 'valibot'
 import { Client } from '@atproto/lex'
 import * as dev from '#shared/types/lexicons/dev'
-import type { NPMXProfile } from '~~/shared/types/social'
-import { ProfileEditBodySchema } from '~~/shared/schemas/social'
+import type { NPMXProfile } from '#shared/types/social'
+import { ProfileEditBodySchema } from '#shared/schemas/social'
 
 export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
   const loggedInUsersDid = oAuthSession?.did.toString()
@@ -11,8 +11,7 @@ export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
     throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
   }
 
-  //Checks if the user has a scope to like packages
-  await throwOnMissingOAuthScope(oAuthSession, LIKES_SCOPE)
+  await throwOnMissingOAuthScope(oAuthSession, PROFILE_SCOPE)
 
   const body = parse(ProfileEditBodySchema, await readBody(event))
   const client = new Client(oAuthSession)

server/utils/atproto/utils/profile.ts

@@ -11,21 +11,10 @@ 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
+  // TODO: create Slingshot client (like Constellation class)
 
   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')
   }