Add opensearch XML for automatic search engine

Also fixup some TS lint errors in the new component, language server
wasn't working before.

Author: ian-h-chamberlain

.vuepress/components/URLDocSearch.vue

@@ -3,13 +3,13 @@
 </template>
 
 <script setup lang="ts">
-import { DocSearch } from '@vuepress/plugin-docsearch/client';
+import { DocSearch, DocSearchOptions } from '@vuepress/plugin-docsearch/client';
 import { useDebounceFn, useEventListener } from '@vueuse/core';
-import { onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, Ref, ref } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 
 const SEARCH_KEY = 'search';
-const docsearchOptions = ref({});
+const docsearchOptions: Ref<DocSearchOptions> = ref({});
 const router = useRouter();
 const route = useRoute();
 
@@ -18,20 +18,20 @@ onMounted(() => {
   const query = new URL(window.location.href).searchParams.get(SEARCH_KEY);
   if (query) {
     docsearchOptions.value.initialQuery = query;
-    document.querySelector('.DocSearch-Button').click();
+    (document.querySelector('.DocSearch-Button') as HTMLButtonElement).click();
   }
 });
 
 // There's some debounce builtin to docsearch, this mimics that and should
 // help prevent browser history from getting filled with partial queries.
 const inputHandler = useDebounceFn(handleSearchInput, 500);
-useEventListener('input', inputHandler);
+useEventListener('input', (event) => inputHandler(event as InputEvent));
 
 // Update the URL bar when the search input changes.
-function handleSearchInput(event) {
-  const searchQuery = event.target.value;
-
-  if (event.target.id !== 'docsearch-input' || !searchQuery) {
+function handleSearchInput(event: InputEvent) {
+  const target = event.target as HTMLInputElement | undefined;
+  const searchQuery = target?.value;
+  if (target?.id !== 'docsearch-input' || !searchQuery) {
     return;
   }
 

.vuepress/config.js

@@ -110,6 +110,15 @@ export default defineUserConfig({
       { name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
     ],
     ['link', { rel: 'icon', href: '/icon.png' }],
+    [
+      'link',
+      {
+        rel: 'search',
+        type: 'application/opensearchdescription+xml',
+        title: 'Nushell Docs', // NOTE: must match ShortName
+        href: '/opensearch.xml',
+      },
+    ],
   ],
   markdown: {
     importCode: {

.vuepress/public/opensearch.xml

@@ -0,0 +1,12 @@
+<OpenSearchDescription
+  xmlns="http://a9.com/-/spec/opensearch/1.1/"
+  xmlns:moz="http://www.mozilla.org/2006/browser/search/"
+>
+  <ShortName>Nushell Docs</ShortName>
+  <Description>Search Nushell documentation</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Image width="16" height="16" type="image/png">https://www.nushell.sh/icon.png</Image>
+  <Url type="text/html" template="https://www.nushell.sh/?search={searchTerms}" />
+  <Url type="application/opensearchdescription+xml" rel="self" template="https://www.nushell.sh/opensearch.xml" />
+  <!-- TODO: it might be possible to provide suggestions via some Algolia API? -->
+</OpenSearchDescription>