feat: package likes

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.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/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',
@@ -352,6 +355,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 }],
 })
@@ -501,6 +552,24 @@ defineOgImageComponent('Package', {
             </template>
           </ClientOnly>
 
+          <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>
+
           <!-- Internal navigation: Docs + Code + Compare (hidden on mobile, shown in external links instead) -->
           <nav
             v-if="resolvedVersion"

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)
+}

nuxt.config.ts

@@ -168,6 +168,10 @@ export default defineNuxtConfig({
         driver: 'fsLite',
         base: './.cache/atproto-oauth/session',
       },
+      'generic-cache': {
+        driver: 'fsLite',
+        base: './.cache/generic',
+      },
     },
     typescript: {
       tsConfig: {
@@ -270,6 +274,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

@@ -10,7 +10,7 @@ export default defineEventHandler(async event => {
   if (!config.sessionPassword) {
     throw createError({
       status: 500,
-      message: 'NUXT_SESSION_PASSWORD not set',
+      message: UNSET_NUXT_SESSION_PASSWORD,
     })
   }
 

server/api/social/like.delete.ts

@@ -0,0 +1,41 @@
+import * as v from 'valibot'
+import { Client } from '@atproto/lex'
+import * as dev from '#shared/types/lexicons/dev'
+import { PackageLikeBodySchema } from '#shared/schemas/social'
+import { throwOnMissingOAuthScope } from '#server/utils/atproto/oauth'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInUsersDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInUsersDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  //Checks if the user has a scope to like packages
+  await throwOnMissingOAuthScope(oAuthSession, LIKES_SCOPE)
+
+  const body = v.parse(PackageLikeBodySchema, await readBody(event))
+
+  const likesUtil = new PackageLikesUtils()
+
+  const getTheUsersLikedRecord = await likesUtil.getTheUsersLikedRecord(
+    body.packageName,
+    loggedInUsersDid,
+  )
+
+  if (getTheUsersLikedRecord) {
+    const client = new Client(oAuthSession)
+
+    await client.delete(dev.npmx.feed.like, {
+      rkey: getTheUsersLikedRecord.rkey,
+    })
+    var result = await likesUtil.unlikeAPackageAndReturnLikes(body.packageName, loggedInUsersDid)
+    return result
+  }
+
+  console.warn(
+    `User ${loggedInUsersDid} tried to unlike a package ${body.packageName} but it was not liked by them.`,
+  )
+
+  return await likesUtil.getLikes(body.packageName, loggedInUsersDid)
+})

server/api/social/like.post.ts

@@ -0,0 +1,46 @@
+import * as v from 'valibot'
+import { Client } from '@atproto/lex'
+import * as dev from '#shared/types/lexicons/dev'
+import type { UriString } from '@atproto/lex'
+import { LIKES_SCOPE } from '#shared/utils/constants'
+import { PackageLikeBodySchema } from '#shared/schemas/social'
+import { throwOnMissingOAuthScope } from '~~/server/utils/atproto/oauth'
+
+export default eventHandlerWithOAuthSession(async (event, oAuthSession) => {
+  const loggedInUsersDid = oAuthSession?.did.toString()
+
+  if (!oAuthSession || !loggedInUsersDid) {
+    throw createError({ statusCode: 401, statusMessage: 'Unauthorized' })
+  }
+
+  //Checks if the user has a scope to like packages
+  await throwOnMissingOAuthScope(oAuthSession, LIKES_SCOPE)
+
+  const body = v.parse(PackageLikeBodySchema, await readBody(event))
+
+  const likesUtil = new PackageLikesUtils()
+
+  // Checks to see if the user has liked the package already
+  const likesResult = await likesUtil.getLikes(body.packageName, loggedInUsersDid)
+  if (likesResult.userHasLiked) {
+    return likesResult
+  }
+
+  const subjectRef = PACKAGE_SUBJECT_REF(body.packageName)
+  const client = new Client(oAuthSession)
+
+  const like = dev.npmx.feed.like.$build({
+    createdAt: new Date().toISOString(),
+    subjectRef: subjectRef as UriString,
+  })
+
+  const result = await client.create(dev.npmx.feed.like, like)
+  if (!result) {
+    throw createError({
+      status: 500,
+      message: 'Failed to create a like',
+    })
+  }
+
+  return await likesUtil.likeAPackageAndReturnLikes(body.packageName, loggedInUsersDid, result.uri)
+})

server/api/social/likes/[...pkg].get.ts

@@ -0,0 +1,12 @@
+export default eventHandlerWithOAuthSession(async (event, oAuthSession, _) => {
+  const packageName = getRouterParam(event, 'pkg')
+  if (!packageName) {
+    throw createError({
+      status: 400,
+      message: 'package name not provided',
+    })
+  }
+
+  const likesUtil = new PackageLikesUtils()
+  return await likesUtil.getLikes(packageName, oAuthSession?.did.toString())
+})