Add "Setup and tooling" section to sidebar with new Dev environment article

[Copilot]

Implementation Plan

Fixes #64

I will implement the following changes to restructure the "Get started" sidebar section:

• Create new "Setup and tooling" parent section in sidebar.topics.ts
• Move "Prerequisites" under "Setup and tooling"
• Create new "Dev environment" article with content from Microsoft Learn
• Add Pivot/PivotSelector components for different IDEs (Visual Studio, VS Code, JetBrains Rider)
• Include Aspire CLI content
• Include Aspire VS Code extension information
• Remove .NET CLI references (as specified)
• Address code review feedback
• Test the build to ensure no errors
• Validate the sidebar structure displays correctly
• Address PR review comments (move headings outside Pivot, use Kbd and Steps)
• Restructure headings to be shared across all pivot options

Summary

This PR successfully restructures the "Get started" sidebar by adding a new "Setup and tooling" parent section with "Prerequisites" and a new "Dev environment" article nested underneath. The new article uses Pivot/PivotSelector components to provide environment-specific guidance for Visual Studio Code, Visual Studio, JetBrains Rider, and the Aspire CLI.

Changes Made

1. Created /src/frontend/src/content/docs/get-started/dev-environment.mdx

• New comprehensive article detailing different development environments for Aspire
• Uses Pivot/PivotSelector components for interactive environment selection
• Visual Studio Code section: Includes the new Aspire extension with detailed installation instructions
• Visual Studio section: Updated to require version 17.10+ (consistent with other docs)
• JetBrains Rider section: Details the Aspire plugin
• Aspire CLI section: Focuses on CLI usage without .NET CLI references (as requested)

2. Updated /src/frontend/sidebar.topics.ts

• Added new "Setup and tooling" parent item under "Get started"
• Moved "Prerequisites" under "Setup and tooling"
• Added "Dev environment" under "Setup and tooling"
• Included full translations for all supported languages

3. Addressed PR Review Feedback

• Removed tableOfContents configuration from frontmatter
• Replaced keyboard shortcuts (e.g., Ctrl+Shift+X or Cmd+Shift+X on macOS) with <Kbd> components
• Wrapped all numbered lists in <Steps> components
• Changed ".NET development" to "C# development"
• Removed ".NET Aspire" references, using just "Aspire"
• Used <Kbd windows="F5" /> instead of F5
• Restructured headings to be shared across all pivot options:
  • Generic headings like "Overview", "Installation", "Setup", "Features", "Getting started", and "Next steps" now appear outside Pivot tags
  • Content inside each Pivot is specific to that IDE/environment
  • When users toggle between environments, the same headings remain visible with environment-specific content underneath
  • This provides a consistent navigation experience regardless of which development environment is selected

4. Code Quality

• Addressed all code review feedback
• No security vulnerabilities detected (CodeQL scan passed)

The changes improve the documentation structure and provide a consistent, accessible user experience with proper keyboard shortcut formatting, step-by-step instructions, and a unified heading structure that works across all pivot selections.

Original prompt

I'd like for you to draft me up a new PR that implements a change to the sidebar. I want to add an item to the Get started named Setup and tooling as a parent, then move Prerequisites under there with a new article details different Aspire IDE, and environments - name it Dev environment. Get the details from https://learn.microsoft.com/en-us/dotnet/aspire/fundamentals/setup-tooling and use Pivot and PivotSelector for the environments, include Aspire CLI too and drop .NET CLI. For the VS code include the new Aspire extension.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[IEvangelist]

Hey @copilot, please try to update the headings so that they're outside the , ideally the pivot only changes the rendered content, but not the headings. Also, please see all other feedback.

[Copilot]

Hey @copilot, please try to update the headings so that they're outside the , ideally the pivot only changes the rendered content, but not the headings. Also, please see all other feedback.

Done in commit ebcba15. All headings (h2, h3, h4) are now outside of <Pivot> tags. The structure now follows the pattern:

## Heading

<Pivot id="...">
Content here
</Pivot>

This provides better document structure and accessibility.

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: /usr/local/bin/node node /home/REDACTED/.npm/_npx/aa98e6899c6baff3/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)

[IEvangelist]

Hey @copilot, the headings need to be shared across each pivot. That's what I was trying to explain, generic headings so that when I toggle the pivot - the headings are the same regardless of selection.

[Copilot]

Hey @copilot, the headings need to be shared across each pivot. That's what I was trying to explain, generic headings so that when I toggle the pivot - the headings are the same regardless of selectio...

Done in commit 630920c. Restructured the document so headings are now shared across all pivot options:

Generic headings (visible for all selections):

• Overview

• Installation

• Required extensions

• Features

• Getting started

• Next steps

When users toggle between VS Code, Visual Studio, Rider, or CLI, the same headings remain visible with environment-specific content underneath each heading. This provides a consistent navigation experience regardless of which development environment is selected.

For example, the "## Installation" heading now appears once, and each Pivot contains its own installation instructions specific to that IDE/tool.

[Copilot]

Pull request overview

This PR restructures the "Get started" sidebar by introducing a new "Setup and tooling" parent section that contains the "Prerequisites" and a newly created "Dev environment" article. The new article provides comprehensive guidance on different development environments for Aspire, using interactive Pivot components to switch between Visual Studio Code, Visual Studio, JetBrains Rider, and Aspire CLI.

Key Changes

• Added a new "Setup and tooling" parent section in the sidebar hierarchy
• Created a comprehensive "Dev environment" article with IDE-specific guidance using Pivot/PivotSelector components
• Moved "Prerequisites" to be nested under the "Setup and tooling" section

Reviewed changes

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

File	Description
src/frontend/src/content/docs/get-started/dev-environment.mdx	New comprehensive article detailing different development environments (VS Code, Visual Studio, Rider, Aspire CLI) with installation instructions, setup steps, features, and getting started guides for each platform
src/frontend/sidebar.topics.ts	Updated sidebar structure to add "Setup and tooling" parent section with nested "Prerequisites" and "Dev environment" items, including translations for all supported languages

---

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

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[IEvangelist]

I'm curious what you think about this one @mitchdenny. I know it's still missing the codespaces and dev container bits you were initially describing. Would you imagine those would look like we had originally on Learn?