Skip to content

Commit e7eabd4

Browse files
fix(www): use the stackblitz examples (#4895)
1 parent 527383b commit e7eabd4

File tree

11 files changed

+69
-12
lines changed

11 files changed

+69
-12
lines changed

projects/www/src/app/components/docs/stackblitz.component.ts

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,25 @@ import {
77
PLATFORM_ID,
88
ViewEncapsulation,
99
inject,
10-
input,
1110
viewChild,
1211
} from '@angular/core';
1312
import { ExamplesService } from '@ngrx-io/app/examples/examples.service';
1413

1514
@Component({
16-
selector: 'ngrx-stackblitz',
15+
selector: 'ngrx-docs-stackblitz',
1716
standalone: true,
18-
template: ` <div #example></div> `,
17+
template: `
18+
@if(isEmbedded) {
19+
<div [attr.title]="name" #example></div>
20+
} @else {
21+
<a (click)="openStackblitz()" [attr.title]="name"
22+
><ng-content>StackBlitz example</ng-content></a
23+
>
24+
}
25+
`,
1926
encapsulation: ViewEncapsulation.None,
2027
styles: [
2128
`
22-
ngrx-stackblitz iframe,
2329
ngrx-docs-stackblitz iframe {
2430
display: block;
2531
width: 100%;
@@ -33,11 +39,22 @@ export class StackblitzComponent implements AfterViewInit {
3339
examplesService = inject(ExamplesService);
3440
platformId = inject(PLATFORM_ID);
3541
@Input() name: string = '__base';
42+
@Input() embedded: string = 'false';
43+
3644
exampleRef = viewChild.required<ElementRef<HTMLDivElement>>('example');
3745

3846
ngAfterViewInit(): void {
3947
if (isPlatformServer(this.platformId)) return;
48+
if (!this.isEmbedded) return;
4049

4150
this.examplesService.load(this.exampleRef().nativeElement, this.name);
4251
}
52+
53+
openStackblitz(): void {
54+
this.examplesService.open(this.name);
55+
}
56+
57+
get isEmbedded(): boolean {
58+
return this.embedded !== 'false';
59+
}
4360
}

projects/www/src/app/examples/examples.service.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,4 +33,22 @@ export class ExamplesService {
3333
}
3434
);
3535
}
36+
37+
async open(exampleName: string) {
38+
const config = await this.getConfig(exampleName);
39+
40+
return sdk.openProject(
41+
{
42+
title: config.name,
43+
description: config.description,
44+
template: 'node',
45+
files: {
46+
...config.files,
47+
},
48+
},
49+
{
50+
openFile: config.open,
51+
}
52+
);
53+
}
3654
}
Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Component } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
standalone: true,
6+
template: ` <h1>NgRx base</h1> `,
7+
})
8+
export class App {}
Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { ApplicationConfig } from '@angular/core';
2+
3+
export const appConfig: ApplicationConfig = {
4+
providers: [],
5+
};
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: 'Starter project with NgRx dependencies'
2+
description: 'A simple Angular project with NgRx dependencies'
3+
extends: '../__base/stackblitz.yml'
4+
files:
5+
src/app.component.ts: './src/app.component.ts'
6+
src/app.config.ts: './src/app.config.ts'

projects/www/src/app/pages/guide/component-store/usage.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ Here's the simplified `SlideToggleComponent` example which uses `ComponentStore`
7878

7979
<ngrx-docs-alert type="help">
8080

81-
You can see the full example at StackBlitz: <live-example name="component-store-slide-toggle"></live-example>
81+
You can see the full example at StackBlitz: <ngrx-docs-stackblitz name="component-store-slide-toggle"></ngrx-docs-stackblitz>
8282

8383
</ngrx-docs-alert>
8484

@@ -234,8 +234,8 @@ What we can see is that while the _"PaginatorComponent providing ComponentStore"
234234
235235
You can see the examples at StackBlitz:
236236
237-
- "PaginatorComponent providing ComponentStore" <live-example name="component-store-paginator" noDownload></live-example>
238-
- "PaginatorComponent with PaginatorStore Service" <live-example name="component-store-paginator-service" noDownload></live-example>
237+
- "PaginatorComponent providing ComponentStore" <ngrx-docs-stackblitz name="component-store-paginator" noDownload></ngrx-docs-stackblitz>
238+
- "PaginatorComponent with PaginatorStore Service" <ngrx-docs-stackblitz name="component-store-paginator-service" noDownload></ngrx-docs-stackblitz>
239239
240240
</ngrx-docs-alert>
241241

projects/www/src/app/pages/guide/router-store/selectors.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ Usage:
1212

1313
<ngrx-docs-alert type="help">
1414

15-
You can see the full example at StackBlitz: <live-example name="router-store-selectors"></live-example>
15+
You can see the full example at StackBlitz: <ngrx-docs-stackblitz name="router-store-selectors"></ngrx-docs-stackblitz>
1616

1717
</ngrx-docs-alert>
1818

projects/www/src/app/pages/guide/store/index.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,11 @@ The following diagram represents the overall general flow of application state i
3333

3434
## Tutorial
3535

36-
The following tutorial shows you how to manage the state of a counter, and how to select and display it within an Angular component. Try the <live-example name="store" noDownload></live-example>.
36+
The following tutorial shows you how to manage the state of a counter, and how to select and display it within an Angular component.
3737

38-
1. Generate a new project using StackBlitz <live-example name="ngrx-start" noDownload></live-example>.
38+
<ngrx-docs-stackblitz name="store" embedded></ngrx-docs-stackblitz>
39+
40+
1. Generate a new project using the <ngrx-docs-stackblitz name="ngrx-start"></ngrx-docs-stackblitz>.
3941

4042
2. Right click on the `app` folder in StackBlitz and create a new file named `counter.actions.ts` to describe the counter actions to increment, decrement, and reset its value.
4143

projects/www/src/app/pages/guide/store/testing.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ describe('AppComponent reset selectors', () => {
219219

220220
</ngrx-code-example>
221221

222-
Try the <live-example name="testing-store"></live-example>.
222+
Try the <ngrx-docs-stackblitz name="testing-store"></ngrx-docs-stackblitz>.
223223

224224
### Integration Testing
225225

projects/www/src/app/pages/guide/store/walkthrough.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ The following example more extensively utilizes the key concepts of store to man
44

55
## Tutorial
66

7-
1. Generate a new project using StackBlitz <live-example name="ngrx-start" noDownload></live-example> and create a folder named `book-list` inside the `app` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
7+
1. Generate a new project using StackBlitz <ngrx-docs-stackblitz name="ngrx-start"></ngrx-docs-stackblitz> and create a folder named `book-list` inside the `app` folder. This folder is used to hold the book list component later in the tutorial. For now, let's start with adding a file named `books.model.ts` to reference different aspects of a book in the book list.
88

99
<ngrx-code-example header="src/app/book-list/books.model.ts" path="store-walkthrough/src/app/book-list/books.model.ts">
1010

0 commit comments

Comments
 (0)