Docusaurus v2のページにAlgolia DocSearchを導入する

# サマリ
[Docusaurus v2](https://v2.docusaurus.io/)で、OSSのAPI Referenceサイトを作っていますが、公開しているAPIの数が多くて見ている方もしんどいので、検索できるようにしたい。
Docusaurusには[Algoliaが提供しているDocSearch](https://docsearch.algolia.com/)を使用できる機能が備わっているので、そちらを活用してみました。
結論から言って、非常に良いですよ。こんな感じ↓
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/Docsaurus?src=hash&amp;ref_src=twsrc%5Etfw">#Docsaurus</a> v2でこしらえた <a href="https://twitter.com/hashtag/p5toio?src=hash&amp;ref_src=twsrc%5Etfw">#p5toio</a> のAPI Referenceサイトに検索サービスの <a href="https://twitter.com/hashtag/Algolia?src=hash&amp;ref_src=twsrc%5Etfw">#Algolia</a> <a href="https://twitter.com/hashtag/DocSearch?src=hash&amp;ref_src=twsrc%5Etfw">#DocSearch</a> を導入してみた。簡単にできてよい。<a href="https://t.co/isBjF2feJ8">https://t.co/isBjF2feJ8</a> <a href="https://t.co/zXolXE0GiD">pic.twitter.com/zXolXE0GiD</a></p>&mdash; Tetsunori NAKAYAMA | 中山 哲法 (@tetunori_lego) <a href="https://twitter.com/tetunori_lego/status/1265299640259244033?ref_src=twsrc%5Etfw">May 26, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なお、[p5.toio: API Reference Site](https://tetunori.github.io/p5.toio/)で体験できます～。

# 前提
Docusaurus v2は既に導入済みとします。
<rootDir>/website 以下にDocusaurusが存在すると仮定し、公開対象のサイトURLは'https://tetunori.github.io/p5.toio/' であるとして話を進めます。

# Algolia DocSearchへの申請
[Algolia DocSearch](https://docsearch.algolia.com/apply/)にアクセスして、解析してもらうサイトのURLと自分のメールアドレスを入力します。で、`JOIN THE PROGRAM`のボタンを押すだけです。簡単。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/fba98ec9-b912-0988-a835-1e091fa2ce47.png)

# ひたすら待つ
どうやら、DocSearchでは24時間毎にクロールしてくれるらしいく、その解析が終わったらメールアドレスへjsのsnippet送るからね、とダイアログが出てきます。

# 来たメールに返答する
私の場合は、30時間後くらいに、`DocSearch Support`さんから第一報のメールがとどきました。ただ、snippetは書いてなくて、下記の様な文面で**質問**が書かれていました。

```
Hi there,

This is great news to know that you want to integrate DocSearch in your website. A good search experience is key to help your users discover your content.

We would love to help your project but we'll need to inject a small JavaScript snippet in the page: are you able to do that? Are you a maintainer of the website?

Let us know!
```

え、botじゃないの？人力なの？と感じながらも、恐る恐る、下記の様にメールで返答してみます。

```
Yes I'm able to do that because I'm a maintainer of the website.
```

すると、5時間後くらいに、下記の返答が来て、めでたくsnippetを手に入れました。

```javascript
apiKey: '40d278d81283********a0c4e788be6d',
indexName: 'p5_toio',
```

# Docusaurus上でsnippetを登録する
`website/docusaurus.config.js`の`themeConfig`に、下記の様に`algolia`プロパティを追加します。これだけです。

```javascript
module.exports = {
  // ...
  themeConfig: {
    // ...
    algolia: {
      apiKey: '40d278d81283********a0c4e788be6d',
      indexName: 'p5_toio',
    },
  },
};
```
では、取り込まれているか、確認しましょう。

```bash
yarn run start
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/95f681a1-571e-cd72-146b-0569de2cbb30.png)
めちゃ簡単で、最高。

# 不具合
このサーチバー上で、適当な文字でEnterすると、クエリが発行されるのですが、そのページがもれなく`Page Not Found`になります。Docusaurus本家のページでは、うまい事そこもDocSearchの結果を出してくれるのですが、まだ一般向けには未対応なのかな？？？今後に期待。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542654/fb655959-06c2-70b0-8d48-78ce915e4bc9.png)
20200528追記：どうやらバグっぽくて、手元では修正も出来たので、ひとまずIssueとして起票してみました → https://github.com/facebook/docusaurus/issues/2827

Docusaurus v2はまだまだAlpha版なので不具合は多いですが、かゆいところに手が届くフレームワークなので大変良いです。皆様もぜひ。