Add inline media examples and hand-drawn icons - #121
Conversation
WalkthroughAdded a reusable Astro feature component with constrained icon names and remote Kixel artwork. Redesigned the homepage feature list and added a MoQ Pro link. Added CLI, FFmpeg, and GStreamer setup and streaming instructions to the demo page. Updated links across the publish, source, and watch pages to point to current documentation and package sites. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches✨ Simplify code
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/demo.mdx`:
- Line 101: Update the Homebrew installation command in the macOS walkthrough to
use the moq-dev/tap/moq-cli formula instead of moq, keeping the surrounding CLI
setup instructions unchanged.
In `@src/pages/source.mdx`:
- Line 21: Update the hang entry in the documentation table to hyphenate the
compound adjective as “media-specific,” changing only the description text.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: c3c4ab04-9e85-485c-9458-e9e876092775
📒 Files selected for processing (6)
src/components/feature.astrosrc/pages/demo.mdxsrc/pages/index.mdxsrc/pages/publish.mdxsrc/pages/source.mdxsrc/pages/watch.mdx
|
|
||
| ```bash | ||
| # macOS | ||
| brew install moq-dev/tap/moq |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
curl -fsSL https://doc.moq.dev/concept/standard/interop \
| grep -F 'brew install moq-dev/tap/moq-cli'Repository: moq-dev/moq.dev
Length of output: 153
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== demo.mdx line 101 context =="
sed -n '96,106p' src/pages/demo.mdx || true
echo "== exact formula references in docs =="
rg -n "brew install|moq-dev/tap" . --glob '!node_modules' --glob '!dist' --glob '!build' || true
echo "== fetch interop page title/headings and command blocks =="
curl -fsSL https://doc.moq.dev/concept/standard/interop \
| python3 - <<'PY'
import re, sys
text = sys.stdin.read()
print(text[:10000])
print("\n--- brew install occurrences ---")
for i, line in enumerate(text.splitlines(),1):
if "brew install" in line:
print(f"{i}: {line}")
PYRepository: moq-dev/moq.dev
Length of output: 1083
🏁 Script executed:
#!/usr/bin/env bash
set -euo pipefail
echo "== Homebrew formula presence/name if curl is available =="
python3 - <<'PY'
import json, sys, urllib.request
url = "https://formulae.brew.sh/api/formula.json"
try:
data = json.load(urllib.request.urlopen(url, timeout=20))
except Exception as e:
print("formulae json unavailable:", repr(e))
sys.exit(0)
names = {f["name"] for f in data if isinstance(f, dict)}
print("cli:", "moq-cli" in names)
print("moq:", "moq" in names)
print("tap formulae:")
for f in data:
if not isinstance(f, dict):
continue
name=f.get("name","")
tap=f.get("tap","")
if tap and "moq-dev" in str(tap):
print(name, tap)
PYRepository: moq-dev/moq.dev
Length of output: 398
🌐 Web query:
moq-dev/tap/moq-cli Homebrew formula
💡 Result:
To install the moq-cli command-line tool using Homebrew, you can use the official Homebrew tap provided by the moq-dev organization [1][2]. You can install it by running the following commands in your terminal: 1. Tap the repository: brew tap moq-dev/tap 2. Install the formula: brew install moq-dev/tap/moq-cli This formula is maintained by the moq-dev project to provide easy installation of their Media over QUIC tools [1][3]. It is automatically generated and updated via their release workflows [1]. Additional tools in the same tap include moq-relay, moq-clock, moq-token-cli, and moq-gst [1][2].
Citations:
- 1: https://github.laiyagushi.com/moq-dev/homebrew-tap
- 2: https://doc.moq.dev/lib/rs/
- 3: https://github.com/moq-dev
🌐 Web query:
doc.moq.dev concept/standard/interop brew install moq-dev/tap
💡 Result:
The moq-dev project is an open-source implementation of Media over QUIC (MoQ), a next-generation live media protocol designed to provide real-time latency at scale [1][2]. Concept and Interoperability The project focuses on a protocol called "moq-lite," which is a forwards-compatible subset of the IETF's moq-transport draft [3][2]. The core philosophy behind moq-lite is to prioritize simplicity and immediate deployability, allowing it to function with any standard moq-transport relay, such as those provided by Cloudflare [3][2]. The documentation at doc.moq.dev explains these concepts, detailing how the protocol handles transport (using WebTransport, QUIC, or WebSockets) and media containers (like hang and cmaf) to achieve interoperability [4][3]. Installation via Homebrew The moq-dev/tap is a Homebrew tap that allows users to install various tools from the moq-dev workspace [5]. You can add the tap and install the available packages using the following commands: brew tap moq-dev/tap brew install moq-dev/tap/moq-relay brew install moq-dev/tap/moq-cli brew install moq-dev/tap/moq-clock brew install moq-dev/tap/moq-token-cli brew install moq-dev/tap/moq-gst These formulae are automatically generated from the moq-dev/moq GitHub repository [5]. Note that moq-dev is a distinct entity from other projects like moqtap, which has different installation instructions [6]. [5][1]
Citations:
- 1: https://github.com/moq-dev/moq
- 2: https://github.com/moq-dev/moq/blob/main/README.md
- 3: https://doc.moq.dev/concept/layer/moq-lite
- 4: https://doc.moq.dev/concept/standard/interop.html
- 5: https://github.laiyagushi.com/moq-dev/homebrew-tap
- 6: https://moqtap.com/getting-started/installation/
Install the documented Homebrew formula.
The current MoQ installation command uses moq-dev/tap/moq, but the applicable Homebrew formula is moq-dev/tap/moq-cli. Use moq-cli so the macOS walkthrough can complete before the CLI examples.
Proposed fix
-brew install moq-dev/tap/moq
+brew install moq-dev/tap/moq-cli📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| brew install moq-dev/tap/moq | |
| brew install moq-dev/tap/moq-cli |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/demo.mdx` at line 101, Update the Homebrew installation command in
the macOS walkthrough to use the moq-dev/tap/moq-cli formula instead of moq,
keeping the surrounding CLI setup instructions unchanged.
| | [moq-relay](https://github.com/moq-dev/moq/tree/main/rs/moq-relay) | A Moq server that connects publishers to subscribers, caching and deduplicating any subscriptions. Note that MoQ does not support P2P; instead it utilizes relays to scale out to many subscribers. | | ||
| | [moq-relay](https://doc.moq.dev/bin/relay/) | A Moq server that connects publishers to subscribers, caching and deduplicating any subscriptions. Note that MoQ does not support P2P; instead it utilizes relays to scale out to many subscribers. | | ||
| | [moq-clock](https://github.com/moq-dev/moq/tree/main/rs/moq-clock) | It's a clock! Just to demonstrate that MoQ can be used for more than media. | | ||
| | [hang](https://docs.rs/hang/latest/hang/) | A media specific library built on top of moq-lite. This provides a JSON "catalog" that describes the media tracks and "container" that literally consists of a timestamp. The actual media decoding/encoding is left to the platform. | |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Use the compound adjective media-specific.
Change A media specific library to A media-specific library.
Proposed fix
- A media specific library built on top of moq-lite.
+ A media-specific library built on top of moq-lite.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | [hang](https://docs.rs/hang/latest/hang/) | A media specific library built on top of moq-lite. This provides a JSON "catalog" that describes the media tracks and "container" that literally consists of a timestamp. The actual media decoding/encoding is left to the platform. | | |
| | [hang](https://docs.rs/hang/latest/hang/) | A media-specific library built on top of moq-lite. This provides a JSON "catalog" that describes the media tracks and "container" that literally consists of a timestamp. The actual media decoding/encoding is left to the platform. | |
🧰 Tools
🪛 LanguageTool
[grammar] ~21-~21: Use a hyphen to join words.
Context: ...s://docs.rs/hang/latest/hang/) | A media specific library built on top of moq-lit...
(QB_NEW_EN_HYPHEN)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/source.mdx` at line 21, Update the hang entry in the documentation
table to hyphenate the compound adjective as “media-specific,” changing only the
description text.
Source: Linters/SAST tools
1 participant
Summary
Why
The demo page previously focused on browser demos and did not show how to use the wider MoQ tooling directly. Keeping these examples inline makes the CLI and media pipeline workflows easier to discover while preserving the site’s visual style.
Impact
Visitors can copy commands for watching and publishing broadcasts with the MoQ CLI, FFmpeg, and GStreamer. The home page now uses consistent, accessible decorative icons instead of platform-dependent emoji.
Validation
just checkjust build