add new intro video to homepage #1539
Conversation
WalkthroughThis update in Docusaurus incorporates several enhancements: resizing the video elements within the features section, integrating a new Changes
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![ellipsis-dev[bot]](https://avatars.githubusercontent.com/in/64358?s=60&v=4){kind=small}
There was a problem hiding this comment.
👍 Looks good to me! Reviewed everything up to dadee9d in 53 seconds
More details
- Looked at
65lines of code in3files - Skipped
0files when reviewing. - Skipped posting
1drafted comments based on config settings.
1. docusaurus/src/pages/features-section/features-section.tsx:90
- Draft comment:
Thevideotag is missing thetypeattribute. It's important to include this to ensure proper video handling across different browsers. - Reason this comment was not posted:
Confidence of 0% on close inspection, compared to threshold of 50%.
Workflow ID: wflow_xVMYFhMokQxJzOzN
You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Outside diff range and nitpick comments (2)
docusaurus/src/pages/features-section/features-section.tsx (2)
Line range hint
100-100: Addhrefattribute to anchor tags for proper navigation.The anchor tag in line 100 lacks an
hrefattribute, which is essential for ensuring that the link is navigable and accessible.- <a target="_blank"> Wechaty </a> + <a href="https://example.com" target="_blank"> Wechaty </a>Tools
Biome
[error] 90-94: Provide a track for captions when using audio or video elements. (lint/a11y/useMediaCaption)
Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.
Line range hint
103-103: Ensure all anchor tags havehrefattributes.The anchor tag in line 103 is missing an
hrefattribute. This is a critical issue as it affects the usability and accessibility of the links.- <a target="_blank"> 6 lines of code.</a> + <a href="https://example.com" target="_blank"> 6 lines of code.</a>Tools
Biome
[error] 90-94: Provide a track for captions when using audio or video elements. (lint/a11y/useMediaCaption)
Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (1)
docusaurus/static/img/introduction-video.mp4is excluded by!**/*.mp4
Files selected for processing (2)
- docusaurus/src/pages/features-section/features-section.css (3 hunks)
- docusaurus/src/pages/features-section/features-section.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- docusaurus/src/pages/features-section/features-section.css
Additional context used
Biome
docusaurus/src/pages/features-section/features-section.tsx
[error] 90-94: Provide a track for captions when using audio or video elements. (lint/a11y/useMediaCaption)
Captions support users with hearing-impairments. They should be a transcription or translation of the dialogue, sound effects, musical cues, and other relevant audio information.
[error] 100-100: Provide a href attribute for the a element. (lint/a11y/useValidAnchor)
An anchor element should always have a href
Check this thorough explanation to better understand the context.
[error] 103-103: Provide a href attribute for the a element. (lint/a11y/useValidAnchor)
An anchor element should always have a href
Check this thorough explanation to better understand the context.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- .file-name-linter.json (1 hunks)
- package.json (1 hunks)
Files skipped from review due to trivial changes (1)
- package.json
Additional comments not posted (1)
.file-name-linter.json (1)
9-9: Approved: Addition ofmp4file type to linter rules.The addition of the
mp4extension to the linter configuration is necessary to support the new video content on the homepage as described in the PR. This change ensures that the linter will not flag the new video file as an error, which is crucial for seamless integration.
|
@huan To allow embedding the mp4 intro video, I added mp4 to the list of permitted file types. I'm thinking that embedding the local video file is best to avoid incompatibility with youtube or other external links, but let me know if you think an if uploading the video to youtube and adding a link is better |
This PR adds the new and improved Wechaty intro video onto the homepage! The video is embedded as a local mp4.
Summary:
Added a new intro video to the homepage by embedding a local mp4 file and updating the relevant styles.
Key points:
docusaurus/src/pages/features-section/features-section.tsx.docusaurus/static/img/introduction-video.mp4.docusaurus/src/pages/features-section/features-section.cssto style the video and its placeholder.divwith idvideoPlaceholderand styled with idvideo.Generated with ❤️ by ellipsis.dev
Summary by CodeRabbit
New Features
Style
Chores
0.11.7to0.11.8.mp4to the list of allowed file types for static files.