feat: implement package-playground button

Author: Flo0806

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { joinURL } from 'ufo'
-import type { PackumentVersion, NpmVersionDist } from '#shared/types'
+import type { PackumentVersion, NpmVersionDist, ReadmeResponse } from '#shared/types'
 import type { JsrPackageInfo } from '#shared/types/jsr'
 import { assertValidPackageName } from '#shared/utils/npm'
 
@@ -56,13 +56,13 @@ const { data: downloads } = usePackageDownloads(packageName, 'last-week')
 const { data: weeklyDownloads } = usePackageWeeklyDownloadEvolution(packageName, { weeks: 52 })
 
 // Fetch README for specific version if requested, otherwise latest
-const { data: readmeData } = useLazyFetch<{ html: string }>(
+const { data: readmeData } = useLazyFetch<ReadmeResponse>(
   () => {
     const base = `/api/registry/readme/${packageName.value}`
     const version = requestedVersion.value
     return version ? `${base}/v/${version}` : base
   },
-  { default: () => ({ html: '' }) },
+  { default: () => ({ html: '', playgroundLinks: [] }) },
 )
 
 // Check if package exists on JSR (only for scoped packages)
@@ -664,9 +664,15 @@ defineOgImageComponent('Package', {
             </ul>
           </section>
 
-          <!-- Donwload stats -->
+          <!-- Download stats -->
           <PackageDownloadStats :downloads="weeklyDownloads" />
 
+          <!-- Playground links -->
+          <PackagePlaygrounds
+            v-if="readmeData?.playgroundLinks?.length"
+            :links="readmeData.playgroundLinks"
+          />
+
           <section
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)