feat: package likes (#712)

Co-authored-by: Daniel Roe <[e-mail]>

app/components/Header/AccountMenu.client.vue

···
 <script setup lang="ts">
+import { useAtproto } from '~/composables/atproto/useAtproto'
 import { useModal } from '~/composables/useModal'
 
 const {

app/components/Header/AuthModal.client.vue

···
 <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

···
 <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.ts

···
-export function useAtproto() {
+export const useAtproto = createSharedComposable(function useAtproto() {
   const {
     data: user,
     pending,
···
   }
 
   return { user, pending, logout }
-}
+})

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

···
 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',
···
   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 }],
 })
···
               :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

···
+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

···
+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

···
+import process from 'node:process'
 import { defineNuxtModule } from 'nuxt/kit'
 import { provider } from 'std-env'
 
···
       nitroConfig.storage[FETCH_CACHE_STORAGE_BASE] = {
         ...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

···
     // 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 } },
···
       'fetch-cache': {
         driver: 'fsLite',
         base: './.cache/fetch',
+      },
+      'atproto': {
+        driver: 'fsLite',
+        base: './.cache/atproto',
       },
     },
     typescript: {
···
         '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

···
 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'
···
   if (!config.sessionPassword) {
     throw createError({
       status: 500,
-      message: 'NUXT_SESSION_PASSWORD not set',
+      message: UNSET_NUXT_SESSION_PASSWORD,
     })
   }
 
···
     stateStore,
     sessionStore,
     clientMetadata,
+    requestLock: getOAuthLock(),
   })
 
   if (!query.code) {

server/api/social/like.delete.ts

···
+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,
+    })
+    const 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

···
+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

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

server/utils/atproto/oauth.ts

···
 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 { OAuthMetadataSchema } from '#shared/schemas/oauth'
 // @ts-expect-error virtual file from oauth module
 import { clientUri } from '#oauth/config'
