Add Video component for Astro Starlight documentation by Copilot · Pull Request #13902 · github/gh-aw

Copilot · 2026-02-05T12:44:14Z

Research video component patterns from GenAIScript
Create unique Video.astro component with distinct implementation
Add comprehensive TypeScript props with aspect ratio support
Include responsive styling with namespace-prefixed classes
Create public/videos directory with README
Build and verify documentation compiles correctly
Remove Video Component documentation page (internal component)
Move component styles from Video.astro to custom.css
Update README to use Astro import magic routes (@components)

Original prompt

Add a video component to the Astro starlight documentation to show video files hosted in the Publix folder.
Search the Microsoft/genaiscript repo for an implementation

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

pelikhan · 2026-02-05T12:58:41Z

 { label: 'Custom Agents', link: '/reference/copilot-custom-agents/' },
 { label: 'GH-AW as MCP Server', link: '/setup/mcp-server/' },
 { label: 'MCP Gateway', link: '/reference/mcp-gateway/' },
+ { label: 'Video Component', link: '/reference/video-component/' },


@copilot do not document this component, it is internal to the docs

Removed from sidebar in commit 44ea937

pelikhan · 2026-02-05T12:59:08Z

+Place video files here and reference them in documentation using the Video component:
+
+```mdx
+import Video from '../../../components/Video.astro';


@copilot use Astro starlight import magic routes?

Updated to use @components/Video.astro import path in commit 44ea937

pelikhan · 2026-02-05T13:00:05Z

+ )}
+</div>
+
+<style>


@copilot move style to site style.css

Moved all styles to custom.css in commit 44ea937

pelikhan · 2026-02-05T13:00:28Z

@@ -0,0 +1,160 @@
+---


@copilot delete file

Deleted in commit 44ea937

…ate imports Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Copilot · 2026-02-05T13:08:50Z

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

telemetry.astro.build
- Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/node_modules/.bin/astro build (dns block)
- Triggering command: /opt/hostedtoolcache/node/24.13.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Copilot

Pull request overview

This pull request adds a Video component to the Astro Starlight documentation for displaying video files hosted in the public folder. The implementation includes comprehensive TypeScript props, responsive styling, accessibility features, and documentation.

Changes:

New Video.astro component with aspect ratio support, autoplay controls, and accessibility features
Custom CSS styling in docs/src/styles/custom.css with theme support and responsive design
Public videos directory with README documentation for usage guidelines

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
docs/src/components/Video.astro	New Astro component with TypeScript interface for displaying videos with configurable aspect ratios, controls, and captions
docs/src/styles/custom.css	Global CSS styles for Video component with light/dark theme support and responsive design
docs/public/videos/README.md	Documentation for using the Video component and managing video files

Comments suppressed due to low confidence (1)

docs/public/videos/README.md:10

The @components import alias used in the README examples doesn't exist in this codebase. The tsconfig.json and astro.config.mjs don't configure this alias.

Other components in the codebase (like FeatureCard at docs/src/content/docs/index.mdx:20) use relative paths like '../../components/Video.astro'. The README should follow the same pattern for consistency.

import Video from '@components/Video.astro';

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-05T13:28:11Z

+2. Reference it in your MDX file:
+
+```mdx
+import Video from '@components/Video.astro';


The @components import alias used here doesn't exist in this codebase. Other components use relative paths like '../../components/Video.astro'. Update this example to use the correct relative import pattern based on where the MDX file will be located.

Copilot · 2026-02-05T13:28:11Z

+ muted={silenced}
+ poster={thumbnail}
+ preload="metadata"
+ aria-label={caption}


The aria-label attribute is set to the caption prop value, but when caption is undefined (which is common), this results in aria-label={undefined} which doesn't provide meaningful accessibility information. Consider providing a fallback or making the aria-label conditional. For example: aria-label={caption || 'Video content'}
Suggested change
aria-label={caption}
aria-label={caption||'Video content'}

Copilot · 2026-02-05T13:28:12Z

