feat: add metadata to packages list

layouts/packages.vue

@@ -3,7 +3,7 @@ import type { Package } from '~/types/package'
 
 const { page } = useContent()
 
-const { data: packages } = await useAsyncData('content:packages', () => queryContent<Package>('/packages/').only(['_path', 'title', 'description']).find())
+const { data: packages } = await useFetch('/api/packages')
 
 if (!packages.value) {
   throw createError({
@@ -34,6 +34,14 @@ const orderByOptions = [
     id: 'title',
     label: 'Name',
   },
+  {
+    id: 'stars',
+    label: 'Stars',
+  },
+  {
+    id: 'monthlyDownloads',
+    label: 'Downloads',
+  },
 ]
 const orderBy = ref<string>('title')
 const currentOrderBy = computed(() => orderByOptions.find(option => option.id === orderBy.value))
@@ -45,13 +53,13 @@ const results = computed(() => {
     return currentPackages
 
   return currentPackages.sort((a, b) => {
-    const aTitle = a.title.toLowerCase()
-    const bTitle = b.title.toLowerCase()
+    const aValue = a[orderBy.value]
+    const bValue = b[orderBy.value]
 
-    if (aTitle < bTitle)
+    if (aValue < bValue)
       return -1 * order.value
 
-    if (aTitle > bTitle)
+    if (aValue > bValue)
       return 1 * order.value
 
     return 0
@@ -106,7 +114,7 @@ const results = computed(() => {
 
       <ol v-if="packages" class="mt-8 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 place-items-stretch">
         <li v-for="item in results" :key="item.title">
-          <UCard as="article" :ui="{ base: 'h-full relative', divide: '', shadow: 'shadow-none hover:shadow-lg', rounded: 'rounded-xl', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' } }">
+          <!-- <UCard as="article" :ui="{ base: 'h-full relative', divide: '', shadow: 'shadow-none hover:shadow-lg', rounded: 'rounded-xl', header: { base: 'flex gap-3 items-center', padding: 'py-0 pt-4 sm:px-4 sm:pt-4' }, body: { padding: 'p-4 sm:p-4' } }">
             <template #header>
               <img :src="toPackageLogo(item.title)" :alt="`Logo of ${item.title}`" w-12 h-12>
               <h3 class="text-xl font-semibold">
@@ -118,6 +126,48 @@ const results = computed(() => {
             <p class="text-zinc-500">
               {{ item.description }}
             </p>
+          </UCard> -->
+          <UCard as="article" :ui="{ base: 'relative h-full', divide: '', shadow: 'shadow-none hover:shadow-lg', rounded: 'rounded-xl', body: { base: 'h-full flex flex-col gap-3', padding: 'px-4 py-4 sm:p-4' } }">
+            <header class="flex items-center gap-3">
+              <img :src="toPackageLogo(item.title)" :alt="`Logo of ${item.title}`" class="w-12 h-12">
+              <h3 class="font-semibold text-xl text-zinc-950">
+                <NuxtLink :to="item._path">
+                  <span class="absolute inset-0" />
+                  {{ item.title }}
+                </NuxtLink>
+              </h3>
+            </header>
+
+            <p class="grow text-zinc-500">
+              {{ item.description }}
+            </p>
+
+            <dl class="text-zinc-500 text-sm font-medium grid grid-cols-3">
+              <div class="flex gap-1 items-center">
+                <dt>
+                  <span class="sr-only">
+                    Stars
+                  </span>
+                  <span class="i-heroicons-star-solid" />
+                </dt>
+                <dd>
+                  {{ formatNumber(item.stars) }}
+                </dd>
+              </div>
+              <template v-if="item.monthlyDownloads">
+                <div class="flex gap-1 justify-center items-center">
+                  <dt>
+                    <span class="sr-only">
+                      Monthly Downloads
+                    </span>
+                    <span class="i-heroicons-arrow-trending-up-solid" />
+                  </dt>
+                  <dd>
+                    {{ formatNumber(item.monthlyDownloads) }}
+                  </dd>
+                </div>
+              </template>
+            </dl>
           </UCard>
         </li>
       </ol>

nuxt.config.ts

@@ -52,6 +52,11 @@ export default defineNuxtConfig({
           maxAge: 60 * 60 * 24 * 7, // 7 days
         },
       },
+      '/api/packages': {
+        cache: {
+          maxAge: 60 * 60 * 24 * 7, // 7 days
+        },
+      },
       '/blog/2023-08-25-nitro-2.6': {
         redirect: {
           statusCode: 301,

server/api/github/[owner]/[repo]/metadata.ts

@@ -1,5 +1,3 @@
-import { FetchError } from 'ofetch'
-
 export default defineEventHandler(async (event) => {
   const owner = getRouterParam(event, 'owner')
   const repo = getRouterParam(event, 'repo')
@@ -21,32 +19,3 @@ export default defineEventHandler(async (event) => {
     latestRelease,
   }
 })
-
-async function fetchStars(owner: string, repo: string): Promise<number> {
-  const repos = await $fetch<{ repo: { stars: number } }>(`https://ungh.cc/repos/${owner}/${repo}`)
-
-  return repos.repo.stars
-}
-
-// TODO: use it later
-// async function fetchContributors(owner: string, repo: string): Promise<{ id: number; username: string }[]> {
-//   const { contributors } = await $fetch<{ contributors: { id: number; username: string; contributions: number }[] }>(`https://ungh.cc/repos/${owner}/${repo}/contributors`)
-
-//   const filteredContributors = contributors.filter(({ username }) => !username.includes('[bot]'))
-//   const sortedContributors = filteredContributors.sort((a, b) => b.contributions - a.contributions)
-
-//   return sortedContributors.map(({ id, username }) => ({ id, username }))
-// }
-
-async function fetchLatestRelease(owner: string, repo: string): Promise<string | null> {
-  try {
-    const releases = await $fetch<{ release: { tag: string } }>(`https://ungh.cc/repos/${owner}/${repo}/releases/latest`)
-    return releases.release.tag
-  }
-  catch (error: unknown) {
-    if (error instanceof FetchError && error.status === 404)
-      return null
-
-    throw error
-  }
-}

server/api/npm/[name]/monthly-downloads.ts

@@ -12,9 +12,3 @@ export default defineEventHandler(async (event) => {
 
   return monthlyDownloads
 })
-
-async function fetchMonthlyDownloads(name: string): Promise<number> {
-  const downloads = await $fetch<{ downloads: number }>(`https://api.npmjs.org/downloads/point/last-month/${name}`)
-
-  return downloads.downloads
-}

server/api/packages.ts

@@ -0,0 +1,25 @@
+import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
+import { serverQueryContent } from '#content/server'
+
+export default defineEventHandler(async (event) => {
+  const contentPackages = await serverQueryContent(event).where({ _path: { $regex: /^\/packages\// } }).only(['_path', 'title', 'description', 'github', 'npm']).find()
+
+  const populatedPackages = await Promise.all(contentPackages.map(fetchPackageMetadata))
+
+  return populatedPackages
+})
+
+async function fetchPackageMetadata(contentPackage: Pick<ParsedContent, string>) {
+  const [repo, monthlyDownloads] = await Promise.all([
+    fetchRepo(contentPackage.github.owner, contentPackage.github.repo),
+    contentPackage.npm ? fetchMonthlyDownloads(contentPackage.npm.name) : null,
+  ])
+
+  return {
+    ...contentPackage,
+    stars: repo.stars,
+    monthlyDownloads,
+    createdAt: repo.createdAt,
+    updatedAt: repo.updatedAt,
+  }
+}

server/utils/github.ts

@@ -0,0 +1,36 @@
+import { FetchError } from 'ofetch'
+
+export async function fetchRepo(owner: string, repo: string): Promise<{ stars: number; createdAt: string; updatedAt: string }> {
+  const repos = await $fetch<{ repo: { stars: number; createdAt: string; updatedAt: string } }>(`https://ungh.cc/repos/${owner}/${repo}`)
+
+  return repos.repo
+}
+
+export async function fetchStars(owner: string, repo: string): Promise<number> {
+  const repos = await fetchRepo(owner, repo)
+
+  return repos.stars
+}
+
+export async function fetchLatestRelease(owner: string, repo: string): Promise<string | null> {
+  try {
+    const releases = await $fetch<{ release: { tag: string } }>(`https://ungh.cc/repos/${owner}/${repo}/releases/latest`)
+    return releases.release.tag
+  }
+  catch (error: unknown) {
+    if (error instanceof FetchError && error.status === 404)
+      return null
+
+    throw error
+  }
+}
+
+// TODO: use it later
+// async function fetchContributors(owner: string, repo: string): Promise<{ id: number; username: string }[]> {
+//   const { contributors } = await $fetch<{ contributors: { id: number; username: string; contributions: number }[] }>(`https://ungh.cc/repos/${owner}/${repo}/contributors`)
+
+//   const filteredContributors = contributors.filter(({ username }) => !username.includes('[bot]'))
+//   const sortedContributors = filteredContributors.sort((a, b) => b.contributions - a.contributions)
+
+//   return sortedContributors.map(({ id, username }) => ({ id, username }))
+// }

server/utils/npm.ts

@@ -0,0 +1,5 @@
+export async function fetchMonthlyDownloads(name: string): Promise<number> {
+  const downloads = await $fetch<{ downloads: number }>(`https://api.npmjs.org/downloads/point/last-month/${name}`)
+
+  return downloads.downloads
+}