Skip to content

Commit 5569610

Browse files
babblebeybabblebey
authored
fix: dictionary search engine late indexing (#49)
This Pull Request fixes the issue where the dictionary search engine returns no result on initial load of the web app. This is exactly due to the reason explained in #47. This fix implements direct computation of the `dictionary` object property (derived from an `Astro.glob` operation used to retrieve all entries from our words directory `pages/browse`) inside of the homepage and the word layout, dropping usage of state to share the value. ### Changes Made - Deprecated and dropped the integration of the `$dictionary` state - Compute value for the `search` island `dictionary` prop (which used to be set to the `$dictionary.value`) directly in the server-side of the following places - `layouts/word.astro` - the word layout where the `search` island is integrated in the `Navbar` - `pages/index.astro` - the landing page where the `search` island is prominently integrated ### Related Issue Resolves #47 ### Screencast/Screenshot [screencast-jargons-dev-git-fix-dictionary-search-index-babblebeys-projects.vercel.app-2024.04.19-11_26_47.webm](https://github.com/babblebey/jargons.dev/assets/25631971/9c500897-63f3-4203-b604-372ee056527b) 📖
1 parent af4c1e0 commit 5569610

5 files changed

Lines changed: 11 additions & 15 deletions

File tree

‎src/components/islands/search.jsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import Flexsearch from "flexsearch";
22
import { useEffect, useState } from "react";
33
import { useStore } from "@nanostores/react";
4-
import { $isSearchOpen } from "../../lib/stores/search.js";
54
import useRouter from "../../lib/hooks/use-router.js";
65
import useIsMacOS from "../../lib/hooks/use-is-mac-os.js";
76
import useLockBody from "../../lib/hooks/use-lock-body.js";
8-
import { $addToRecentSearchesFn } from "../../lib/stores/search.js";
7+
import { $isSearchOpen, $addToRecentSearchesFn } from "../../lib/stores/search.js";
98

109
// Create Search Index
1110
const searchIndex = new Flexsearch.Document({
@@ -25,10 +24,6 @@ export default function Search({ triggerSize, dictionary }) {
2524
const isSearchOpen = useStore($isSearchOpen);
2625

2726
let idx = 0;
28-
/**
29-
* indexing dictionary in search engine
30-
* @todo indexing happens on island load; try earlier if possible hahahaha, maybe in `index.astro` i.e. on page load
31-
*/
3227
for (const word of dictionary) {
3328
searchIndex.add({
3429
id: idx,

‎src/layouts/base.astro‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,8 @@
22
import "@fontsource/inter";
33
import "@fontsource/ibm-plex-mono";
44
import "../base.css";
5-
import { $dictionary } from "../lib/stores/dictionary.js";
65
76
const { pageTitle, class:list } = Astro.props;
8-
const dictionary = await Astro.glob("../pages/browse/*.mdx");
9-
10-
$dictionary.set(dictionary);
117
---
128

139
<html lang="en">

‎src/layouts/word.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22
import BaseLayout from "./base.astro";
33
import Navbar from "../components/navbar.astro";
44
import Search from "../components/islands/search.jsx";
5-
import { $dictionary } from "../lib/stores/dictionary.js";
65
76
const { frontmatter } = Astro.props;
7+
const dictionary = await Astro.glob("../pages/browse/*.mdx");
88
const editUrl = `/editor/edit/${frontmatter.url.split("/")[2]}`;
99
---
1010

1111
<BaseLayout pageTitle={ frontmatter.title }>
1212
<Navbar>
13-
<Search triggerSize="sm" dictionary={$dictionary.value} client:load />
13+
<Search triggerSize="sm" dictionary={dictionary} client:load />
1414
</Navbar>
1515

1616
<main class="max-w-screen-lg p-5 md:mt-10 mx-auto min-h-screen space-y-6">

‎src/lib/stores/dictionary.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import { atom, map } from "nanostores";
22

3-
export const $dictionary = atom([]);
3+
/**
4+
* [Deprecated] - Stopped using state to share dictionary with islands
5+
*
6+
* export const $dictionary = atom([]);
7+
*/
48

59
/**
610
* @typedef {Object} Word

‎src/pages/index.astro‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
import BaseLayout from "../layouts/base.astro";
33
import Search from "../components/islands/search.jsx";
44
import RecentSearches from "../components/islands/recent-searches.jsx";
5-
import { $dictionary } from "../lib/stores/dictionary.js";
5+
6+
const dictionary = await Astro.glob("../pages/browse/*.mdx");
67
---
78

89
<BaseLayout pageTitle="Dictionary">
@@ -18,7 +19,7 @@ import { $dictionary } from "../lib/stores/dictionary.js";
1819
</div>
1920

2021
<!-- Search -->
21-
<Search triggerSize="md" dictionary={$dictionary.value} client:load />
22+
<Search triggerSize="md" dictionary={dictionary} client:load />
2223

2324
<!-- Recent Word Look Up -->
2425
<RecentSearches client:load />

0 commit comments

Comments
 (0)