feat: package likes (#712)

Co-authored-by: Daniel Roe <daniel@roe.dev>

Author: fatfingers23

app/components/Header/AccountMenu.client.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useAtproto } from '~/composables/atproto/useAtproto'
 import { useModal } from '~/composables/useModal'
 
 const {

app/components/Header/AuthModal.client.vue

@@ -1,37 +1,22 @@
 <script setup lang="ts">
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { authRedirect } from '~/utils/atproto/helpers'
+
 const handleInput = shallowRef('')
 
 const { user, logout } = useAtproto()
 
 async function handleBlueskySignIn() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://bsky.social' },
-    },
-    { external: true },
-  )
+  await authRedirect('https://bsky.social')
 }
 
 async function handleCreateAccount() {
-  await navigateTo(
-    {
-      path: '/api/auth/atproto',
-      query: { handle: 'https://npmx.social', create: 'true' },
-    },
-    { external: true },
-  )
+  await authRedirect('https://npmx.social', true)
 }
 
 async function handleLogin() {
   if (handleInput.value) {
-    await navigateTo(
-      {
-        path: '/api/auth/atproto',
-        query: { handle: handleInput.value },
-      },
-      { external: true },
-    )
+    await authRedirect(handleInput.value)
   }
 }
 </script>

app/components/Header/MobileMenu.client.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap'
+import { useAtproto } from '~/composables/atproto/useAtproto'
 
 const isOpen = defineModel<boolean>('open', { default: false })
 

app/composables/useAtproto.ts app/composables/atproto/useAtproto.tsapp/composables/useAtproto.ts renamed to app/composables/atproto/useAtproto.ts

