fix: better typing and show better lang names

Author: HerringtonDarkholme

website/_data/catalog.data.ts

@@ -1,12 +1,13 @@
 import { createContentLoader } from 'vitepress'
+import { ExampleLangs } from '../src/catalog/data'
 
 interface Rule {
   id: string
   name: string
   type: string
   link: string
   playgroundLink: string
-  language: string
+  language: ExampleLangs
   hasFix: boolean
   rules: string[]
   features: string[]
@@ -29,7 +30,7 @@ export default createContentLoader('catalog/**/*.md', {
          ? 'YAML' : 'Pattern'
         const playgroundLink = /\[Playground Link\]\((.+)\)/.exec(source)?.[1] || ''
         const hasFix = source.includes('<Badge') && source.includes('Has Fix')
-        const language = url.split('/')[2]
+        const language = url.split('/')[2] as ExampleLangs
         const name = source.match(/##\s*([^<\n]+)/)?.[1] || ''
 
         return {

website/src/catalog/RuleFilter.vue

@@ -10,11 +10,11 @@ import {
 
 const model = defineModel<Filter>()
 
-const filter = ref({
-  selectedLanguages: [] as string[],
-  selectedRuleFilters: [] as string[],
-  selectedFeatures: [] as string[],
-  selectedTypes: [] as string[],
+const filter = ref<Filter>({
+  selectedLanguages: [],
+  selectedRuleFilters: [],
+  selectedFeatures: [],
+  selectedTypes: [],
 })
 
 watchEffect(() => {
@@ -27,9 +27,9 @@ watchEffect(() => {
     <details open>
       <summary>Language Filters</summary>
       <div class="checkbox-group">
-        <label v-for="lang in languages" :key="lang">
+        <label v-for="displayName, lang in languages" :key="lang">
           <input type="checkbox" v-model="filter.selectedLanguages" :value="lang">
-          <code class="option">{{ lang }}</code>
+          <code class="option">{{ displayName }}</code>
         </label>
       </div>
     </details>

website/src/catalog/RuleList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { type Filter, getRules } from './data'
+import { type Filter, getRules, languages } from './data'
 import { computed, type PropType } from 'vue'
 
 const props = defineProps({
@@ -23,7 +23,7 @@ const rules = computed(() => getRules(props.filter))
         <div class="rule-badges">
           <span class="badge type">{{ rule.type }}</span>
           <a :href="`/catalog/${rule.language}/`" class="badge language">
-            {{ rule.language }}
+            {{ languages[rule.language] }}
           </a>
         </div>
       </div>

website/src/catalog/data.ts

@@ -5,31 +5,32 @@ export function getRules(filter: Filter) {
     selectedLanguages,
   } = filter
   return allRules.filter(rule => {
-    return !selectedLanguages.length || selectedLanguages.map(s => s.toLowerCase()).includes(rule.language)
+    return !selectedLanguages.length || selectedLanguages.includes(rule.language)
   })
 }
 
 export type Filter = {
-  selectedLanguages: string[],
+  selectedLanguages: ExampleLangs[],
   selectedRuleFilters: string[],
   selectedFeatures: string[],
   selectedTypes: string[],
 }
 
-export const languages = [
-  'C',
-  'Cpp',
-  'Go',
-  'HTML',
-  'Java',
-  'Kotlin',
-  'Python',
-  'Ruby',
-  'Rust',
-  'TSX',
-  'TypeScript',
-  'YAML',
-]
+export type ExampleLangs = keyof typeof languages
+export const languages = {
+  c: 'C',
+  cpp: 'C++',
+  go: 'Go',
+  html: 'HTML',
+  java: 'Java',
+  kotlin: 'Kotlin',
+  python: 'Python',
+  ruby: 'Ruby',
+  rust: 'Rust',
+  tsx: 'TSX',
+  typescript: 'TypeScript',
+  yaml: 'YAML',
+}
 
 export const ruleTypes = [
   'Pattern',

website/src/catalog/index.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { ref } from 'vue'
-const filter = ref({
-  selectedLanguages: [] as string[],
-  selectedRuleFilters: [] as string[],
-  selectedFeatures: [] as string[],
-  selectedTypes: [] as string[],
-})
 import RuleFilter from './RuleFilter.vue'
 import RuleList from './RuleList.vue'
+import type { Filter } from './data';
+
+const filter = ref<Filter>({
+  selectedLanguages: [],
+  selectedRuleFilters: [],
+  selectedFeatures: [],
+  selectedTypes: [],
+})
 </script>
 
 <template>