Add awesome-manim feed to manim-website

[prism0x]

Adding the awesome-manim feed to manim-website.
See the discussion in ManimCommunity/awesome-manim#14 (comment)

The feed can be found under /awesome.

This is work in progress.

• Add awesome manim feed
• Reimplement the feed with pure react components @naveen521kk
• Home page caroussel section "Made with Manim" @OwenSamuel

[prism0x]

@naveen521kk @behackl how should we implement the caroussel?

The most recent verdict was:

A carousel of YouTube videos one at a time looks good to me, though that's just my personal preference. The carousel should have a limited number of videos (say 3) and there should be a link for the other page that say "see more videos made with Manim".

• Implement using an existing component like https://www.npmjs.com/package/react-responsive-carousel
• The caroussel could move to the next video automatically every 3 seconds.
• Users should ideally be able to play the video without leaving the website.
• But if we load 3 YouTube player iframes directly on page visit, that would slow down the responsiveness of the page.
• If we decide to let users play YouTube in the caroussel, the caroussel should only load the thumbnails with a play button image in the middle. The iframe should be filled dynamically in only after the user clicks on the thumbnail. This should be pretty straightforward with a little JS.
• The caroussel should stop moving automatically when a video starts playing.

Video selection

The thumbnails should ideally be attractive. We can use these for now:

• https://www.youtube.com/watch?v=GiDsjIBOVoA
• https://www.youtube.com/watch?v=AM6BY4btj-M
• https://www.youtube.com/watch?v=NdqaX9aLkg8

We can later run a poll in the server and vote on the videos to be featured on the home page. Wdyt?

[naveen521kk]

Ah, I would like to write this in pure react rather than importing jquery like this. I think using a different library rather than infinte-scroll is better and I'll have a look at this a bit later.

[OwenSamuel]

I have added the YouTube carousel.

Requires attention
The button "More Made With Manim" is not currently linked to anything as I could not work out what is handling the routing

[prism0x]

The button "More Made With Manim" is not currently linked to anything as I could not work out what is handling the routing

This works now

[prism0x]

Should we add a disclaimer at the top that the feed features videos made with both Manim CE and 3b1b's Manim?

[OwenSamuel]

@naveen521kk Are you going to refactor the /awesome page or do you want me to have a go?

[naveen521kk]

@naveen521kk Are you going to refactor the /awesome page or do you want me to have a go?

Sure, give it a go!

[OwenSamuel]

Refactored version of the /awesome page has been pushed

There are two older videos that do not have thumbnails available in the webp format. I haven't created a work around as the videos are unrelated but I can look to provide backup jpg thumbnails if that would be preferred.

[prism0x]

Great work, looks much better!

Btw should we also add a link to /awesome on the top navbar, after "Try Manim Online"?

[naveen521kk]

lgtm

[naveen521kk]

Deploying!