docs: add deep dive video for Docusaurus

[dmitryvinn]

Motivation

Following recent update with ELI5 video, I wanted to see if you would be opened to add a longer version of the video to the home page that we presented at the Algolia meetup

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Related PRs

#6659

[netlify]

✔️ [V2]
Built without sensitive environment variables

🔨 Explore the source changes: e15f0a7

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/620d83ba3b17fb0008215554

😎 Browse the preview: https://deploy-preview-6687--docusaurus-2.netlify.app

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🔴 Performance	45
🟢 Accessibility	100
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	92

Lighthouse ran on https://deploy-preview-6687--docusaurus-2.netlify.app/

[Josh-Cena]

@lex111 @yangshun @slorber Any better design you can think of? We probably want something nicer in the spirit of #6386. The jest website may be a good reference with two videos

[lex111]

Two videos side by side in the viewport seems too overwhelming to me. I think the deep dive video should be in the index page of docs rather than on the landing page. Ideally, the video content place in the middle of the page, so that a visitor can first look at the features. WDYT?

[yangshun]

I don't think the deep dive video should be on the homepage. Maybe on the docs intro page or Advanced Guides?

[Josh-Cena]

Same idea here. If it's more informative than promotional, we probably don't want to put it on the front page. However, Jest does have a 1:38:31 talk on their landing page and it doesn't look terrible, considering how they've set up their layout.

(Fun thing is, the entire iframe on the Jest website is invisible on mobile. Probably a bug)

Edit. No! The Jest video is intentionally invisible on mobile. https://github.com/facebook/jest/blob/ecab294cd5c1653041289b5cf80deea11af40f3f/website/static/css/custom.css#L59-L63 @SimenB Do you know if that's intentional?

[slorber]

Also not sure it's a good video for efficient marketing on the homepage

I don't think the deep dive video should be on the homepage. Maybe on the docs intro page or Advanced Guides?

I don't think it's deep enough to be on the advanced guides, but on the intro page that looks like a good fit.

What about adding this under or above our fast track section?
https://docusaurus.io/docs#fast-track

Maybe add a new section like "Video intro"?

[SimenB]

@SimenB Do you know if that's intentional?

No idea 😀

[Josh-Cena]

I guess it's to ensure a reasonable scroll distance for mobile? That makes sense, because otherwise you would get a super long scroll as on the Docusaurus site.

[SimenB]

If you land on some better layout here I'm sure we'd be happy to copy that approach for Jest's site as well. I don't think a designer has thought the video section through? At least not with multiple videos.

[SimenB]

/cc @orta who designed the Jest landing page and may have thoughts on the video placement 😀

[Josh-Cena]

Good design comes out of Orta, so I'd rather follow what the Jest website does😆

[orta]

I'd recommend not having more than one video on the home page. The above the fold aspects really wants to stay focused on pitching the idea of docusaurus - a deep dive reference is a good topic for the learning flow or much further down (for a while we had videos on the TS website at the bottom)

[Josh-Cena]

So the consensus seems to be to move this to the intro docs, probably the "fast track" section, cool. Does it have to be an iframe? Or is a plain link fine?

I also noticed Jest has a videos page. Not sure it's linked to from anywhere since I only discovered it through source code, but it can be a scalable solution for Docusaurus as well, if we get more media in the future

[SimenB]

Not sure it's linked to from anywhere since I only discovered it through source code

Ergh, it should be in the sidebar somewhere

[dmitryvinn]

I see - I can definitely move it there, thank you! We can use a link like I did with Detectron2 that only has README.md and no site, but I personally like when I can play a video on the same page. However, you are the project maintainers, I will listen to any decision you will make

[slorber]

Personally I'd add it there:

I'd rather order those things by how much time they need.
It's longer to watch the video so it probably makes sense to make this video less visible than the fast-track tutorial.

I'd add it under a new "Video Intro" section, also explaining what this video is about and why it's worth watching in 1 or 2 lines. + embedded video player

Does anyone disagree?

[dmitryvinn]

Thank you all - how does this look?

[slorber]

Thanks

Going to merge and move on for now as it's good enough

I'm not 100% convinced this section heading is the best though, maybe we should make it clearer this section is a video, like "Video Intro" or something? If someone want to suggest a better alternative PRs welcome