-import { useServerSession } from '#server/utils/server-session'
-// TODO: limit scope as features gets added. atproto just allows login so no scary login screen till we have scopes
-export const scope = 'atproto'
+// TODO: If you add writing a new record you will need to add a scope for it
+export const scope = `atproto ${LIKES_SCOPE}`
 
 export function getOauthClientMetadata() {
   const dev = import.meta.dev
···
 
   // restore using the subject
   return await client.restore(currentSession.tokenSet.sub)
+}
+
+/**
+ * Throws if the logged in OAuth Session does not have the required scopes.
+ * As we add new scopes we need to check if the client has the ability to use it.
+ * If not need to let the client know to redirect the user to the PDS to upgrade their scopes.
+ * @param oAuthSession - The current OAuth session from the event
+ * @param requiredScopes - The required scope you are checking if you can use
+ */
+export async function throwOnMissingOAuthScope(oAuthSession: OAuthSession, requiredScopes: string) {
+  const tokenInfo = await oAuthSession.getTokenInfo()
+  if (!tokenInfo.scope.includes(requiredScopes)) {
+    throw createError({
+      status: 403,
+      message: ERROR_NEED_REAUTH,
+    })
+  }
 }
 
 export function eventHandlerWithOAuthSession<T extends EventHandlerRequest, D>(

server/utils/atproto/utils/likes.ts

···
+import { $nsid as likeNsid } from '#shared/types/lexicons/dev/npmx/feed/like.defs'
+import type { Backlink } from '#shared/utils/constellation'
+
+//Cache keys and helpers
+const CACHE_PREFIX = 'atproto-likes:'
+const CACHE_PACKAGE_TOTAL_KEY = (packageName: string) => `${CACHE_PREFIX}${packageName}:total`
+const CACHE_USER_LIKES_KEY = (packageName: string, did: string) =>
+  `${CACHE_PREFIX}${packageName}:users:${did}:liked`
+const CACHE_USERS_BACK_LINK = (packageName: string, did: string) =>
+  `${CACHE_PREFIX}${packageName}:users:${did}:backlink`
+
+const CACHE_MAX_AGE = CACHE_MAX_AGE_ONE_MINUTE * 5
+
+/**
+ * Logic to handle liking, unliking, and seeing if a user has liked a package on npmx
+ */
+export class PackageLikesUtils {
+  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')
+  }
+
+  /**
+   * Gets the true total count of likes for a npm package from the network
+   * @param subjectRef
+   * @returns
+   */
+  private async constellationLikes(subjectRef: string) {
+    const { data: totalLinks } = await this.constellation.getLinksDistinctDids(
+      subjectRef,
+      likeNsid,
+      '.subjectRef',
+      //Limit doesn't matter here since we are just counting the total likes
+      1,
+      undefined,
+      0,
+    )
+    return totalLinks.total
+  }
+
+  /**
+   * Checks if the user has liked the npm package from the network
+   * @param subjectRef
+   * @param usersDid
+   * @returns
+   */
+  private async constellationUserHasLiked(subjectRef: string, usersDid: string) {
+    const { data: userLikes } = await this.constellation.getBackLinks(
+      subjectRef,
+      likeNsid,
+      'subjectRef',
+      //Limit doesn't matter here since we are just counting the total likes
+      1,
+      undefined,
+      false,
+      [[usersDid]],
+      0,
+    )
+    return userLikes.total > 0
+  }
+
+  /**
+   * Gets the likes for a npm package on npmx. Tries a local cahce first, if not found uses constellation
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async getLikes(packageName: string, usersDid?: string | undefined): Promise<PackageLikes> {
+    //TODO: May need to do some clean up on the package name, and maybe even hash it? some of the charcteres may be a bit odd as keys
+    const totalLikesKey = CACHE_PACKAGE_TOTAL_KEY(packageName)
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
+    const cachedLikes = await this.cache.get<number>(totalLikesKey)
+    let totalLikes = 0
+    if (cachedLikes) {
+      totalLikes = cachedLikes
+    } else {
+      totalLikes = await this.constellationLikes(subjectRef)
+      await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
+    }
+
+    let userHasLiked = false
+    if (usersDid) {
+      const userCachedLike = await this.cache.get<boolean>(
+        CACHE_USER_LIKES_KEY(packageName, usersDid),
+      )
+      if (userCachedLike) {
+        userHasLiked = userCachedLike
+      } else {
+        userHasLiked = await this.constellationUserHasLiked(subjectRef, usersDid)
+        await this.cache.set(
+          CACHE_USER_LIKES_KEY(packageName, usersDid),
+          userHasLiked,
+          CACHE_MAX_AGE,
+        )
+      }
+    }
+
+    return {
+      totalLikes: totalLikes,
+      userHasLiked,
+    }
+  }
+
+  /**
+   * Gets the definite answer if the user has liked a npm package. Either from the cache or the network
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async hasTheUserLikedThePackage(packageName: string, usersDid: string) {
+    const cached = await this.cache.get<boolean>(CACHE_USER_LIKES_KEY(packageName, usersDid))
+    if (cached !== undefined) {
+      return cached
+    }
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
+    const userHasLiked = await this.constellationUserHasLiked(subjectRef, usersDid)
+    await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), userHasLiked, CACHE_MAX_AGE)
+    return userHasLiked
+  }
+
+  /**
+   * It is asummed it has been checked by this point that if a user has liked a package and the new like was made as a record
+   * to the user's atproto repostiory
+   * @param packageName
+   * @param usersDid
+   * @param atUri - The URI of the like record
+   */
+  async likeAPackageAndReturnLikes(
+    packageName: string,
+    usersDid: string,
+    atUri: string,
+  ): Promise<PackageLikes> {
+    const totalLikesKey = CACHE_PACKAGE_TOTAL_KEY(packageName)
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
+    const splitAtUri = atUri.replace('at://', '').split('/')
+    const collection = splitAtUri[1]
+    const rkey = splitAtUri[2]
+
+    if (!collection || !rkey) {
+      throw new Error(`Invalid atUri given: ${atUri}`)
+    }
+    const backLink: Backlink = {
+      did: usersDid,
+      collection,
+      rkey,
+    }
+
+    // We store the backlink incase a user is liking and unlikign rapidly. constellation takes a few seconds to capture the backlink
+    const usersBackLinkKey = CACHE_USERS_BACK_LINK(packageName, usersDid)
+    await this.cache.set(usersBackLinkKey, backLink, CACHE_MAX_AGE)
+
+    let totalLikes = await this.cache.get<number>(totalLikesKey)
+    if (!totalLikes) {
+      totalLikes = await this.constellationLikes(subjectRef)
+      totalLikes = totalLikes + 1
+      await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
+    }
+    // We already know the user has not liked the package before so set in the cache
+    await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), true, CACHE_MAX_AGE)
+    return {
+      totalLikes: totalLikes,
+      userHasLiked: true,
+    }
+  }
+
+  /**
+   * We need to get the record the user has that they liked the package
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async getTheUsersLikedRecord(
+    packageName: string,
+    usersDid: string,
+  ): Promise<Backlink | undefined> {
+    const usersBackLinkKey = CACHE_USERS_BACK_LINK(packageName, usersDid)
+    const backLink = await this.cache.get<Backlink>(usersBackLinkKey)
+    if (backLink) {
+      return backLink
+    }
+
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+    const { data: userLikes } = await this.constellation.getBackLinks(
+      subjectRef,
+      likeNsid,
+      'subjectRef',
+      //Limit doesn't matter here since we are just counting the total likes
+      1,
+      undefined,
+      false,
+      [[usersDid]],
+      0,
+    )
+    if (userLikes.total > 0 && userLikes.records.length > 0) {
+      return userLikes.records[0]
+    }
+  }
+
+  /**
+   * At this point you should have checked if the user had a record for the package on the network and removed it before updating the cache
+   * @param packageName
+   * @param usersDid
+   * @returns
+   */
+  async unlikeAPackageAndReturnLikes(packageName: string, usersDid: string): Promise<PackageLikes> {
+    const totalLikesKey = CACHE_PACKAGE_TOTAL_KEY(packageName)
+    const subjectRef = PACKAGE_SUBJECT_REF(packageName)
+
+    let totalLikes = await this.cache.get<number>(totalLikesKey)
+    if (!totalLikes) {
+      totalLikes = await this.constellationLikes(subjectRef)
+    }
+    totalLikes = Math.max(totalLikes - 1, 0)
+    await this.cache.set(totalLikesKey, totalLikes, CACHE_MAX_AGE)
+
+    //Clean up
+    await this.cache.set(CACHE_USER_LIKES_KEY(packageName, usersDid), false, CACHE_MAX_AGE)
+    await this.cache.delete(CACHE_USERS_BACK_LINK(packageName, usersDid))
+
+    return {
+      totalLikes: totalLikes,
+      userHasLiked: false,
+    }
+  }
+}

