Skip to content

Commit de72886

Browse files
ShaneKShaneK
committed
feat(playground): add default framework setting, migration angular/react navigation live example to use one playground
1 parent 58873e4 commit de72886

File tree

4 files changed

+117
-57
lines changed

4 files changed

+117
-57
lines changed

‎docs/angular/navigation.md‎

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

202202
## Live Example
203203

204-
import NavigationPlayground from '@site/static/usage/v9/navigation/index.md';
205-
206-
<NavigationPlayground />
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+
/>
207256

208257
## Linear Routing versus Non-Linear Routing
209258

‎docs/react/navigation.md‎

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

498498
## Live Example
499499

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

504553
### IonRouterOutlet in a Tabs View
505554

‎src/components/global/Playground/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -134,6 +134,7 @@ export default function Playground({
134134
showConsole,
135135
includeIonContent = true,
136136
version,
137+
defaultFramework,
137138
}: {
138139
code: { [key in UsageTarget]?: MdxContent | UsageTargetOptions };
139140
title?: string;
@@ -154,6 +155,11 @@ export default function Playground({
154155
* This will also load assets for StackBlitz from the specified version directory.
155156
*/
156157
version: string;
158+
/**
159+
* The framework to select by default when no user preference is stored.
160+
* If not specified, defaults to Angular when available, then the first available framework.
161+
*/
162+
defaultFramework?: UsageTarget;
157163
}) {
158164
if (!code || Object.keys(code).length === 0) {
159165
console.warn('No code usage examples provided for this Playground example.');
@@ -207,6 +213,13 @@ export default function Playground({
207213
};
208214

209215
const getDefaultUsageTarget = () => {
216+
/**
217+
* If a default framework was specified and code exists for it, use that.
218+
*/
219+
if (defaultFramework && code[defaultFramework] !== undefined) {
220+
return defaultFramework;
221+
}
222+
210223
/**
211224
* If there is a saved target from previously clicking the
212225
* framework buttons, and there is code for it, use that.

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

Lines changed: 0 additions & 51 deletions
This file was deleted.

0 commit comments

Comments
 (0)