refactor: videos page revamp by wackerow · Pull Request #17870 · ethereum/ethereum-org-website

wackerow · 2026-03-27T00:54:35Z

Note: This is a draft preview PR with intent to extend PR:

Video gallery feature, watch pages, embeds, and data layer #17602

Summary

Refactors the video data architecture and page structure to align with site conventions.

Data layer

Moved all video metadata from videos.json into markdown frontmatter (index.md)
Renamed transcript.md to index.md for each video
Rewrote data layer to read from filesystem instead of JSON
Added VideoFrontmatter type, replaced old Video/VideoMeta/VideoWithMeta types
Deleted videos.json and videoTranscripts.ts (merged into videos.ts)
Added breadcrumb frontmatter to all 42 videos
Used shared stripMarkdown instead of duplicate stripMdx

Components and organization

Moved page-scoped components out of src/components/ into app/[locale]/videos/_components/
Inlined transcript accordion and markdown rendering directly into page.tsx
Moved VIDEO_CATEGORIES to colocated constants.ts, getVideosByCategory to utils.ts
Updated VideoWatch shared component for new data layer
Cleaned up unused i18n keys
Removed PR-added unit and e2e tests

SEO preserved

JSON-LD VideoObject schema on every video detail page
Transcript text stays in DOM when accordion is closed via forceMount
generateStaticParams pre-renders all video pages at build time
Per-video generateMetadata for title and description meta tags
Breadcrumbs with translatable labels
Sitemap inclusion for video pages
Semantic HTML structure

Preview links

Schema Markup Validator

