feat: add OpenSearch support

nuxt.config.ts

@@ -22,6 +22,14 @@ export default defineNuxtConfig({
   app: {
     head: {
       htmlAttrs: { lang: 'en' },
+      link: [
+        {
+          rel: 'search',
+          type: 'application/opensearchdescription+xml',
+          title: 'npm',
+          href: '/opensearch.xml',
+        },
+      ],
     },
   },
 
@@ -39,6 +47,7 @@ export default defineNuxtConfig({
 
   routeRules: {
     '/': { prerender: true },
+    '/opensearch.xml': { isr: true },
     '/**': { isr: 60 },
     '/package/**': { isr: 60 },
     '/search': { isr: false, cache: false },

server/api/opensearch/suggestions.get.ts

@@ -0,0 +1,27 @@
+import type { NpmSearchResponse } from '#shared/types'
+import { NPM_REGISTRY } from '#shared/utils/constants'
+
+export default defineCachedEventHandler(
+  async event => {
+    const query = getQuery(event)
+    const q = String(query.q || '').trim()
+
+    if (!q) {
+      return [q, []]
+    }
+
+    const params = new URLSearchParams({ text: q, size: '10' })
+    const response = await $fetch<NpmSearchResponse>(`${NPM_REGISTRY}/-/v1/search?${params}`)
+
+    const suggestions = response.objects.map(obj => obj.package.name)
+    return [q, suggestions]
+  },
+  {
+    maxAge: 60,
+    swr: true,
+    getKey: event => {
+      const query = getQuery(event)
+      return `opensearch-suggestions:${query.q || ''}`
+    },
+  },
+)

server/routes/opensearch.xml.get.ts

@@ -0,0 +1,16 @@
+export default defineEventHandler(async event => {
+  const url = getRequestURL(event)
+  const origin = url.origin
+  return `
+<?xml version="1.0" encoding="UTF-8"?>
+<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
+  <ShortName>npm</ShortName>
+  <Description>Search npm packages on npmx.dev</Description>
+  <InputEncoding>UTF-8</InputEncoding>
+  <Image width="16" height="16" type="image/svg+xml">${origin}/favicon.svg</Image>
+  <Url type="text/html" template="${origin}/search?q={searchTerms}"/>
+  <Url type="application/x-suggestions+json" template="${origin}/api/opensearch/suggestions?q={searchTerms}"/>
+  <Url type="application/opensearchdescription+xml" rel="self" template="${origin}/opensearch.xml"/>
+</OpenSearchDescription>
+  `.trim()
+})