add livestream to docs #544
Conversation
WalkthroughIntroduces a new VideoPlayer React component at docs/src/components/VideoPlayer/index.tsx that wraps react-player with a responsive 16:9 container and supports props: url (string) and light (boolean, default false). Updates docs/docs/python-sdk/introduction.mdx to import VideoPlayer, add a Videos section embedding a YouTube Live URL with the light prop, and append a new blog post entry with title and URL. Modifies docs/package.json to add the dependency "react-player": "^3.3.2". No exported/public API signatures are changed. Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
bot
added
the
type/documentation
Deploying infrahub-sdk-python with
|
| Latest commit: |
30e661d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://8cedc006.infrahub-sdk-python.pages.dev |
| Branch Preview URL: | https://pmc-20250913-docs.infrahub-sdk-python.pages.dev |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
docs/src/components/VideoPlayer/index.tsx (3)
in MDX.
11-18: Use theme variables and center via layout instead of relying onInline hardcoded colors break in dark mode. Use Docusaurus theme tokens and center the card with auto margins.
Apply:
- <div style={{ - border: '3px solid #eee', - borderRadius: '12px', - padding: '8px', - backgroundColor: '#fafafa', - margin: '2rem 0', - maxWidth: '800px' - }}> + <div style={{ + border: '1px solid var(--ifm-color-emphasis-300)', + borderRadius: '12px', + padding: '8px', + backgroundColor: 'var(--ifm-background-surface-color)', + margin: '2rem auto', + maxWidth: '800px', + width: '100%' + }}>
19-26: Prefer modern aspect-ratio over padding hack.Simplifies layout and avoids absolute positioning where possible.
Apply:
- <div style={{ position: 'relative', paddingTop: '56.25%' }}> + <div style={{ position: 'relative', aspectRatio: '16 / 9' }}> <ReactPlayer url={url} light={light} - style={{ position: 'absolute', top: 0, left: 0 }} + style={{ position: 'absolute', inset: 0 }} width="100%" height="100%" controls />
1-3: Avoid SSR/hydration issues and trim bundle size by lazy-loading ReactPlayer inside BrowserOnly.File: docs/src/components/VideoPlayer/index.tsx (imports at top and player usage). Wrap the player with @docusaurus/BrowserOnly and import react-player/lazy; then build from the docs workspace to confirm no hydration warnings.
-import React from 'react'; -import ReactPlayer from 'react-player'; +import React from 'react'; +import BrowserOnly from '@docusaurus/BrowserOnly'; +import ReactPlayer from 'react-player/lazy'; @@ - <ReactPlayer - url={url} - light={light} - style={{ position: 'absolute', top: 0, left: 0 }} - width="100%" - height="100%" - controls - /> + <BrowserOnly> + {() => ( + <ReactPlayer + url={url} + light={light} + style={{ position: 'absolute', top: 0, left: 0 }} + width="100%" + height="100%" + controls + /> + )} + </BrowserOnly>Optional: add YouTube lazy/iframe options: config={{ youtube: { playerVars: { modestbranding: 1, rel: 0 }, embedOptions: { loading: 'lazy' } } }}.
Build check: cd docs && npm run build
docs/docs/python-sdk/introduction.mdx (3)
4-4: Use Docusaurus @site alias for stability.Relative paths are brittle if files move. Use the recommended alias.
Apply:
-import VideoPlayer from '../../src/components/VideoPlayer'; +import VideoPlayer from '@site/src/components/VideoPlayer';
tag; rely on component layout.
10-12: Avoid the deprecatedWe already center via component styles. Drop
<center>for semantic HTML.Apply:
-<center> - <VideoPlayer url='https://www.youtube.com/live/RbRz8_t0FBs?feature=shared' light /> -</center> +<VideoPlayer url='https://www.youtube.com/live/RbRz8_t0FBs?feature=shared' light />
8-12: Add 1–2 sentence context for the video (Diátaxis: Explanation page).Briefly state what viewers will learn and the target audience to align with our doc style.
I can draft a one-liner summary and add a Tip callout if you share the key topics covered in the livestream.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
docs/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
docs/docs/python-sdk/introduction.mdx(1 hunks)docs/package.json(1 hunks)docs/src/components/VideoPlayer/index.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
docs/**/*.{md,mdx}
📄 CodeRabbit inference engine (CLAUDE.md)
docs/**/*.{md,mdx}: Follow the Diataxis framework and classify docs as Tutorials, How-to guides, Explanation, or Reference
Structure How-to guides with required frontmatter and sections: introduction, prerequisites, step-by-step steps, validation, related resources
Structure Topics (Explanation) docs with introduction, concepts & definitions, background & context, architecture & design, connections, further reading
Use a professional, concise, informative tone with consistent structure across documents
Use proper language tags on all code blocks
Include both async and sync examples where applicable using the Tabs component
Add validation steps to guides to confirm success and expected outputs
Use callouts for warnings, tips, and important notes
Define new terms on first use and use domain-relevant terminology consistent with Infrahub’s model/UI
Conform to markdown style rules in .markdownlint.yaml and Vale styles in .vale/styles/
Files:
docs/docs/python-sdk/introduction.mdx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Cloudflare Pages
🔇 Additional comments (1)
docs/package.json (1)
25-26: Lockfile updated and version matches; lazy-load react-player
- docs/package-lock.json contains react-player@^3.3.2 (matches docs/package.json) — lockfile is committed.
- Lazy-load react-player in the docs VideoPlayer (dynamic import / React.lazy) to keep the docs bundle slim.
2 participants
Summary by CodeRabbit
New Features
Documentation
Chores