2022-11-25

  • ex_doc と pulp がどのように Lunr.js を使っているか調査する
  • 午後一、打ち合わせ
  • ex_doc クローンに Fuse.js を組み込む

Lunr.js の API を読んで Fuse.js の方が楽に使えそうになので心が揺らいできた。 また、pulp の著者が Fuse.js を試した時点からオプションが変わっている。

当時よりも Fuse.js は変更改良されパフォーマンスの問題も改善しているかも（？）と思うので、 簡単に試せそうな Fuse.js をまず組み込んでみた。 b6bf15e

現状のポスト数ではさくさく動作するのでしばらくこれでいこうと思う。 検索結果によるスタイル崩れと検索結果の視認性は近日中に対応したい。

Lunr.js

GETTING STARTED に従うとこんな感じ。

<!DOCTYPE html>
<html>
  <head>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/lunr/lunr.js"></script>
  </head>
  <body>
    <div x-init="idx = lunr(function(){ this.ref('title'); this.field('title'); items.forEach(item => this.add(item), this) })",
         x-data="{
                   idx: null,
                   search: '',
                   items: [ {title: 'apple'}, {title: 'banana'}, {title: 'guava'}, {title: 'ape'}, {title: 'bands'} ],
                   get searchResults () { return this.idx.search(this.search) }
                 }">
      <input type="search" placeholder="Enter Keyword here" x-model="search">
      <ul>
        <template x-for="result in searchResults">
        <li x-text="result.ref"></li>
        </template>
      </ul>
    </div>
  </body>
</html>