nuxt / nuxt/nuxt.com

Render GitHub `user-attachments` videos in module READMEs (currently shown as plain links)

Open
#2,275 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
457
Forks
272
Avg merge
13h 33m
Merged PRs (30d)
23

Description

Description

On module pages, a bare https://github.com/user-attachments/assets/<id> URL in the upstream README (GitHub's drag-and-drop video idiom) renders as a <video> on GitHub, but on nuxt.com it falls through as an autolink and shows as a plain link.

Image

Example: the demo on https://nuxt.com/modules/studio appears as a bare link instead of the video (source: the nuxt-studio README at https://github.com/nuxt-content/nuxt-studio/blob/main/README.md).

Details

These asset URLs are publicly reachable anonymously — https://github.com/user-attachments/assets/<id> returns a 302 to an S3 URL that serves Content-Type: video/mp4 and supports range requests (verified: 206 Partial Content with Accept-Ranges: bytes) — so a native <video controls> pointing at the URL should work without any proxy.

Proposed approaches

Detecting autolinked user-attachments asset URLs and rendering them as video would cover this.

Two possible approaches:

  1. Render bare user-attachments autolinks (as opposed to ![]() images) as <video>, since the bare-URL form is GitHub's video idiom.
  2. Resolve each user-attachments asset URL (HEAD/GET) and branch on the response Content-Type<video> for video/*, <img> for image/*.

I'd appreciate it if you could let me know which direction you'd prefer.

I'd be happy to implement this, but I'd appreciate a maintainer confirming the approach (or preferred direction) before I open a PR.

References

Originally raised in nuxt-content/nuxt-studio#479.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start at the module README rendering path on nuxt.com and inspect how bare autolinks are currently handled. Compare the nuxt-studio README example and decide between recognizing user-attachments URLs directly or checking their Content-Type. Done means the video renders with native video controls instead of appearing as a plain link.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
documentation, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.