server/utils/cache/adapter.ts

···
+import { Redis } from '@upstash/redis'
+
+export function getCacheAdapter(prefix: string): CacheAdapter {
+  const config = useRuntimeConfig()
+
+  if (!import.meta.dev && config.upstash?.redisRestUrl && config.upstash?.redisRestToken) {
+    const redis = new Redis({
+      url: config.upstash.redisRestUrl,
+      token: config.upstash.redisRestToken,
+    })
+    return new RedisCacheAdapter(redis, prefix)
+  }
+  return new LocalCacheAdapter()
+}

server/utils/cache/local.ts

···
+/**
+ * Local cache data entry
+ */
+interface LocalCachedEntry<T = unknown> {
+  value: T
+  ttl?: number
+  cachedAt: number
+}
+
+/**
+ * Checks to see if a cache entry is stale locally
+ * @param entry - The entry from the locla cache
+ * @returns
+ */
+function isCacheEntryStale(entry: LocalCachedEntry): boolean {
+  if (!entry.ttl) return false
+  const now = Date.now()
+  const expiresAt = entry.cachedAt + entry.ttl * 1000
+  return now > expiresAt
+}
+
+/**
+ * Local implmentation of a cache to be used during development
+ */
+export class LocalCacheAdapter implements CacheAdapter {
+  private readonly storage = useStorage('atproto:generic')
+
+  async get<T>(key: string): Promise<T | undefined> {
+    const result = await this.storage.getItem<LocalCachedEntry<T>>(key)
+    if (!result) return
+    if (isCacheEntryStale(result)) {
+      await this.storage.removeItem(key)
+      return
+    }
+    return result.value
+  }
+
+  async set<T>(key: string, value: T, ttl?: number): Promise<void> {
+    await this.storage.setItem(key, { value, ttl, cachedAt: Date.now() })
+  }
+
+  async delete(key: string): Promise<void> {
+    await this.storage.removeItem(key)
+  }
+}