@@ -1,4 +1,4 @@
-export function useAtproto() {
+export const useAtproto = createSharedComposable(function useAtproto() {
   const {
     data: user,
     pending,
@@ -17,4 +17,4 @@ export function useAtproto() {
   }
 
   return { user, pending, logout }
-}
+})

app/pages/package/[...package].vue

@@ -12,6 +12,9 @@ import { areUrlsEquivalent } from '#shared/utils/url'
 import { isEditableElement } from '~/utils/input'
 import { formatBytes } from '~/utils/formatters'
 import { NuxtLink } from '#components'
+import { useModal } from '~/composables/useModal'
+import { useAtproto } from '~/composables/atproto/useAtproto'
+import { togglePackageLike } from '~/utils/atproto/likes'
 
 definePageMeta({
   name: 'package',
@@ -356,6 +359,54 @@ const canonicalUrl = computed(() => {
   return requestedVersion.value ? `${base}/v/${requestedVersion.value}` : base
 })
 
+//atproto
+// TODO: Maybe set this where it's not loaded here every load?
+const { user } = useAtproto()
+
+const authModal = useModal('auth-modal')
+
+const { data: likesData } = useFetch(() => `/api/social/likes/${packageName.value}`, {
+  default: () => ({ totalLikes: 0, userHasLiked: false }),
+  server: false,
+})
+
+const isLikeActionPending = ref(false)
+
+const likeAction = async () => {
+  if (user.value?.handle == null) {
+    authModal.open()
+    return
+  }
+
+  if (isLikeActionPending.value) return
+
+  const currentlyLiked = likesData.value?.userHasLiked ?? false
+  const currentLikes = likesData.value?.totalLikes ?? 0
+
+  // Optimistic update
+  likesData.value = {
+    totalLikes: currentlyLiked ? currentLikes - 1 : currentLikes + 1,
+    userHasLiked: !currentlyLiked,
+  }
+
+  isLikeActionPending.value = true
+
+  const result = await togglePackageLike(packageName.value, currentlyLiked, user.value?.handle)
+
+  isLikeActionPending.value = false
+
+  if (result.success) {
+    // Update with server response
+    likesData.value = result.data
+  } else {
+    // Revert on error
+    likesData.value = {
+      totalLikes: currentLikes,
+      userHasLiked: currentlyLiked,
+    }
+  }
+}
+
 useHead({
   link: [{ rel: 'canonical', href: canonicalUrl }],
 })
@@ -497,10 +548,31 @@ defineOgImageComponent('Package', {
               :is-binary="isBinaryOnly"
               class="self-baseline ms-1 sm:ms-2"
             />
+
+            <!-- Package likes -->
+            <button
+              @click="likeAction"
+              type="button"
+              class="inline-flex items-center gap-1.5 font-mono text-sm text-fg hover:text-fg-muted transition-colors duration-200"
+              :title="$t('package.links.like')"
+            >
+              <span
+                :class="
+                  likesData?.userHasLiked
+                    ? 'i-lucide-heart-minus text-red-500'
+                    : 'i-lucide-heart-plus'
+                "
+                class="w-4 h-4"
+                aria-hidden="true"
+              />
+              <span>{{ formatCompactNumber(likesData?.totalLikes ?? 0, { decimals: 1 }) }}</span>
+            </button>
+
             <template #fallback>
               <div class="flex items-center gap-1.5 self-baseline ms-1 sm:ms-2">
                 <SkeletonBlock class="w-8 h-5 rounded" />
                 <SkeletonBlock class="w-12 h-5 rounded" />
+                <SkeletonBlock class="w-5 h-5 rounded" />
               </div>
             </template>
           </ClientOnly>

app/utils/atproto/helpers.ts

@@ -0,0 +1,30 @@
+import type { FetchError } from 'ofetch'
+import type { LocationQueryRaw } from 'vue-router'
+
+/**
+ * Redirect user to ATProto authentication
+ */
+export async function authRedirect(identifier: string, create: boolean = false) {
+  let query: LocationQueryRaw = { handle: identifier }
+  if (create) {
+    query = { ...query, create: 'true' }
+  }
+  await navigateTo(
+    {
+      path: '/api/auth/atproto',
+      query,
+    },
+    { external: true },
+  )
+}
+
+export async function handleAuthError(
+  fetchError: FetchError,
+  userHandle?: string | null,
+): Promise<never> {
+  const errorMessage = fetchError?.data?.message
+  if (errorMessage === ERROR_NEED_REAUTH && userHandle) {
+    await authRedirect(userHandle)
+  }
+  throw fetchError
+}

app/utils/atproto/likes.ts

@@ -0,0 +1,60 @@
+import { FetchError } from 'ofetch'
+import { handleAuthError } from '~/utils/atproto/helpers'
+import type { PackageLikes } from '#shared/types/social'
+
+export type LikeResult = { success: true; data: PackageLikes } | { success: false; error: Error }
+
+/**
+ * Like a package via the API
+ */
+export async function likePackage(
+  packageName: string,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  try {
+    const result = await $fetch<PackageLikes>('/api/social/like', {
+      method: 'POST',
+      body: { packageName },
+    })
+    return { success: true, data: result }
+  } catch (e) {
+    if (e instanceof FetchError) {
+      await handleAuthError(e, userHandle)
+    }
+    return { success: false, error: e as Error }
+  }
+}
+
+/**
+ * Unlike a package via the API
+ */
+export async function unlikePackage(
+  packageName: string,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  try {
+    const result = await $fetch<PackageLikes>('/api/social/like', {
+      method: 'DELETE',
+      body: { packageName },
+    })
+    return { success: true, data: result }
+  } catch (e) {
+    if (e instanceof FetchError) {
+      await handleAuthError(e, userHandle)
+    }
+    return { success: false, error: e as Error }
+  }
+}
+
+/**
+ * Toggle like status for a package
+ */
+export async function togglePackageLike(
+  packageName: string,
+  currentlyLiked: boolean,
+  userHandle?: string | null,
+): Promise<LikeResult> {
+  return currentlyLiked
+    ? unlikePackage(packageName, userHandle)
+    : likePackage(packageName, userHandle)
+}

modules/cache.ts

@@ -1,3 +1,4 @@
+import process from 'node:process'
 import { defineNuxtModule } from 'nuxt/kit'
 import { provider } from 'std-env'
 
@@ -27,6 +28,11 @@ export default defineNuxtModule({
         ...nitroConfig.storage[FETCH_CACHE_STORAGE_BASE],
         driver: 'vercel-runtime-cache',
       }
+
+      const env = process.env.VERCEL_ENV
+      nitroConfig.storage.atproto = {
+        driver: env === 'production' ? 'vercel-kv' : 'vercel-runtime-cache',
+      }
     })
   },
 })

nuxt.config.ts

@@ -92,6 +92,7 @@ export default defineNuxtConfig({
     // never cache
     '/search': { isr: false, cache: false },
     '/api/auth/**': { isr: false, cache: false },
+    '/api/social/**': { isr: false, cache: false },
     // infinite cache (versioned - doesn't change)
     '/package-code/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
     '/package-docs/:pkg/v/**': { isr: true, cache: { maxAge: 365 * 24 * 60 * 60 } },
@@ -151,6 +152,10 @@ export default defineNuxtConfig({
         driver: 'fsLite',
         base: './.cache/fetch',
       },
+      'atproto': {
+        driver: 'fsLite',
+        base: './.cache/atproto',
+      },
     },
     typescript: {
       tsConfig: {
@@ -253,6 +258,11 @@ export default defineNuxtConfig({
         'virtua/vue',
         'semver',
         'validate-npm-package-name',
+        '@atproto/lex',
+        '@atproto/lex-data',
+        '@atproto/lex-json',
+        '@atproto/lex-schema',
+        '@atproto/lex-client',
       ],
     },
   },

server/api/auth/atproto.get.ts

@@ -1,6 +1,7 @@
 import { Agent } from '@atproto/api'
 import { NodeOAuthClient } from '@atproto/oauth-client-node'
 import { createError, getQuery, sendRedirect } from 'h3'
+import { getOAuthLock } from '#server/utils/atproto/lock'
 import { useOAuthStorage } from '#server/utils/atproto/storage'
 import { SLINGSHOT_HOST } from '#shared/utils/constants'
 import { useServerSession } from '#server/utils/server-session'
@@ -11,7 +12,7 @@ export default defineEventHandler(async event => {
   if (!config.sessionPassword) {
     throw createError({
       status: 500,
-      message: 'NUXT_SESSION_PASSWORD not set',
+      message: UNSET_NUXT_SESSION_PASSWORD,
     })
   }
 
@@ -24,6 +25,7 @@ export default defineEventHandler(async event => {
     stateStore,
     sessionStore,
     clientMetadata,
+    requestLock: getOAuthLock(),
   })
 
   if (!query.code) {