Что такое словарь без поисковой системы или, ммм, функции поиска!?

Во время реализации базового словаря я создал эти статические формы поиска (одну на главной странице, а другую на панели навигации, используемой в макете слов) в рамках подготовки к этой конкретной функции.

Мне просто нужно было сразу взяться за дело и заставить его работать, легкая работа — если бы только это было правдой.

Что-то из прошлого

Важно еще раз подчеркнуть, что моим первоначальным планом было создание jargons.dev с помощью Nextra, поскольку в первоначальном коммите я признал, что:

...Nextra (на самом деле это был мой рыцарь в блестящих доспехах, которого я хотел построить с помощью Nextra).

Я фанат React ⚛️, большой поклонник Next.js; Nextra — это веб-фреймворк, ориентированный на контент, построенный на Next.js. Так что, я думаю, вы можете понять, почему Nextra звучала как тот рыцарь. Во время моего первоначального изучения Nextra мне понравилась одна особенность; полнотекстовый поиск — я пустил слюни? (должен признаться).

Эта функция была реализована на базе flexsearch — библиотеки полнотекстового поиска с нулевой глубиной; ох боже, я большой поклонник легковесных приложений без/низких зависимостей. Я углубился в то, как Nextra использует это для индексации контента во время сборки для поиска; это было интересно.

Так!?

Во время первой встречи с Astro я обнаружил, что хакую flexsearch; следуя инструкциям астродока по созданию блога, я пошел еще дальше и очень легко реализовал функцию поиска.

Итак, опыт этой реализации; Я перешел к поисковой системе jargons.dev.

Поисковая система

Задача была довольно простой, мне нужно было..

• Получить доступ или вызвать ссылку на все файлы внутри каталога словаря слов — на данный момент это был каталог src/pages/word
• Проиндексировать содержимое этих файлов с помощью flexsearch
• Подключите форму поиска и бум ?

Выглядит очень просто! Возможно, для поисковой индексации и фактического поиска так и было; но для того, чтобы этого добиться, нужно было кое-что сделать.

Интеграция первого «Острова» в jargons.dev

Astro по умолчанию использует подход «сначала сервер», то есть он создает HTML/CSS вашего сайта на сервере, автоматически удаляя весь клиентский javascript (JS) (если вы не укажете иное). Удаление всего JS обеспечивает повышение производительности, но отсутствие JS означает отсутствие интерактивности; Но если вам нужна интерактивность, Astro Island — один из вариантов. Мне нужна интерактивность для поисковой системы, так что это Island!

Хотя что такое «Остров»!?

Я просто скажу, что Island — это изолированный интерактивный компонент на веб-странице, HTML/CSS которого отображается на стороне сервера и/но его клиентский JavaScript (гидратированный) также связан с ним — НЕ удалено.

Я выступил с докладом об Island на TILConf'24. Посмотрите его, чтобы узнать больше.

предложение Astro

Astro предложила поддержку по интеграции Islands из коробки с моей любимой библиотекой пользовательского интерфейса (да, как вы уже догадались, React) из многих других. Это позволило мне превратить статические формы поиска в функциональный материал.

Что я сделал

• Я начал с добавления модуля интеграции (@astrojs/react) для острова, который мне нужно было интегрировать; сделать это довольно легко с помощью команды реакции npx astro add
• Я перенес все статические формы поиска в один компонент React (это две формы разного размера); настроил компонент для рендеринга их необходимого размера на основе заданных реквизитов.
• Я также реализовал некоторые подкомпоненты, которые используются только локально в том же компоненте поиска, это...
  • The SearchDialog — основной компонент, в котором выполняется операция поиска
  • Компонент SearchResult и т. д.
• Я реализовал несколько пользовательских сочетаний клавиш и сочетаний клавиш, которые позволяют взаимодействовать с компонентом поиска (с этого момента я хочу называть это «Остров поиска»), это...
  • CTRL K или ⌘K, чтобы начать поиск
  • ESC, чтобы закрыть поиск
  • ... и базовые необходимые кнопки навигации для навигации по результатам поиска
• Я также добавил несколько специальных крючков, чтобы облегчить работу с островом поиска, это...
  • useLockBody — хук, отключающий прокрутку после открытия диалога поиска
  • useRouter — хук, который я сделал как обертку вокруг некоторых методов window.location, заставляя их чувствовать себя как известные библиотеки маршрутизаторов в React. Это хук, который я особенно использовал в обработчике нажатия кнопки ВВОД в привязке клавиш кнопки навигации в компоненте результатов поиска. на острове поиска.
  • и useIsMacOS — который проверяет, является ли компьютер MacOS, чтобы определить соответствующий текст описания для отображения в триггере формы поиска; то есть CTRL K или ⌘K
