chore: Offload dependents crawling to separate service

Author: franky47

packages/docs/src/app/(pages)/_landing/dependents/dependents.tsx packages/docs/src/app/(pages)/_landing/dependents.tsx

@@ -1,11 +1,31 @@
 import { cn } from '@/src/lib/utils'
 import Image from 'next/image'
-import { Result, crawlDependents } from './crawler'
+import { z } from 'zod'
+
+const dependentSchema = z.object({
+  stars: z.number(),
+  owner: z.string(),
+  name: z.string(),
+  pkg: z.string(),
+  avatarURL: z.string(),
+  createdAt: z.string().transform(date => new Date(date))
+})
+type Dependent = z.infer<typeof dependentSchema>
+
+async function fetchDependents() {
+  const data = await fetch('https://dependents.47ng.com', {
+    next: {
+      revalidate: 86_400,
+      tags: ['dependents']
+    }
+  }).then(res => res.json())
+  return z.array(dependentSchema).parse(data)
+}
 
 export async function DependentsSection() {
-  let dependents: Result[] = []
+  let dependents: Dependent[] = []
   try {
-    dependents = await crawlDependents()
+    dependents = await fetchDependents()
   } catch (error) {
     console.error(error)
     return <section className="text-red-500">{String(error)}</section>
@@ -30,13 +50,13 @@ export async function DependentsSection() {
       <div className="flex flex-wrap justify-center gap-1.5">
         {dependents.map(dep => (
           <a
-            key={dep.repo}
-            href={`https://github.com/${dep.repo}`}
+            key={dep.owner + dep.name}
+            href={`https://github.com/${dep.owner}/${dep.name}`}
             className="relative h-8 w-8 rounded-full"
           >
             <Image
-              src={`https://avatars.githubusercontent.com/u/${dep.avatarID}?s=64&v=4`}
-              alt={dep.repo}
+              src={upscaleGitHubAvatar(dep.avatarURL, 64)}
+              alt={dep.owner + '/' + dep.name}
               className="rounded-full"
               width={64}
               height={64}
@@ -54,3 +74,9 @@ export async function DependentsSection() {
     </section>
   )
 }
+
+function upscaleGitHubAvatar(originalURL: string, size: number) {
+  const url = new URL(originalURL)
+  url.searchParams.set('s', size.toFixed())
+  return url.toString()
+}

packages/docs/src/app/(pages)/_landing/dependents/crawler.ts

@@ -1,5 +1,5 @@
 import type { Metadata } from 'next'
-import { DependentsSection } from './_landing/dependents/dependents'
+import { DependentsSection } from './_landing/dependents'
 import { FeaturesSection } from './_landing/features'
 import Footer from './_landing/footer'
 import { HeroSection } from './_landing/hero'

packages/docs/src/app/(pages)/page.tsx

@@ -1,7 +1,7 @@
 import { revalidateTag } from 'next/cache'
 import { NextRequest, NextResponse } from 'next/server'
 
-const ACCEPTED_TAGS = ['github', 'github-actions-status', 'npm']
+const ACCEPTED_TAGS = ['github', 'github-actions-status', 'npm', 'dependents']
 
 export async function GET(req: NextRequest) {
   const token = req.nextUrl.searchParams.get('token')