Remix + Pagefind で全文検索

Remix + Pagefind Remix Docs Japanese with free full-text search functionality. Remix "ワインと鍋" Meetup Press Space for next page

• https://remix-docs-ja.techtalk.jp/

coji A web developer based on Tokyo, Japan. Love the things that are very useful and simple to use, made by a small group of people Remix Conform DuckDB Turso Also love tech talks. I decided to name my own company TechTalk inc.

• https://techtalk.jp/

Remix Docs Japanese A website I maintained to help my Japanese co-workers learn and understand the "Remix way". https://github.com/coji/remix-docs-ja Tech Stacks Remix v2.9.2 (single fetch) Fly.io + Cloudflare Cache Markdown based Translated using Gemini 1.5 Flash

• https://github.com/coji/remix-docs-ja

Full-text Search Functionality

Pagefind Provides search functionality for websites with minimal bandwidth and no infrastructure. https://pagefind.app Open source library written in Rust Multilingual and Japanese support out of the box Provides a NodeJS indexing API and browser-based search API, along with a CLI and default UI

• https://pagefind.app/

How Full-text search works

Indexing
When building the app, also perform index building simultaneously.
const buildIndex = async () => {
const { index } = await pagefind.createIndex({})
const docs = await glob('docs/**/*.md')
for (const filename of docs) {
const { dir, name } = path.parse(filename)
const pathname = path.join('/', path.basename(dir), name)
const doc = await getDoc(pathname)
await index.addCustomRecord({
content: doc.html,
meta: { title: doc.attributes.title.toString() },
language: 'ja',
url: pathname
})
}
await index.writeFiles({ outputPath: 'public/pagefind' })
}
await buildIndex()

Indexing (cont.) pagefind.js must be removed from the bundle by specifying external in rollupOptions. vite.config.ts export default defineConfig({ plugins: [ remix({ future: { v3_fetcherPersist: true, v3_relativeSplatPath: true, v3_throwAbortReason: true, unstable_singleFetch: true, }, }), tsconfigPaths(), ], build: { rollupOptions: { external: ['/pagefind/pagefind.js?url'] } }, })

Search
clientLoader: Execute searches solely on the browser side. It also works in SPA mode.
Form
<fetcher.Form action="/resources/search">
<Input id="query" name="q" placeholder="Search..." />
<Button size="sm">Search</Button>
</fetcher.Form>

clientLoader
export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => {
const url = new URL(request.url)
const pagefind = (await import(
'/pagefind/pagefind.js?url'
)) as unknown as Pagefind
await pagefind.init()
const ret = await pagefind.search(url.searchParams.get('q'))
const results = await Promise.all(ret.results.map((result) => result.data()))
return { results }
}

Conclusion By combining Remix and Pagefind, you can build a website with full-text search functionality that is incredibly simple and low-cost. Pagefind is a free, open-source search library that supports Japanese out of the box No server-side infrastructure is required, and search processing can be completed entirely in the browser, significantly reducing operational costs By leveraging Remix’s clientLoader, you can seamlessly implement client-side search It’s an ideal solution for adding full-text search to Markdown-based documentation I recommend to try building a user-friendly and powerful search-enabled website using Remix and Pagefind!

Thank You

One more thing

One more thing Remix ２年前から使ってるけど、当時はそんな案件(クライアント)はまったくなかった。 どっかで Remix の仕事あったらいいのにな〜と思っていた。そういう人は今もいるはず。 プロダクション利用も徐々に増えてきたけど、まだ少数。 そういう企業で Remix に慣れてるエンジニアのニーズはあるようだ。 近い将来、既存 react-router アプリの v7 へのマイグレーションニーズが出てきそう。 Remix エンジニア採用したい人と、Remix 仕事したい人のマッチングをできるといいな。 そうだ: Remixドキュメント日本語版に Remix を使う仕事の募集情報載ってるといいかも？ Web 2.0 の頃にあった Job Board 的な。日本国内限定だけど。 採用情報へのリンク、載せたい方いらっしゃいますか？ 大変になってきたら無料では無理かもだけど、そこまで盛り上がる気はちょっとしないかな。 。？ 興味ある方いらっしゃる前提で: あとで相談させてください。 XのDMなど ついでに Remix を企業・プロダクションで使ってる方を Meetup にお誘いしたい。 会場提供もしてもらえるといいな！

• https://x.com/techtalkjp

Thank You (本当)