From 421e56d8151d95d96b33bd2830979228774e57ca Mon Sep 17 00:00:00 2001
From: Aron <i@aron.tw>
Date: Wed, 13 Mar 2024 00:40:14 +0800
Subject: [PATCH] Add code-linting features to website

---
 .../docs/code-linting/components/Features.tsx | 43 +++++++++++++++++++
 .../(root)/docs/code-linting/content.mdx      | 41 +-----------------
 2 files changed, 44 insertions(+), 40 deletions(-)
 create mode 100644 website/app/[locale]/(root)/docs/code-linting/components/Features.tsx

diff --git a/website/app/[locale]/(root)/docs/code-linting/components/Features.tsx b/website/app/[locale]/(root)/docs/code-linting/components/Features.tsx
new file mode 100644
index 000000000..91bf1bb11
--- /dev/null
+++ b/website/app/[locale]/(root)/docs/code-linting/components/Features.tsx
@@ -0,0 +1,43 @@
+import Features, { Feature } from 'websites/components/Features'
+import { IconStatusChange, IconSettingsExclamation, IconArrowMerge, IconShieldCheck, IconPencilExclamation, IconFunction } from '@tabler/icons-react'
+import Link from 'websites/components/Link'
+
+export default () => (
+    <Features className="grid-cols:3@sm my:14x">
+        <Feature>
+            <IconStatusChange className="app-icon-primary" />
+            <div>
+                <p><Link href="#consistent-class-order">Consistent class order</Link></p>
+                <p className="text:16!">Enforce a consistent and logical order of classes</p>
+            </div>
+        </Feature>
+        <Feature>
+            <IconShieldCheck className="app-icon-primary" />
+            <div>
+                <p><Link href="#syntax-error-checks">Syntax error checks</Link></p>
+                <p className="text:16!">Detect syntax errors early when writing classes</p>
+            </div>
+        </Feature>
+        <Feature>
+            <IconSettingsExclamation className="app-icon-primary" />
+            <div>
+                <p><Link href="#disallow-unknown-classes">Disallow unknown classes</Link></p>
+                <p className="text:16!">Enforce the use of Master CSS syntax to apply styles</p>
+            </div>
+        </Feature>
+        <Feature>
+            <IconPencilExclamation className="app-icon-primary" />
+            <div>
+                <p><Link href="#class-collision-detection">Class collision detection</Link></p>
+                <p className="text:16!">Avoid applying classes with the same CSS declaration</p>
+            </div>
+        </Feature>
+        <Feature>
+            <IconFunction className="app-icon-primary" />
+            <div>
+                <p><Link href="#supports-js-utilities">Supports JS utilities</Link></p>
+                <p className="text:16!">Check the classes in popular utility arguments</p>
+            </div>
+        </Feature>
+    </Features>
+)
\ No newline at end of file
diff --git a/website/app/[locale]/(root)/docs/code-linting/content.mdx b/website/app/[locale]/(root)/docs/code-linting/content.mdx
index 7853407c7..730826c9c 100644
--- a/website/app/[locale]/(root)/docs/code-linting/content.mdx
+++ b/website/app/[locale]/(root)/docs/code-linting/content.mdx
@@ -1,43 +1,4 @@
-import { IconStatusChange, IconSettingsExclamation, IconArrowMerge, IconShieldCheck, IconPencilExclamation, IconFunction } from '@tabler/icons-react'
-import Features, { Feature } from 'websites/components/Features'
-
-<Features className="grid-cols:3@sm my:14x">
-    <Feature>
-        <IconStatusChange className="app-icon-primary" />
-        <div>
-            **[Consistent class order](#consistent-class-order)**
-            <p className="text:16">Enforce a consistent and logical order of classes</p>
-        </div>
-    </Feature>
-    <Feature>
-        <IconShieldCheck className="app-icon-primary" />
-        <div>
-            **[Syntax error checks](#syntax-error-checks)**
-            <p className="text:16">Detect syntax errors early when writing classes</p>
-        </div>
-    </Feature>
-    <Feature>
-        <IconSettingsExclamation className="app-icon-primary" />
-        <div>
-            **[Disallow unknown classes](#disallow-unknown-classes)**
-            <p className="text:16">Enforce the use of Master CSS syntax to apply styles</p>
-        </div>
-    </Feature>
-    <Feature>
-        <IconPencilExclamation className="app-icon-primary" />
-        <div>
-            **[Class collision detection](#class-collision-detection)**
-            <p className="text:16">Avoid applying classes with the same CSS declaration</p>
-        </div>
-    </Feature>
-    <Feature>
-        <IconFunction className="app-icon-primary" />
-        <div>
-            **[Supports JS utilities](#supports-js-utilities)**
-            <p className="text:16">Check the classes in popular utility arguments</p>
-        </div>
-    </Feature>
-</Features>
+<Features />
 
 ---