docs: rework website rule page

website/docs/rules/angular/avoid-preserve-whitespace-false.md → website/docs/rules/angular/avoid-preserve-whitespace-false.mdx

@@ -1,20 +1,12 @@
-# Avoid preserveWhitespace: false
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-preserve-whitespace-false
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.5.1" severity="warning" />
 
 Avoid setting `preserveWhitespace` in Angular `@Component` annotations to false explicitly. Its default value is already false.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 @Component(
@@ -31,7 +23,7 @@ class Component {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 @Component(

website/docs/rules/angular/component-annotation-arguments-ordering.md → website/docs/rules/angular/component-annotation-arguments-ordering.mdx

@@ -1,16 +1,6 @@
-# Component annotation arguments ordering
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-component-annotation-arguments-ordering
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.9.0" severity="style" hasConfig />
 
 Enforces Angular `@Component` annotation arguments ordering.
 
@@ -27,7 +17,7 @@ The value for `order` may be an array consisting of the following strings (defau
 - exports
 - change-detection
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:

website/docs/rules/angular/prefer-on-push-cd-strategy.md → website/docs/rules/angular/prefer-on-push-cd-strategy.mdx

@@ -1,21 +1,13 @@
-# Prefer using onPush change detection strategy
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-prefer-on-push-cd-strategy
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.8.0" severity="warning" />
 
 Prefer setting `changeDetection: ChangeDetectionStrategy.OnPush` in Angular `@Component` annotations.
 OnPush strategy should be used as the default because using Default strategy leads to performance issues.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 @Component(
@@ -30,7 +22,7 @@ class Component {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 @Component(

website/docs/rules/common/avoid-banned-imports.md → website/docs/rules/common/avoid-banned-imports.mdx

@@ -1,35 +1,27 @@
-# Avoid banned imports
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-banned-imports
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.16.0" severity="style" hasConfig />
 
 Configure some imports that you want to ban.
 
 ### Example {#example}
 
 With the configuration in the example below, here are some bad/good examples.
 
-Bad:
+**❌ Bad:**
 
 ```dart
 import "package:flutter/material.dart";
 import "package:flutter_bloc/flutter_bloc.dart";
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 // No restricted imports in listed folders.
 ```
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 The `paths` and `deny` both support regular expressions.
 
@@ -38,7 +30,7 @@ dart_code_metrics:
   ...
   rules:
     ...
-    - avoid_restricted_imports:
+    - avoid-banned-imports:
         entries:
         - paths: ["some/folder/.*\.dart", "another/folder/.*\.dart"]
           deny: ["package:flutter/material.dart"]

website/docs/rules/common/avoid-collection-methods-with-unrelated-types.md → website/docs/rules/common/avoid-collection-methods-with-unrelated-types.mdx

@@ -1,24 +1,20 @@
-# Avoid collection methods with unrelated types
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-collection-methods-with-unrelated-types
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.14.0" severity="warning" />
 
 Avoid using collection methods with unrelated types, such as accessing a map of integers using a string key.
 
+:::info
+
 This lint has been requested for a long time: Follow [this link](https://github.com/dart-lang/linter/issues/1307) to see the details.
 
 Related: Dart's built-in `list_remove_unrelated_type` and `iterable_contains_unrelated_type`.
 
+:::
+
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 final map = Map<int, String>();
@@ -43,7 +39,7 @@ set.removeAll(Iterable<String>.empty()); // LINT
 set.retainAll(Iterable<String>.empty()); // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final map = Map<int, String>();

website/docs/rules/common/avoid-duplicate-exports.md → website/docs/rules/common/avoid-duplicate-exports.mdx

@@ -1,22 +1,12 @@
-# Avoid duplicate exports
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-duplicate-exports
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.17.0" severity="warning" />
 
 Warns when a file has multiple `exports` declarations with the same URI.
 
 ### Example {#example}
 
-With the configuration in the example below, here are some bad/good examples.
-
-Bad:
+**❌ Bad:**
 
 ```dart
 import "package:flutter/material.dart";
@@ -26,7 +16,7 @@ export 'package:my_app/good_folder/something.dart';
 export 'package:my_app/good_folder/something.dart'; // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 import "package:flutter/material.dart";

website/docs/rules/common/avoid-dynamic.mdx

@@ -0,0 +1,36 @@
+import RuleDetails from '@site/src/components/RuleDetails';
+
+<RuleDetails version="4.11.0" severity="warning" />
+
+Warns when the `dynamic` type is used as a variable type in a declaration, return type of a function, etc. Using `dynamic` is considered unsafe since it can easily result in runtime errors.
+
+:::info
+
+Using the `dynamic` type for a `Map<>` is considered fine, since there is no better way to declare a type of a JSON payload.
+
+:::
+
+### Example {#example}
+
+**❌ Bad:**
+
+```dart
+dynamic x = 10; // LINT
+
+// LINT
+String concat(dynamic a, dynamic b) {
+  return a + b;
+}
+```
+
+**✅ Good:**
+
+```dart
+int x = 10;
+
+final x = 10;
+
+String concat(String a, String b) {
+  return a + b;
+}
+```

website/docs/rules/common/avoid-global-state.md → website/docs/rules/common/avoid-global-state.mdx

@@ -1,14 +1,6 @@
-# Avoid global state
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-global-state
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.10.0" severity="warning" />
 
 The rule should violate on not final and non-const top-level variables.
 
@@ -22,7 +14,7 @@ So the common practice is to use state management solutions instead of mutable g
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 var answer = 42; // LINT
@@ -33,7 +25,7 @@ class Foo {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 const answer = 42;

website/docs/rules/common/avoid-ignoring-return-values.md → website/docs/rules/common/avoid-ignoring-return-values.mdx

@@ -1,22 +1,14 @@
-# Avoid ignoring return values
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-ignoring-return-values
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.2.0" severity="warning" />
 
 Warns when a return value of a method or function invocation or a class instance property access is not used.
 
 Silently ignoring such values might lead to a potential error especially when the invocation target is an immutable instance which has all its methods returning a new instance (for example, String or DateTime classes).
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 int foo() {
@@ -39,7 +31,7 @@ void main() {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 int foo() {