fix merge, change likes cols to 2

Author: zeucapua

app/components/Package/LikeCard.vue

@@ -5,6 +5,8 @@ const props = defineProps<{
   packageUrl: string
 }>()
 
+const compactNumberFormatter = useCompactNumberFormatter()
+
 function extractPackageFromRef(ref: string) {
   const { pkg } = /https:\/\/npmx.dev\/package\/(?<pkg>.*)/.exec(ref).groups
   return pkg
@@ -72,7 +74,7 @@ const likeAction = async () => {
   <NuxtLink :to="packageRoute(name)">
     <BaseCard class="group font-mono flex justify-between">
       {{ name }}
-      <div class="flex items-center gap-4">
+      <div class="flex items-center gap-4 justify-between">
         <ClientOnly>
           <TooltipApp
             :text="likesData?.userHasLiked ? $t('package.likes.unlike') : $t('package.likes.like')"
@@ -98,11 +100,13 @@ const likeAction = async () => {
                 class="w-4 h-4"
                 aria-hidden="true"
               />
-              <span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
+              <span>{{
+                compactNumberFormatter.format(likesData?.totalLikes ?? 0, { decimals: 1 })
+              }}</span>
             </button>
           </TooltipApp>
         </ClientOnly>
-        <p class="transition-transform duration-150 group-hover:rotate-45 pt-1">↗</p>
+        <p class="transition-transform duration-150 group-hover:rotate-45 pb-1">↗</p>
       </div>
     </BaseCard>
   </NuxtLink>

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

@@ -145,7 +145,9 @@ defineOgImageComponent('Default', {
 
       <!-- Display Profile -->
       <div v-else class="flex flex-col flex-wrap gap-4">
-        <h1 class="font-mono text-2xl sm:text-3xl font-medium">{{ profile.displayName }}</h1>
+        <h1 v-if="profile.displayName" class="font-mono text-2xl sm:text-3xl font-medium">
+          {{ profile.displayName }}
+        </h1>
         <p v-if="profile.description">{{ profile.description }}</p>
         <div class="flex gap-4 items-center font-mono text-sm">
           <h2>@{{ handle }}</h2>
@@ -184,7 +186,7 @@ defineOgImageComponent('Default', {
       <div v-else-if="status === 'error'">
         <p>Error</p>
       </div>
-      <div v-else class="grid grid-cols-1 lg:grid-cols-3 gap-4">
+      <div v-else-if="likesData.likes.records" class="grid grid-cols-1 lg:grid-cols-2 gap-4">
         <PackageLikeCard
           v-if="likesData.likes.records"
           v-for="like in likesData.likes.records"

server/api/auth/atproto.get.ts

@@ -15,6 +15,8 @@ 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'
+
 export default defineEventHandler(async event => {
   const config = useRuntimeConfig(event)
   if (!config.sessionPassword) {
@@ -81,8 +83,12 @@ export default defineEventHandler(async event => {
       try {
         const state = decodeOAuthState(event, result.state)
         const profile = await getMiniProfile(result.session)
+        const npmxProfile = await getNpmxProfile(query.handle as string, result.session)
 
-        await session.update({ public: profile })
+        await session.update({
+          public: profile,
+          profile: npmxProfile,
+        })
         return sendRedirect(event, state.redirectPath)
       } catch (error) {
         // If we are unable to cleanly handle the callback, meaning that the
@@ -118,15 +124,6 @@ type OAuthStateData = {
   redirectPath: string
 }
 
-  const miniDocResponse = await fetch(
-    `https://${SLINGSHOT_HOST}/xrpc/blue.microcosm.identity.resolveMiniDoc?identifier=${agent.did}`,
-    { headers: { 'User-Agent': 'npmx' } },
-  )
-
-  if (miniDocResponse.ok) {
-    const miniDoc: PublicUserSession = await miniDocResponse.json()
-    const OAUTH_REQUEST_COOKIE_PREFIX = 'atproto_oauth_req'
-
 /**
  * This function encodes the OAuth state by generating a random SID, storing it
  * in a cookie, and returning a JSON string containing the original state and
@@ -175,46 +172,6 @@ function generateRandomHexString(byteLength: number = 16): string {
   ).join('')
 }
 
-    // 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,
-      })
 /**
  * This function ensures that an oauth state was indeed encoded for the browser
  * session performing the oauth callback.
@@ -326,3 +283,35 @@ async function getAvatar(did: DidString, pds: string) {
   }
   return avatar
 }
+
+async function getNpmxProfile(handle: string, authSession: OAuthSession) {
+  const client = new Client(authSession)
+
+  // get existing npmx profile OR create a new one
+  const profileUri = `at://${client.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()
+    return profile
+  } else {
+    const profile = {
+      website: '',
+      displayName: handle,
+      description: '',
+    }
+
+    await client.createRecord(
+      {
+        $type: 'dev.npmx.actor.profile',
+        ...profile,
+      },
+      'self',
+    )
+
+    return profile
+  }
+}

server/utils/atproto/utils/likes.ts

@@ -290,7 +290,7 @@ export class PackageLikesUtils {
    * @returns
    */
   async getUserLikes(
-    miniDoc: blue.microcosm.identity.resolveMiniDoc.OutputBody,
+    miniDoc: blue.microcosm.identity.resolveMiniDoc.$OutputBody,
     limit: number = 10,
   ) {
     const client = new Client(miniDoc.pds, {
@@ -300,7 +300,10 @@ export class PackageLikesUtils {
       limit,
       repo: miniDoc.did,
     })
+    return result
+  }
 
+  /*
    * Gets the likes evolution for a package as daily {day, likes} points.
    * Fetches ALL backlinks via paginated constellation calls, decodes TID
    * timestamps from each rkey, and groups by day.