Migrate MDX documentation from Docusaurus raw-loader to Astro native imports

[Copilot]

This PR migrates all MDX documentation files from Docusaurus-style webpack raw-loader syntax to Astro's native Vite-based import system.

Changes

Updated 44 MDX files across the documentation with three key transformations:

1. Import Statement Migration

Replaced Docusaurus CodeBlock component with Astro Starlight's native Code component:

- import CodeBlock from "@theme/CodeBlock";
+ import { Code } from '@astrojs/starlight/components';

2. Raw Loader Conversion

Converted webpack's raw-loader syntax to Vite's native raw import using the ?raw suffix:

- import MyComponentSource from "!!raw-loader!../../samples/samples_v3/nextjs.tsx";
+ import MyComponentSource from '../../samples/samples_v3/nextjs.tsx?raw';

3. Component Usage Update

Updated component syntax to match Astro Starlight's Code component API:

- <CodeBlock language="tsx">{MyComponentSource}</CodeBlock>
+ <Code code={MyComponentSource} lang="tsx" />

Files Modified

• 37 component documentation files (/docs/components/*.mdx)
• 4 recipe documentation files (/docs/recipes/*.mdx)
• 1 custom view documentation (/docs/custom_top_level_views.mdx)
• 1 pro documentation (/docs/pro/nextjs.mdx)
• 1 properties documentation (/docs/properties/fields/selects.mdx)

Impact

This migration enables the documentation site to work with Astro's native import system, removing the dependency on webpack's raw-loader plugin. All code samples continue to display correctly with proper syntax highlighting using the Astro Starlight framework.

Verification

• ✅ Zero remaining !!raw-loader! references in any MDX file
• ✅ Zero remaining @theme/CodeBlock imports
• ✅ All Code components use consistent syntax with proper language specification
• ✅ All file paths preserved correctly with ?raw suffix

Original prompt

I need to update all the .mdx docs and replace the raw loader into the native astro way:

import CodeBlock from "@theme/CodeBlock"; import MyComponentSource from "!!raw-loader!../../samples/samples_v3/nextjs.tsx";

becomes:
import { Code } from '@astrojs/starlight/components'; import importedCode from '../../samples/samples_v3/nextjs.tsx?raw';

Check all mdx files under content/docs/docs

SUMMARY

TITLE: Migrate MDX Documentation from Docusaurus Raw Loader to Astro Native Import

USER INTENT: Update all .mdx documentation files to replace Docusaurus-style raw-loader imports with Astro's native raw import syntax.

TASK DESCRIPTION:

• Scan all MDX files located under content/docs/docs/
• Replace old Docusaurus import pattern: import MyComponentSource from "!!raw-loader!../../samples/samples_v3/nextjs.tsx"; with Astro pattern: import importedCode from '../../samples/samples_v3/nextjs.tsx?raw';
• Replace import CodeBlock from "@theme/CodeBlock"; with import { Code } from '@astrojs/starlight/components';
• Update all instances where <CodeBlock> component is used to use the new <Code> component with appropriate props

EXISTING:

• MDX documentation files exist under content/docs/docs/ directory
• Files currently use Docusaurus-style raw-loader syntax for importing code samples
• Code samples are referenced from paths like ../../samples/samples_v3/nextjs.tsx

PENDING:

• Identify all .mdx files in content/docs/docs/ that use the old raw-loader pattern
• Replace import statements from !!raw-loader! pattern to ?raw pattern
• Replace @theme/CodeBlock imports with @astrojs/starlight/components Code component
• Update component usage from <CodeBlock> to <Code> with proper props mapping
• Verify all file paths remain correct after migration
• Test that code samples display correctly with new Astro components

CODE STATE:

Before (Docusaurus pattern):

import CodeBlock from "@theme/CodeBlock";
import MyComponentSource from "!!raw-loader!../../samples/samples_v3/nextjs.tsx";

After (Astro pattern):

import { Code } from '@astrojs/starlight/components';
import importedCode from '../../samples/samples_v3/nextjs.tsx?raw';

RELEVANT CODE/DOCUMENTATION SNIPPETS:

• Target directory: content/docs/docs/
• File extension: .mdx
• Import pattern to find: from "!!raw-loader!
• Import pattern to replace with: from '...[filepath]?raw'
• Component to find: @theme/CodeBlock
• Component to replace with: @astrojs/starlight/components with { Code }

OTHER NOTES:

• This is a migration from Docusaurus to Astro documentation framework
• The ?raw suffix is Vite's native way to import files as raw strings
• Variable names may vary (e.g., MyComponentSource, importedCode) and should be preserved or adjusted as needed
• Need to ensure proper quote style consistency (single vs double quotes)
• Component prop mappings between <CodeBlock> and <Code> may need adjustment

---

💡 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.