Merge pull request #90 from idlip/feeling-lucky

implement an "Im feeling lucky" button to open random maintainer

Author: idlip

components/MaintainerList.vue

@@ -10,7 +10,7 @@ const normalizedMaintainers = computed(() =>
   maintainers.value?.map((m) => ({
     ...m,
     projects_list: m.projects.map((p) => p.name).join(", "),
-  }))
+  })),
 );
 
 const query = ref("");
@@ -51,11 +51,14 @@ onMounted(() => {
 <template>
   <div class="flex flex-col gap-8 px-8 py-10">
     <UiSearchInput
-      ref="searchInputRef"
-      class="max-w-90"
+      v-if="maintainers"
       v-model="query"
-      placeholder="Search Maintainers"
+      :maintainers="maintainers"
+      ref="searchInputRef"
+      class="max-w-100"
+      placeholder="Search"
     />
+
     <MaintainerCard
       v-for="maintainer in result"
       :key="maintainer.id"

components/ui/SearchInput.vue

@@ -1,23 +1,55 @@
 <script setup lang="ts">
-const query = defineModel<string>();
+import { useRouter } from "vue-router";
+import type { MaintainersCollectionItem } from "@nuxt/content";
 
-const inputRef = ref<HTMLInputElement | null>(null);
-defineExpose({ focus: () => inputRef.value?.focus?.() });
+const props = defineProps<{
+  modelValue: string;
+  maintainers?: MaintainersCollectionItem[];
+  placeholder?: string;
+}>();
+
+const emit = defineEmits(["update:modelValue"]);
+
+const router = useRouter();
+
+const goToRandomMaintainer = () => {
+  const list = props.maintainers || [];
+  if (list.length === 0) return;
+
+  const randomIndex = Math.floor(Math.random() * list.length);
+  const randomMaintainer = list[randomIndex];
+
+  if (randomMaintainer.path) {
+    router.push(randomMaintainer.path);
+  } else {
+    console.warn("Missing path in random maintainer", randomMaintainer);
+  }
+};
 </script>
+
 <template>
-  <div
-    class="flex items-center px-4 py-2 gap-4 border has-focus:outline-1 transition-all duration-300 ease-linear"
-  >
-    <IconsSearch class="w-4 h-4" />
-    <input
-      ref="inputRef"
-      v-model="query"
-      type="text"
-      placeholder="Search"
-      class="input w-full dark:placeholder:text-secondary-dark placeholder:text-secondary-light text-sm focus:outline-none"
-    />
-    <span class="text-xs border rounded px-2 hidden md:inline-block opacity-50">
-      ctrl+k
-    </span>
+  <div class="grid grid-cols-1 sm:grid-cols-[1fr_auto] gap-2 items-center">
+    <div class="flex items-center px-4 py-2 gap-4 border transition-all">
+      <IconsSearch class="w-4 h-4" />
+      <input
+        :value="modelValue"
+        @input="emit('update:modelValue', $event.target.value)"
+        type="text"
+        :placeholder="placeholder || 'Search'"
+        class="input w-full dark:placeholder:text-secondary-dark placeholder:text-secondary-light text-sm focus:outline-none"
+      />
+      <span
+        class="text-xs border rounded px-2 hidden md:inline-block opacity-50"
+      >
+        ctrl+k
+      </span>
+    </div>
+
+    <button
+      @click="goToRandomMaintainer"
+      class="ml-2 flex text-sm gap-2 items-center btn-subtle w-fit"
+    >
+      Surprise Me!
+    </button>
   </div>
 </template>