Is your feature request related to a problem? Please describe.
Code examples shown in the docs are manually maintained as raw JavaScript string literals in docs/src/data/extendedExamples/ (e.g. BottomNavigationBar.js). These are completely disconnected from the real, runnable code in example/src/Examples/. When the Example app is updated, the docs silently drift and there's no mechanism to catch the discrepancy.
Describe the solution you'd like
Introduce named region markers in the Example app source files using the standard VS Code folding convention:
// #region docs:bottom-nav-static
<BottomNavigation.Bar ... />
// #endregion docs:bottom-nav-static
At docs build time (inside the existing component-docs-plugin or docusaurus.config.js), a small extraction utility reads those markers and replaces the hand-written string literals in extendedExamples. The rendered output and the component remain unchanged, only the data source changes.
For guide pages (.mdx under docs/docs/guides/), an optional remark plugin could allow inline references:
tsx snippet="bottom-nav-static" file="../../example/src/Examples/BottomNavigationExample.tsx"
Additional context
The repo already has a custom Docusaurus plugin (docs/component-docs-plugin/index.js) that runs at build time and has access to the filesystem, making it the natural place to wire in snippet extraction with minimal new infrastructure.
Is your feature request related to a problem? Please describe.
Code examples shown in the docs are manually maintained as raw JavaScript string literals in docs/src/data/extendedExamples/ (e.g. BottomNavigationBar.js). These are completely disconnected from the real, runnable code in example/src/Examples/. When the Example app is updated, the docs silently drift and there's no mechanism to catch the discrepancy.
Describe the solution you'd like
Introduce named region markers in the Example app source files using the standard VS Code folding convention:
At docs build time (inside the existing component-docs-plugin or docusaurus.config.js), a small extraction utility reads those markers and replaces the hand-written string literals in extendedExamples. The rendered output and the component remain unchanged, only the data source changes.
For guide pages (.mdx under docs/docs/guides/), an optional remark plugin could allow inline references:
Additional context
The repo already has a custom Docusaurus plugin (docs/component-docs-plugin/index.js) that runs at build time and has access to the filesystem, making it the natural place to wire in snippet extraction with minimal new infrastructure.