server/utils/cache/redis.ts

···
+import type { Redis } from '@upstash/redis'
+
+/**
+ * Redis cache storage with TTL handled by redis for use in production
+ */
+export class RedisCacheAdapter implements CacheAdapter {
+  private readonly redis: Redis
+  private readonly prefix: string
+
+  formatKey(key: string): string {
+    return `${this.prefix}:${key}`
+  }
+
+  constructor(redis: Redis, prefix: string) {
+    this.redis = redis
+    this.prefix = prefix
+  }
+
+  async get<T>(key: string): Promise<T | undefined> {
+    const formattedKey = this.formatKey(key)
+    const value = await this.redis.get<T>(formattedKey)
+    if (!value) return
+    return value
+  }
+
+  async set<T>(key: string, value: T, ttl?: number): Promise<void> {
+    const formattedKey = this.formatKey(key)
+    if (ttl) {
+      await this.redis.setex(formattedKey, ttl, value)
+    } else {
+      await this.redis.set(formattedKey, value)
+    }
+  }
+
+  async delete(key: string): Promise<void> {
+    const formattedKey = this.formatKey(key)
+    await this.redis.del(formattedKey)
+  }
+}

server/utils/cache/shared.ts

···
+/**
+ * Generic cache adapter to allow using a local cache during development and redis in production
+ */
+export interface CacheAdapter {
+  get<T>(key: string): Promise<T | undefined>
+  set<T>(key: string, value: T, ttl?: number): Promise<void>
+  delete(key: string): Promise<void>
+}

shared/schemas/social.ts

···
+import * as v from 'valibot'
+import { PackageNameSchema } from './package'
+
+/**
+ * Schema for liking/unliking a package
+ */
+export const PackageLikeBodySchema = v.object({
+  packageName: PackageNameSchema,
+})
+
+export type PackageLikeBody = v.InferOutput<typeof PackageLikeBodySchema>

shared/types/social.ts

···
+/**
+ * Likes for a npm package on npmx
+ */
+export type PackageLikes = {
+  // The total likes found for the package
+  totalLikes: number
+  // If the logged in user has liked the package, false if not logged in
+  userHasLiked: boolean
+}

shared/utils/constants.ts

···
+import * as dev from '#shared/types/lexicons/dev'
+
 // Duration
 export const CACHE_MAX_AGE_ONE_MINUTE = 60
 export const CACHE_MAX_AGE_FIVE_MINUTES = 60 * 5
···
 export const ERROR_GRAVATAR_FETCH_FAILED = 'Failed to fetch Gravatar profile.'
 /** @public */
 export const ERROR_GRAVATAR_EMAIL_UNAVAILABLE = "User's email not accessible."
+export const ERROR_NEED_REAUTH = 'User needs to reauthenticate'
 
 // microcosm services
 export const CONSTELLATION_HOST = 'constellation.microcosm.blue'
 export const SLINGSHOT_HOST = 'slingshot.microcosm.blue'
+
+// ATProtocol
+// Refrences used to link packages to things that are not inherently atproto
+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}`
 
 // Theming
 export const ACCENT_COLORS = {