Add interactive playground page for GitHub Actions workflow visualization

[Copilot]

Adds an interactive playground page to the documentation for visualizing and exploring GitHub Actions workflows with a 3-up layout showing workflow code, graph visualization, and execution runs side-by-side.

Changes

• Playground page (/playground/): Full-width playground view using WorkflowHeroPlayground component with 3-up layout (workflow, graph, run). Pre-configured with sample workflows for project board updates. Accessible via direct URL only (not in navigation).

• Sample workflow (playground-executor.md): Manual-trigger workflow with expiring outputs for safe experimentation.

• Navigation: Playground removed from sidebar navigation to keep it as a hidden feature accessible only via direct URL.

Playground Features

• 3-up layout: Shows workflow code, visualization graph, and execution run side-by-side
• Full-width experience: Uses Starlight's splash template for immersive workflow exploration
• Sample workflows: Pre-configured with "Update project board (draft)" and "Update project board (issue)" examples
• Direct access only: Page accessible at /playground/ but not listed in navigation menu

Testing

• ✅ Documentation builds successfully
• ✅ Playground page renders with 3-up layout
• ✅ WorkflowHeroPlayground component loads correctly
• ✅ All internal links validated
• ✅ Page accessible at /playground/ without navigation entry

Original prompt

For a more interactive Astro Starlight docs experience that acts like a "GitHub Actions playground." create a custom component.

Requirements:
Include annotated YAML workflow examples users can explore
Add a custom Astro component for step-by-step explanations (Hero-style)
Use a GitHub Actions playground repo for real executions
Provide a deploy workflow

References:
GitHub Actions Hero (interactive tutorial): https://github-actions-hero.vercel.app
GitHub Actions playground repo: https://github.com/sombriks/gh-actions-playground
Astro + Starlight GH Pages template: https://github.com/30DaysOf/astro-starlight-ghpages
Astro GitHub Actions deploy guide: https://docs.astro.build/en/guides/deploy/github/

---

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

[mnkiefer]

@copilot: Don't rely on url https://github.com/sombriks/gh-actions-playground

[Copilot]

@copilot: Don't rely on url https://github.com/sombriks/gh-actions-playground

Removed the external playground URL. The component now works without the optional playgroundUrl prop, and the "Try It Yourself" section guides users to create their own test repositories instead of relying on external playground repos.

Changes in commit 0cbdd2f:

• Removed playgroundUrl prop from WorkflowPlayground component usage
• Updated "Try It Yourself" section to encourage users to set up their own repositories

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.12.0/x64/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/node_modules/.bin/astro build (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro dev (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)

[pelikhan]

@copilot split column does not render well in Astro fixed width layout. Use something else.

Minimize use of custom css as it is hard to make it work for all screen sizes.

[Copilot]

@copilot split column does not render well in Astro fixed width layout. Use something else.

Minimize use of custom css as it is hard to make it work for all screen sizes.

Replaced the split-column grid layout with a simple stacked vertical design using native HTML <details> elements for collapsible steps. The new design:

• Uses minimal custom CSS (85 fewer lines)
• Works perfectly with Starlight's fixed-width content area
• Leverages native browser collapsible functionality
• Maintains responsive behavior on all screen sizes

Changes in commit 567e96e.

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.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro dev (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)

[pelikhan]

@copilot use Astro Starlight native Steps components to create list of steps.

[Copilot]

@copilot use Astro Starlight native Steps components to create list of steps.

Replaced custom step implementation with Starlight's native Steps component. The new design:

• Uses Starlight's built-in <Steps> component with automatic numbering and styling
• Removed 113 lines of custom CSS
• Provides consistent theming that matches the rest of the documentation
• Uses proper semantic HTML (<ol> with numbered <li> items)
• Includes native accessibility features and vertical guidelines

Changes in commit f99342d.

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.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro build (dns block)
  • Triggering command: /opt/hostedtoolcache/node/24.12.0/x64/bin/node node /home/REDACTED/work/gh-aw/gh-aw/docs/node_modules/.bin/astro dev (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)

[mnkiefer]

@copilot: Run playground executor workflow once from this branch so we have snapshot data to visualize and test the interactive playground views.

[Copilot]

@copilot: Run playground executor workflow once from this branch so we have snapshot data to visualize and test the interactive playground views.

I don't have GitHub credentials in this environment to trigger workflows directly.

To run the playground executor workflow from this branch:

1. Navigate to the Actions tab
2. Click "Run workflow"
3. Select branch: copilot/add-custom-astro-component
4. Enter a task, for example: "Create an issue summarizing the new interactive playground component features"
5. Click "Run workflow"

The workflow is configured at .github/workflows/playground-executor.md with:

• 15-minute timeout
• Creates issues with [playground] prefix
• 7-day expiration for test data
• Labels: playground, ai-generated

Once run, the generated issue will provide snapshot data to test the playground views.

[mnkiefer]

@copilot: Remove docs reference to Playground page from navbar and from labs view for now, but should still be accessible if the URL is know.

[Copilot]

@copilot: Remove docs reference to Playground page from navbar and from labs view for now, but should still be accessible if the URL is know.

Removed Playground from navbar and sidebar. The page is still accessible at /playground/ via direct URL.

Changes in commit e6b99ee:

• Removed Playground entry from astro.config.mjs sidebar
• Kept playground-3up.mdx as the default playground page at /playground/
• Page uses WorkflowHeroPlayground with 3-up layout (workflow, graph, run)

The Playground page is no longer in navigation but remains fully functional when accessed directly.

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.12.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)