feat: add opensearch support (#980)

Co-authored-by: Sébastien Chopin <seb@nuxtlabs.com>

app.config.ts

@@ -4,6 +4,8 @@ export default defineAppConfig({
 
     description: 'The best place to start your documentation.',
 
+    url: 'https://docus.dev',
+
     image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
 
     socials: {},
@@ -41,6 +43,6 @@ export default defineAppConfig({
       repo: undefined,
       owner: undefined,
       edit: false
-    }
+    },
   }
 })

components/app/AppSearch.vue

@@ -164,6 +164,14 @@ function closeButtonHandler() {
   }
 }
 
+onMounted (() => {
+  const route = useRoute()
+  if (route.query.q) {
+    show.value = true
+    q.value = route.query.q
+  }
+})
+
 // Scroll to selected item on change
 watch(selected, value => {
   const nextId = results?.value?.[value]?.item?.id

layouts/page.vue

@@ -1,5 +1,12 @@
 <script setup lang="ts">
 const { config } = useDocus()
+useHead({
+  link: {
+    rel: 'search',
+    type: 'application/opensearchdescription+xml',
+    href: 'opensearch.xml'
+  }
+})
 </script>
 
 <template>
@@ -17,10 +24,10 @@ const { config } = useDocus()
 
 <style lang="ts" scoped>
 css({
-  '.page-layout': {
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'relative'
-  }
+'.page-layout': {
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative'
+}
 })
 </style>

nuxt.config.ts

@@ -99,7 +99,8 @@ export default defineNuxtConfig({
   },
   nitro: {
     prerender: {
-      ignore: ['/__pinceau_tokens_config.json', '/__pinceau_tokens_schema.json']
+      ignore: ['/__pinceau_tokens_config.json', '/__pinceau_tokens_schema.json'],
+      routes: ['/opensearch.xml']
     }
   },
 })

server/routes/opensearch.xml.ts

@@ -0,0 +1,12 @@
+export default defineEventHandler(async () => {
+  const config = useAppConfig()
+  return '<?xml version="1.0"?>\n' +
+    '<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">\n' +
+    '  <ShortName>' + config?.docus?.title + '</ShortName>\n' +
+    '  <Description>' + config?.docus?.description + '</Description>\n' +
+    '  <Image width="16" height="16" type="image/x-icon">' + config?.docus?.url + '/favicon.ico</Image>\n' +
+    '  <Url type="text/html" template="' + config?.docus?.url + '">\n' +
+    '    <Param name="q" value="{searchTerms}"/>\n' +
+    '  </Url>\n' +
+    '</OpenSearchDescription>'
+})