Skip to content

Commit 785d345

Browse files
brandyscarneybrandyscarney
committed
docs(navigation): combine playground code to one index file
1 parent 91f7811 commit 785d345

3 files changed

Lines changed: 61 additions & 104 deletions

File tree

‎docs/angular/navigation.md‎

Lines changed: 3 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -201,58 +201,9 @@ To get started with standalone components [visit Angular's official docs](https:
201201

202202
## Live Example
203203

204-
import Playground from '@site/src/components/global/Playground';
205-
206-
import angular_app_routes_ts from '@site/static/usage/v9/navigation/angular/app_routes_ts.md';
207-
import angular_app_component_html from '@site/static/usage/v9/navigation/angular/app_component_html.md';
208-
import angular_app_component_ts from '@site/static/usage/v9/navigation/angular/app_component_ts.md';
209-
import angular_example_component_html from '@site/static/usage/v9/navigation/angular/example_component_html.md';
210-
import angular_example_component_ts from '@site/static/usage/v9/navigation/angular/example_component_ts.md';
211-
import angular_dashboard_page_component_html from '@site/static/usage/v9/navigation/angular/dashboard_page_component_html.md';
212-
import angular_dashboard_page_component_ts from '@site/static/usage/v9/navigation/angular/dashboard_page_component_ts.md';
213-
import angular_item_detail_page_component_html from '@site/static/usage/v9/navigation/angular/item_detail_page_component_html.md';
214-
import angular_item_detail_page_component_ts from '@site/static/usage/v9/navigation/angular/item_detail_page_component_ts.md';
215-
import angular_settings_page_component_html from '@site/static/usage/v9/navigation/angular/settings_page_component_html.md';
216-
import angular_settings_page_component_ts from '@site/static/usage/v9/navigation/angular/settings_page_component_ts.md';
217-
218-
import react_main_tsx from '@site/static/usage/v9/navigation/react/main_tsx.md';
219-
import react_dashboard_page_tsx from '@site/static/usage/v9/navigation/react/dashboard_page_tsx.md';
220-
import react_item_detail_page_tsx from '@site/static/usage/v9/navigation/react/item_detail_page_tsx.md';
221-
import react_settings_page_tsx from '@site/static/usage/v9/navigation/react/settings_page_tsx.md';
222-
223-
<Playground
224-
version="9"
225-
src="usage/v9/navigation/demo.html"
226-
code={{
227-
angular: {
228-
files: {
229-
'src/app/app.routes.ts': angular_app_routes_ts,
230-
'src/app/app.component.html': angular_app_component_html,
231-
'src/app/app.component.ts': angular_app_component_ts,
232-
'src/app/example.component.html': angular_example_component_html,
233-
'src/app/example.component.ts': angular_example_component_ts,
234-
'src/app/dashboard/dashboard-page.component.html': angular_dashboard_page_component_html,
235-
'src/app/dashboard/dashboard-page.component.ts': angular_dashboard_page_component_ts,
236-
'src/app/item-detail/item-detail-page.component.html': angular_item_detail_page_component_html,
237-
'src/app/item-detail/item-detail-page.component.ts': angular_item_detail_page_component_ts,
238-
'src/app/settings/settings-page.component.html': angular_settings_page_component_html,
239-
'src/app/settings/settings-page.component.ts': angular_settings_page_component_ts,
240-
},
241-
},
242-
react: {
243-
files: {
244-
'src/main.tsx': react_main_tsx,
245-
'src/pages/DashboardPage.tsx': react_dashboard_page_tsx,
246-
'src/pages/ItemDetailPage.tsx': react_item_detail_page_tsx,
247-
'src/pages/SettingsPage.tsx': react_settings_page_tsx,
248-
},
249-
},
250-
}}
251-
size="large"
252-
includeIonContent={false}
253-
devicePreview
254-
defaultFramework="angular"
255-
/>
204+
import NavigationPlayground from '@site/static/usage/v9/navigation/index.md';
205+
206+
<NavigationPlayground defaultFramework="angular" />
256207

257208
## Linear Routing versus Non-Linear Routing
258209

‎docs/react/navigation.md‎

Lines changed: 3 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -499,58 +499,9 @@ The example below shows how the Spotify app reuses the same album component to s
499499

500500
## Live Example
501501

502-
import Playground from '@site/src/components/global/Playground';
503-
504-
import angular_app_routes_ts from '@site/static/usage/v9/navigation/angular/app_routes_ts.md';
505-
import angular_app_component_html from '@site/static/usage/v9/navigation/angular/app_component_html.md';
506-
import angular_app_component_ts from '@site/static/usage/v9/navigation/angular/app_component_ts.md';
507-
import angular_example_component_html from '@site/static/usage/v9/navigation/angular/example_component_html.md';
508-
import angular_example_component_ts from '@site/static/usage/v9/navigation/angular/example_component_ts.md';
509-
import angular_dashboard_page_component_html from '@site/static/usage/v9/navigation/angular/dashboard_page_component_html.md';
510-
import angular_dashboard_page_component_ts from '@site/static/usage/v9/navigation/angular/dashboard_page_component_ts.md';
511-
import angular_item_detail_page_component_html from '@site/static/usage/v9/navigation/angular/item_detail_page_component_html.md';
512-
import angular_item_detail_page_component_ts from '@site/static/usage/v9/navigation/angular/item_detail_page_component_ts.md';
513-
import angular_settings_page_component_html from '@site/static/usage/v9/navigation/angular/settings_page_component_html.md';
514-
import angular_settings_page_component_ts from '@site/static/usage/v9/navigation/angular/settings_page_component_ts.md';
515-
516-
import react_main_tsx from '@site/static/usage/v9/navigation/react/main_tsx.md';
517-
import react_dashboard_page_tsx from '@site/static/usage/v9/navigation/react/dashboard_page_tsx.md';
518-
import react_item_detail_page_tsx from '@site/static/usage/v9/navigation/react/item_detail_page_tsx.md';
519-
import react_settings_page_tsx from '@site/static/usage/v9/navigation/react/settings_page_tsx.md';
520-
521-
<Playground
522-
version="9"
523-
src="usage/v9/navigation/demo.html"
524-
code={{
525-
angular: {
526-
files: {
527-
'src/app/app.routes.ts': angular_app_routes_ts,
528-
'src/app/app.component.html': angular_app_component_html,
529-
'src/app/app.component.ts': angular_app_component_ts,
530-
'src/app/example.component.html': angular_example_component_html,
531-
'src/app/example.component.ts': angular_example_component_ts,
532-
'src/app/dashboard/dashboard-page.component.html': angular_dashboard_page_component_html,
533-
'src/app/dashboard/dashboard-page.component.ts': angular_dashboard_page_component_ts,
534-
'src/app/item-detail/item-detail-page.component.html': angular_item_detail_page_component_html,
535-
'src/app/item-detail/item-detail-page.component.ts': angular_item_detail_page_component_ts,
536-
'src/app/settings/settings-page.component.html': angular_settings_page_component_html,
537-
'src/app/settings/settings-page.component.ts': angular_settings_page_component_ts,
538-
},
539-
},
540-
react: {
541-
files: {
542-
'src/main.tsx': react_main_tsx,
543-
'src/pages/DashboardPage.tsx': react_dashboard_page_tsx,
544-
'src/pages/ItemDetailPage.tsx': react_item_detail_page_tsx,
545-
'src/pages/SettingsPage.tsx': react_settings_page_tsx,
546-
},
547-
},
548-
}}
549-
size="large"
550-
includeIonContent={false}
551-
devicePreview
552-
defaultFramework="react"
553-
/>
502+
import NavigationPlayground from '@site/static/usage/v9/navigation/index.md';
503+
504+
<NavigationPlayground defaultFramework="react" />
554505

555506
### IonRouterOutlet in a Tabs View
556507

‎static/usage/v9/navigation/index.md‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import angular_app_routes_ts from './angular/app_routes_ts.md';
4+
import angular_app_component_html from './angular/app_component_html.md';
5+
import angular_app_component_ts from './angular/app_component_ts.md';
6+
import angular_example_component_html from './angular/example_component_html.md';
7+
import angular_example_component_ts from './angular/example_component_ts.md';
8+
import angular_dashboard_page_component_html from './angular/dashboard_page_component_html.md';
9+
import angular_dashboard_page_component_ts from './angular/dashboard_page_component_ts.md';
10+
import angular_item_detail_page_component_html from './angular/item_detail_page_component_html.md';
11+
import angular_item_detail_page_component_ts from './angular/item_detail_page_component_ts.md';
12+
import angular_settings_page_component_html from './angular/settings_page_component_html.md';
13+
import angular_settings_page_component_ts from './angular/settings_page_component_ts.md';
14+
15+
import react_main_tsx from './react/main_tsx.md';
16+
import react_dashboard_page_tsx from './react/dashboard_page_tsx.md';
17+
import react_item_detail_page_tsx from './react/item_detail_page_tsx.md';
18+
import react_settings_page_tsx from './react/settings_page_tsx.md';
19+
20+
export default function NavigationPlayground({ defaultFramework = 'angular' }) {
21+
return (
22+
<Playground
23+
version="9"
24+
src="usage/v9/navigation/demo.html"
25+
code={{
26+
angular: {
27+
files: {
28+
'src/app/app.routes.ts': angular_app_routes_ts,
29+
'src/app/app.component.html': angular_app_component_html,
30+
'src/app/app.component.ts': angular_app_component_ts,
31+
'src/app/example.component.html': angular_example_component_html,
32+
'src/app/example.component.ts': angular_example_component_ts,
33+
'src/app/dashboard/dashboard-page.component.html': angular_dashboard_page_component_html,
34+
'src/app/dashboard/dashboard-page.component.ts': angular_dashboard_page_component_ts,
35+
'src/app/item-detail/item-detail-page.component.html': angular_item_detail_page_component_html,
36+
'src/app/item-detail/item-detail-page.component.ts': angular_item_detail_page_component_ts,
37+
'src/app/settings/settings-page.component.html': angular_settings_page_component_html,
38+
'src/app/settings/settings-page.component.ts': angular_settings_page_component_ts,
39+
},
40+
},
41+
react: {
42+
files: {
43+
'src/main.tsx': react_main_tsx,
44+
'src/pages/DashboardPage.tsx': react_dashboard_page_tsx,
45+
'src/pages/ItemDetailPage.tsx': react_item_detail_page_tsx,
46+
'src/pages/SettingsPage.tsx': react_settings_page_tsx,
47+
},
48+
},
49+
}}
50+
includeIonContent={false}
51+
devicePreview
52+
defaultFramework={defaultFramework}
53+
/>
54+
);
55+
}

0 commit comments

Comments
 (0)