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

docs/astro.config.mjs

 						{ 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

docs/public/videos/README.md

+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

docs/src/components/Video.astro

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


@copilot move style to site style.css

Moved all styles to custom.css in commit 44ea937

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

docs/src/content/docs/reference/video-component.mdx

@@ -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

docs/public/videos/README.md

+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

docs/src/components/Video.astro

+            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

docs/src/styles/custom.css

+/* 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

Copilot AI assigned Copilot and pelikhan Feb 5, 2026

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

Copilot AI and 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>

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

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

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

pelikhan reviewed Feb 5, 2026

View reviewed changes

Copilot started 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>

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

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

github-actions bot 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

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

pelikhan merged commit fb6a23c into main Feb 5, 2026
1 check passed

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

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

Copilot AI 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>

Conversation

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

Uh oh!

Uh oh!

pelikhan Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhan Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhan Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

pelikhan Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI commented Feb 5, 2026

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

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 5, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Feb 5, 2026 •

edited

Loading