From 4d5b02eaeb1bf357a94865ea8d3c7809ff304b16 Mon Sep 17 00:00:00 2001
From: Dmitry Zhifarsky <dimannich2380@gmail.com>
Date: Sun, 7 Aug 2022 19:48:17 +0400
Subject: [PATCH] docs: rework website rule page

---
 ...md => avoid-preserve-whitespace-false.mdx} |  16 +--
 ...mponent-annotation-arguments-ordering.mdx} |  16 +--
 ...tegy.md => prefer-on-push-cd-strategy.mdx} |  16 +--
 ...ed-imports.md => avoid-banned-imports.mdx} |  20 +--
 ...llection-methods-with-unrelated-types.mdx} |  20 ++-
 ...exports.md => avoid-duplicate-exports.mdx} |  18 +--
 website/docs/rules/common/avoid-dynamic.md    |  40 ------
 website/docs/rules/common/avoid-dynamic.mdx   |  36 ++++++
 ...global-state.md => avoid-global-state.mdx} |  16 +--
 ...es.md => avoid-ignoring-return-values.mdx} |  16 +--
 ...late-keyword.md => avoid-late-keyword.mdx} |  20 ++-
 ...=> avoid-missing-enum-constant-in-map.mdx} |  16 +--
 ... avoid-nested-conditional-expressions.mdx} |  20 +--
 ...symbols.md => avoid-non-ascii-symbols.mdx} |  16 +--
 ...ertion.md => avoid-non-null-assertion.mdx} |  20 ++-
 ...lock.md => avoid-throw-in-catch-block.mdx} |  12 +-
 ...d => avoid-top-level-members-in-tests.mdx} |  12 +-
 ... => avoid-unnecessary-type-assertions.mdx} |  14 +--
 ...ts.md => avoid-unnecessary-type-casts.mdx} |  12 +-
 ...md => avoid-unrelated-type-assertions.mdx} |  18 +--
 ...ameters.md => avoid-unused-parameters.mdx} |  22 ++--
 .../common/{ban-name.md => ban-name.mdx}      |  24 ++--
 ...md => binary-expression-operand-order.mdx} |  18 +--
 ...al-format.md => double-literal-format.mdx} |  26 ++--
 .../{format-comment.md => format-comment.mdx} |  26 ++--
 .../rules/common/member-ordering-extended.md  | 103 ---------------
 .../rules/common/member-ordering-extended.mdx | 119 ++++++++++++++++++
 ...member-ordering.md => member-ordering.mdx} |  16 +--
 ...re-return.md => newline-before-return.mdx} |  16 +--
 ...pare.md => no-boolean-literal-compare.mdx} |  20 +--
 .../{no-empty-block.md => no-empty-block.mdx} |  16 +--
 ...al-arguments.md => no-equal-arguments.mdx} |  20 +--
 ...al-then-else.md => no-equal-then-else.mdx} |  16 +--
 ...no-magic-number.md => no-magic-number.mdx} |  26 ++--
 ...claration.md => no-object-declaration.mdx} |  18 +--
 ...-async-await.md => prefer-async-await.mdx} |  18 +--
 ...=> prefer-commenting-analyzer-ignores.mdx} |  20 ++-
 ....md => prefer-conditional-expressions.mdx} |  18 +--
 ...d => prefer-correct-identifier-length.mdx} |  22 +---
 ...e-name.md => prefer-correct-type-name.mdx} |  28 ++---
 ...ms-by-name.md => prefer-enums-by-name.mdx} |  20 ++-
 .../{prefer-first.md => prefer-first.mdx}     |  18 +--
 ...-return.md => prefer-immediate-return.mdx} |  18 +--
 .../{prefer-last.md => prefer-last.mdx}       |  18 +--
 ...ile-name.md => prefer-match-file-name.mdx} |  24 ++--
 ...iable.md => prefer-moving-to-variable.mdx} |  20 +--
 ...ing-comma.md => prefer-trailing-comma.mdx} |  33 ++---
 .../common/{tag-name.md => tag-name.mdx}      |  20 +--
 ...listener.md => always-remove-listener.mdx} |  24 ++--
 ...oid-border-all.md => avoid-border-all.mdx} |  22 +---
 ...widgets.md => avoid-returning-widgets.mdx} |  30 ++---
 ...ists.md => avoid-shrink-wrap-in-lists.mdx} |  16 +--
 ...tate.md => avoid-unnecessary-setstate.mdx} |  18 +--
 .../flutter/avoid-use-expanded-as-spacer.md   |  39 ------
 .../flutter/avoid-use-expanded-as-spacer.mdx  |  31 +++++
 ...dding.md => avoid-wrapping-in-padding.mdx} |  18 +--
 ...dius.md => prefer-const-border-radius.mdx} |  20 +--
 ...refer-correct-edge-insets-constructor.mdx} |  20 +--
 ...cks.md => prefer-extracting-callbacks.mdx} |  26 ++--
 ...e.md => prefer-single-widget-per-file.mdx} |  22 +---
 ...efer-intl-name.md => prefer-intl-name.mdx} |  50 +++-----
 ...-args.md => provide-correct-intl-args.mdx} |  54 ++++----
 website/docs/rules/overview.mdx               |  46 +++++--
 website/src/components/RuleDetails.tsx        |  22 ++++
 website/src/components/RuleEntry.tsx          |  29 ++---
 .../components/rule/RuleAdditionalInfo.tsx    |  28 +++++
 website/src/components/rule/RuleId.tsx        |  11 ++
 website/src/components/rule/RuleOptions.tsx   |  13 ++
 website/src/css/custom.css                    |  19 ++-
 69 files changed, 670 insertions(+), 1025 deletions(-)
 rename website/docs/rules/angular/{avoid-preserve-whitespace-false.md => avoid-preserve-whitespace-false.mdx} (80%)
 rename website/docs/rules/angular/{component-annotation-arguments-ordering.md => component-annotation-arguments-ordering.mdx} (62%)
 rename website/docs/rules/angular/{prefer-on-push-cd-strategy.md => prefer-on-push-cd-strategy.mdx} (79%)
 rename website/docs/rules/common/{avoid-banned-imports.md => avoid-banned-imports.mdx} (79%)
 rename website/docs/rules/common/{avoid-collection-methods-with-unrelated-types.md => avoid-collection-methods-with-unrelated-types.mdx} (88%)
 rename website/docs/rules/common/{avoid-duplicate-exports.md => avoid-duplicate-exports.mdx} (67%)
 delete mode 100644 website/docs/rules/common/avoid-dynamic.md
 create mode 100644 website/docs/rules/common/avoid-dynamic.mdx
 rename website/docs/rules/common/{avoid-global-state.md => avoid-global-state.mdx} (84%)
 rename website/docs/rules/common/{avoid-ignoring-return-values.md => avoid-ignoring-return-values.mdx} (87%)
 rename website/docs/rules/common/{avoid-late-keyword.md => avoid-late-keyword.mdx} (87%)
 rename website/docs/rules/common/{avoid-missing-enum-constant-in-map.md => avoid-missing-enum-constant-in-map.mdx} (83%)
 rename website/docs/rules/common/{avoid-nested-conditional-expressions.md => avoid-nested-conditional-expressions.mdx} (74%)
 rename website/docs/rules/common/{avoid-non-ascii-symbols.md => avoid-non-ascii-symbols.mdx} (74%)
 rename website/docs/rules/common/{avoid-non-null-assertion.md => avoid-non-null-assertion.mdx} (88%)
 rename website/docs/rules/common/{avoid-throw-in-catch-block.md => avoid-throw-in-catch-block.mdx} (76%)
 rename website/docs/rules/common/{avoid-top-level-members-in-tests.md => avoid-top-level-members-in-tests.mdx} (79%)
 rename website/docs/rules/common/{avoid-unnecessary-type-assertions.md => avoid-unnecessary-type-assertions.mdx} (61%)
 rename website/docs/rules/common/{avoid-unnecessary-type-casts.md => avoid-unnecessary-type-casts.mdx} (62%)
 rename website/docs/rules/common/{avoid-unrelated-type-assertions.md => avoid-unrelated-type-assertions.mdx} (77%)
 rename website/docs/rules/common/{avoid-unused-parameters.md => avoid-unused-parameters.mdx} (74%)
 rename website/docs/rules/common/{ban-name.md => ban-name.mdx} (74%)
 rename website/docs/rules/common/{binary-expression-operand-order.md => binary-expression-operand-order.mdx} (50%)
 rename website/docs/rules/common/{double-literal-format.md => double-literal-format.mdx} (76%)
 rename website/docs/rules/common/{format-comment.md => format-comment.mdx} (75%)
 delete mode 100644 website/docs/rules/common/member-ordering-extended.md
 create mode 100644 website/docs/rules/common/member-ordering-extended.mdx
 rename website/docs/rules/common/{member-ordering.md => member-ordering.mdx} (70%)
 rename website/docs/rules/common/{newline-before-return.md => newline-before-return.mdx} (63%)
 rename website/docs/rules/common/{no-boolean-literal-compare.md => no-boolean-literal-compare.mdx} (63%)
 rename website/docs/rules/common/{no-empty-block.md => no-empty-block.mdx} (82%)
 rename website/docs/rules/common/{no-equal-arguments.md => no-equal-arguments.mdx} (83%)
 rename website/docs/rules/common/{no-equal-then-else.md => no-equal-then-else.mdx} (79%)
 rename website/docs/rules/common/{no-magic-number.md => no-magic-number.mdx} (81%)
 rename website/docs/rules/common/{no-object-declaration.md => no-object-declaration.mdx} (59%)
 rename website/docs/rules/common/{prefer-async-await.md => prefer-async-await.mdx} (82%)
 rename website/docs/rules/common/{prefer-commenting-analyzer-ignores.md => prefer-commenting-analyzer-ignores.mdx} (80%)
 rename website/docs/rules/common/{prefer-conditional-expressions.md => prefer-conditional-expressions.mdx} (70%)
 rename website/docs/rules/common/{prefer-correct-identifier-length.md => prefer-correct-identifier-length.mdx} (73%)
 rename website/docs/rules/common/{prefer-correct-type-name.md => prefer-correct-type-name.mdx} (78%)
 rename website/docs/rules/common/{prefer-enums-by-name.md => prefer-enums-by-name.mdx} (61%)
 rename website/docs/rules/common/{prefer-first.md => prefer-first.mdx} (63%)
 rename website/docs/rules/common/{prefer-immediate-return.md => prefer-immediate-return.mdx} (72%)
 rename website/docs/rules/common/{prefer-last.md => prefer-last.mdx} (67%)
 rename website/docs/rules/common/{prefer-match-file-name.md => prefer-match-file-name.mdx} (85%)
 rename website/docs/rules/common/{prefer-moving-to-variable.md => prefer-moving-to-variable.mdx} (81%)
 rename website/docs/rules/common/{prefer-trailing-comma.md => prefer-trailing-comma.mdx} (86%)
 rename website/docs/rules/common/{tag-name.md => tag-name.mdx} (70%)
 rename website/docs/rules/flutter/{always-remove-listener.md => always-remove-listener.mdx} (92%)
 rename website/docs/rules/flutter/{avoid-border-all.md => avoid-border-all.mdx} (81%)
 rename website/docs/rules/flutter/{avoid-returning-widgets.md => avoid-returning-widgets.mdx} (90%)
 rename website/docs/rules/flutter/{avoid-shrink-wrap-in-lists.md => avoid-shrink-wrap-in-lists.mdx} (84%)
 rename website/docs/rules/flutter/{avoid-unnecessary-setstate.md => avoid-unnecessary-setstate.mdx} (92%)
 delete mode 100644 website/docs/rules/flutter/avoid-use-expanded-as-spacer.md
 create mode 100644 website/docs/rules/flutter/avoid-use-expanded-as-spacer.mdx
 rename website/docs/rules/flutter/{avoid-wrapping-in-padding.md => avoid-wrapping-in-padding.mdx} (58%)
 rename website/docs/rules/flutter/{prefer-const-border-radius.md => prefer-const-border-radius.mdx} (83%)
 rename website/docs/rules/flutter/{prefer-correct-edge-insets-constructor.md => prefer-correct-edge-insets-constructor.mdx} (69%)
 rename website/docs/rules/flutter/{prefer-extracting-callbacks.md => prefer-extracting-callbacks.mdx} (85%)
 rename website/docs/rules/flutter/{prefer-single-widget-per-file.md => prefer-single-widget-per-file.mdx} (82%)
 rename website/docs/rules/intl/{prefer-intl-name.md => prefer-intl-name.mdx} (87%)
 rename website/docs/rules/intl/{provide-correct-intl-args.md => provide-correct-intl-args.mdx} (93%)
 create mode 100644 website/src/components/RuleDetails.tsx
 create mode 100644 website/src/components/rule/RuleAdditionalInfo.tsx
 create mode 100644 website/src/components/rule/RuleId.tsx
 create mode 100644 website/src/components/rule/RuleOptions.tsx

