docs(www): update content and navigation (#4875)

Author: timdeschryver

projects/ngrx.io/content/guide/store/action-groups.md

@@ -2,14 +2,12 @@
 
 <div class="video-container">
   <div class="video-responsive-wrapper">
-
     <iframe
       src="https://www.youtube.com/embed/rk83ZMqEDV4"
       allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
       frameborder="0"
     ></iframe>
-
   </div>
 </div>
 

projects/ngrx.io/content/guide/store/feature-creators.md

@@ -1,4 +1,5 @@
 # Feature Creators
+
 <div class="video-container">
   <div class="video-responsive-wrapper">
     <iframe

projects/ngrx.io/content/marketing/contributing.md

@@ -14,14 +14,12 @@ Watch as Brandon Roberts and Jan-Niklas Wortmann walk through how to contribute
 
 <div class="video-container">
   <div class="video-responsive-wrapper">
-
     <iframe
       src="https://www.youtube.com/embed/ug0c1tUegm4"
       allow="accelerometer; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
       frameborder="0"
     ></iframe>
-
   </div>
 </div>
 

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

@@ -99,7 +99,7 @@ To make this possible set the generic type of the `effect` method to `void`.
 <ngrx-code-example header="movies.store.ts">
 
 ```ts
-  readonly getAllMovies = this.effect<void>(
+readonly getAllMovies = this.effect<void>(
     // The name of the source stream doesn't matter: `trigger$`, `source$` or `$` are good
     // names. We encourage to choose one of these and use them consistently in your codebase.
     (trigger$) => trigger$.pipe(

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

@@ -98,7 +98,7 @@ The `select` method accepts a dictionary of observables as input and returns an
 <ngrx-code-example header="movies.store.ts">
 
 ```ts
-  private readonly vm$ = this.select({
+private readonly vm$ = this.select({
     movies: this.movies$,
     userPreferredMovieIds: this.userPreferredMovieIds$,
     userPreferredMovies: this.userPreferredMovies$

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

@@ -99,11 +99,16 @@ Below are the steps of integrating `ComponentStore` into a component.
 
 First, the state for the component needs to be identified. In `SlideToggleComponent` only the state of whether the toggle is turned ON or OFF is stored.
 
-<ngrx-code-example header="src/app/slide-toggle.component.ts"
+<ngrx-code-example
+  header="src/app/slide-toggle.component.ts"
   path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
   region="state">
 
-`ts`
+```ts
+export interface SlideToggleState {
+  checked: boolean;
+}
+```
 
 </ngrx-code-example>
 
@@ -120,7 +125,11 @@ In this example `ComponentStore` is provided directly in the component. This wor
   path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
   region="providers">
 
-`ts`
+```ts
+@Component({
+  selector: 'mat-slide-toggle',
+  templateUrl: 'slide-toggle.html',
+```
 
 </ngrx-code-example>
 
@@ -138,11 +147,21 @@ When it is called with a callback, the state is updated.
 
 </ngrx-docs-alert>
 
-<ngrx-code-example header="src/app/slide-toggle.component.ts"
+<ngrx-code-example
+  header="src/app/slide-toggle.component.ts"
   path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
   region="init">
 
-`ts`
+```ts
+constructor(
+  private readonly componentStore: ComponentStore<SlideToggleState>
+) {
+  // set defaults
+  this.componentStore.setState({
+    checked: false,
+  });
+}
+```
 
 </ngrx-code-example>
 
@@ -159,7 +178,11 @@ When a user clicks the toggle (triggering a 'change' event), instead of calling
   path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
   region="updater">
 
-`ts`
+```ts
+@Input() set checked(value: boolean) {
+    this.setChecked(value);
+  }
+```
 
 </ngrx-code-example>
 
@@ -170,11 +193,18 @@ Finally, the state is aggregated with selectors into two properties:
 - `vm$` property collects all the data needed for the template - this is the _ViewModel_ of `SlideToggleComponent`.
 - `change` is the `@Output` of `SlideToggleComponent`. Instead of creating an `EventEmitter`, here the output is connected to the Observable source directly.
 
-<ngrx-code-example header="src/app/slide-toggle.component.ts"
+<ngrx-code-example
+  header="src/app/slide-toggle.component.ts"
   path="component-store-slide-toggle/src/app/slide-toggle.component.ts"
   region="selector">
 
-`ts`
+```ts
+// Observable<MatSlideToggleChange> used instead of EventEmitter
+  @Output() readonly change = this.componentStore.select((state) => ({
+    source: this,
+    checked: state.checked,
+  }));
+```
 
 </ngrx-code-example>
 
@@ -228,23 +258,57 @@ You can see the examples at StackBlitz:
 
 With `ComponentStore` extracted into `PaginatorStore`, the developer is now using updaters and effects to update the state. `@Input` values are passed directly into `updater`s as their arguments.
 
-<ngrx-code-example header="src/app/paginator.store.ts"
+<ngrx-code-example
+  header="src/app/paginator.store.ts"
   path="component-store-paginator-service/src/app/paginator.component.ts"
   region="inputs">
 
-`ts`
+```ts
+@Input() set pageIndex(value: string | number) {
+    this.paginatorStore.setPageIndex(value);
+  }
+
+  @Input() set length(value: string | number) {
+    this.paginatorStore.setLength(value);
+  }
+
+  @Input() set pageSize(value: string | number) {
+    this.paginatorStore.setPageSize(value);
+  }
+
+  @Input() set pageSizeOptions(value: readonly number[]) {
+    this.paginatorStore.setPageSizeOptions(value);
+  }
+```
 
 </ngrx-code-example>
 
 Not all `updater`s have to be called in the `@Input`. For example, `changePageSize` is called from the template.
 
 Effects are used to perform additional validation and get extra information from sources with derived data (i.e. selectors).
 
-<ngrx-code-example header="src/app/paginator.store.ts"
+<ngrx-code-example
+  header="src/app/paginator.store.ts"
   path="component-store-paginator-service/src/app/paginator.component.ts"
   region="updating-state">
 
-`ts`
+```ts
+changePageSize(newPageSize: number) {
+    this.paginatorStore.changePageSize(newPageSize);
+  }
+  nextPage() {
+    this.paginatorStore.nextPage();
+  }
+  firstPage() {
+    this.paginatorStore.firstPage();
+  }
+  previousPage() {
+    this.paginatorStore.previousPage();
+  }
+  lastPage() {
+    this.paginatorStore.lastPage();
+  }
+```
 
 </ngrx-code-example>
 

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

@@ -1,3 +1,10 @@
+<ngrx-docs-alert type="error">
+
+The `@ngrx/component` package is in <a href="https://github.com/ngrx/platform/issues/4872" target="_blank">maintenance mode</a>.
+Changes to this package are limited to critical bug fixes.
+
+</ngrx-docs-alert>
+
 # @ngrx/component
 
 Component is a library for building reactive Angular templates.

projects/www/src/app/pages/guide/component/install.md

@@ -1,3 +1,10 @@
+<ngrx-docs-alert type="error">
+
+The `@ngrx/component` package is in <a href="https://github.com/ngrx/platform/issues/4872" target="_blank">maintenance mode</a>.
+Changes to this package are limited to critical bug fixes.
+
+</ngrx-docs-alert>
+
 # Installation
 
 ## Installing with `ng add`

projects/www/src/app/pages/guide/component/let.md

@@ -1,3 +1,10 @@
+<ngrx-docs-alert type="error">
+
+The `@ngrx/component` package is in <a href="https://github.com/ngrx/platform/issues/4872" target="_blank">maintenance mode</a>.
+Changes to this package are limited to critical bug fixes.
+
+</ngrx-docs-alert>
+
 # Let Directive
 
 The `*ngrxLet` directive serves a convenient way of binding observables to a view context

projects/www/src/app/pages/guide/component/push.md

@@ -1,3 +1,10 @@
+<ngrx-docs-alert type="error">
+
+The `@ngrx/component` package is in <a href="https://github.com/ngrx/platform/issues/4872" target="_blank">maintenance mode</a>.
+Changes to this package are limited to critical bug fixes.
+
+</ngrx-docs-alert>
+
 # Push Pipe
 
 The `ngrxPush` pipe serves as a drop-in replacement for the `async` pipe.