docs(www): update content and navigation

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.

projects/www/src/app/pages/guide/data/entity-actions.md

@@ -124,7 +124,8 @@ For example, the default generated `Action.type` for the operation that queries
 The `EntityActionFactory.create()` method calls the factory's `formatActionType()` method
 to produce the `Action.type` string.
 
-Because NgRx Data ignores the `type`, you can replace `formatActionType()` with your own method if you prefer a different format or provide and inject your own `EntityActionFactory`.
+Because NgRx Data ignores the `type`, you can replace `formatActionType()` with your own method if you prefer a different format
+or provide and inject your own `EntityActionFactory`.
 
 </ngrx-docs-alert>
 

projects/www/src/app/pages/guide/data/entity-metadata.md

@@ -155,10 +155,9 @@ export function nameAndSayingFilter(
   entities: Villain[],
   pattern: string
 ) {
-  return (
-    PropsFilterFnFactory <
-    Villain >
-    ['name', 'saying'](entities, pattern)
+  return PropsFilterFnFactory<Villain>[('name', 'saying')](
+    entities,
+    pattern
   );
 }
 ```

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

@@ -342,7 +342,7 @@ export const routes: Route[] = [
 
 You can provide root-/feature-level effects with the provider `USER_PROVIDED_EFFECTS`.
 
-<ngrx-code-example >
+<ngrx-code-example>
 
 ```ts
 providers: [

projects/www/src/app/pages/guide/eslint-plugin/index.md

@@ -126,6 +126,7 @@ module.exports = tseslint.config({
 
 | Name                                                                                                                          | Description                                                                       | Category   | Fixable | Has suggestions | Configurable | Requires type information |
 | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ---------- | ------- | --------------- | ------------ | ------------------------- |
+| [@ngrx/enforce-type-call](/guide/eslint-plugin/rules/enforce-type-call)                                                       | The `type` function must be called.                                               | problem    | Yes     | No              | No           | No                        |
 | [@ngrx/prefer-protected-state](/guide/eslint-plugin/rules/prefer-protected-state)                                             | A Signal Store prefers protected state                                            | suggestion | No      | Yes             | No           | No                        |
 | [@ngrx/signal-state-no-arrays-at-root-level](/guide/eslint-plugin/rules/signal-state-no-arrays-at-root-level)                 | signalState should accept a record or dictionary as an input argument.            | problem    | No      | No              | No           | No                        |
 | [@ngrx/signal-store-feature-should-use-generic-type](/guide/eslint-plugin/rules/signal-store-feature-should-use-generic-type) | A custom Signal Store feature that accepts an input should define a generic type. | problem    | Yes     | No              | No           | No                        |

projects/www/src/app/pages/guide/eslint-plugin/rules/enforce-type-call.md

@@ -10,3 +10,35 @@ The `type` function must be called.
 
 <!-- Everything above this generated, do not edit -->
 <!-- MANUAL-DOC:START -->
+
+## Rule Details
+
+This rule ensures that the `type` function from `@ngrx/signals` is properly called when used to define types. The function must be invoked with parentheses `()` after the generic type parameter.
+
+Examples of **incorrect** code for this rule:
+
+```ts
+import { type } from '@ngrx/signals';
+const stateType = type<{ count: number }>;
+```
+
+```ts
+import { type as typeFn } from '@ngrx/signals';
+const stateType = typeFn<{ count: number }>;
+```
+
+Examples of **correct** code for this rule:
+
+```ts
+import { type } from '@ngrx/signals';
+const stateType = type<{ count: number }>();
+```
+
+```ts
+import { type as typeFn } from '@ngrx/signals';
+const stateType = typeFn<{ count: number; name: string }>();
+```
+
+## Further reading
+
+- [Signal Store Documentation](guide/signals/signal-store)