docs: make docs searchable

demos/preview/index.vue

@@ -1,32 +1,90 @@
-<script>
+<script setup>
+import { ref } from 'vue'
+
 // @ts-nocheck
+const showDemoList = process.env.NODE_ENV === 'development'
+
+const searchValue = ref('')
+
 </script>
 
 <template>
-  <ul v-if="$route.path === '/'">
-    <li
-      class="p-5 border-b-2 border-black"
-      v-for="route in $router.options.routes"
-      :key="route.path"
+  <template v-if="$route.path === '/'">
+    <input
+      class="w-full p-3 my-3 focus:outline-none border-b"
+      type="search"
+      placeholder="Search for a demo..."
+      autofocus
+      v-model="searchValue"
     >
-      <router-link
-        class="block mb-2 font-medium"
-        :to="route.path"
+    <ul v-if="showDemoList || listing">
+      <li
+        class="p-5 border-b-2 border-black"
+        v-for="route in $router.options.routes.filter(route => searchValue === ''? true : route.props.name.toLowerCase().includes(searchValue.toLowerCase()))"
+        :key="route.path"
       >
-        {{ route.props.name }}
-      </router-link>
-
-      <div class="flex">
-        <a
-          class="mr-4 text-sm text-gray-300 font-medium"
-          v-for="(tab, index) in route.props.tabs"
-          :key="index"
-          :href="`/src/${route.props.name}/${tab.name}/`"
+        <router-link
+          class="block mb-2 font-medium"
+          :to="route.path"
         >
-          {{ tab.name }}
-        </a>
-      </div>
-    </li>
-  </ul>
+          {{ route.props.name }}
+        </router-link>
+
+        <div class="flex">
+          <a
+            class="mr-4 text-sm text-gray-300 font-medium"
+            v-for="(tab, index) in route.props.tabs"
+            :key="index"
+            :href="`/src/${route.props.name}/${tab.name}/`"
+          >
+            {{ tab.name }}
+          </a>
+        </div>
+      </li>
+    </ul>
+    <div v-else>Nothing to see here :-)</div>
+  </template>
   <router-view v-else />
 </template>
+
+<script>
+export default {
+  methods: {
+    fromString(value) {
+      if (value === null) {
+        return true
+      }
+
+      if (value.match(/^\d*(\.\d+)?$/)) {
+        return Number(value)
+      }
+
+      if (value === 'true') {
+        return true
+      }
+
+      if (value === 'false') {
+        return false
+      }
+
+      if (value === 'null') {
+        return null
+      }
+
+      return value
+    },
+  },
+
+  computed: {
+    query() {
+      return Object.fromEntries(Object
+        .entries(this.$route.query)
+        .map(([key, value]) => [key, this.fromString(value)]))
+    },
+
+    listing() {
+      return this.query.listing || false
+    },
+  },
+}
+</script>