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

coji 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. A web developer based on Tokyo, Japan.

Remix Docs Japanese 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 A website I maintained to help my Japanese co-workers learn and understand the "Remix way".

Full-text Search Functionality

Pagefind 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 Provides search functionality for websites with minimal bandwidth and no infrastructure.

How Full-text search works

Indexing When building the app, also perform index building simultaneously. const { index } = await pagefind.createIndex({}) await index.addCustomRecord({ content: doc.html, meta: { title: doc.attributes.title.toString() }, language: 'ja', url: pathname }) await index.writeFiles({ outputPath: 'public/pagefind' }) const buildIndex = async () => { 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 buildIndex()

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

Search Form clientLoader clientLoader: Execute searches solely on the browser side. It also works in SPA mode. Search const pagefind = (await import( '/pagefind/pagefind.js?url' )) as unknown as Pagefind await pagefind.init() const ret = await pagefind.search(url.searchParams.get('q')) return { results } export const clientLoader = async ({ request }: ClientLoaderFunctionArgs) => { const url = new URL(request.url) const results = await Promise.all(ret.results.map((result) => result.data())) }

Conclusion 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! By combining Remix and Pagefind, you can build a website with full-text search functionality that is incredibly simple and low-cost.

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 にお誘いしたい。 会場提供もしてもらえるといいな！

Thank You (本当)