• Я добавил императивный модуль — flexsearch;
• Я очень легко получил доступ к файлам и каталогу слов с помощью функции Astro.glob() (жаль, что я не мог рассказать о том, насколько мощна эта функция; как я рад, что она существует в Astro в готовом виде и насколько легко это облегчило процесс запуска и запуска этой поисковой системы) и подключило возвращенный массив текстовых объектов к состоянию $dictionary (может быть, мне следует назвать это магазином), работающему от nanostore (еще одна замечательная штука прямо здесь)
• Затем этот $словарь индексируется с помощью flexsearch, подготавливая его для последующего поиска.

Еще одна важная функция: недавние поиски.

Это еще одна важная особенность, о которой я должен поговорить; Эта функция отслеживает искомые элементы и сохраняет их в локальном хранилище, чтобы сохранить их при перезагрузке страницы; эти элементы, найденные в магазине, затем отображаются в списке на главной странице словаря.

Также потребовалась интеграция в качестве острова в сочетании с сохранением стоимости в состоянии $recentSearches на базе наномагазина.

Моя реализация этой функции не совсем идеальна, и вот список некоторых проблем, которые необходимо было исправить (на момент написания), чтобы продвинуться еще на шаг дальше по этому пути (хотя мы никогда не сможем достичь совершенства, ДА). Конечно)

• Добавить компонент загрузки на остров последних поисков — https://github.com/devjargons/jargons.dev/issues/31
• Ошибка: операция поиска, выполняемая с помощью формы поиска на панели навигации, перезаписывает LocalStorage - https://github.com/devjargons/jargons.dev/issues/10
• Улучшение: редактор Word — функции второй итерации — https://github.com/devjargons/jargons.dev/issues/9

ПР

Это длинное чтение, я бы хотел, чтобы оно было коротким... Вот PR

подвиг: внедрить поисковую систему по словарю #5

болтун опубликовано 25 марта 2024 г.

Этот запрос на включение реализует функцию поиска в проекте словаря. Он использует интеграцию @astro/react для управления островами в сочетании с nanostore для управления состоянием и flexsearch в качестве библиотеки текстового поиска.

Внесены изменения

• Добавлена ​​следующая интеграция с Astrojs и библиотека, необходимая для текстового поиска.
  • @astrojs/реагировать
  • @nanostores/реагировать
  • гибкий поиск
• Реализован остров поиска (компонент реагирования), внутри которого реализованы другие подкомпоненты для внутреннего использования.
  • Реализован компонент SearchTrigger, который отображает поле поиска двух разных размеров и используется в двух разных местах веб-страницы...
    • size md — используется на главной странице веб-приложения
    • размер см — используется в разделе навигации по расположению слов в словаре
  • Реализован компонент SearchDialog, который отображается только при нажатии SearchTrigger
  • Реализован компонент SearchInfo, который отображается как заполнитель по умолчанию, если в поле формы не введен поисковый запрос.
  • Реализован компонент SearchResult, отображающий либо результаты поиска, либо сообщение о том, что результаты поиска не найдены
  • Реализованы привязки клавиш на острове поиска, позволяющие выполнять следующие операции с помощью указанных сочетаний клавиш.
    • CTRL K или ⌘K, чтобы открыть диалоговое окно поиска, не нажимая на значок поиска
    • Стрелки вверх, стрелки вниз и Enter, чтобы разрешить навигацию по списку результатов поиска
    • ESC, чтобы разрешить закрытие диалога поиска
  • Добавлены специальные крючки для использования на острове поиска.
    • useIsMacOS — проверяет, просматривает ли текущий пользователь веб-приложение на компьютере MacOS; это используется для определения подходящего короткого слова для отображения в триггере поиска; то есть CTRL K или ⌘K
    • useLockBody — используется для отключения прокрутки текущего окна просмотра при открытии диалогового окна поиска
    • useRouter — (вместо добавления реагирующего маршрутизатора в deps) этот крючок оборачивается вокруг window.location и использует объект назначения в качестве push; в основном используется в компоненте SearchResult для маршрутизации на выбранную/нажатую страницу результатов
  • Реализована индексация поиска на острове поиска с использованием метода Document flexsearch в качестве предпочтительного варианта.
    • Добавлено новое хранилище поиска для управления состояниями, связанными с поиском, с помощью наносторов и интеграции @nanostores/react
    • Добавлены следующие значения и действия магазина
      • $isSearchOpen — глобальное состояние для управления состоянием SearchDialog.
      • $recentSearches — состояние для отслеживания недавно искомых слов; он работает совместно с localStorage, чтобы сохранить свое значение даже после перезагрузки вкладки
      • $addToRecentSearchesFn — действие магазина, которое добавляет новый элемент в значение магазина $recentSearches
• Добавлено хранилище $dictionary для управления всеми словарными статьями; сохраняя его доступным для клиента и используя в качестве значения для searchIndex на острове поиска.
  • Вычисленное значение для хранилища словарей как можно раньше из макета/базы с помощью метода Astro.glob(), индексирующего весь каталог словарей
• Добавлен остров RecentSearches, который считывает значение из хранилища $recentSearches и отображает его на главной странице

Скринкаст

Полная демо-версия

screencast-bpconcjcammlapcogcnnelfmaeghhagj-2024.03.25-13_32_30.webm

?

Просмотреть на GitHub