feat: add filtering support to registry docs page

docs/components/registry.vue

@@ -0,0 +1,80 @@
+
+<template>
+  <input class="filter"
+         type="text"
+         placeholder="Filter by Short or Full"
+         v-model="filter" />
+  <table class="filtered-table">
+    <thead>
+      <tr>
+        <th>Short</th>
+        <th>Full</th>
+        <th>OS</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(entry, index) in filteredData" :key="index">
+        <td v-html="highlightMatches(entry.short)"></td>
+        <td>
+          <span v-for="(backend, index) in entry.backends">
+            <a :href="`${backend.url}`" v-html="highlightMatches(backend.name)"></a>
+            <span v-if="index < entry.backends.length - 1">,<br></span>
+          </span>
+        </td>
+        <td>
+            <span v-for="(os, index) in entry.os">
+              {{ os }}
+              <span v-if="index < entry.os.length - 1">, </span>
+            </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+import { data } from "/registry.data.ts";
+
+export default {
+  data() {
+    return {
+      filter: '',
+      data: data,
+    };
+  },
+  computed: {
+    filteredData() {
+      return this.data.filter(entry => {
+        const searchTerm = this.filter.toLowerCase();
+        const short = entry.short.toString().toLowerCase();
+
+        return short.includes(searchTerm) ||
+          entry.backends.some(b => b.name.toLowerCase().includes(searchTerm));
+      });
+    },
+  },
+  methods: {
+    highlightMatches(text) {
+      const matchExists = text.toLowerCase().includes(this.filter.toLowerCase());
+      if (!matchExists) return text;
+
+      const re = new RegExp(this.filter, 'ig');
+      return text.replace(re, matchedText => `<strong>${matchedText}</strong>`);
+    }
+  },
+};
+</script>
+
+<style scoped>
+.filter {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+.filtered-table {
+  display: table;
+  width: 100%;
+}
+</style>

docs/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@types/markdown-it": "^14.1.2",
+    "js-toml": "^1.0.1",
     "markdown-it": "^14.1.0",
-    "toml": "^3.0.0",
     "vitepress-plugin-group-icons": "^1.3.1",
     "vitepress-plugin-tabs": "^0.5.0"
   }

docs/registry.data.ts

@@ -0,0 +1,64 @@
+import * as fs from "node:fs";
+import {load} from "js-toml";
+
+type Registry = {
+  [key: string]: {
+    short: string,
+    aliases?: string[],
+    backends?: [{ name: string, url: string }?],
+    os?: string[]
+  }
+};
+
+type Backend = string | {full: string, platforms: string[]};
+
+export default {
+  watch: ["./registry.toml"],
+  load() {
+    const raw = fs.readFileSync("./registry.toml", "utf-8");
+    const doc: any = load(raw);
+    const registry: Registry = {};
+
+    const tools = doc["tools"];
+    for (const key in tools) {
+      const tool = tools[key];
+      const backends = tool.backends|| [];
+      // skip core backends
+      if (backends.find((b: Backend) => {
+        if (typeof b === "string") {
+          return b.startsWith("core:");
+        } else {
+          return b.full.startsWith("core:");
+        }
+      })) {
+        continue;
+      }
+
+      registry[key] = {
+        short: key,
+        aliases: tool.aliases || [],
+        backends: backends.map((backend: Backend) => {
+          let urlMap: { [key: string]: string } = {
+            "cargo": "https://crates.io/crates/",
+            "go": "https://pkg.go.dev/",
+            "pipx": "https://pypi.org/project/",
+            "npm": "https://www.npmjs.com/package/",
+          }
+          let name = typeof backend === "string" ? backend : backend.full;
+          let parts = name.toString().split(":");
+          let prefix = parts[0];
+          let slug = parts[1];
+          let url = urlMap[prefix] || "https://github.com/";
+          return {
+            // replace selector square brackets
+            name: name.replace(/(.*?)\[.*\]/g, "$1"),
+            url: `${url}${slug}`
+          };
+        }),
+        os: tool.os || [],
+      };
+    }
+
+    return Object.values(registry).sort((a, b) => a.short.localeCompare(b.short));
+  },
+};

docs/registry.toml

@@ -0,0 +1 @@
+../registry.toml

docs/settings.data.ts

@@ -1,5 +1,5 @@
 import * as fs from "node:fs";
-import * as toml from "toml";
+import {load} from "js-toml";
 import markdownit from "markdown-it";
 
 const md = markdownit();
@@ -9,7 +9,7 @@ export default {
   load() {
     const settings = {};
     const raw = fs.readFileSync("./settings.toml", "utf-8");
-    const doc = toml.parse(raw);
+    const doc = load(raw);
 
     function getParseEnv(parseEnv) {
       if (parseEnv === "list_by_comma") {

tasks.md

@@ -172,12 +172,6 @@ User to run as
 
 - **Usage**: `render:mangen`
 
-## `render:registry`
-
-- Depends: build
-
-- **Usage**: `render:registry`
-
 ## `render:settings`
 
 - Depends: docs:setup

tasks.toml

@@ -50,10 +50,6 @@ mise completion zsh > completions/_mise
 mise completion fish > completions/mise.fish
 '''
 
-["render:registry"]
-depends = ["build"]
-run = "./scripts/render-registry.js"
-
 ["render:settings"]
 run = "tsx xtasks/render/settings.ts"
 depends = ['docs:setup']