+/* Video Component Styles */
+.gh-aw-video-wrapper {
+ margin: 2rem auto;
+ width: 100%;
+}
+
+.gh-aw-video-container {
+ position: relative;
+ width: 100%;
+ background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
+ border-radius: 12px;
+ overflow: hidden;
+ box-shadow: 
+ 0 8px 16px rgba(0, 0, 0, 0.4),
+ 0 0 0 1px rgba(255, 255, 255, 0.05);
+ transition: box-shadow 0.3s ease;
+}
+
+.gh-aw-video-container:hover {
+ box-shadow: 
+ 0 12px 24px rgba(0, 0, 0, 0.5),
+ 0 0 0 1px rgba(139, 92, 246, 0.3);
+}
+
+.gh-aw-video-container.has-aspect-ratio {
+ height: 0;
+ padding-bottom: 56.25%;
+}
+
+.gh-aw-video-element {
+ width: 100%;
+ height: 100%;
+ display: block;
+ background-color: #000;
+}
+
+.has-aspect-ratio .gh-aw-video-element {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ object-fit: contain;
+}
+
+.gh-aw-video-caption {
+ margin-top: 0.75rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ color: var(--sl-color-gray-3);
+ text-align: center;
+ background: var(--sl-color-gray-6);
+ border-left: 3px solid var(--sl-color-purple);
+ border-radius: 0 6px 6px 0;
+ font-style: italic;
+}
+
+[data-theme='light'] .gh-aw-video-container {
+ background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+ box-shadow: 
+ 0 8px 16px rgba(0, 0, 0, 0.15),
+ 0 0 0 1px rgba(0, 0, 0, 0.08);
+}
+
+[data-theme='light'] .gh-aw-video-container:hover {
+ box-shadow: 
+ 0 12px 24px rgba(0, 0, 0, 0.2),
+ 0 0 0 1px rgba(102, 57, 186, 0.3);
+}
+
+[data-theme='light'] .gh-aw-video-caption {
+ color: var(--sl-color-gray-2);
+ background: var(--sl-color-gray-7);
+}
+
+@media (max-width: 768px) {
+ .gh-aw-video-wrapper {
+ margin: 1.5rem auto;
+ }
+}
+
+@media (prefers-reduced-motion: reduce) {
+ .gh-aw-video-container {
+ transition: none;
+ }
+}


The CSS class naming pattern gh-aw-video-* is unique to this component. Other components in the codebase (FeatureCard.astro, ResponsiveTable.astro) use inline <style> blocks with non-prefixed class names specific to their component. This creates an inconsistency where only the Video component styles are in the global CSS file. Consider either:
Moving these styles to a <style> block in Video.astro to match existing component patterns, or
Documenting why Video requires global styles (if there's a specific reason)

Initial plan
b5a7856

CopilotAI assigned Copilot and pelikhan Feb 5, 2026

Copilotstarted work on behalf of pelikhan February 5, 2026 12:45 View session

CopilotAIand others added 3 commits February 5, 2026 12:53

Add Video component for Astro Starlight documentation
b66610c
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Add comprehensive Video component documentation
32b35b7
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

Refactor Video component with unique implementation and updated API
371bd82
Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

CopilotAI changed the title ~~[WIP] Add video component to Astro starlight documentation~~Add Video component for Astro Starlight documentationFeb 5, 2026

CopilotAI requested a review from pelikhan February 5, 2026 12:58

Copilotfinished work on behalf of pelikhan February 5, 2026 12:58

pelikhan reviewed Feb 5, 2026
View reviewed changes

Copilotstarted work on behalf of pelikhan February 5, 2026 13:01 View session

Address PR feedback: Remove docs page, move styles to custom.css, upd…
44ea937
…ate imports Co-authored-by: pelikhan <4175913+pelikhan@users.noreply.github.com>

CopilotAI requested a review from pelikhan February 5, 2026 13:09

Copilotfinished work on behalf of pelikhan February 5, 2026 13:09

github-actionsBot mentioned this pull request Feb 5, 2026
Smoke Test: Copilot - 21712693967 #13904
Closed

pelikhan marked this pull request as ready for review February 5, 2026 13:24

CopilotAI review requested due to automatic review settings February 5, 2026 13:24

pelikhan merged commit fb6a23c into mainFeb 5, 2026
1 check passed

pelikhan deleted the copilot/add-video-component-to-docs branch February 5, 2026 13:25

Copilotstarted reviewing on behalf of pelikhan February 5, 2026 13:25 View session

CopilotAI reviewed Feb 5, 2026
View reviewed changes

This was referenced Feb 5, 2026
Smoke Test: Copilot - 21713400692 #13917
Closed
Include .agents folder in sparse checkout for agent jobs #13901
Merged
📰 Repository Chronicle - Team Powers Through 20 PRs in 24-Hour Development Sprint #13950
Closed

+ )}
+</div>
+<style>

Uh oh!

Conversation

CopilotAI commented Feb 5, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pelikhanFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhanFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhanFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhanFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAI commented Feb 5, 2026

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

CopilotAIFeb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

CopilotAI commented Feb 5, 2026•
edited
Loading