Skip to content

refactor: videos page revamp#17870

Open
wackerow wants to merge 50 commits intodevfrom
videos-refactor
Open

refactor: videos page revamp#17870
wackerow wants to merge 50 commits intodevfrom
videos-refactor

Conversation

@wackerow
Copy link
Copy Markdown
Member

@wackerow wackerow commented Mar 27, 2026

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

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

mnelsonBT and others added 30 commits March 26, 2026 15:37
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>
@github-actions github-actions bot added config ⚙️ Changes to configuration files content 🖋️ This involves copy additions or edits tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program labels Mar 27, 2026
wackerow and others added 12 commits March 26, 2026 20:15
Add CollectionPage + ItemList structured data to /videos/ following the established pattern from tutorials and wallets pages.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Add in-memory caches for getVideoData and getVideos to deduplicate filesystem reads during static generation. Limit generateStaticParams to English-only (42 pages instead of 1,050); other locales render on-demand via SSR.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
dateTimeFormat called from within formatDate function
VideoFrontmatter not used via layout Frontmatter type
Emit inline VideoObject structured data when videos are embedded on content pages via VideoWatch, making them eligible for rich results on the host page.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
VideoObject should only exist on watch pages. Strip VideoObject nesting from the /videos/ ItemList to avoid duplication, keeping just ListItem with name + url.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
VideoObject structured data should only live on the dedicated watch pages, not on host pages that embed videos via VideoWatch. Reverts the inline JSON-LD addition.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Generate video detail pages for all 25 locales at
build time instead of only English. Removes SSR
on-demand rendering for non-English video pages.

Updates sitemap to include all locale variants for
video pages with proper hreflang alternates.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Dead code:
- Remove unused getTranscript() and getVideoMeta()
- Remove unused minVideos from category config
- Trim VideoCardData of 4 unused client fields

DRY:
- Extract cached getVideoSlugs(), reuse in getVideos()

Performance:
- Use string comparison for YYYY-MM-DD date sorting
- Sort videos by date in JSON-LD before slice(0, 10)

Patterns:
- Remove unnecessary cn() on static class strings
- Fix SimpleHero to use barrel import
- Rename view-transcript key to page-videos- prefix
- Remove redundant transcript trim check

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
@myelinated-wackerow
Copy link
Copy Markdown
Collaborator

Review cleanup

Performance

  • Static generation for all 25 locales (was English-only; non-English was SSR on-demand)
  • Sitemap updated with all locale variants and hreflang alternates
  • String comparison for date sorting (YYYY-MM-DD is lexicographic; avoids Date object churn)
  • JSON-LD ItemList sorted by newest before slice, matching default page display

Dead code removed

  • getTranscript(), getVideoMeta() -- exported but never called
  • minVideos on every category -- defined, typed, never read
  • 4 unused fields trimmed from VideoCardData client serialization (youtubeId, educationLevel, format, author) -- full data still available server-side via VideoFrontmatter

DRY / cleanup

  • Shared cached getVideoSlugs() eliminates duplicate readdir calls
  • Removed unnecessary cn() wrapping static class strings
  • Fixed SimpleHero import to use barrel export
  • Renamed view-transcript key to page-videos-view-transcript for prefix consistency
  • Removed redundant .trim() check on transcript

Reviewed by Claude Opus 4.6

@wackerow wackerow marked this pull request as ready for review April 2, 2026 01:25
@wackerow
Copy link
Copy Markdown
Member Author

wackerow commented Apr 2, 2026

@pettinarip Wouldn't merge this without checking with @mnelsonBT but marking it for code review

@github-actions github-actions bot added the documentation 📖 Change or add documentation label Apr 6, 2026
wackerow and others added 6 commits April 6, 2026 17:37
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Co-Authored-By: wackerow <54227730+wackerow@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

config ⚙️ Changes to configuration files content 🖋️ This involves copy additions or edits documentation 📖 Change or add documentation tooling 🔧 Changes related to tooling of the project translation 🌍 This is related to our Translation Program

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants