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',
+        },
+      ],
     },
   },
 

public/opensearch.xml

@@ -0,0 +1,10 @@
+<?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">https://npmx.dev/favicon.svg</Image>
+  <Url type="text/html" template="https://npmx.dev/search?q={searchTerms}"/>
+  <Url type="application/x-suggestions+json" template="https://npmx.dev/api/opensearch/suggestions?q={searchTerms}"/>
+  <Url type="application/opensearchdescription+xml" rel="self" template="https://npmx.dev/opensearch.xml"/>
+</OpenSearchDescription>

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 || ''}`
+    },
+  },
+)