refactor: videos page revamp

.github/ISSUE_TEMPLATE/suggest_video.yaml

@@ -0,0 +1,110 @@
+name: Suggest a video
+description: Suggest a video to add to the ethereum.org video gallery
+title: Suggest a video
+labels: ["feature ✨", "content 🖋️"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Before suggesting a video, please review [our video listing policy](https://ethereum.org/contributing/adding-videos/) to ensure your suggestion meets the criteria.
+  - type: markdown
+    id: video_info
+    attributes:
+      value: "## Video info"
+  - type: input
+    id: video_title
+    attributes:
+      label: Video title
+      description: What is the title of the video?
+    validations:
+      required: true
+  - type: input
+    id: video_url
+    attributes:
+      label: YouTube URL
+      description: Please provide the full YouTube URL (e.g. https://www.youtube.com/watch?v=...)
+    validations:
+      required: true
+  - type: textarea
+    id: video_description
+    attributes:
+      label: Video description
+      description: Provide a brief 1–3 sentence summary of what the video covers
+    validations:
+      required: true
+  - type: input
+    id: video_author
+    attributes:
+      label: Creator / Channel
+      description: Who created the video? (e.g. "Ethereum Foundation", "Finematics")
+    validations:
+      required: true
+  - type: input
+    id: video_duration
+    attributes:
+      label: Duration
+      description: "Video length in H:MM:SS or M:SS format (e.g. 1:08:42 or 12:30)"
+    validations:
+      required: true
+  - type: dropdown
+    id: video_education_level
+    attributes:
+      label: Education level
+      description: What level of Ethereum knowledge does this video assume?
+      options:
+        - "Beginner"
+        - "Intermediate"
+        - "Advanced"
+    validations:
+      required: true
+  - type: dropdown
+    id: video_format
+    attributes:
+      label: Format
+      description: What best describes the format of this video?
+      options:
+        - "Explainer"
+        - "Presentation"
+        - "Interview"
+        - "Tutorial"
+        - "Panel"
+    validations:
+      required: true
+  - type: input
+    id: video_topics
+    attributes:
+      label: Topics
+      description: "Comma-separated topic tags (e.g. scaling, layer-2, rollups). See existing tags at https://ethereum.org/videos/"
+    validations:
+      required: true
+  - type: input
+    id: video_upload_date
+    attributes:
+      label: Original upload date
+      description: "When was the video originally published? (YYYY-MM-DD format)"
+    validations:
+      required: true
+  - type: textarea
+    id: video_transcript
+    attributes:
+      label: Transcript (optional)
+      description: |
+        If you have a transcript, paste it here. Otherwise the team will generate one.
+        Transcripts should use markdown formatting with section headings and timestamps.
+  - type: textarea
+    id: video_justification
+    attributes:
+      label: Why should this video be listed?
+      description: Briefly explain how this video helps ethereum.org users learn about Ethereum
+  - type: checkboxes
+    id: video_work_on
+    attributes:
+      label: Would you like to work on this issue?
+      description: If yes, you can open a PR to add the video yourself following our contributing guide
+      options:
+        - label: "Yes"
+          required: false
+        - label: "No"
+          required: false
+    validations:
+      required: true

app/[locale]/[...slug]/page.tsx

@@ -10,6 +10,7 @@ import type { GHIssue, SlugPageParams } from "@/lib/types"
 
 import I18nProvider from "@/components/I18nProvider"
 import mdComponents from "@/components/MdComponents"
+import VideoWatch from "@/components/Videos/VideoWatch"
 
 import { dateToString } from "@/lib/utils/date"
 import { getLayoutFromSlug } from "@/lib/utils/layout"
@@ -57,7 +58,7 @@ export default async function Page(props: { params: Promise<SlugPageParams> }) {
   } = await getPageData({
     locale,
     slug,
-    baseComponents: mdComponents,
+    baseComponents: { ...mdComponents, VideoWatch },
     componentsMapping,
     scope: {
       gfissues,

app/[locale]/apps/categories/[catetgoryName]/page.tsx

@@ -189,9 +189,7 @@ const Page = async (props: {
                     ...app,
                     subCategory: app.subCategory.map((tag: string) => {
                       const key = `subcategory-${slugify(tag)}`
-                      return tSubcategory.has(key)
-                        ? tSubcategory(key)
-                        : tag
+                      return tSubcategory.has(key) ? tSubcategory(key) : tag
                     }),
                   })) as AppData[]
                 )}

app/[locale]/developers/tools/_components/ToolModalContents.tsx

@@ -81,7 +81,10 @@ const ToolModalContents = async ({ tool }: { tool: DeveloperTool }) => {
           />
         </div>
         <div className="-mt-2 max-h-[16lh] overflow-y-auto pb-4 pt-2 [mask-image:linear-gradient(to_top,transparent,white_2rem,white_calc(100%-1rem),transparent)]">
-          {await renderSimpleMarkdown(translatedDescription, mdComponentOverrides)}
+          {await renderSimpleMarkdown(
+            translatedDescription,
+            mdComponentOverrides
+          )}
         </div>
         <div className="!mt-8 space-y-2">
           <p>{t("page-developers-tools-modal-links")}</p>

app/[locale]/videos/[slug]/page-jsonld.tsx

@@ -0,0 +1,57 @@
+import type { VideoFrontmatter } from "@/lib/interfaces"
+
+import PageJsonLD from "@/components/PageJsonLD"
+
+import { ethereumFoundationOrganization } from "@/lib/utils/jsonld"
+import { stripMarkdown } from "@/lib/utils/md"
+import { toIsoDuration } from "@/lib/utils/time"
+import { normalizeUrlForJsonLd } from "@/lib/utils/url"
+import { getDefaultThumbnailUrl } from "@/lib/utils/videos"
+
+export default function VideoPageJsonLD({
+  locale,
+  slug,
+  frontmatter,
+  transcript,
+}: {
+  locale: string
+  slug: string
+  frontmatter: VideoFrontmatter
+  transcript: string | null
+}) {
+  const url = normalizeUrlForJsonLd(locale, `/videos/${slug}/`)
+
+  const jsonLd: Record<string, unknown> = {
+    "@context": "https://schema.org",
+    "@type": "VideoObject",
+    "@id": `${url}#video`,
+    name: frontmatter.title,
+    description: frontmatter.description,
+    uploadDate: `${frontmatter.uploadDate}T00:00:00+00:00`,
+    duration: toIsoDuration(frontmatter.duration),
+    thumbnailUrl:
+      frontmatter.customThumbnailUrl ||
+      getDefaultThumbnailUrl(frontmatter.youtubeId),
+    embedUrl: `https://www.youtube.com/embed/${frontmatter.youtubeId}`,
+    contentUrl: `https://www.youtube.com/watch?v=${frontmatter.youtubeId}`,
+    educationalLevel: frontmatter.educationLevel,
+    inLanguage: frontmatter.lang,
+    creator: {
+      "@type": "Person",
+      name: frontmatter.author,
+    },
+    publisher: ethereumFoundationOrganization,
+    isAccessibleForFree: true,
+    isFamilyFriendly: true,
+  }
+
+  // Add transcript as plain text if available
+  if (transcript) {
+    // Escape < and / to prevent script injection (XSS protection)
+    jsonLd.transcript = stripMarkdown(transcript, true)
+      .replace(/</g, "\\u003c")
+      .replace(/\//g, "\\u002f")
+  }
+
+  return <PageJsonLD structuredData={jsonLd} />
+}

app/[locale]/videos/[slug]/page.tsx

@@ -0,0 +1,145 @@
+import { pick } from "lodash"
+import type { Metadata } from "next"
+import { notFound } from "next/navigation"
+import {
+  getMessages,
+  getTranslations,
+  setRequestLocale,
+} from "next-intl/server"
+
+import type { VideoData } from "@/lib/types"
+
+import Breadcrumbs from "@/components/Breadcrumbs"
+import FeedbackCard from "@/components/FeedbackCard"
+import I18nProvider from "@/components/I18nProvider"
+import MainArticle from "@/components/MainArticle"
+import { htmlElements } from "@/components/MdComponents"
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion"
+import YouTube from "@/components/YouTube"
+
+import { formatDate } from "@/lib/utils/date"
+import { getMetadata } from "@/lib/utils/metadata"
+import { getRequiredNamespacesForPage } from "@/lib/utils/translations"
+import { getVideoData, getVideoSlugs } from "@/lib/utils/videos"
+
+import VideoPageJsonLD from "./page-jsonld"
+
+import { renderSimpleMarkdown } from "@/lib/md/renderSimple"
+
+const VideoLandingPage = async (props: {
+  params: Promise<{ locale: string; slug: string }>
+}) => {
+  const { locale, slug } = await props.params
+
+  const t = await getTranslations("page-videos")
+  setRequestLocale(locale)
+
+  let data: VideoData | undefined
+  try {
+    data = await getVideoData(slug, locale)
+  } catch {
+    notFound()
+  }
+
+  const { frontmatter } = data
+  const transcriptMdx = data.content.trim() || null
+
+  // Get i18n messages
+  const allMessages = await getMessages({ locale })
+  const requiredNamespaces = getRequiredNamespacesForPage("/videos/")
+  const messages = pick(allMessages, requiredNamespaces)
+
+  const breadcrumbSlug =
+    "/videos/" + (frontmatter.breadcrumb || slug.replaceAll("-", " "))
+
+  return (
+    <I18nProvider locale={locale} messages={messages}>
+      <VideoPageJsonLD
+        locale={locale}
+        slug={slug}
+        frontmatter={frontmatter}
+        transcript={transcriptMdx}
+      />
+
+      <MainArticle className="max-w-4xl space-y-8 px-4 md:px-8">
+        <Breadcrumbs slug={breadcrumbSlug} startDepth={1} className="mt-11" />
+
+        <div className="sticky top-24 z-10 md:static">
+          <YouTube
+            id={frontmatter.youtubeId}
+            title={frontmatter.title}
+            className="max-w-full"
+          />
+        </div>
+
+        <div className="space-y-4">
+          <h1>{frontmatter.title}</h1>
+
+          <p className="text-lg text-body-medium">{frontmatter.description}</p>
+
+          <p className="text-body-medium">
+            {t("page-videos-date-published")}:{" "}
+            {formatDate(frontmatter.uploadDate, locale, { timeZone: "UTC" })}
+          </p>
+        </div>
+
+        {transcriptMdx && (
+          <Accordion type="single" collapsible>
+            <AccordionItem value="transcript">
+              <AccordionTrigger className="py-4">
+                <h2 className="text-xl">{t("page-videos-view-transcript")}</h2>
+              </AccordionTrigger>
+              {/* forceMount keeps transcript in DOM for SEO crawlers */}
+              <AccordionContent
+                className="text-base [[data-state=closed]_&]:invisible [[data-state=closed]_&]:h-0"
+                forceMount
+              >
+                {await renderSimpleMarkdown(transcriptMdx, {
+                  h1: htmlElements.h2,
+                })}
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+        )}
+
+        <FeedbackCard />
+      </MainArticle>
+    </I18nProvider>
+  )
+}
+
+export async function generateStaticParams() {
+  const slugs = await getVideoSlugs()
+  return slugs.map((slug) => ({ slug }))
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ locale: string; slug: string }>
+}): Promise<Metadata> {
+  const { locale, slug } = await props.params
+
+  let data
+  try {
+    data = await getVideoData(slug, locale)
+  } catch {
+    const t = await getTranslations("common")
+    return {
+      title: t("page-not-found"),
+      description: t("page-not-found-description"),
+    }
+  }
+
+  return await getMetadata({
+    locale,
+    slug: ["videos", slug],
+    title: `${data.frontmatter.title} | ethereum.org`,
+    description: data.frontmatter.description,
+  })
+}
+
+export default VideoLandingPage