feat: add rule features

Author: HerringtonDarkholme

website/_data/catalog.data.ts

@@ -86,5 +86,22 @@ function extractOneRuleObject(rule: object, rules: Set<string>) {
 }
 
 function extractUsedFeatures(yamls: Record<string, unknown>[]): string[] {
-  return []
+  const features = new Set<string>()
+  for (const yaml of yamls) {
+    if (typeof yaml === 'object' && yaml !== null) {
+      if ('utils' in yaml) {
+        features.add('utils')
+      }
+      if ('constraints' in yaml) {
+        features.add('constraints')
+      }
+      if ('rewriters' in yaml) {
+        features.add('rewriters')
+      }
+      if ('transform' in yaml) {
+        features.add('transform')
+      }
+    }
+  }
+  return [...features]
 }

website/src/catalog/RuleList.vue

@@ -31,11 +31,18 @@ const rules = computed(() => getRules(props.filter))
         <div class="rule-badges">
           <Badge v-if="rule.type === 'Pattern'" type="info" text="Simple Pattern" />
           <template v-else>
-            <code class="used" v-for="usedRule in rule.rules">
-              {{ usedRule }}
+            📏
+            <code class="used" v-for="r in rule.rules.slice(0, 2)">
+              {{ r }}
             </code>
           </template>
         </div>
+        <div class="rule-badges" v-if="rule.features.length > 0">
+            💡
+            <code class="used" v-for="feature in rule.features">
+              {{ feature }}
+            </code>
+        </div>
         <a :href="rule.playgroundLink" class="playground-link" target="_blank">
           Try in Playground →
         </a>
@@ -75,7 +82,6 @@ a:hover {
 
 .rule-badges {
   display: flex;
-  align-items: center;
   gap: 0.2em;
 }
 
@@ -85,6 +91,10 @@ a:hover {
   align-items: center;
 }
 
+.rule-details > div {
+  flex: 1;
+}
+
 .used {
   filter: saturate(0);
   user-select: none;