rx-angular · LayZeeDK · Oct 17, 2022 · Oct 12, 2022 · Oct 12, 2022 · Oct 12, 2022
diff --git a/.editorconfig b/.editorconfig
@@ -8,6 +8,5 @@ indent_size = 2
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.md]
+[*.{md,mdx}]
 max_line_length = off
-trim_trailing_whitespace = false
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-[![rx-angular logo](https://raw.githubusercontent.com/rx-angular/rx-angular/main/docs/images/rx-angular_logo.png)](https://www.rx-angular.io/)
+[![rx-angular logo](https://raw.githubusercontent.com/rx-angular/rx-angular/main/docs/images/rx-angular_logo.png)](https://rx-angular.io/)
 
 # RxAngular ![rx-angular CI](https://github.com/rx-angular/rx-angular/workflows/rx-angular%20CI/badge.svg?branch=main)
 
@@ -7,10 +7,10 @@ performance and template rendering.
 
 RxAngular is divided into different packages:
 
-- [📦@rx-angular/cdk](https://github.com/rx-angular/rx-angular/tree/main/libs/cdk/README.md)
-- [📦@rx-angular/eslint-plugin](https://github.com/rx-angular/rx-angular/tree/main/libs/eslint-plugin/README.md)
-- [📦@rx-angular/state](https://github.com/rx-angular/rx-angular/tree/main/libs/state/README.md)
-- [📦@rx-angular/template](https://github.com/rx-angular/rx-angular/tree/main/libs/template/README.md)
+- [📦@rx-angular/cdk](https://rx-angular.io/docs/cdk)
+- [📦@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin)
+- [📦@rx-angular/state](https://rx-angular.io/docs/state)
+- [📦@rx-angular/template](https://rx-angular.io/docs/template)
 
 Used together, you get a powerful tool for developing high-performance angular applications with or without NgZone.
 
@@ -63,17 +63,17 @@ This repository holds a set of helpers to create **fully reactive** as well as *
 
 ## Packages
 
-Find details in the linked readme files below for installation and setup instructions, examples and resources.
+Find details in the links to the official docs below for installation and setup instructions, examples and resources.
 
-- [📦@rx-angular/cdk](https://github.com/rx-angular/rx-angular/tree/main/libs/cdk/README.md) - Component Development Kit
-- [📦@rx-angular/eslint-plugin](https://github.com/rx-angular/rx-angular/tree/main/libs/eslint-plugin/README.md) - ESLint Plugin
-- [📦@rx-angular/state](https://github.com/rx-angular/rx-angular/tree/main/libs/state/README.md) - Imperative & Reactive Component State-Management
-- [📦@rx-angular/template](https://github.com/rx-angular/rx-angular/tree/main/libs/template/README.md) - High-Performance Non-Blocking Rendering
+- [📦@rx-angular/cdk](https://rx-angular.io/docs/cdk) - Component Development Kit
+- [📦@rx-angular/eslint-plugin](https://rx-angular.io/docs/eslint-plugin) - ESLint Plugin
+- [📦@rx-angular/state](https://rx-angular.io/docs/state) - Imperative & Reactive Component State-Management
+- [📦@rx-angular/template](https://rx-angular.io/docs/template) - High-Performance Non-Blocking Rendering
 
 ## Version Compatibility
 
-| Angular                | RxJS                 | @rx-angular/state | @rx-angular/template | @rx-angular/cdk     | 
-|------------------------|----------------------|-------------------|----------------------|---------------------|
+| Angular                | RxJS                 | @rx-angular/state | @rx-angular/template | @rx-angular/cdk     |
+| ---------------------- | -------------------- | ----------------- | -------------------- | ------------------- |
 | `14`                   | `^7.4.0`             | `> 1.4.6`         | `> 1.0.0-beta.29`    | `> 1.0.0-alpha.10`  |
 | `^12.0.0` or `^13.0.0` | `^6.5.5` or `^7.4.0` | `> 1.4.6`         | `> 1.0.0-beta.29`    | `> 1.0.0-alpha.10`  |
 | `^11.0.0`              | `^6.5.5`             | `<= 1.4.6`        | `<= 1.0.0-beta.29`   | `<= 1.0.0-alpha.10` |

diff --git a/apps/demos/src/app/features/template/render-callback/renderCallback.md b/apps/demos/src/app/features/template/render-callback/renderCallback.md
@@ -1,56 +1,62 @@
 ### Using the RenderCallback
- The RenderCallback notifies users about when the `LetDirective` "rendered" the latest values of the
- active template.
- At the time the `rendered` callback emits, the DOM should be already updated with the latest changes connected
- to this instance.
- The callback will emit the latest value rendered to the template.
-
- Since structural directives currently do not support `@Output` bindings, developers have to use other mechanics
- to access this event.
- Beyond the traditional approach the `LetDirectives` offers an input property as renderCallback.
- This enables developers to bind a `NextObserver` (e.g. `Subject`) to the `LetDirective`which will emit after
- rendering happened.
-
- You can choose between using the [Template syntax](https://angular.io/guide/template-syntax), injecting the
- `LetDirective` as `@ViewChild()` and subscribe the event manually or providing a RenderCallback on your own.
-
- Please note that due to the built-in
-   [coalescing][https://github.com/rx-angular/rx-angular/blob/main/libs/template/docs/concepts.md] can cause this
-   callback different in situations where multiple `LetDirectives` are used to render the same
- `Component`. Make sure to subscribe to every instance in your component to avoid missing render
- notifications.
-
- #### RenderCallback Input
- ```html
- <ng-container *rxLet="content$; let content; strategy: strategyName$; renderCallback: renderCallback$">
-    <div class="example-box">
-        {{ content }}
-    </div>
- </ng-container>
- ```
- ```ts
- // inside component:
- readonly renderCallback$ = new Subject<string>();
- ```
- #### Template syntax
- ```html
- <!-- template syntax with output binding -->
- <ng-template let-content
-    [rxLet]="content$"
-    (rendered)="onTemplateRendered($event)">
-  <div class="example-box">
-    {{ content }}
-  </div>
- </ng-template>
- ```
- #### ViewChild
- ```html
- <div *rxLet="content$; let content" class="example-box">
-  {{ content }}
- </div>
- ```
- ```ts
- // inside of your component
- \@ViewChild(LetDirective) rxLet: LetDirective<string>;
- this.rxLet.rendered.subscribe(value => console.log('afterRender', value));
- ```
+
+The RenderCallback notifies users about when the `LetDirective` "rendered" the latest values of the
+active template.
+At the time the `rendered` callback emits, the DOM should be already updated with the latest changes connected
+to this instance.
+The callback will emit the latest value rendered to the template.
+
+Since structural directives currently do not support `@Output` bindings, developers have to use other mechanics
+to access this event.
+Beyond the traditional approach the `LetDirectives` offers an input property as renderCallback.
+This enables developers to bind a `NextObserver` (e.g. `Subject`) to the `LetDirective`which will emit after
+rendering happened.
+
+You can choose between using the [Template syntax](https://angular.io/guide/template-syntax), injecting the
+`LetDirective` as `@ViewChild()` and subscribe the event manually or providing a RenderCallback on your own.
+
+Please note that due to the built-in
+[coalescing][https://rx-angular.io/docs/template/concepts] can cause this
+callback different in situations where multiple `LetDirectives` are used to render the same
+`Component`. Make sure to subscribe to every instance in your component to avoid missing render
+notifications.
+
+#### RenderCallback Input
+
+```html
+<ng-container
+  *rxLet="content$; let content; strategy: strategyName$; renderCallback: renderCallback$"
+>
+  <div class="example-box">{{ content }}</div>
+</ng-container>
+```
+
+```ts
+// inside component:
+readonly renderCallback$ = new Subject<string>();
+```
+
+#### Template syntax
+
+```html
+<!-- template syntax with output binding -->
+<ng-template
+  let-content
+  [rxLet]="content$"
+  (rendered)="onTemplateRendered($event)"
+>
+  <div class="example-box">{{ content }}</div>
+</ng-template>
+```
+
+#### ViewChild
+
+```html
+<div *rxLet="content$; let content" class="example-box">{{ content }}</div>
+```
+
+```ts
+// inside of your component
+\@ViewChild(LetDirective) rxLet: LetDirective<string>;
+this.rxLet.rendered.subscribe(value => console.log('afterRender', value));
+```
diff --git a/...c/app/features/tutorials/basics/Readme.md → ...c/app/features/tutorials/basics/README.md b/...c/app/features/tutorials/basics/Readme.md → ...c/app/features/tutorials/basics/README.md
@@ -24,6 +24,7 @@ There is a background process running in the child component. The input value fr
 Furthermore, there is a refresh button. A click on it also refreshes the list data.
 
 The topics we will discuss in this tutorial include:
+
 - [Setting up a reactive state, selections, and UI interactions][1-setup]
 - [Handling @Inputs reactively][2-input-bindings]
 - [Handling @Output reactively][3-output-bindings]

diff --git a/apps/docs/docs/cdk/_category_.json b/apps/docs/docs/cdk/_category_.json
@@ -1,8 +1,3 @@
 {
-  "label": "@rx-angular/cdk",
-  "position": 1,
-  "link": {
-    "type": "generated-index",
-    "description": "RxAngular CDK"
-  }
+  "label": "@rx-angular/cdk"
 }
diff --git a/apps/docs/docs/cdk/api/_category_.json b/apps/docs/docs/cdk/api/_category_.json
@@ -1,4 +1,9 @@
 {
   "label": "API",
-  "link": null
+  "position": 100,
+  "link": {
+    "type": "generated-index",
+    "title": "API reference",
+    "slug": "/state/cdk"
+  }
 }
diff --git a/apps/docs/docs/cdk/cdk.mdx b/apps/docs/docs/cdk/cdk.mdx
@@ -0,0 +1,15 @@
+---
+sidebar_label: '@rx-angular/cdk'
+sidebar_position: 1
+title: 'CDK'
+hide_title: true
+---
+
+import Readme, { toc as readmeToc } from '@site/../../libs/cdk/README.md';
+
+<Readme />
+
+<!-- Workaround for generating table of contents -->
+<!-- See https://github.com/facebook/docusaurus/issues/3915#issuecomment-896193142 -->
+
+export const toc = [...readmeToc];