feat: add auto fix indicator on rule list (#180)

Namchee · antfu · web-flow · commit b37a8a652435 · 2023-11-22T14:55:29.000+01:00
Co-authored-by: Anthony Fu &lt;anthonyfu117@hotmail.com&gt;
diff --git a/docs/.vitepress/components/RuleItem.vue b/docs/.vitepress/components/RuleItem.vue
@@ -20,5 +20,8 @@ const shortId = computed(() => props.package.shortId)
       </a>
     </td>
     <td>{{ rule.meta?.docs?.description }}</td>
+    <td :title="rule.meta?.fixable ? 'This rule has an auto-fix' : ''">
+      {{ rule.meta?.fixable ? '🔧' : '' }}
+    </td>
   </tr>
 </template>
diff --git a/docs/.vitepress/components/RuleList.vue b/docs/.vitepress/components/RuleList.vue
@@ -9,12 +9,29 @@ const pkg = packages.find(p => p.shortId === props.package)!
 </script>
 
 <template>
+  <p>Each rule has emojis denoting:</p>
+  <div flex="~ items-center gap-2" border="~ solid gray/10 rounded" p3>
+    <code w-1.9em h-1.9em>🔧</code>
+    <div flex="~ items-center gap-2 wrap">
+      Some problems reported are fixable by the <code>--fix</code> command line option
+    </div>
+  </div>
   <table>
-    <RuleItem
-      v-for="rule of pkg.rules"
-      :key="rule.name"
-      :rule="rule"
-      :package="pkg"
-    />
+    <thead>
+      <tr>
+        <td>Rule</td>
+        <td>Description</td>
+        <td></td>
+      </tr>
+    </thead>
+
+    <tbody>
+      <RuleItem
+        v-for="rule of pkg.rules"
+        :key="rule.name"
+        :rule="rule"
+        :package="pkg"
+      />
+    </tbody>
   </table>
 </template>