Add VideoFrontmatter interface extending SharedFrontmatter with video-specific fields (youtubeId, uploadDate, duration, topic as string[], etc). Replace Video/VideoMeta/VideoWithMeta with VideoData and VideoCardData types. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Rename transcript.md to index.md for all 42 videos. Merge metadata from videos.json into YAML frontmatter (youtubeId, uploadDate, duration, educationLevel, topic as array, format, author, lang, breadcrumb). This consolidates the split data model into a single source of truth per video. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Rewrite videos.ts to read video data from index.md frontmatter via readdir + gray-matter instead of videos.json. Delete videos.json and videoTranscripts.ts (logic merged into videos.ts). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add optional boolean parameter to preserve paragraph structure instead of collapsing all whitespace. Used by video JSON-LD transcript output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Update VideoWatch to use getVideoData and conditionally hide transcript link. Delete Transcript, TranscriptContent (inlined into page.tsx), VideoGalleryFilter (moved to _components/), and barrel export from src/components/Videos/. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Add VideoGalleryFilter, constants.ts (VIDEO_CATEGORIES), and utils.ts (getVideosByCategory) under the /videos route. Update listing page to use filesystem-based getVideos() and colocated imports. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Rewrite video detail page to use getVideoData with frontmatter, SimpleHero, Breadcrumbs, formatDate, renderSimpleMarkdown for transcript, and forceMount accordion for SEO. Update JSON-LD to accept VideoFrontmatter and use shared stripMarkdown. Update translation keys. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove PR-added Playwright test files for video utilities. These tested the old JSON-based data layer and are not needed for production. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Remove unused CSS classes from VideoWatch, delete e2e video tests from PR, and remove 5 unused i18n keys from page-videos.json. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Extract escapeHeadingIds to shared module and add remark-heading-id plugin to renderSimpleMarkdown so video transcripts can use {#custom-header-ids}. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Replaces `sddefault` (640x480) which is not guaranteed to exist Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

wackerow · 2026-04-09T19:46:34Z

@@ -1,8 +1,10 @@
 import { compileMDX, type MDXRemoteProps } from "next-mdx-remote/rsc"
 import remarkGfm from "remark-gfm"
+import remarkHeadingId from "remark-heading-id"


markdownlint enforcing header ID's on all content -- This enables proper parsing when using renderSimple approach. Compatible for even simpler markdown where these ID's won't be present (e.g., externally fetched data)

wackerow · 2026-04-09T19:46:57Z

+          label: t("nav-videos-label"),
+          description: t("nav-videos-description"),


Reminder note: These need translations

wackerow · 2026-04-09T19:49:07Z

+/**
+ * Default YouTube thumbnail URL derived from a video ID.
+ * Returns hqdefault (480x360) which is guaranteed to exist.
+ */
+export function getDefaultThumbnailUrl(youtubeId: string): string {
+  return `https://img.youtube.com/vi/${youtubeId}/hqdefault.jpg`
+}


sddefault.jpg not always available (higher resolution)

Using hq version for now which is guaranteed to be available from YT

Conditionally rendering sd if available requires several sequential fetches during build -- avoided

Future Trigger.dev task could load highest-quality image to s3 bucket so we can point to that instead

wackerow · 2026-04-09T19:49:53Z

  {
    variants: {
      variant: {
+        semibold: "text-lg font-semibold",


Small addition here in lieu of hard-coding this styling into where the card is consumed

wackerow · 2026-04-09T19:50:39Z

-// Preprocess the markdown content
-function preprocessMarkdown(content: string) {
-  // Replace heading IDs without escaping to escaped version
-  // TODO: move to a separate file and test it more
-  return content.replace(/^(#{1,6}.*?)\{(#[\w-]+)\}/gm, "$1\\{$2\\}")
-}
-


Shared -- abstracted to @/lib/md/escapeHeadingIds and renamed

wackerow · 2026-04-09T19:52:37Z

+  youtubeId: string
+  uploadDate: string
+  duration: string
+  educationLevel: "beginner" | "intermediate" | "advanced"


(Some of these are used for JSONLD and not rendered)

wackerow · 2026-04-09T19:53:18Z

        { protocol: "https", hostname: "cdn.charmverse.io" },
        { protocol: "https", hostname: "ethwingman.com" },
        { protocol: "https", hostname: "eth-mcp.dev" },
+        { protocol: "https", hostname: "img.youtube.com", pathname: "/vi/**" },


If/when we implement Trigger.dev/s3 bucket handling for these, we could remove this

pettinarip

@wackerow great job overall 💪🏼 feel free to target staging and go live today

pettinarip · 2026-04-13T17:43:04Z

+ * Get all video slugs by scanning the content/videos directory.
+ * Results are cached for the duration of the build.
+ */
+export async function getVideoSlugs(): Promise<string[]> {


we could reuse getPostSlugs, or rename it to getSlugs, we are basically doing the same.

pettinarip · 2026-04-13T17:52:01Z

+      "@type": "Person",
+      name: frontmatter.author,
+    },
+    publisher: ethereumFoundationOrganization,


we should use the reference. Check #17955

pettinarip · 2026-04-13T17:58:29Z

we already have a lib/utils/videos.ts, maybe we put it there?

pettinarip · 2026-04-13T18:00:29Z

    locale,
    slug,
-    baseComponents: mdComponents,
+    baseComponents: { ...mdComponents, VideoWatch },


can we put this into mdComponents intead? just to not create the precedent to add more here in the future

The base branch was changed.

This reverts commit 7ee9468, reversing changes made to 2dd260d.

This reverts commit 3316f21.

mnelsonBT and others added 30 commits March 26, 2026 15:37

Add agent context schemas

a9b76cc

video gallery feature

cc37857

adding real transcripts

0b9612e

editing transcripts

e9a852e

editing video descriptions

73c4ac2

editing page headings

abfc865

fixing curly brackets

459ef36

embedding remaining videos

89ebf00

reducing caption length

f53a55f

updating accordian for SEO

df7dbde

transcript format tweak

959d6de

updating page subtitle

93da4d0

remove context files and revert next.config.js

b662eaa

refactor: use breadcrumb molecule component

ef36f3d

refactor: use ui/card component, server-side

4ec6660

refactor: use ui/section, add sr-only h2

47a7924

adding StartTime and pulling in site videos

56acfc2

adding transcripts

16c7225

text to markdown

7c51fb9

removing category shelves from landing

56b7938

adding new videos

820ad7d

refactor: filesystem-based video data layer

4c8d3dd

Rewrite videos.ts to read video data from index.md frontmatter via readdir + gray-matter instead of videos.json. Delete videos.json and videoTranscripts.ts (logic merged into videos.ts). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

refactor: add preserveNewlines to stripMarkdown

d4c2012

Add optional boolean parameter to preserve paragraph structure instead of collapsing all whitespace. Used by video JSON-LD transcript output. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

chore: remove video unit tests

0913d74

Remove PR-added Playwright test files for video utilities. These tested the old JSON-based data layer and are not needed for production. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

chore: audit cleanup

fed337b

Remove unused CSS classes from VideoWatch, delete e2e video tests from PR, and remove 5 unused i18n keys from page-videos.json. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

mnelsonBT and others added 15 commits April 7, 2026 18:18

fixing transcripts

d4f15f2

patch: EthBoulder 2026 year

cc04d48

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Merge branch 'dev' into videos-refactor

0999214

feat: add remark-heading-id to simple MD renderer

a819c09

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

chore: apply custom header IDs to video transcripts

e09a41e

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

fix(refactor): getTranslations string argument

77075d1

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

revert: crowdin-translation-guide video

a1e2ef3

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

fix: use hqdefault (480x360) thumbnail

ecbb782

Replaces `sddefault` (640x480) which is not guaranteed to exist Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

feat(ui): move h1 below image

5fc5f14

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

feat(ui): add timer, align breadcrumb position

542e27c

Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>

Merge branch 'dev' into videos-refactor

9cd91e2

feat(ui): semibold CardTitle variant

f6d09f9

feat(ui): use ui/card for VideoWatch

03885af

feat: pass className to VideoWatch

e33ef78

wackerow commented Apr 9, 2026

View reviewed changes

pettinarip previously approved these changes Apr 13, 2026

View reviewed changes

wackerow changed the base branch from dev to staging April 13, 2026 18:04

pettinarip approved these changes Apr 13, 2026

View reviewed changes

Merge branch 'staging' into videos-refactor

c121629

wackerow merged commit 7ee9468 into staging Apr 13, 2026
10 of 14 checks passed

wackerow deleted the videos-refactor branch April 13, 2026 18:20

This was referenced Apr 13, 2026

build(deps): remove trigger.dev CLI from devDependencies #17968

Closed

perf: static generate only English video detail pages #17969

Closed

wackerow added a commit that referenced this pull request Apr 13, 2026

Revert "Merge pull request #17870 from ethereum/videos-refactor"

3316f21

This reverts commit 7ee9468, reversing changes made to 2dd260d.

wackerow added a commit that referenced this pull request Apr 13, 2026

Reapply "Merge pull request #17870 from ethereum/videos-refactor"

2cbe1bc

This reverts commit 3316f21.

wackerow mentioned this pull request Apr 13, 2026

feat: videos page #17970

Merged

This was referenced Apr 17, 2026

Deploy v11.4.0 #17985

Merged

fix: handle missing videos directory in getVideoSlugs (auto) #18015

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor: videos page revamp#17870

refactor: videos page revamp#17870
wackerow merged 65 commits intostagingfrom
videos-refactor

wackerow commented Mar 27, 2026 •

edited

Loading

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

wackerow Apr 9, 2026

Uh oh!

pettinarip left a comment

Uh oh!

pettinarip Apr 13, 2026

Uh oh!

pettinarip Apr 13, 2026

Uh oh!

pettinarip Apr 13, 2026

Uh oh!

pettinarip Apr 13, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		label: t("nav-videos-label"),
		description: t("nav-videos-description"),

Conversation

wackerow commented Mar 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Data layer

Components and organization

SEO preserved

Preview links

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pettinarip left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

wackerow commented Mar 27, 2026 •

edited

Loading