show description and long description

src/pages/video/[name].astro

@@ -12,12 +12,12 @@ if (!video) return new Response(null, { status: 404 });
 const metadata = await getVideoMetadata(video);
 if (!metadata) return new Response(null, { status: 404 });
 
-const { title, description } = metadata;
+const { title, description, longDescription } = metadata;
 const streamUrl = siteUrl(`video/${encodeURIComponent(video.name)}/stream`);
 const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.jpg`);
 ---
 
-<WebsiteLayout title={`${title} - Video`} description={description ?? undefined} openGraph="minimal">
+<WebsiteLayout title={`${title} - Video`} description={description ?? longDescription ?? undefined} openGraph="minimal">
   <Fragment slot="head">
     <meta property="og:type" content="website" />
     <meta property="og:image" content={thumbnailUrl} />
@@ -31,10 +31,14 @@ const thumbnailUrl = siteUrl(`video/${encodeURIComponent(video.name)}/thumbnail.
       <h1 class="mt-1 text-2xl font-semibold break-words lg:text-4xl">{title}</h1>
     </div>
 
+    {description && (
+      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/80">{description}</p>
+    )}
+
     <VideoPlayer client:load src={streamUrl} type={video.contentType} title={title} poster={thumbnailUrl} />
 
-    {description && (
-      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{description}</p>
+    {longDescription && (
+      <p class="max-w-3xl text-base leading-relaxed whitespace-pre-line text-base-content/70">{longDescription}</p>
     )}
   </section>
 </WebsiteLayout>