lightnet 3.4.5 → 3.5.0

package/src/pages/search-page/hooks/use-search.ts

@@ -1,21 +1,47 @@
 import Fuse from "fuse.js"
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useMemo, useRef, useState } from "react"
 
 import type { SearchItem, SearchResponse } from "../../api/search-response"
+import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
-export type SearchQuery = {
-  search?: string
-  language?: string
-  type?: string
-  category?: string
+declare global {
+  interface Window {
+    lnSearchState?: {
+      fuse: Fuse<SearchItem>
+      items: SearchItem[]
+      locale?: string
+    }
+  }
+}
+
+interface Context {
+  categories: Record<string, string>
+  mediaTypes: Record<string, { name: string }>
+  languages: Record<string, { name: string }>
+  currentLocale?: string
 }
 
-export function useSearch() {
+export function useSearch({
+  currentLocale,
+  categories,
+  mediaTypes,
+  languages,
+}: Context) {
   const fuse = useRef<Fuse<SearchItem>>(undefined)
   const [allItems, setAllItems] = useState<SearchItem[]>([])
   const [isLoading, setIsLoading] = useState(true)
-  const [query, setQuery] = useState<SearchQuery>({})
+  const [query, setQuery] = useState<Partial<SearchQuery>>({})
   useEffect(() => {
+    const removeSearchQueryObserver = observeSearchQuery((newQuery) => {
+      const queryIsUpdated = (
+        ["search", "category", "language", "type"] as const
+      ).find((key) => newQuery[key] !== query[key])
+
+      if (!queryIsUpdated) {
+        return
+      }
+      setQuery(newQuery)
+    })
     const fetchData = async () => {
       try {
         const response = await fetch("/api/search.json")
@@ -25,11 +51,28 @@ export function useSearch() {
           )
         }
         const { items }: SearchResponse = await response.json()
-        fuse.current = new Fuse(items, {
+        const enrichedItems = items.map((item) => {
+          const translatedCategories =
+            item.categories &&
+            item.categories.map((categoryId) => categories[categoryId])
+          const translatedType = mediaTypes[item.type].name
+          const translatedLanguage = languages[item.language].name
+
+          return {
+            ...item,
+            translatedCategories,
+            translatedType,
+            translatedLanguage,
+          }
+        })
+        fuse.current = new Fuse(enrichedItems, {
           keys: [
             { name: "title", weight: 3 },
             "language",
             { name: "authors", weight: 2 },
+            { name: "translatedCategories", weight: 2 },
+            { name: "translatedType", weight: 2 },
+            { name: "translatedLanguage", weight: 2 },
             "description",
             "type",
             "categories",
@@ -40,58 +83,69 @@ export function useSearch() {
           ignoreLocation: true,
         })
         setAllItems(items)
+        window.lnSearchState = {
+          locale: currentLocale,
+          items,
+          fuse: fuse.current,
+        }
       } catch (error) {
         console.error(error)
       }
       setIsLoading(false)
     }
-    fetchData()
+    // try restore old search index only if
+    // locale is still the same because we add translated values to the
+    // search index
+    const { lnSearchState } = window
+    if (lnSearchState && lnSearchState.locale === currentLocale) {
+      fuse.current = lnSearchState.fuse
+      setAllItems(lnSearchState.items)
+      setIsLoading(false)
+    } else {
+      fetchData()
+    }
+    return removeSearchQueryObserver
   }, [])
 
-  const { language, type, category, search } = query
-  const fuseQuery = []
-  // order is relevant! query will stop evaluation
-  // when condition is not met.
-  if (language) {
-    fuseQuery.push({ language: `=${language}` })
-  }
-  if (type) {
-    fuseQuery.push({ type: `=${type}` })
-  }
-  if (category) {
-    fuseQuery.push({ categories: `=${category}` })
-  }
-  if (search) {
-    fuseQuery.push({
-      $or: [
-        { title: search },
-        { description: search },
-        { authors: search },
-        { id: search },
-      ],
-    })
-  }
-
-  const updateQuery = (newQuery: SearchQuery) => {
-    const queryIsUpdated = (
-      ["search", "category", "language", "type"] as const
-    ).find((key) => (newQuery[key] ? newQuery[key] !== query[key] : query[key]))
+  const results = useMemo(() => {
+    const { language, type, category, search } = query
+    const fuseQuery = []
+    // order is relevant! query will stop evaluation
+    // when condition is not met.
+    if (language) {
+      fuseQuery.push({ language: `=${language}` })
+    }
+    if (type) {
+      fuseQuery.push({ type: `=${type}` })
+    }
+    if (category) {
+      fuseQuery.push({ categories: `=${category}` })
+    }
+    if (search) {
+      fuseQuery.push({
+        $or: [
+          { title: search },
+          { translatedCategories: search },
+          { translatedType: search },
+          { translatedLanguage: search },
+          { description: search },
+          { authors: search },
+          { id: search },
+        ],
+      })
+    }
 
-    if (!queryIsUpdated) {
-      return
+    if (!fuse.current || !fuseQuery.length) {
+      return allItems
     }
-    setQuery(newQuery)
-  }
 
-  if (!fuse.current || !fuseQuery.length) {
-    return { results: allItems, updateQuery, isLoading }
-  }
+    return fuse.current
+      .search({ $and: fuseQuery })
+      .map((fuseItem) => fuseItem.item)
+  }, [query, allItems])
 
   return {
-    results: fuse.current
-      .search({ $and: fuseQuery })
-      .map((fuseItem) => fuseItem.item),
-    updateQuery,
+    results,
     isLoading,
   }
 }

package/src/pages/search-page/utils/search-filter-translations.ts

@@ -0,0 +1,20 @@
+const translationKeys = [
+  "ln.search.title",
+  "ln.language",
+  "ln.search.placeholder",
+  "ln.search.all-languages",
+  "ln.type",
+  "ln.search.all-types",
+  "ln.category",
+  "ln.search.all-categories",
+] as const
+
+export type TranslationKey = (typeof translationKeys)[number]
+
+export type Translations = Record<TranslationKey, string>
+
+export const provideTranslations = (translate: (key: string) => string) => {
+  return Object.fromEntries(
+    translationKeys.map((key) => [key, translate(key)]),
+  ) as Translations
+}

package/src/pages/search-page/utils/search-query.ts

@@ -0,0 +1,76 @@
+export type SearchQuery = {
+  search?: string
+  category?: string
+  language?: string
+  type?: string
+}
+
+// URL search parameter names
+export const SEARCH = "search"
+export const LANGUAGE = "language"
+export const TYPE = "type"
+export const CATEGORY = "category"
+
+export const UPDATE_QUERY_EVENT = "ln:update-search-query"
+
+export type SearchQueryParam =
+  | typeof SEARCH
+  | typeof LANGUAGE
+  | typeof TYPE
+  | typeof CATEGORY
+
+/**
+ * Read the current value of the given search query parameter
+ * from the url.
+ * @param paramName query parameter name
+ * @returns query parameter or undefined if it is not set
+ */
+export function getSearchQueryParam(paramName: SearchQueryParam) {
+  if (!window) {
+    return undefined
+  }
+  const searchParams = new URLSearchParams(window.location.search)
+  return searchParams.get(paramName) ?? undefined
+}
+
+/**
+ * Set the new value of the search query parameter. This will
+ * also change the search results.
+ *
+ * We need to know if a value has been set by the user. Empty string
+ * means user action has removed a query parameter.
+ * E.g. when there is a default language filter this must not override
+ * the users choice to remove the language filter.
+ *
+ * @param paramName parameter name to set
+ * @param value new value, use empty string if you want to remove the filter.
+ */
+export function setSearchQueryParam(
+  paramName: SearchQueryParam,
+  value: string,
+) {
+  const url = new URL(window.location.href)
+  // Only update when value before and after are different and both are non empty.
+  if (value === (url.searchParams.get(paramName) ?? "")) {
+    return
+  }
+  url.searchParams.set(paramName, value)
+  history.replaceState({ ...history.state }, "", url.toString())
+  document.dispatchEvent(new Event(UPDATE_QUERY_EVENT))
+}
+
+export function observeSearchQuery(callback: (query: SearchQuery) => void) {
+  const onUpdateQuery = () => {
+    const searchParams = new URL(window.location.href).searchParams
+    const query = {
+      search: searchParams.get(SEARCH) ?? undefined,
+      category: searchParams.get(CATEGORY) ?? undefined,
+      language: searchParams.get(LANGUAGE) ?? undefined,
+      type: searchParams.get(TYPE) ?? undefined,
+    }
+    callback(query)
+  }
+  document.addEventListener(UPDATE_QUERY_EVENT, onUpdateQuery)
+  onUpdateQuery()
+  return () => document.removeEventListener(UPDATE_QUERY_EVENT, onUpdateQuery)
+}

package/src/pages/search-page/utils/search-translations.ts

@@ -1,15 +1,4 @@
-const translationKeys = [
-  "ln.search.no-results",
-  "ln.search.title",
-  "ln.language",
-  "ln.search.placeholder",
-  "ln.search.all-languages",
-  "ln.type",
-  "ln.search.all-types",
-  "ln.category",
-  "ln.search.all-categories",
-  "ln.search.more-results",
-] as const
+const translationKeys = ["ln.search.no-results"] as const
 
 export type TranslationKey = (typeof translationKeys)[number]
 

package/src/utils/markdown.ts

@@ -6,12 +6,15 @@ import { marked } from "marked"
  * @param markdown string
  * @returns plain text
  */
+
 export function markdownToText(markdown?: string) {
   if (!markdown) {
     return markdown
   }
   return (
     markdown
+      // line breaks
+      .replaceAll(/<br>/g, " ")
       //headers
       .replaceAll(/^#+ ?/gm, "")
       // lists
@@ -19,11 +22,15 @@ export function markdownToText(markdown?: string) {
       // block quotes
       .replaceAll(/^>+ ?/gm, "")
       // bold and italics
-      .replaceAll(/[*_]/g, "")
+      .replaceAll(/(?<!\\)[*_]/g, "")
       // images
       .replaceAll(/!\[(.*?)\]\(.*?\)/g, (_, imgAlt) => imgAlt)
       // links
       .replaceAll(/\[(.*?)\]\(.*?\)/g, (_, linkLabel) => linkLabel)
+      // escape character '\'
+      .replaceAll(/\\/g, "")
+      // multi white spaces
+      .replaceAll(/  +/g, " ")
   )
 }
 

package/src/pages/search-page/Search.tsx

@@ -1,71 +0,0 @@
-import { useEffect } from "react"
-
-import ResultList from "./components/ResultList"
-import SearchFilter from "./components/SearchFilter"
-import { useSearch } from "./hooks/use-search"
-import type { MediaType, TranslatedLanguage } from "./types"
-import type { Translations } from "./utils/search-translations"
-import { useProvidedTranslations } from "./utils/use-provided-translations"
-
-export default function Search({
-  locale,
-  contentLanguages,
-  categories,
-  mediaTypes,
-  direction,
-  translations,
-  filterByLocale,
-}: {
-  locale?: string
-  contentLanguages: TranslatedLanguage[]
-  categories: Record<string, string>
-  translations: Translations
-  mediaTypes: MediaType[]
-  direction: "rtl" | "ltr"
-  filterByLocale: boolean
-}) {
-  const { results, updateQuery, isLoading } = useSearch()
-  const t = useProvidedTranslations(translations)
-
-  // restore scroll position after back navigation
-  useEffect(() => {
-    const { state } = history
-    if (!isLoading && state?.scrollY) {
-      window.scrollTo(0, state.scrollY)
-    }
-  }, [isLoading])
-
-  return (
-    <>
-      <div className="px-4 md:px-8">
-        <h1 className="mb-4 mt-8 text-4xl md:mb-8 md:mt-12 md:text-5xl">
-          {t("ln.search.title")}
-        </h1>
-        <SearchFilter
-          contentLanguages={contentLanguages}
-          mediaTypes={mediaTypes}
-          translations={translations}
-          categories={categories}
-          locale={locale}
-          filterByLocale={filterByLocale}
-          updateQuery={updateQuery}
-        />
-      </div>
-
-      <ResultList
-        items={results}
-        locale={locale}
-        direction={direction}
-        translations={translations}
-        categories={categories}
-        mediaTypes={mediaTypes}
-        contentLanguages={contentLanguages}
-      />
-      {!results.length && !isLoading && (
-        <div className="mt-24 text-center font-bold text-gray-500">
-          {t("ln.search.no-results")}
-        </div>
-      )}
-    </>
-  )
-}

package/src/pages/search-page/components/ResultList.tsx

@@ -1,135 +0,0 @@
-import { useMemo, useState } from "react"
-
-import Icon from "../../../components/Icon"
-import { detailsPagePath } from "../../../utils/paths"
-import type { SearchItem } from "../../api/search-response"
-import type { MediaType, TranslatedLanguage } from "../types"
-import type { Translations } from "../utils/search-translations"
-import { useProvidedTranslations } from "../utils/use-provided-translations"
-
-const PAGE_SIZE = 30
-
-interface Props {
-  items: SearchItem[]
-  locale: string | undefined
-  translations: Translations
-  categories: Record<string, string>
-  contentLanguages: TranslatedLanguage[]
-  direction: "rtl" | "ltr"
-  mediaTypes: MediaType[]
-}
-
-export default function ResultList({
-  items,
-  locale,
-  categories,
-  translations,
-  contentLanguages,
-  direction,
-  mediaTypes,
-}: Props) {
-  const [maxItems, setMaxItems] = useState(15)
-  const t = useProvidedTranslations(translations)
-
-  const types = useMemo(
-    () =>
-      Object.fromEntries(
-        mediaTypes.map(({ id, icon, label }) => [id, { icon, label }]),
-      ),
-    [mediaTypes],
-  )
-  const languages = useMemo(
-    () => Object.fromEntries(contentLanguages.map((lang) => [lang.code, lang])),
-    [contentLanguages],
-  )
-
-  return (
-    <>
-      <ol className={`divide-y divide-gray-200 px-4 md:px-8`}>
-        {items.slice(0, maxItems).map((item) => (
-          <li key={item.id} lang={item.language}>
-            <a
-              href={detailsPagePath(locale, {
-                id: item.id,
-              })}
-              className="group flex overflow-hidden py-6 transition-colors ease-in-out md:rounded-sm md:py-10 md:hover:bg-gray-100"
-            >
-              <div className="flex h-36 w-36 shrink-0 flex-col items-start justify-center">
-                <img
-                  className="max-h-36 w-auto max-w-36 rounded-sm object-contain shadow-md"
-                  src={item.image.src}
-                  width={item.image.width}
-                  height={item.image.height}
-                  alt=""
-                  decoding="async"
-                  loading="lazy"
-                />
-              </div>
-
-              <div className="ms-5 flex grow flex-col justify-center text-xs sm:ms-8">
-                <h2 className="mb-1 line-clamp-3 text-sm font-bold text-gray-700 md:mb-3 md:text-base">
-                  <Icon
-                    className={`${types[item.type].icon} me-2 align-bottom text-2xl text-gray-700`}
-                    ariaLabel={types[item.type].label}
-                  />
-                  <span>{item.title}</span>
-                </h2>
-                <div className="mb-3 flex flex-col flex-wrap items-start gap-2 md:flex-row md:items-center md:gap-3">
-                  {!!item.authors?.length && (
-                    <p className="mb-1 md:mb-0 md:text-base">
-                      {item.authors.join(", ")}
-                    </p>
-                  )}
-                  {contentLanguages.length > 1 && (
-                    <span className="rounded-lg border border-gray-300 px-2 py-1 text-gray-500">
-                      {languages[item.language].name}
-                    </span>
-                  )}
-                  <ul lang={locale} className="flex flex-wrap gap-1">
-                    {item.categories?.map((category) => (
-                      <li
-                        key={category}
-                        className="rounded-lg bg-gray-200 px-2 py-1 text-gray-600"
-                      >
-                        {categories[category]}
-                      </li>
-                    ))}
-                  </ul>
-                </div>
-
-                <div className="hidden sm:block">
-                  <p
-                    className="line-clamp-3 max-w-screen-sm text-xs"
-                    lang={item.language}
-                    dir={languages[item.language].direction}
-                  >
-                    {item.description}
-                  </p>
-                </div>
-              </div>
-              <Icon
-                className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
-                flipIcon={direction === "rtl"}
-                ariaLabel=""
-              />
-            </a>
-          </li>
-        ))}
-      </ol>
-      {items.length > maxItems && (
-        <div className="mt-8 flex flex-col px-4 md:px-8">
-          <div className="dy-divider">
-            <button
-              type="button"
-              className="dy-btn text-gray-700"
-              onClick={() => setMaxItems(maxItems + PAGE_SIZE)}
-            >
-              {t("ln.search.more-results")}
-              <Icon className="mdi--chevron-down" ariaLabel="" />
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  )
-}

package/src/pages/search-page/types.ts

@@ -1,11 +0,0 @@
-export type MediaType = {
-  id: string
-  label: string
-  icon: string
-}
-
-export type TranslatedLanguage = {
-  code: string
-  name: string
-  direction: "rtl" | "ltr"
-}

package/src/pages/search-page/utils/use-provided-translations.ts

@@ -1,5 +0,0 @@
-import type { TranslationKey, Translations } from "./search-translations"
-
-export const useProvidedTranslations = (translations: Translations) => {
-  return (key: TranslationKey) => translations[key]
-}