diff --git a/website/docs/rules/angular/avoid-preserve-whitespace-false.md b/website/docs/rules/angular/avoid-preserve-whitespace-false.mdx
similarity index 80%
rename from website/docs/rules/angular/avoid-preserve-whitespace-false.md
rename to website/docs/rules/angular/avoid-preserve-whitespace-false.mdx
index e93534ff01..a5292e0759 100644
--- a/website/docs/rules/angular/avoid-preserve-whitespace-false.md
+++ b/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(
diff --git a/website/docs/rules/angular/component-annotation-arguments-ordering.md b/website/docs/rules/angular/component-annotation-arguments-ordering.mdx
similarity index 62%
rename from website/docs/rules/angular/component-annotation-arguments-ordering.md
rename to website/docs/rules/angular/component-annotation-arguments-ordering.mdx
index 1c4313b2b7..f347a8c329 100644
--- a/website/docs/rules/angular/component-annotation-arguments-ordering.md
+++ b/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:
diff --git a/website/docs/rules/angular/prefer-on-push-cd-strategy.md b/website/docs/rules/angular/prefer-on-push-cd-strategy.mdx
similarity index 79%
rename from website/docs/rules/angular/prefer-on-push-cd-strategy.md
rename to website/docs/rules/angular/prefer-on-push-cd-strategy.mdx
index 8592302c2b..069b4db13c 100644
--- a/website/docs/rules/angular/prefer-on-push-cd-strategy.md
+++ b/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(
diff --git a/website/docs/rules/common/avoid-banned-imports.md b/website/docs/rules/common/avoid-banned-imports.mdx
similarity index 79%
rename from website/docs/rules/common/avoid-banned-imports.md
rename to website/docs/rules/common/avoid-banned-imports.mdx
index af470d7701..bdece1d819 100644
--- a/website/docs/rules/common/avoid-banned-imports.md
+++ b/website/docs/rules/common/avoid-banned-imports.mdx
@@ -1,14 +1,6 @@
-# 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.
 
@@ -16,20 +8,20 @@ Configure some imports that you want to ban.
 
 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"]
diff --git a/website/docs/rules/common/avoid-collection-methods-with-unrelated-types.md b/website/docs/rules/common/avoid-collection-methods-with-unrelated-types.mdx
similarity index 88%
rename from website/docs/rules/common/avoid-collection-methods-with-unrelated-types.md
rename to website/docs/rules/common/avoid-collection-methods-with-unrelated-types.mdx
index e0f932a146..9f89a4c0df 100644
--- a/website/docs/rules/common/avoid-collection-methods-with-unrelated-types.md
+++ b/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>();
diff --git a/website/docs/rules/common/avoid-duplicate-exports.md b/website/docs/rules/common/avoid-duplicate-exports.mdx
similarity index 67%
rename from website/docs/rules/common/avoid-duplicate-exports.md
rename to website/docs/rules/common/avoid-duplicate-exports.mdx
index 4b6c7e2554..ac14652818 100644
--- a/website/docs/rules/common/avoid-duplicate-exports.md
+++ b/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";
diff --git a/website/docs/rules/common/avoid-dynamic.md b/website/docs/rules/common/avoid-dynamic.md
deleted file mode 100644
index 09bd2252e5..0000000000
--- a/website/docs/rules/common/avoid-dynamic.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# Avoid dynamic
-
-## Rule id {#rule-id}
-
-avoid-dynamic
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
-
-Warns when `dynamic` type is used as variable type in declaration, return type of a function, etc. Using `dynamic` is considered unsafe since it can easily result in runtime errors.
-
-**Note:** using `dynamic` type for `Map<>` is considered fine since there is no better way to declare type of 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;
-}
-```
diff --git a/website/docs/rules/common/avoid-dynamic.mdx b/website/docs/rules/common/avoid-dynamic.mdx
new file mode 100644
index 0000000000..298d4df803
--- /dev/null
+++ b/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;
+}
+```
diff --git a/website/docs/rules/common/avoid-global-state.md b/website/docs/rules/common/avoid-global-state.mdx
similarity index 84%
rename from website/docs/rules/common/avoid-global-state.md
rename to website/docs/rules/common/avoid-global-state.mdx
index f0df3c2488..37e80b5e08 100644
--- a/website/docs/rules/common/avoid-global-state.md
+++ b/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;
diff --git a/website/docs/rules/common/avoid-ignoring-return-values.md b/website/docs/rules/common/avoid-ignoring-return-values.mdx
similarity index 87%
rename from website/docs/rules/common/avoid-ignoring-return-values.md
rename to website/docs/rules/common/avoid-ignoring-return-values.mdx
index e66a7bfaf4..35e632d7d0 100644
--- a/website/docs/rules/common/avoid-ignoring-return-values.md
+++ b/website/docs/rules/common/avoid-ignoring-return-values.mdx
@@ -1,14 +1,6 @@
-# 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.
 
@@ -16,7 +8,7 @@ Silently ignoring such values might lead to a potential error especially when th
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 int foo() {
@@ -39,7 +31,7 @@ void main() {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 int foo() {
diff --git a/website/docs/rules/common/avoid-late-keyword.md b/website/docs/rules/common/avoid-late-keyword.mdx
similarity index 87%
rename from website/docs/rules/common/avoid-late-keyword.md
rename to website/docs/rules/common/avoid-late-keyword.mdx
index 65dc5ac7be..f29db49cf5 100644
--- a/website/docs/rules/common/avoid-late-keyword.md
+++ b/website/docs/rules/common/avoid-late-keyword.mdx
@@ -1,24 +1,20 @@
-# Avoid late keyword
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-late-keyword
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="3.2.0" severity="warning" hasConfig />
 
 Warns when a field or variable is declared with a `late` keyword.
 
 `late` keyword enforces a variable's constraints at runtime instead of at compile time and since the variable is not definitely initialized, every time it is read, a runtime check is inserted to make sure it has been assigned a value. If it hasn’t, an exception will be thrown.
 
+:::note
+
 Use this rule if you want to avoid unexpected runtime exceptions.
 
+:::
+
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class Test {
@@ -42,7 +38,7 @@ class Test {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Test {
diff --git a/website/docs/rules/common/avoid-missing-enum-constant-in-map.md b/website/docs/rules/common/avoid-missing-enum-constant-in-map.mdx
similarity index 83%
rename from website/docs/rules/common/avoid-missing-enum-constant-in-map.md
rename to website/docs/rules/common/avoid-missing-enum-constant-in-map.mdx
index d1061d85e2..47e354e6ba 100644
--- a/website/docs/rules/common/avoid-missing-enum-constant-in-map.md
+++ b/website/docs/rules/common/avoid-missing-enum-constant-in-map.mdx
@@ -1,20 +1,12 @@
-# Avoid missing enum constant in map
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-missing-enum-constant-in-map
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.7.0" severity="warning" />
 
 Warns when a enum constant is missing in a map declaration.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 enum SomeEnum {
@@ -37,7 +29,7 @@ extension SomeX on SomeEnum {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 enum SomeEnum {
diff --git a/website/docs/rules/common/avoid-nested-conditional-expressions.md b/website/docs/rules/common/avoid-nested-conditional-expressions.mdx
similarity index 74%
rename from website/docs/rules/common/avoid-nested-conditional-expressions.md
rename to website/docs/rules/common/avoid-nested-conditional-expressions.mdx
index a8c3e00afc..5530ca991f 100644
--- a/website/docs/rules/common/avoid-nested-conditional-expressions.md
+++ b/website/docs/rules/common/avoid-nested-conditional-expressions.mdx
@@ -1,22 +1,12 @@
-# Avoid nested conditional expressions
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-avoid-nested-conditional-expressions
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.5.0" severity="style" hasConfig />
 
 Checks for nested conditional expressions.
 
 Use `acceptable-level` configuration, if you want to set the acceptable nesting level (default is 1).
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -29,7 +19,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 final str = '';
@@ -51,7 +41,7 @@ final threeLevels = str.isEmpty
     : '3';
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final str = '';
diff --git a/website/docs/rules/common/avoid-non-ascii-symbols.md b/website/docs/rules/common/avoid-non-ascii-symbols.mdx
similarity index 74%
rename from website/docs/rules/common/avoid-non-ascii-symbols.md
rename to website/docs/rules/common/avoid-non-ascii-symbols.mdx
index 7107d3fba4..d6a12d637f 100644
--- a/website/docs/rules/common/avoid-non-ascii-symbols.md
+++ b/website/docs/rules/common/avoid-non-ascii-symbols.mdx
@@ -1,20 +1,12 @@
-# Avoid non ascii symbols
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-non-ascii-symbols
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.15.0" severity="warning" />
 
 Warns when a string literal contains non ascii characters. This might indicate that the string was not localized.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 final chinese = 'hello 汉字'; // LINT
@@ -23,7 +15,7 @@ final withSomeNonAsciiSymbols = '#!$_&-  éè  ;∞¥₤€'; // LINT
 final misspelling = 'inform@tiv€'; // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final english = 'hello';
diff --git a/website/docs/rules/common/avoid-non-null-assertion.md b/website/docs/rules/common/avoid-non-null-assertion.mdx
similarity index 88%
rename from website/docs/rules/common/avoid-non-null-assertion.md
rename to website/docs/rules/common/avoid-non-null-assertion.mdx
index 393e585cbe..2165c94ce2 100644
--- a/website/docs/rules/common/avoid-non-null-assertion.md
+++ b/website/docs/rules/common/avoid-non-null-assertion.mdx
@@ -1,24 +1,20 @@
-# Avoid non null assertion
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-non-null-assertion
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="3.2.0" severity="warning" />
 
 Warns when non null assertion operator (**!** or “bang” operator) is used for a property access or method invocation. The operator check works at runtime and it may fail and throw a runtime exception.
 
 The rule ignores the index `[]` operator on the Map class because it's considered the idiomatic way to access a known-present element in a map with `[]!` according to [the docs](https://dart.dev/null-safety/understanding-null-safety#the-map-index-operator-is-nullable).
 
+:::note
+
 Use this rule if you want to avoid possible unexpected runtime exceptions.
 
+:::
+
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class Test {
@@ -39,7 +35,7 @@ class Test {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Test {
diff --git a/website/docs/rules/common/avoid-throw-in-catch-block.md b/website/docs/rules/common/avoid-throw-in-catch-block.mdx
similarity index 76%
rename from website/docs/rules/common/avoid-throw-in-catch-block.md
rename to website/docs/rules/common/avoid-throw-in-catch-block.mdx
index 4fde7125ad..3f94107309 100644
--- a/website/docs/rules/common/avoid-throw-in-catch-block.md
+++ b/website/docs/rules/common/avoid-throw-in-catch-block.mdx
@@ -1,14 +1,6 @@
-# Avoid throw in catch block
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id
-
-avoid-throw-in-catch-block
-
-## Severity {#severity}
-
-Warning
-
-## Description
+<RuleDetails version="4.7.0" severity="warning" />
 
 Call throw in a catch block loses the original stack trace and the original exception.
 
diff --git a/website/docs/rules/common/avoid-top-level-members-in-tests.md b/website/docs/rules/common/avoid-top-level-members-in-tests.mdx
similarity index 79%
rename from website/docs/rules/common/avoid-top-level-members-in-tests.md
rename to website/docs/rules/common/avoid-top-level-members-in-tests.mdx
index 348ba25cb6..c0b2252983 100644
--- a/website/docs/rules/common/avoid-top-level-members-in-tests.md
+++ b/website/docs/rules/common/avoid-top-level-members-in-tests.mdx
@@ -1,14 +1,6 @@
-# Avoid top-level members in tests
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-top-level-members-in-tests
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.17.0" severity="warning" />
 
 Warns when a public top-level member (expect the entrypoint) is declared inside a test file.
 
diff --git a/website/docs/rules/common/avoid-unnecessary-type-assertions.md b/website/docs/rules/common/avoid-unnecessary-type-assertions.mdx
similarity index 61%
rename from website/docs/rules/common/avoid-unnecessary-type-assertions.md
rename to website/docs/rules/common/avoid-unnecessary-type-assertions.mdx
index f9378ae504..ae1bde0099 100644
--- a/website/docs/rules/common/avoid-unnecessary-type-assertions.md
+++ b/website/docs/rules/common/avoid-unnecessary-type-assertions.mdx
@@ -1,16 +1,8 @@
-# Avoid unnecessary type assertions
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id
+<RuleDetails version="4.7.0" severity="warning" />
 
-avoid-unnecessary-type-assertions
-
-## Severity {#severity}
-
-Warning
-
-## Description
-
-Warns about unnecessary usage of 'is' and 'whereType' operators.
+Warns about unnecessary usage of `is` and `whereType` operators.
 
 ### Example
 
diff --git a/website/docs/rules/common/avoid-unnecessary-type-casts.md b/website/docs/rules/common/avoid-unnecessary-type-casts.mdx
similarity index 62%
rename from website/docs/rules/common/avoid-unnecessary-type-casts.md
rename to website/docs/rules/common/avoid-unnecessary-type-casts.mdx
index 6b267278e7..e8a4eab475 100644
--- a/website/docs/rules/common/avoid-unnecessary-type-casts.md
+++ b/website/docs/rules/common/avoid-unnecessary-type-casts.mdx
@@ -1,14 +1,6 @@
-# Avoid unnecessary type casts
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id
-
-avoid-unnecessary-type-casts
-
-## Severity {#severity}
-
-Warning
-
-## Description
+<RuleDetails version="4.7.0" severity="warning" />
 
 Warns about of unnecessary use of casting operators.
 
diff --git a/website/docs/rules/common/avoid-unrelated-type-assertions.md b/website/docs/rules/common/avoid-unrelated-type-assertions.mdx
similarity index 77%
rename from website/docs/rules/common/avoid-unrelated-type-assertions.md
rename to website/docs/rules/common/avoid-unrelated-type-assertions.mdx
index 9331cd8ca9..4f07203813 100644
--- a/website/docs/rules/common/avoid-unrelated-type-assertions.md
+++ b/website/docs/rules/common/avoid-unrelated-type-assertions.mdx
@@ -1,20 +1,12 @@
-# Avoid unrelated type assertions
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id
+<RuleDetails version="4.9.0" severity="warning" />
 
-avoid-unrelated-type-assertions
-
-## Severity {#severity}
-
-Warning
-
-## Description
-
-Warns about unrelated usages of 'is' operator.
+Warns about unrelated usages of `is` operator.
 
 ### Example
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class Animal {}
@@ -36,7 +28,7 @@ class Example {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Animal {}
diff --git a/website/docs/rules/common/avoid-unused-parameters.md b/website/docs/rules/common/avoid-unused-parameters.mdx
similarity index 74%
rename from website/docs/rules/common/avoid-unused-parameters.md
rename to website/docs/rules/common/avoid-unused-parameters.mdx
index 3bd9968c8a..ece57f90a2 100644
--- a/website/docs/rules/common/avoid-unused-parameters.md
+++ b/website/docs/rules/common/avoid-unused-parameters.mdx
@@ -1,23 +1,19 @@
-# Avoid unused parameters
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-unused-parameters
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="2.4.0" severity="warning" />
 
 Checks for unused parameters inside a function or method body.
 For overridden methods suggests renaming unused parameters to \_, \_\_, etc.
 
-Note: abstract classes are completely ignored by the rule to avoid redundant checks for potentially overridden methods.
+:::caution
+
+Abstract classes are completely ignored by the rule to avoid redundant checks for potentially overridden methods.
+
+:::
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 void someFunction(String s) { // LINT
@@ -36,7 +32,7 @@ class SomeClass extends AnotherClass {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 void someOtherFunction() {
diff --git a/website/docs/rules/common/ban-name.md b/website/docs/rules/common/ban-name.mdx
similarity index 74%
rename from website/docs/rules/common/ban-name.md
rename to website/docs/rules/common/ban-name.mdx
index a66a71c48c..d8b099e6c9 100644
--- a/website/docs/rules/common/ban-name.md
+++ b/website/docs/rules/common/ban-name.mdx
@@ -1,24 +1,20 @@
-# Ban name
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-ban-name
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.12.0" severity="style" hasConfig />
 
 Configure some names that you want to ban.
 
 Example: When you add some extra functionalities to built-in Flutter functions (such as logging for `showDialog`), you may want to ban the original Flutter function and use your own version.
 
-Limitation: When trying to ban some methods in your package, it also triggers on imported from an external package code.
+:::caution
+
+When trying to ban some methods in your package, it also triggers on imported from an external package code.
+
+:::
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 // suppose the configuration is the one shown below
@@ -36,13 +32,13 @@ class AnotherStrangeName {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 myShowDialog();
 ```
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
diff --git a/website/docs/rules/common/binary-expression-operand-order.md b/website/docs/rules/common/binary-expression-operand-order.mdx
similarity index 50%
rename from website/docs/rules/common/binary-expression-operand-order.md
rename to website/docs/rules/common/binary-expression-operand-order.mdx
index e7c2aa22b3..ad7084c288 100644
--- a/website/docs/rules/common/binary-expression-operand-order.md
+++ b/website/docs/rules/common/binary-expression-operand-order.mdx
@@ -1,26 +1,16 @@
-# Binary expression operand order
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-binary-expression-operand-order
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.7.0" severity="style" hasFix />
 
 Warns when a literal value is on the left hand side in a binary expressions.
 
-Bad:
+**❌ Bad:**
 
 ```dart
 final a = 1 + b;
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final a = b + 1;
diff --git a/website/docs/rules/common/double-literal-format.md b/website/docs/rules/common/double-literal-format.mdx
similarity index 76%
rename from website/docs/rules/common/double-literal-format.md
rename to website/docs/rules/common/double-literal-format.mdx
index 573cee9295..a334a3153c 100644
--- a/website/docs/rules/common/double-literal-format.md
+++ b/website/docs/rules/common/double-literal-format.mdx
@@ -1,28 +1,18 @@
-# Double literal format
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-double-literal-format
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.5.0" severity="style" hasFix />
 
 Checks that double literals should begin with `0.` instead of just `.`, and should not end with a trailing `0`. Helps keep a consistent style of numeric literals and decrease potential typos.
 
 ### Redundant leading '0' {#redundant-leading-0}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   var a = 05.23, b = 03.6e+15, c = -012.2, d = -001.1e-15;
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   var a = 5.23, b = 3.6e+15, c = -12.2, d = -1.1e-15;
@@ -30,13 +20,13 @@ Good:
 
 ### Literal begin with '.' {#literal-begin-with-}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   var a = .257, b = .16e+5, c = -.259, d = -.14e-5;
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   var a = 0.257, b = 0.16e+5, c = -0.259, d = -0.14e-5;
@@ -44,13 +34,13 @@ Good:
 
 ### Redundant trailing '0' {#redundant-trailing-0}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   var a = 0.210, b = 0.100e+5, c = -0.250, d = -0.400e-5;
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   var a = 0.21, b = 0.1e+5, c = -0.25, d = -0.4e-5;
diff --git a/website/docs/rules/common/format-comment.md b/website/docs/rules/common/format-comment.mdx
similarity index 75%
rename from website/docs/rules/common/format-comment.md
rename to website/docs/rules/common/format-comment.mdx
index 0c01a2ebc1..8211906f71 100644
--- a/website/docs/rules/common/format-comment.md
+++ b/website/docs/rules/common/format-comment.mdx
@@ -1,22 +1,12 @@
-# Format comments
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-format-comment
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.11.0" severity="style" hasConfig hasFix />
 
 Prefer format comments like sentences.
 
 Use `ignored-patterns` configuration, if you want to ignore comments that match the given regular expressions.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -30,7 +20,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 // prefer format comments like sentences // LINT
@@ -45,11 +35,11 @@ class Test {
     //Without start space without dot // LINT
   }
 }
-/* prefer format comments 
+/* prefer format comments
 like sentences */ // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 // Prefer format comments like sentences.
@@ -64,6 +54,6 @@ class Test {
     // Without start space without dot.
   }
 }
-/* Prefer format comments 
-like sentences. */ 
+/* Prefer format comments
+like sentences. */
 ```
diff --git a/website/docs/rules/common/member-ordering-extended.md b/website/docs/rules/common/member-ordering-extended.md
deleted file mode 100644
index 4da0246778..0000000000
--- a/website/docs/rules/common/member-ordering-extended.md
+++ /dev/null
@@ -1,103 +0,0 @@
-# Member ordering extended
-
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-member-ordering-extended
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
-
-**Note:** Don't use it with the default member-ordering rule!
-
-Enforces extended member ordering.
-
-The value for the `order` entry should match the following pattern:
-
-`
-< (overridden | protected)- >< (private | public)- >< static- >< late- >< (var | final | const)- >< nullable- >< named- >< factory- > (fields | getters | getters-setters | setters | constructors | methods)
-`
-
-where values in the `<>` are optional, values in the `()` are interchangeable and the last part of the pattern which represents a class member type is **REQUIRED**.
-
-**Note:** not all of the pattern parts are applicable for every case, for example, `late-constructors` are not expected, since they are not supported by the language itself.
-
-Additionally, in order to apply ordering for the Flutter specific widget methods, you can configure the rule with:
-
-* build-method
-* init-state-method
-* did-change-dependencies-method
-* did-update-widget-method
-* dispose-method
-
-For example, the value for `order` may be an array consisting of the following strings:
-
-* public-late-final-fields
-* private-late-final-fields
-* public-nullable-fields
-* private-nullable-fields
-* named-constructors
-* factory-constructors
-* getters
-* setters
-* public-static-methods
-* private-static-methods
-* protected-methods
-* etc.
-
-You can simply configure the rule to sort only by a type:
-
-* fields
-* methods
-* setters
-* getters (or just **getters-setters** if you don't want to separate them)
-* constructors
-
-The default config is:
-
-* public-fields
-* private-fields
-* public-getters
-* private-getters
-* public-setters
-* private-setters
-* constructors
-* public-methods
-* private-methods
-
-The `alphabetize` option will enforce that members within the same category should be alphabetically sorted by name.
-
-The `alphabetize-by-type` option will enforce that members within the same category should be alphabetically sorted by theirs type name.
-
-Only one alphabetize option could be applied at the same time.
-
-### Config example {#config-example}
-
-With the default config:
-
-```yaml
-dart_code_metrics:
-  ...
-  rules:
-    ...
-    - member-ordering-extended
-```
-
-**OR** with a custom one:
-
-```yaml
-dart_code_metrics:
-  ...
-  rules:
-    ...
-    - member-ordering-extended:
-        alphabetize: true
-        order:
-          - public-fields
-          - private-fields
-          - constructors
-```
diff --git a/website/docs/rules/common/member-ordering-extended.mdx b/website/docs/rules/common/member-ordering-extended.mdx
new file mode 100644
index 0000000000..5a196ff54c
--- /dev/null
+++ b/website/docs/rules/common/member-ordering-extended.mdx
@@ -0,0 +1,119 @@
+import RuleDetails from '@site/src/components/RuleDetails';
+
+<RuleDetails version="3.0.0" severity="style" hasConfig />
+
+:::caution
+
+Don't use this rule with the default member-ordering rule!
+
+:::
+
+Enforces extended member ordering.
+
+The value for the `order` entry should match the following pattern:
+
+`< (overridden | protected)- >< (private | public)- >< static- >< late- >< (var | final | const)- >< nullable- >< named- >< factory- > (fields | getters | getters-setters | setters | constructors | methods) `
+
+where values in the `<>` are optional, values in the `()` are interchangeable and the last part of the pattern which represents a class member type is **REQUIRED**.
+
+:::info
+
+Not all of the pattern parts are applicable for every case, for example, `late-constructors` are not expected, since they are not supported by the language itself.
+
+:::
+
+Additionally, in order to apply ordering for the Flutter specific widget methods, you can configure the rule with:
+
+- build-method
+- init-state-method
+- did-change-dependencies-method
+- did-update-widget-method
+- dispose-method
+
+For example, the value for `order` may be an array consisting of the following strings:
+
+- public-late-final-fields
+- private-late-final-fields
+- public-nullable-fields
+- private-nullable-fields
+- named-constructors
+- factory-constructors
+- getters
+- setters
+- public-static-methods
+- private-static-methods
+- protected-methods
+- etc.
+
+You can simply configure the rule to sort only by a type:
+
+- fields
+- methods
+- setters
+- getters (or just **getters-setters** if you don't want to separate them)
+- constructors
+
+The default config is:
+
+- public-fields
+- private-fields
+- public-getters
+- private-getters
+- public-setters
+- private-setters
+- constructors
+- public-methods
+- private-methods
+
+The `alphabetize` option will enforce that members within the same category should be alphabetically sorted by name.
+
+The `alphabetize-by-type` option will enforce that members within the same category should be alphabetically sorted by theirs type name.
+
+:::note
+
+Only one alphabetize option could be applied at the same time.
+
+:::
+
+### ⚙️ Config example {#config-example}
+
+With the default config:
+
+```yaml
+dart_code_metrics:
+  ...
+  rules:
+    ...
+    - member-ordering-extended
+```
+
+**OR** with a custom one:
+
+```yaml
+dart_code_metrics:
+  ...
+  rules:
+    ...
+    - member-ordering-extended:
+        alphabetize: true
+        order:
+          - public-fields
+          - private-fields
+          - constructors
+```
+
+**OR** Flutter specific:
+
+```yaml
+dart_code_metrics:
+  ...
+  rules:
+    ...
+    - member-ordering-extended:
+        order:
+          - build-method
+          - init-state-method
+          - did-change-dependencies-method
+          - did-update-widget-method
+          - dispose-method
+```
diff --git a/website/docs/rules/common/member-ordering.md b/website/docs/rules/common/member-ordering.mdx
similarity index 70%
rename from website/docs/rules/common/member-ordering.md
rename to website/docs/rules/common/member-ordering.mdx
index 5e138b99c1..dfea3e1a3c 100644
--- a/website/docs/rules/common/member-ordering.md
+++ b/website/docs/rules/common/member-ordering.mdx
@@ -1,16 +1,12 @@
-# Member ordering
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
+<RuleDetails version="1.8.0" severity="style" hasConfig isDeprecated />
 
-## Rule id {#rule-id}
+:::danger
 
-member-ordering
+This rule is deprecated and will be removed in the next major release. Instead, consider using member-ordering-extended.
 
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+:::
 
 Enforces member ordering.
 
@@ -34,7 +30,7 @@ The value for `order` may be an array consisting of the following strings (defau
 
 The `alphabetize` option will enforce that members within the same category should be alphabetically sorted by name.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
diff --git a/website/docs/rules/common/newline-before-return.md b/website/docs/rules/common/newline-before-return.mdx
similarity index 63%
rename from website/docs/rules/common/newline-before-return.md
rename to website/docs/rules/common/newline-before-return.mdx
index 3ad0369af4..cbb335aa3d 100644
--- a/website/docs/rules/common/newline-before-return.md
+++ b/website/docs/rules/common/newline-before-return.mdx
@@ -1,20 +1,12 @@
-# New line before return
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-newline-before-return
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.5.1" severity="style" />
 
 Enforces blank line between statements and return in a block.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   if ( ... ) {
@@ -23,7 +15,7 @@ Bad:
   }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   if ( ... ) {
diff --git a/website/docs/rules/common/no-boolean-literal-compare.md b/website/docs/rules/common/no-boolean-literal-compare.mdx
similarity index 63%
rename from website/docs/rules/common/no-boolean-literal-compare.md
rename to website/docs/rules/common/no-boolean-literal-compare.mdx
index dbb1679a70..d908f18413 100644
--- a/website/docs/rules/common/no-boolean-literal-compare.md
+++ b/website/docs/rules/common/no-boolean-literal-compare.mdx
@@ -1,22 +1,12 @@
-# No boolean literal compare
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-no-boolean-literal-compare
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.5.0" severity="style" hasFix />
 
 Warns on comparison to a boolean literal, as in `x == true`. Comparing boolean values to boolean literals is unnecessary, as those expressions will result in booleans too. Just use the boolean values directly or negate them.
 
-### Unnecessary comparing {#unnecessary-comparing}
+### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   var b = x == true; // LINT
@@ -33,7 +23,7 @@ Bad:
   }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   var b = x;
diff --git a/website/docs/rules/common/no-empty-block.md b/website/docs/rules/common/no-empty-block.mdx
similarity index 82%
rename from website/docs/rules/common/no-empty-block.md
rename to website/docs/rules/common/no-empty-block.mdx
index 81e27cf037..7246e7f1a6 100644
--- a/website/docs/rules/common/no-empty-block.md
+++ b/website/docs/rules/common/no-empty-block.mdx
@@ -1,14 +1,6 @@
-# No empty block
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-no-empty-block
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.5.1" severity="style" />
 
 Disallows empty blocks except catch clause block. Blocks with a todo comment inside are not considered empty.
 
@@ -16,7 +8,7 @@ Empty blocks are often indicators of missing code.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   // LINT
@@ -30,7 +22,7 @@ Bad:
   void function() {} // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   if ( ... ) {
diff --git a/website/docs/rules/common/no-equal-arguments.md b/website/docs/rules/common/no-equal-arguments.mdx
similarity index 83%
rename from website/docs/rules/common/no-equal-arguments.md
rename to website/docs/rules/common/no-equal-arguments.mdx
index 1e8d213abb..2e14b98c13 100644
--- a/website/docs/rules/common/no-equal-arguments.md
+++ b/website/docs/rules/common/no-equal-arguments.mdx
@@ -1,22 +1,12 @@
-# No equal arguments
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-no-equal-arguments
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="2.1.0" severity="warning" hasConfig />
 
 Warns when equal arguments passed to a function or method invocation.
 
 Use `ignored-parameters` configuration, if you want to ignore specific named parameters.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -31,7 +21,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class User {
@@ -60,7 +50,7 @@ void getUserData(User user) {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class User {
diff --git a/website/docs/rules/common/no-equal-then-else.md b/website/docs/rules/common/no-equal-then-else.mdx
similarity index 79%
rename from website/docs/rules/common/no-equal-then-else.md
rename to website/docs/rules/common/no-equal-then-else.mdx
index 0518ca67bf..b75bd35861 100644
--- a/website/docs/rules/common/no-equal-then-else.md
+++ b/website/docs/rules/common/no-equal-then-else.mdx
@@ -1,20 +1,12 @@
-# No equal then else
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-no-equal-then-else
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.10.0" severity="warning" />
 
 Warns when if statement has equal then and else statements or conditional expression has equal then and else expressions.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 final firstValue = 1;
@@ -34,7 +26,7 @@ if (condition) {
 result = condition ? firstValue : firstValue; // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final firstValue = 1;
diff --git a/website/docs/rules/common/no-magic-number.md b/website/docs/rules/common/no-magic-number.mdx
similarity index 81%
rename from website/docs/rules/common/no-magic-number.md
rename to website/docs/rules/common/no-magic-number.mdx
index e551015da9..387bb6b261 100644
--- a/website/docs/rules/common/no-magic-number.md
+++ b/website/docs/rules/common/no-magic-number.mdx
@@ -1,35 +1,25 @@
-# No magic number
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-no-magic-number
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.6.0" severity="warning" hasConfig />
 
 Warns against using number literals outside of named constants or variables. Exceptions are made for common constants (by default: -1, 0 and 1) and for literals inside `DateTime` constructor as there is no way to create `const DateTime` and extracting each `int` argument to separate named constant is far too inconvenient.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 double circleArea(double radius) => 3.14 * pow(radius, 2); // warns against 3.14
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 const pi = 3.14;
 double circleArea(double radius) => pi * pow(radius, 2); // using named constant so no warning
 ```
 
-Bad:
+**❌ Bad:**
 
 ```dart
 ...
@@ -39,7 +29,7 @@ final finalPrice = cart.productCount > 4 // warns against 4
 ...
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 ...
@@ -51,13 +41,13 @@ final finalPrice = cart.productCount > productCountThresholdForDiscount
 ...
 ```
 
-Exception:
+**Exception:**
 
 ```dart
 final someDay = DateTime(2006, 12, 1); // DateTime has no const constructor
 ```
 
-## Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
diff --git a/website/docs/rules/common/no-object-declaration.md b/website/docs/rules/common/no-object-declaration.mdx
similarity index 59%
rename from website/docs/rules/common/no-object-declaration.md
rename to website/docs/rules/common/no-object-declaration.mdx
index 6e971c0c72..caa057c05e 100644
--- a/website/docs/rules/common/no-object-declaration.md
+++ b/website/docs/rules/common/no-object-declaration.mdx
@@ -1,20 +1,12 @@
-# No object declaration
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
+<RuleDetails version="1.8.0" severity="style" />
 
-no-object-declaration
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
-
-Warns when a class member is declared with Object type.
+Warns when a class member is declared with `Object` type.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class Test {
@@ -29,7 +21,7 @@ class Test {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Test {
diff --git a/website/docs/rules/common/prefer-async-await.md b/website/docs/rules/common/prefer-async-await.mdx
similarity index 82%
rename from website/docs/rules/common/prefer-async-await.md
rename to website/docs/rules/common/prefer-async-await.mdx
index 9dc6714688..ec7f451550 100644
--- a/website/docs/rules/common/prefer-async-await.md
+++ b/website/docs/rules/common/prefer-async-await.mdx
@@ -1,20 +1,12 @@
-# Prefer async await
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-prefer-async-await
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.11.0" severity="style" />
 
 Recommends to use async/await syntax to handle Futures result instead of `.then()` invocation. Also can help prevent errors with mixed `await` and `.then()` usages, since awaiting the result of a `Future` with `.then()` invocation awaits the completion of `.then()`.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 Future<void> main() async {
@@ -24,7 +16,7 @@ Future<void> main() async {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 Future<void> main() async {
@@ -33,5 +25,5 @@ Future<void> main() async {
 
   final anotherResult = await foo.asyncMethod();
   handleResult(anotherResult);
-} 
+}
 ```
diff --git a/website/docs/rules/common/prefer-commenting-analyzer-ignores.md b/website/docs/rules/common/prefer-commenting-analyzer-ignores.mdx
similarity index 80%
rename from website/docs/rules/common/prefer-commenting-analyzer-ignores.md
rename to website/docs/rules/common/prefer-commenting-analyzer-ignores.mdx
index 75bbaad6f6..7922e300ed 100644
--- a/website/docs/rules/common/prefer-commenting-analyzer-ignores.md
+++ b/website/docs/rules/common/prefer-commenting-analyzer-ignores.mdx
@@ -1,22 +1,18 @@
-# Prefer commenting analyzer ignores
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id
-
-prefer-commenting-analyzer-ignores
-
-## Severity {#severity}
-
-Warning
-
-## Description
+<RuleDetails version="4.14.0" severity="warning" />
 
 Warns when `// ignore:` comments are left without any additional description why this ignore is applied.
 
+:::info
+
 This rule doesn't trigger on global `ignore_for_file:` comments.
 
+:::
+
 ### Example
 
-Bad:
+**❌ Bad:**
 
 ```dart
 // ignore: deprecated_member_use
@@ -26,7 +22,7 @@ final map = Map(); // LINT
 final set = Set(); // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 // Ignored for some reasons
diff --git a/website/docs/rules/common/prefer-conditional-expressions.md b/website/docs/rules/common/prefer-conditional-expressions.mdx
similarity index 70%
rename from website/docs/rules/common/prefer-conditional-expressions.md
rename to website/docs/rules/common/prefer-conditional-expressions.mdx
index 8081ca1f6c..7ef7fb99e3 100644
--- a/website/docs/rules/common/prefer-conditional-expressions.md
+++ b/website/docs/rules/common/prefer-conditional-expressions.mdx
@@ -1,22 +1,12 @@
-# Prefer conditional expressions
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-conditional-expressions
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="1.8.0" severity="style" hasFix />
 
 Recommends to use a conditional expression instead of assigning to the same thing or return statement in each branch of an if statement.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
   int a = 0;
@@ -46,7 +36,7 @@ Bad:
   }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
   int a = 0;
diff --git a/website/docs/rules/common/prefer-correct-identifier-length.md b/website/docs/rules/common/prefer-correct-identifier-length.mdx
similarity index 73%
rename from website/docs/rules/common/prefer-correct-identifier-length.md
rename to website/docs/rules/common/prefer-correct-identifier-length.mdx
index 2a4ac7e0f9..aa1938ef53 100644
--- a/website/docs/rules/common/prefer-correct-identifier-length.md
+++ b/website/docs/rules/common/prefer-correct-identifier-length.mdx
@@ -1,16 +1,6 @@
-# Prefer correct identifier length
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id
-
-prefer-correct-identifier-length
-
-## Severity {#severity}
-
-Style
-
-## Description
+<RuleDetails version="4.5.0" severity="style" hasConfig />
 
 The rule checks the length of variable names in classes, functions, extensions, mixins, and also checks the value of enum.
 
@@ -18,7 +8,7 @@ The rule can be configured using fields `max-identifier-length` and `min-identif
 default `max-identifier-length = 300` and `min-identifier-length = 3`. You can also add
 exceptions `exceptions`.
 
-### Config example
+### ⚙️ Config example
 
 ```yaml
 dart_code_metrics:
@@ -26,14 +16,14 @@ dart_code_metrics:
   rules:
     ...
     - prefer-correct-identifier-length:
-        exceptions: [ 'z' ]
+        exceptions: [ 'a' ]
         max-identifier-length: 30
         min-identifier-length: 4
 ```
 
 ### Example
 
-Bad:
+**❌ Bad:**
 
 ```dart
 
@@ -41,7 +31,7 @@ var x = 0; // length equals 1
 var multiplatformConfigurationPoint = 0; // length equals 31
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 
diff --git a/website/docs/rules/common/prefer-correct-type-name.md b/website/docs/rules/common/prefer-correct-type-name.mdx
similarity index 78%
rename from website/docs/rules/common/prefer-correct-type-name.md
rename to website/docs/rules/common/prefer-correct-type-name.mdx
index 40c425236d..05921446e2 100644
--- a/website/docs/rules/common/prefer-correct-type-name.md
+++ b/website/docs/rules/common/prefer-correct-type-name.mdx
@@ -1,22 +1,12 @@
-# Prefer correct type name
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id
-
-prefer-correct-type-name
-
-## Severity {#severity}
-
-Style
-
-## Description
+<RuleDetails version="4.5.0" severity="style" hasConfig />
 
 Rule checks that the type name should only contain alphanumeric characters, start with an uppercase character and span between `min-length` and `max-length` characters in length.
 
 The rule can be configured using fields `min-length` and `max-length`. By default it's `min-length = 3` and `max-length = 40`. You can also configure type name exceptions with `excluded` option.
 
-### Config example
+### ⚙️ Config example
 
 ```yaml
 dart_code_metrics:
@@ -31,21 +21,21 @@ dart_code_metrics:
 
 ### Example
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class example { // not capitalized
   //...
-} 
+}
 class ex { // length equals 2
   //...
-} 
+}
 class multiplatformConfigurationPointWithExtras { // length equals 41
   //...
-} 
+}
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Example { // length equals 7
@@ -54,5 +44,5 @@ class Example { // length equals 7
 
 class _Example { // length equals 7
   //...
-} 
+}
 ```
diff --git a/website/docs/rules/common/prefer-enums-by-name.md b/website/docs/rules/common/prefer-enums-by-name.mdx
similarity index 61%
rename from website/docs/rules/common/prefer-enums-by-name.md
rename to website/docs/rules/common/prefer-enums-by-name.mdx
index 50a96c0191..e4b782b903 100644
--- a/website/docs/rules/common/prefer-enums-by-name.md
+++ b/website/docs/rules/common/prefer-enums-by-name.mdx
@@ -1,22 +1,18 @@
-# Prefer enums byName
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
+<RuleDetails version="4.17.0" severity="style" />
 
-prefer-enums-by-name
-
-## Severity {#severity}
-
-Style
+Since Dart 2.15 it's possible to use `byName` method on enum `values` prop instead of searching the value with `firstWhere`.
 
-## Description {#description}
+:::caution
 
-Since Dart 2.15 it's possible to use `byName` method on enum `values` prop instead of searching the value with `firstWhere`.
+`byName` will throw an exception if the enum does not contain a value for the given name.
 
-**Note:** `byName` will throw an exception if the enum does not contain a value for the given name.
+:::
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 // LINT
@@ -25,7 +21,7 @@ final styleDefinition = StyleDefinition.values.firstWhere(
 );
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final styleDefinition = StyleDefinition.values.byName(json['styleDefinition']);
diff --git a/website/docs/rules/common/prefer-first.md b/website/docs/rules/common/prefer-first.mdx
similarity index 63%
rename from website/docs/rules/common/prefer-first.md
rename to website/docs/rules/common/prefer-first.mdx
index 8ee903a02c..c6d53f3bae 100644
--- a/website/docs/rules/common/prefer-first.md
+++ b/website/docs/rules/common/prefer-first.mdx
@@ -1,22 +1,12 @@
-# Prefer first
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-first
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.5.0" severity="style" hasFix />
 
 Warns when the first element of an Iterable or a List is accessed by `list[0]` or `iterable.elementAt(0)` instead of calling `iterable.first`.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 ...
@@ -26,7 +16,7 @@ array.elementAt(0); // LINT
 array[0]; // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9];
diff --git a/website/docs/rules/common/prefer-immediate-return.md b/website/docs/rules/common/prefer-immediate-return.mdx
similarity index 72%
rename from website/docs/rules/common/prefer-immediate-return.md
rename to website/docs/rules/common/prefer-immediate-return.mdx
index cbc45fceda..020db657cd 100644
--- a/website/docs/rules/common/prefer-immediate-return.md
+++ b/website/docs/rules/common/prefer-immediate-return.mdx
@@ -1,22 +1,12 @@
-# Prefer immediate return
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-immediate-return
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.13.0" severity="style" hasFix />
 
 Declaring a local variable only to immediately return it might be considered a bad practice. The name of a function or a class method with its return type should give enough information about what should be returned.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 void calculateSum(int a, int b) {
@@ -30,7 +20,7 @@ void calculateArea(int width, int height) {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 void calculateSum(int a, int b) {
diff --git a/website/docs/rules/common/prefer-last.md b/website/docs/rules/common/prefer-last.mdx
similarity index 67%
rename from website/docs/rules/common/prefer-last.md
rename to website/docs/rules/common/prefer-last.mdx
index c187e560e5..8e8d700c94 100644
--- a/website/docs/rules/common/prefer-last.md
+++ b/website/docs/rules/common/prefer-last.mdx
@@ -1,22 +1,12 @@
-# Prefer last
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-last
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.5.0" severity="style" hasFix />
 
 Warns when the last element of an Iterable is accessed by `iterable[iterable.length - 1]` or `iterable.elementAt(iterable.length - 1)` instead of calling `iterable.last`.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 ...
@@ -26,7 +16,7 @@ list.elementAt(list.length - 1); // LINT
 list[list.length - 1]; // LINT
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 const list = [1, 2, 3, 4, 5, 6, 7, 8, 9];
diff --git a/website/docs/rules/common/prefer-match-file-name.md b/website/docs/rules/common/prefer-match-file-name.mdx
similarity index 85%
rename from website/docs/rules/common/prefer-match-file-name.md
rename to website/docs/rules/common/prefer-match-file-name.mdx
index 22f18e754f..e62b041b66 100644
--- a/website/docs/rules/common/prefer-match-file-name.md
+++ b/website/docs/rules/common/prefer-match-file-name.mdx
@@ -1,20 +1,10 @@
-# Prefer match file name
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-prefer-match-file-name
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.2.0" severity="warning" />
 
 Warns if the file name does not match the name of the first public class / mixin / extension / enum in the file or a private one if there are no public entries.
 
-### Config example {#config-example}
-
-We recommend exclude the `test` folder.
+For this rule it's recommended to exclude the `test` folder.
 
 ```yaml
 dart_code_metrics:
@@ -31,7 +21,7 @@ dart_code_metrics:
 
 #### Example 1 One class in the file {#example-1-one-class-in-the-file}
 
-Bad:
+**❌ Bad:**
 
 File name: **some_widget.dart**
 
@@ -44,7 +34,7 @@ class SomeOtherWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 File name: **some_widget.dart**
 
@@ -59,7 +49,7 @@ class SomeWidget extends StatelessWidget {
 
 #### Example 2 Multiple class in the file {#example-2-multiple-class-in-the-file}
 
-Bad:
+**❌ Bad:**
 
 File name: **some_other_widget.dart**
 
@@ -79,7 +69,7 @@ class SomeWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 File name: **some_widget.dart**
 
diff --git a/website/docs/rules/common/prefer-moving-to-variable.md b/website/docs/rules/common/prefer-moving-to-variable.mdx
similarity index 81%
rename from website/docs/rules/common/prefer-moving-to-variable.md
rename to website/docs/rules/common/prefer-moving-to-variable.mdx
index 19b37f1bbd..60c4fc99b5 100644
--- a/website/docs/rules/common/prefer-moving-to-variable.md
+++ b/website/docs/rules/common/prefer-moving-to-variable.mdx
@@ -1,16 +1,6 @@
-# Prefer moving to variable
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-prefer-moving-to-variable
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.14.0" severity="warning" hasConfig />
 
 Warns when a property access or a method invocation start with duplicated chains of other invocations / accesses inside a single function or method block.
 
@@ -25,7 +15,7 @@ the rule will suggest to move `getUser()` call to a single variable.
 
 Use `allowed-duplicated-chains` configuration, if you want to set a threshold after which the rule should trigger on duplicated lines.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -38,7 +28,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 return Container(
@@ -50,7 +40,7 @@ return Container(
 );
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 final theme = Theme.of(context);
diff --git a/website/docs/rules/common/prefer-trailing-comma.md b/website/docs/rules/common/prefer-trailing-comma.mdx
similarity index 86%
rename from website/docs/rules/common/prefer-trailing-comma.md
rename to website/docs/rules/common/prefer-trailing-comma.mdx
index 3dcf5792e8..fed0d5b81b 100644
--- a/website/docs/rules/common/prefer-trailing-comma.md
+++ b/website/docs/rules/common/prefer-trailing-comma.mdx
@@ -1,17 +1,6 @@
-# Prefer trailing comma
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-trailing-comma
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="2.2.0" severity="warning" hasConfig hasFix />
 
 Check for trailing comma for arguments, parameters, enum values and collections.
 By default warns in cases when items aren't on a single line.
@@ -19,7 +8,9 @@ By default warns in cases when items aren't on a single line.
 Can be configured with `break-on` option, which additionally enables checks for given amount of items.
 For example, if `break-on` is equal 2, then the rule also warns for all functions with 2 or more arguments (if they have no trailing comma).
 
-Note: if the last item starts on the same line as opening bracket and ends on the same line as closing, the rule will not warn about this case.
+:::info
+
+If the last item starts on the same line as opening bracket and ends on the same line as closing, the rule will not warn about this case.
 
 ```dart
 function('some string', () {
@@ -27,9 +18,11 @@ function('some string', () {
 });
 ```
 
+:::
+
 Use `break-on` configuration, if you want to override the default behavior.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -42,7 +35,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 // LINT
@@ -93,7 +86,7 @@ final secondMap = {
 };
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 void firstFunction(
@@ -145,11 +138,11 @@ class TestClass {
 
 With given config:
 
-``` yaml
+```yaml
 - break-on: 2
 ```
 
-Bad:
+**❌ Bad:**
 
 ```dart
 void firstFunction(String arg1, String arg2,
@@ -162,7 +155,7 @@ void secondFunction(String arg1, String arg2, String arg3) {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 void firstFunction(
diff --git a/website/docs/rules/common/tag-name.md b/website/docs/rules/common/tag-name.mdx
similarity index 70%
rename from website/docs/rules/common/tag-name.md
rename to website/docs/rules/common/tag-name.mdx
index db8542de25..1a13cd5bcb 100644
--- a/website/docs/rules/common/tag-name.md
+++ b/website/docs/rules/common/tag-name.mdx
@@ -1,20 +1,10 @@
-# Tag name
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-tag-name
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.12.0" severity="warning" hasConfig hasFix />
 
 Warns when tag name does not match class name.
 
-### Config example {#config-example}
-
-We recommend exclude the `test` folder.
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -30,7 +20,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class Apple {
@@ -42,7 +32,7 @@ class _OrangeState {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class Apple {
diff --git a/website/docs/rules/flutter/always-remove-listener.md b/website/docs/rules/flutter/always-remove-listener.mdx
similarity index 92%
rename from website/docs/rules/flutter/always-remove-listener.md
rename to website/docs/rules/flutter/always-remove-listener.mdx
index 824f330e7d..c51249d394 100644
--- a/website/docs/rules/flutter/always-remove-listener.md
+++ b/website/docs/rules/flutter/always-remove-listener.mdx
@@ -1,16 +1,6 @@
-# Always remove listener
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-always-remove-listener
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
-
-**Note** the rule is _experimental_ and only checks for `Listenable` (and subclasses).
+<RuleDetails version="4.0.0" severity="warning" />
 
 Warns when an event listener is added but never removed.
 
@@ -21,7 +11,7 @@ If listeners are added in `didUpdateWidget` or `updateDependencies` then they al
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class ShinyWidget {
@@ -79,18 +69,18 @@ class _ShinyWidgetState extends State {
 
     super.dispose();
   }
-  
+
   void listener() {
     // ...
   }
-  
+
   void wrongListener() {
     // ...
   }
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class ShinyWidget {
@@ -124,7 +114,7 @@ class _ShinyWidgetState extends State {
 
     widget.anotherListener.removeListener(listener);
     widget.anotherListener.addListener(listener);
-    
+
     _someListener.removeListener(listener);
     _someListener.addListener(listener);
   }
diff --git a/website/docs/rules/flutter/avoid-border-all.md b/website/docs/rules/flutter/avoid-border-all.mdx
similarity index 81%
rename from website/docs/rules/flutter/avoid-border-all.md
rename to website/docs/rules/flutter/avoid-border-all.mdx
index 1aecf76c0f..021d2ca08d 100644
--- a/website/docs/rules/flutter/avoid-border-all.md
+++ b/website/docs/rules/flutter/avoid-border-all.mdx
@@ -1,25 +1,14 @@
-# Avoid using Border.all constructor
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-avoid-border-all
-
-## Severity {#severity}
-
-Performance
-
-## Description {#description}
+<RuleDetails version="4.11.0" severity="performance" hasFix />
 
 `Border.all` constructor calls **const** `Border.fromBorderSide` constructor under the hood. This rule allows to replace `Border.all` with **const** `Border.fromBorderSide`.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
-
 class BorderWidget extends StatelessWidget {
   final Widget child;
 
@@ -43,10 +32,9 @@ class BorderWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
-
 class BorderWidget extends StatelessWidget {
   final Widget child;
 
@@ -62,7 +50,7 @@ class BorderWidget extends StatelessWidget {
         color: const Color(0xFF000000),
         width: 1.0,
         style: BorderStyle.solid,
-      )), 
+      )),
       child: child,
     );
   }
diff --git a/website/docs/rules/flutter/avoid-returning-widgets.md b/website/docs/rules/flutter/avoid-returning-widgets.mdx
similarity index 90%
rename from website/docs/rules/flutter/avoid-returning-widgets.md
rename to website/docs/rules/flutter/avoid-returning-widgets.mdx
index a48c3ec046..8e54a69570 100644
--- a/website/docs/rules/flutter/avoid-returning-widgets.md
+++ b/website/docs/rules/flutter/avoid-returning-widgets.mdx
@@ -1,18 +1,14 @@
-# Avoid returning widgets
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
+<RuleDetails version="3.1.0" severity="warning" hasConfig />
 
-## Rule id {#rule-id}
-
-avoid-returning-widgets
-
-## Severity {#severity}
+Warns when a method, function or getter returns a Widget or subclass of a Widget.
 
-Warning
+Extracting widgets to a method is considered as a Flutter anti-pattern, because when Flutter rebuilds widget tree, it calls the function all the time, making more processor time for the operations.
 
-## Description {#description}
+Consider creating a separate widget instead of a function or method.
 
-Warns when a method, function or getter returns a Widget or subclass of a Widget.
+:::info
 
 The following patterns will not trigger the rule:
 
@@ -20,9 +16,7 @@ The following patterns will not trigger the rule:
 - Class method that is passed to a builder.
 - Functions with [functional_widget](https://pub.dev/packages/functional_widget) package annotations.
 
-Extracting widgets to a method is considered as a Flutter anti-pattern, because when Flutter rebuilds widget tree, it calls the function all the time, making more processor time for the operations.
-
-Consider creating a separate widget instead of a function or method.
+:::
 
 Additional resources:
 
@@ -35,9 +29,7 @@ Use `ignored-names` configuration, if you want to ignore a function or method na
 
 Use `ignored-annotations` configuration, if you want to override default ignored annotation list.
 
-For example:
-
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -55,7 +47,7 @@ will ignore all functions named `testFunction` and all functions having `allowed
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class MyWidget extends StatelessWidget {
@@ -88,7 +80,7 @@ class MyWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class MyWidget extends StatelessWidget {
@@ -123,7 +115,7 @@ class _MyShinyWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class MyWidget extends StatelessWidget {
diff --git a/website/docs/rules/flutter/avoid-shrink-wrap-in-lists.md b/website/docs/rules/flutter/avoid-shrink-wrap-in-lists.mdx
similarity index 84%
rename from website/docs/rules/flutter/avoid-shrink-wrap-in-lists.md
rename to website/docs/rules/flutter/avoid-shrink-wrap-in-lists.mdx
index 9b683003bd..7982c125dc 100644
--- a/website/docs/rules/flutter/avoid-shrink-wrap-in-lists.md
+++ b/website/docs/rules/flutter/avoid-shrink-wrap-in-lists.mdx
@@ -1,14 +1,6 @@
-# Avoid shrink wrap in lists
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-shrink-wrap-in-lists
-
-## Severity {#severity}
-
-Performance
-
-## Description {#description}
+<RuleDetails version="4.17.0" severity="performance" />
 
 Warns when a `ListView` widget with `shrinkWrap` parameter is wrapped in a `Column`, `Row` or another `ListView` widget.
 
@@ -20,7 +12,7 @@ Additional resources:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 Column(
@@ -37,7 +29,7 @@ Column(
 ),
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 CustomScrollView(
diff --git a/website/docs/rules/flutter/avoid-unnecessary-setstate.md b/website/docs/rules/flutter/avoid-unnecessary-setstate.mdx
similarity index 92%
rename from website/docs/rules/flutter/avoid-unnecessary-setstate.md
rename to website/docs/rules/flutter/avoid-unnecessary-setstate.mdx
index 8b40fc3072..d605bb171d 100644
--- a/website/docs/rules/flutter/avoid-unnecessary-setstate.md
+++ b/website/docs/rules/flutter/avoid-unnecessary-setstate.mdx
@@ -1,14 +1,6 @@
-# Avoid unnecessary setState
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-avoid-unnecessary-setstate
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="4.0.0" severity="warning" />
 
 Warns when `setState` is called inside `initState`, `didUpdateWidget` or `build` methods and when it's called from a `sync` method that is called inside those methods.
 
@@ -18,11 +10,11 @@ Consider changing state directly without calling `setState`.
 
 Additional resources:
 
-* <https://stackoverflow.com/questions/53363774/importance-of-calling-setstate-inside-initstate/53373017#53373017>
+- <https://stackoverflow.com/questions/53363774/importance-of-calling-setstate-inside-initstate/53373017#53373017>
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class MyWidget extends StatefulWidget {
@@ -95,7 +87,7 @@ class _MyWidgetState extends State<MyWidget> {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class MyWidget extends StatefulWidget {
diff --git a/website/docs/rules/flutter/avoid-use-expanded-as-spacer.md b/website/docs/rules/flutter/avoid-use-expanded-as-spacer.md
deleted file mode 100644
index 47ce3b4bec..0000000000
--- a/website/docs/rules/flutter/avoid-use-expanded-as-spacer.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# Avoid use Expanded widget instead of Spacer
-
-## Rule id {#rule-id}
-
-avoid-use-expanded-as-spacer
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
-
-The rule detects Expanded widgets that contain empty SizedBox/Container and proposes to replace them with the Spacer widget.
-
-### Example {#example}
-
-Bad:
-
-```dart
-Column(
-    children: [
-        Container(),
-        const Expanded(child: SizedBox()),
-        Container(),
-    ]
-)
-```
-
-Good:
-
-```dart
-Column(
-    children: [
-        Container(),
-        const Spacer(),
-        Container(),
-    ]
-)
-```
diff --git a/website/docs/rules/flutter/avoid-use-expanded-as-spacer.mdx b/website/docs/rules/flutter/avoid-use-expanded-as-spacer.mdx
new file mode 100644
index 0000000000..147472d90e
--- /dev/null
+++ b/website/docs/rules/flutter/avoid-use-expanded-as-spacer.mdx
@@ -0,0 +1,31 @@
+import RuleDetails from '@site/src/components/RuleDetails';
+
+<RuleDetails version="4.17.0" severity="warning" hasFix />
+
+The rule detects `Expanded` widgets that contain empty `SizedBox/Container` and proposes to replace them with the `Spacer` widget.
+
+### Example {#example}
+
+**❌ Bad:**
+
+```dart
+Column(
+    children: [
+        Container(),
+        const Expanded(child: SizedBox()),
+        Container(),
+    ]
+)
+```
+
+**✅ Good:**
+
+```dart
+Column(
+    children: [
+        Container(),
+        const Spacer(),
+        Container(),
+    ]
+)
+```
diff --git a/website/docs/rules/flutter/avoid-wrapping-in-padding.md b/website/docs/rules/flutter/avoid-wrapping-in-padding.mdx
similarity index 58%
rename from website/docs/rules/flutter/avoid-wrapping-in-padding.md
rename to website/docs/rules/flutter/avoid-wrapping-in-padding.mdx
index a63fa97171..6f8ecd4ee6 100644
--- a/website/docs/rules/flutter/avoid-wrapping-in-padding.md
+++ b/website/docs/rules/flutter/avoid-wrapping-in-padding.mdx
@@ -1,20 +1,12 @@
-# Avoid wrapping in padding
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
+<RuleDetails version="4.0.0" severity="warning" />
 
-avoid-wrapping-in-padding
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
-
-Warns when a widget is wrapped in a Padding widget but has a padding settings by itself.
+Warns when a widget is wrapped in a `Padding` widget but has a padding settings by itself.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class CoolWidget {
@@ -29,7 +21,7 @@ class CoolWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class CoolWidget {
diff --git a/website/docs/rules/flutter/prefer-const-border-radius.md b/website/docs/rules/flutter/prefer-const-border-radius.mdx
similarity index 83%
rename from website/docs/rules/flutter/prefer-const-border-radius.md
rename to website/docs/rules/flutter/prefer-const-border-radius.mdx
index 8c1cc28620..d97ea6ff1c 100644
--- a/website/docs/rules/flutter/prefer-const-border-radius.md
+++ b/website/docs/rules/flutter/prefer-const-border-radius.mdx
@@ -1,22 +1,12 @@
-# Prefer const border radius
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-const-border-radius
-
-## Severity {#severity}
-
-Performance
-
-## Description {#description}
+<RuleDetails version="4.4.0" severity="performance" hasFix />
 
 `BorderRadius.circular` constructor calls const `BorderRadius.all` constructor under the hood. This rule allows to replace `BorderRadius.circular(value)` with const `BorderRadius.all(Radius.circular(value))` if radius is a constant value.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 
@@ -42,7 +32,7 @@ class RoundedWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 
@@ -66,4 +56,4 @@ class RoundedWidget extends StatelessWidget {
     );
   }
 }
-```
\ No newline at end of file
+```
diff --git a/website/docs/rules/flutter/prefer-correct-edge-insets-constructor.md b/website/docs/rules/flutter/prefer-correct-edge-insets-constructor.mdx
similarity index 69%
rename from website/docs/rules/flutter/prefer-correct-edge-insets-constructor.md
rename to website/docs/rules/flutter/prefer-correct-edge-insets-constructor.mdx
index cff6d4f370..2051f58e21 100644
--- a/website/docs/rules/flutter/prefer-correct-edge-insets-constructor.md
+++ b/website/docs/rules/flutter/prefer-correct-edge-insets-constructor.mdx
@@ -1,22 +1,12 @@
-# Prefer correct EdgeInsets constructor
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-correct-edge-insets-constructor
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.17.0" severity="style" hasFix />
 
 If any value, passed to EdgeInsets.fromLTRB, equals 0, then EdgeInsets.fromLTRB should be replaced with EdgeInsets.only passing all non-zero values. If passed values are symmetric, then EdgeInsets.fromLTRB or EdgeInsets.only should be replaced with EdgeInsets.symmetric.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 EdgeInsets.fromLTRB(8, 0, 8, 0)
@@ -25,11 +15,11 @@ EdgeInsets.only(left: 16, right: 16)
 EdgeInsets.fromLTRB(8, 8, 8, 8)
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 EdgeInsets.symmetric(horizontal: 8)
 EdgeInsets.only(left: 8)
 EdgeInsets.symmetric(horizontal: 16)
 EdgeInsets.all(8)
-```
\ No newline at end of file
+```
diff --git a/website/docs/rules/flutter/prefer-extracting-callbacks.md b/website/docs/rules/flutter/prefer-extracting-callbacks.mdx
similarity index 85%
rename from website/docs/rules/flutter/prefer-extracting-callbacks.md
rename to website/docs/rules/flutter/prefer-extracting-callbacks.mdx
index 4b719d14a4..238d351a67 100644
--- a/website/docs/rules/flutter/prefer-extracting-callbacks.md
+++ b/website/docs/rules/flutter/prefer-extracting-callbacks.mdx
@@ -1,28 +1,22 @@
-# Prefer extracting callbacks
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-prefer-extracting-callbacks
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.0.0" severity="style" hasConfig />
 
 Warns about inline callbacks in a widget tree and suggests to extract them to widget methods in order to make a `build` method more readable. In addition extracting can help test those methods separately as well.
 
-**NOTE** the rule will not trigger on:
+:::info
+
+This rule will not trigger on:
 
 - arrow functions like `onPressed: () => _handler(...)` in order to cover cases when a callback needs a variable from the outside;
 - empty blocks.
 - Flutter specific: arguments with functions returning `Widget` type (or its subclass) and with first parameter of type `BuildContext`. "Builder" functions is a common pattern in Flutter, for example, [IndexedWidgetBuilder typedef](https://api.flutter.dev/flutter/widgets/IndexedWidgetBuilder.html) is used in [ListView.builder](https://api.flutter.dev/flutter/widgets/ListView/ListView.builder.html).
 
+:::
+
 Use `ignored-named-arguments` configuration, if you want to ignore specific named parameters.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -37,7 +31,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 class MyWidget extends StatelessWidget {
@@ -56,7 +50,7 @@ class MyWidget extends StatelessWidget {
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 class MyWidget extends StatelessWidget {
diff --git a/website/docs/rules/flutter/prefer-single-widget-per-file.md b/website/docs/rules/flutter/prefer-single-widget-per-file.mdx
similarity index 82%
rename from website/docs/rules/flutter/prefer-single-widget-per-file.md
rename to website/docs/rules/flutter/prefer-single-widget-per-file.mdx
index 6827a2dc2a..8a6911a6a6 100644
--- a/website/docs/rules/flutter/prefer-single-widget-per-file.md
+++ b/website/docs/rules/flutter/prefer-single-widget-per-file.mdx
@@ -1,22 +1,12 @@
-# Prefer single widget per file
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Configurable](https://img.shields.io/badge/-configurable-informational)
-
-## Rule id {#rule-id}
-
-prefer-single-widget-per-file
-
-## Severity {#severity}
-
-Style
-
-## Description {#description}
+<RuleDetails version="4.2.0" severity="style" hasConfig />
 
 Warns when a file contains more than a single widget.
 
 Ensures that files have a single responsibility so that each widget exists in its own file.
 
-### Config example {#config-example}
+### ⚙️ Config example {#config-example}
 
 ```yaml
 dart_code_metrics:
@@ -29,7 +19,7 @@ dart_code_metrics:
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 some_widgets.dart
 
@@ -71,7 +61,7 @@ class _SomeStatefulWidgetState extends State<InspirationCard> {
 }
 ```
 
-Good:
+**✅ Good:**
 
 some_widget.dart
 
@@ -93,4 +83,4 @@ class SomeOtherWidget extends StatelessWidget {
     ...
   }
 }
-```
\ No newline at end of file
+```
diff --git a/website/docs/rules/intl/prefer-intl-name.md b/website/docs/rules/intl/prefer-intl-name.mdx
similarity index 87%
rename from website/docs/rules/intl/prefer-intl-name.md
rename to website/docs/rules/intl/prefer-intl-name.mdx
index a01ef50dff..4a12bc124d 100644
--- a/website/docs/rules/intl/prefer-intl-name.md
+++ b/website/docs/rules/intl/prefer-intl-name.mdx
@@ -1,22 +1,12 @@
-# Prefer Intl name
+import RuleDetails from '@site/src/components/RuleDetails';
 
-![Has auto-fix](https://img.shields.io/badge/-has%20auto--fix-success)
-
-## Rule id {#rule-id}
-
-prefer-intl-name
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.7.0" severity="warning" hasFix />
 
 Recommends to use `${ClassName}_${ClassMemberName}` pattern for `name` argument in `Intl.message()`, `Intl.plural()`, `Intl.gender()`, `Intl.select()` methods.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
 import 'package:intl/intl.dart';
@@ -30,29 +20,29 @@ class SomeButtonI18n {
   final String title2 = Intl.message(
     'Two Title',
     name: 'titleTwo'
-  );  
+  );
 
   String get title3 => Intl.message(
     'Three Title',
     name: 'SomeButtonI18n_titleThree'
-  );  
-  
+  );
+
   static String get title4 => Intl.message(
     'Four Title',
     name: 'SomeButtonI18n_titleFour'
-  ); 
-  
+  );
+
   String title5() => Intl.message(
     'Five Title',
     name: 'SomeButtonI18n_titleFive'
-  );  
-  
+  );
+
   static String title6() {
     return Intl.message(
       'Six Title',
       name: 'SomeButtonI18n_titleSix'
      );
-  } 
+  }
 }
 
 String title7() {
@@ -68,7 +58,7 @@ String title8() => Intl.message(
 );
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
 import 'package:intl/intl.dart';
@@ -84,29 +74,29 @@ class SomeButtonCorrectI18n {
   final String title2 = Intl.message(
     'Two Title',
     name: 'SomeButtonCorrectI18n_title2'
-  );  
+  );
 
   String get title3 => Intl.message(
     'Three Title',
     name: 'SomeButtonCorrectI18n_title3'
-  );  
-  
+  );
+
   static String get title4 => Intl.message(
     'Four Title',
     name: 'SomeButtonCorrectI18n_title4'
-  );   
+  );
 
   String get title5 => Intl.message(
     'Three Title',
     name: 'SomeButtonCorrectI18n_title5'
-  );  
-  
+  );
+
   static String get title6 => Intl.message(
     'Four Title',
     name: 'SomeButtonCorrectI18n_title6'
-  ); 
+  );
 }
-  
+
 String title77() {
   return Intl.message(
     'Seven seven Title',
diff --git a/website/docs/rules/intl/provide-correct-intl-args.md b/website/docs/rules/intl/provide-correct-intl-args.mdx
similarity index 93%
rename from website/docs/rules/intl/provide-correct-intl-args.md
rename to website/docs/rules/intl/provide-correct-intl-args.mdx
index ff68af435b..e04859b24f 100644
--- a/website/docs/rules/intl/provide-correct-intl-args.md
+++ b/website/docs/rules/intl/provide-correct-intl-args.mdx
@@ -1,23 +1,15 @@
-# Provide correct intl args
+import RuleDetails from '@site/src/components/RuleDetails';
 
-## Rule id {#rule-id}
-
-provide-correct-intl-args
-
-## Severity {#severity}
-
-Warning
-
-## Description {#description}
+<RuleDetails version="1.9.0" severity="warning" />
 
 Warns when the `Intl.message()` invocation has incorrect `args` list.
 
 ### Example {#example}
 
-Bad:
+**❌ Bad:**
 
 ```dart
-import 'package:intl/intl.dart';    
+import 'package:intl/intl.dart';
 
 class SomeButtonClassI18n {
   static const int value = 0;
@@ -29,55 +21,55 @@ class SomeButtonClassI18n {
       name: 'SomeButtonClassI18n_simpleTitleNotExistArgsIssue',
     );
   }
-  
+
   static String simpleTitleArgsMustBeOmittedIssue1() {
     return Intl.message(
       'title $name',
       name: 'SomeButtonClassI18n_simpleTitleArgsMustBeOmittedIssue1',
       args:  [name]
     );
-  }  
-  
+  }
+
   static String simpleTitleArgsMustBeOmittedIssue2() {
     return Intl.message(
       'title',
       name: 'SomeButtonClassI18n_simpleTitleArgsMustBeOmittedIssue2',
       args:  [name]
     );
-  }  
-  
+  }
+
   static String simpleArgsItemMustBeOmittedIssue(int value) {
     return Intl.message(
       'title $value',
       name: 'SomeButtonClassI18n_simpleArgsItemMustBeOmittedIssue',
       args:  [value, name]
     );
-  }  
-  
+  }
+
   static String simpleParameterMustBeOmittedIssue(String name, int value) {
     return Intl.message(
       'title $value',
       name: 'SomeButtonClassI18n_simpleParameterMustBeOmittedIssue',
       args:  [value, name]
     );
-  }  
-  
+  }
+
   static String simpleMustBeSimpleIdentifierIssue1(int value) {
     return Intl.message(
       'title ${value+1}',
       name: 'SomeButtonClassI18n_simpleMustBeSimpleIdentifierIssue1',
       args:  [value]
     );
-  }  
-  
+  }
+
   static String simpleMustBeSimpleIdentifierIssue2(int value) {
     return Intl.message(
       'title $value',
       name: 'SomeButtonClassI18n_simpleMustBeSimpleIdentifierIssue2',
       args:  [value+1]
     );
-  }  
-  
+  }
+
   static String simpleParameterMustBeInArgsIssue(int value, String name) {
     return Intl.message(
       'title $value, name: $name',
@@ -85,7 +77,7 @@ class SomeButtonClassI18n {
       args:  [value]
     );
   }
-  
+
   static String simpleArgsMustBeInParameterIssue(int value) {
     return Intl.message(
       'title $value, name: $name',
@@ -93,7 +85,7 @@ class SomeButtonClassI18n {
       args:  [value, name]
     );
   }
-  
+
   static String simpleInterpolationMustBeInArgsIssue(int value, String name) {
     return Intl.message(
       'title $value, name: $name',
@@ -101,21 +93,21 @@ class SomeButtonClassI18n {
       args:  [value]
     );
   }
-  
+
   static String simpleInterpolationMustBeInParameterIssue(int value) {
     return Intl.message(
       'title $value, name: $name',
       name: 'SomeButtonClassI18n_simpleInterpolationMustBeInParameterIssue',
       args:  [value, name]
     );
-  } 
+  }
 }
 ```
 
-Good:
+**✅ Good:**
 
 ```dart
-import 'package:intl/intl.dart';    
+import 'package:intl/intl.dart';
 
 class SomeButtonClassI18n {
 
diff --git a/website/docs/rules/overview.mdx b/website/docs/rules/overview.mdx
index ee01438b68..dfd8174f96 100644
--- a/website/docs/rules/overview.mdx
+++ b/website/docs/rules/overview.mdx
@@ -9,7 +9,7 @@ import RuleEntry from '@site/src/components/RuleEntry';
 
 :::tip
 
-Rules configuration is [described here](../getting-started/configuration#configuring-a-rules-entry).
+General rules configuration is [described here](../getting-started/configuration#configuring-a-rules-entry).
 
 :::
 
@@ -305,7 +305,6 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
   type="common"
   severity="style"
   version="1.8.0"
-  hasConfig
 >
   Warns when a class member is declared with <code>Object</code> type.
 </RuleEntry>
@@ -413,6 +412,18 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
   Warns when a file name does not match the class name.
 </RuleEntry>
 
+<RuleEntry
+  name="prefer-moving-to-variable"
+  type="common"
+  severity="warning"
+  version="4.14.0"
+  hasConfig
+>
+  Warns when a property access or a method invocation start with duplicated
+  chains of other invocations / accesses inside a single function or method
+  block.
+</RuleEntry>
+
 <RuleEntry
   name="prefer-trailing-comma"
   type="common"
@@ -467,6 +478,17 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
   Warns when a method or function returns a Widget or subclass of a Widget.
 </RuleEntry>
 
+<RuleEntry
+  name="avoid-shrink-wrap-in-lists"
+  type="flutter"
+  severity="performance"
+  version="4.17.0"
+>
+  Warns when a <code>ListView</code> widget with <code>shrinkWrap</code>{' '}
+  parameter is wrapped in a <code>Column</code>, <code>Row</code> or another{' '}
+  <code>ListView</code> widget.
+</RuleEntry>
+
 <RuleEntry
   name="avoid-unnecessary-setstate"
   type="flutter"
@@ -479,23 +501,23 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
 </RuleEntry>
 
 <RuleEntry
-  name="avoid-wrapping-in-padding"
+  name="avoid-use-expanded-as-spacer"
   type="flutter"
   severity="warning"
-  version="4.0.0"
+  version="4.17.0"
+  hasFix
 >
-  Warns when a widget is wrapped in a Padding widget but has a padding settings
-  by itself.
+  Avoid using Expanded widget as Spacer.
 </RuleEntry>
 
 <RuleEntry
-  name="avoid-use-expanded-as-spacer"
+  name="avoid-wrapping-in-padding"
   type="flutter"
   severity="warning"
-  version="4.17.0"
-  hasFix
+  version="4.0.0"
 >
-  Avoid using Expanded widget as Spacer.
+  Warns when a widget is wrapped in a Padding widget but has a padding settings
+  by itself.
 </RuleEntry>
 
 <RuleEntry
@@ -505,7 +527,7 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
   version="4.4.0"
   hasFix
 >
-  Warns when used non const border radius.
+  Warns when a non-const border radius is used.
 </RuleEntry>
 
 <RuleEntry
@@ -515,7 +537,7 @@ Rules are grouped by category to help you understand their purpose. Each rule ha
   version="4.17.0"
   hasFix
 >
-  Warns when used non const border radius.
+  Prefer correct <code>EdgeInsets</code> constructor.
 </RuleEntry>
 
 <RuleEntry
diff --git a/website/src/components/RuleDetails.tsx b/website/src/components/RuleDetails.tsx
new file mode 100644
index 0000000000..55a0c0b0bd
--- /dev/null
+++ b/website/src/components/RuleDetails.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import RuleAdditionalInfo from './rule/RuleAdditionalInfo';
+
+export default function RuleDetails({
+  version,
+  severity,
+  hasConfig,
+  hasFix,
+  isDeprecated,
+}) {
+  return (
+    <div className="single-rule-info">
+      <RuleAdditionalInfo
+        version={version}
+        severity={severity}
+        hasConfig={hasConfig}
+        hasFix={hasFix}
+        isDeprecated={isDeprecated}
+      />
+    </div>
+  );
+}
diff --git a/website/src/components/RuleEntry.tsx b/website/src/components/RuleEntry.tsx
index 85952fd8d1..47bda7829a 100644
--- a/website/src/components/RuleEntry.tsx
+++ b/website/src/components/RuleEntry.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import CopyButton from './buttons/CopyButton';
+import RuleAdditionalInfo from './rule/RuleAdditionalInfo';
+import RuleId from './rule/RuleId';
 
 type Props = {
   name: string;
@@ -22,34 +23,24 @@ export default function RuleEntry({
   hasFix,
   isDeprecated,
 }: Props) {
-  const severityLover = severity?.toLowerCase();
   const href = `${type}/${name}`;
 
   return (
     <div className="rule-entry">
       <div className="rule-content">
         <a className="rule-link" href={href}>
-          <span>{name}</span>
-          <CopyButton link={href} />
+          <RuleId name={name} />
         </a>
 
         <p className="rule-description">{children}</p>
 
-        <div className="rule-additional-info">
-          <div>added in: {version}</div>
-
-          <div className={`rule-severity ${severityLover}`}>
-            {severityLover}
-          </div>
-
-          <div className="rule-options">
-            {hasConfig && <span title="Configurable">⚙️</span>}
-
-            {hasFix && <span title="Has auto-fix">🛠</span>}
-
-            {isDeprecated && <span title="Deprecated">⚠️</span>}
-          </div>
-        </div>
+        <RuleAdditionalInfo
+          version={version}
+          severity={severity}
+          hasConfig={hasConfig}
+          hasFix={hasFix}
+          isDeprecated={isDeprecated}
+        />
       </div>
     </div>
   );
diff --git a/website/src/components/rule/RuleAdditionalInfo.tsx b/website/src/components/rule/RuleAdditionalInfo.tsx
new file mode 100644
index 0000000000..2a56407edc
--- /dev/null
+++ b/website/src/components/rule/RuleAdditionalInfo.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import RuleOptions from './RuleOptions';
+
+export default function RuleAdditionalInfo({
+  severity,
+  version,
+  hasConfig,
+  hasFix,
+  isDeprecated,
+}) {
+  const severityLover = severity?.toLowerCase();
+
+  return (
+    <div className="rule-additional-info">
+      <div>
+        <span className="added-in-label">added in:</span> {version}
+      </div>
+
+      <div className={`rule-severity ${severityLover}`}>{severityLover}</div>
+
+      <RuleOptions
+        hasConfig={hasConfig}
+        hasFix={hasFix}
+        isDeprecated={isDeprecated}
+      />
+    </div>
+  );
+}
diff --git a/website/src/components/rule/RuleId.tsx b/website/src/components/rule/RuleId.tsx
new file mode 100644
index 0000000000..1aa2d014b7
--- /dev/null
+++ b/website/src/components/rule/RuleId.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import CopyButton from '../buttons/CopyButton';
+
+export default function RuleId({ name }) {
+  return (
+    <div>
+      <span>{name}</span>
+      <CopyButton link={name} />
+    </div>
+  );
+}
diff --git a/website/src/components/rule/RuleOptions.tsx b/website/src/components/rule/RuleOptions.tsx
new file mode 100644
index 0000000000..e290652c69
--- /dev/null
+++ b/website/src/components/rule/RuleOptions.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+
+export default function RuleOptions({ hasConfig, hasFix, isDeprecated }) {
+  return (
+    <div className="rule-options">
+      {hasConfig && <span title="Configurable">⚙️</span>}
+
+      {hasFix && <span title="Has auto-fix">🛠</span>}
+
+      {isDeprecated && <span title="Deprecated">⚠️</span>}
+    </div>
+  );
+}
diff --git a/website/src/css/custom.css b/website/src/css/custom.css
index 29a4f721fe..d3e01f3028 100644
--- a/website/src/css/custom.css
+++ b/website/src/css/custom.css
@@ -21,6 +21,10 @@
   --ifm-hero-background-color: transparent;
 }
 
+.menu__list-item-collapsible + .menu__list .menu__list-item-collapsible .menu__link--sublist-caret:after {
+  background: var(--ifm-menu-link-sublist-icon) 50% / 1.5rem 1.5rem;
+}
+
 html[data-theme='dark'] {
   --ifm-color-primary: #00c6ff;
   --ifm-color-primary-dark: #00b2e6;
@@ -117,6 +121,7 @@ footer .container {
   width: 15px;
   z-index: 1;
   color: var(--docsearch-text-color);
+  cursor: pointer;
 }
 
 .rule-link::after {
@@ -147,7 +152,6 @@ footer .container {
 }
 
 .rule-severity {
-  font-size: 13px;
   margin-left: 12px;
 }
 
@@ -181,3 +185,16 @@ footer .container {
   justify-content: center;
   height: 24px;
 }
+
+header + div.single-rule-info {
+  margin-top: -18px;
+  margin-bottom: 20px;
+}
+
+.single-rule-info .rule-additional-info {
+  font-size: 17px;
+}
+
+.added-in-label {
+  color: var(--ifm-color-emphasis-700);
+}