lightnet 3.4.6 → 3.6.0

package/src/pages/details-page/utils/get-collection-items.ts

@@ -1,5 +1,5 @@
 import { compareMediaCollectionItems } from "../../../content/compare-media-collection-items"
-import type { MediaItemEntry } from "../../../content/content-schema-internal"
+import type { MediaItemEntry } from "../../../content/content-schema"
 import { getMediaItems } from "../../../content/get-media-items"
 
 const groupItemsByCollections = async () => {

package/src/pages/search-page/SearchPageRoute.astro

@@ -1,51 +1,21 @@
 ---
-import config from "virtual:lightnet/config"
-
-import { getCategories } from "../../content/get-categories"
-import { contentLanguages } from "../../content/get-languages"
-import { getMediaTypes } from "../../content/get-media-types"
 import Page from "../../layouts/Page.astro"
-import Search from "./Search"
-import { provideTranslations } from "./utils/search-translations"
+import SearchFilter from "./components/SearchFilter.astro"
+import SearchList from "./components/SearchList.astro"
 
 export { getLocalePaths as getStaticPaths } from "../../i18n/get-locale-paths"
 
-const { t, currentLocale } = Astro.locals.i18n
-
-const categories: Record<string, string> = {}
-for (const { id, name } of await getCategories(currentLocale, t)) {
-  categories[id] = name
-}
-
-const mediaTypes = (await getMediaTypes())
-  .map((type) => ({
-    id: type.id,
-    label: t(type.data.label),
-    icon: type.data.icon,
-  }))
-  .sort((a, b) => a.label.localeCompare(b.label, currentLocale))
-
-const translatedContentLanguages = contentLanguages
-  .map((language) => ({
-    ...language,
-    name: t(language.label),
-  }))
-  .sort((a, b) => a.name.localeCompare(b.name, currentLocale))
-
-const filterByLocale = !!config.searchPage?.filterByLocale
+const { t } = Astro.locals.i18n
 ---
 
 <Page>
   <div class="mx-auto max-w-screen-md">
-    <Search
-      client:only="react"
-      contentLanguages={translatedContentLanguages}
-      mediaTypes={mediaTypes}
-      translations={provideTranslations(t)}
-      locale={currentLocale}
-      direction={Astro.locals.i18n.direction}
-      categories={categories}
-      filterByLocale={filterByLocale}
-    />
+    <div class="px-4 md:px-8">
+      <h1 class="mb-4 mt-8 text-balance text-4xl md:mb-8 md:mt-12 md:text-5xl">
+        {t("ln.search.title")}
+      </h1>
+      <SearchFilter />
+    </div>
+    <SearchList />
   </div>
 </Page>

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

@@ -0,0 +1,19 @@
+import Icon from "../../../components/Icon"
+
+export default function LoadingSkeleton({ direction }: { direction: string }) {
+  return (
+    <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
+      <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>
+      <div className="ms-5 flex grow flex-col gap-3">
+        <div className="h-4 w-1/2 rounded-md bg-gray-200 md:h-6"></div>
+        <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
+        <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
+      </div>
+      <Icon
+        className="mdi--chevron-right my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        flipIcon={direction === "rtl"}
+        ariaLabel=""
+      />
+    </div>
+  )
+}

package/src/pages/search-page/components/SearchFilter.astro

@@ -0,0 +1,65 @@
+---
+import config from "virtual:lightnet/config"
+
+import { getUsedCategories } from "../../../content/get-categories"
+import { contentLanguages } from "../../../content/get-languages"
+import { getMediaTypes } from "../../../content/get-media-types"
+import { provideTranslations } from "../utils/search-filter-translations"
+import SearchFilterReact from "./SearchFilter.tsx"
+
+const { t, currentLocale } = Astro.locals.i18n
+
+const sortByName = (array: { id: string; name: string }[]) =>
+  array.sort((a, b) => a.name.localeCompare(b.name, currentLocale))
+
+const categories = (await getUsedCategories(currentLocale, t)).map(
+  ({ id, name }) => ({ id, name }),
+)
+
+const mediaTypes = sortByName(
+  (await getMediaTypes()).map((type) => ({
+    id: type.id,
+    name: t(type.data.label),
+  })),
+)
+
+const languages = sortByName(
+  contentLanguages.map((language) => ({
+    id: language.code,
+    name: t(language.label),
+  })),
+)
+
+const languageFilterEnabled = contentLanguages.length > 1
+const typesFilterEnabled = mediaTypes.length > 1
+// Not every media item has a category. So it makes
+// sense to have the filter when there is only one category.
+const categoriesFilterEnabled = categories.length > 0
+
+const filterByLocale = !!config.searchPage?.filterByLocale
+let initialLanguageFilter: string | undefined = undefined
+const hasContentLanguage = contentLanguages.find(
+  ({ code }) => code === currentLocale,
+)
+if (
+  filterByLocale &&
+  currentLocale &&
+  hasContentLanguage &&
+  languageFilterEnabled
+) {
+  initialLanguageFilter = currentLocale
+}
+const translations = provideTranslations(t)
+---
+
+<SearchFilterReact
+  client:load
+  languages={languages}
+  mediaTypes={mediaTypes}
+  categories={categories}
+  translations={translations}
+  languageFilterEnabled={languageFilterEnabled}
+  typesFilterEnabled={typesFilterEnabled}
+  categoriesFilterEnabled={categoriesFilterEnabled}
+  initialLanguage={initialLanguageFilter}
+/>

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

@@ -1,104 +1,58 @@
-import { useEffect, useRef, useState } from "react"
+import { useRef } from "react"
 
 import Icon from "../../../components/Icon"
 import { useDebounce } from "../hooks/use-debounce"
-import type { SearchQuery } from "../hooks/use-search"
-import type { MediaType, TranslatedLanguage } from "../types"
-import type { Translations } from "../utils/search-translations"
-import { useProvidedTranslations } from "../utils/use-provided-translations"
+import { useSearchQueryParam } from "../hooks/use-search-query-param"
+import type {
+  TranslationKey,
+  Translations,
+} from "../utils/search-filter-translations"
+import { CATEGORY, LANGUAGE, SEARCH, TYPE } from "../utils/search-query"
 import Select from "./Select"
 
-// URL search params
-const SEARCH = "search"
-const LANGUAGE = "language"
-const TYPE = "type"
-const CATEGORY = "category"
+type FilterValue = { id: string; name: string }
 
 interface Props {
-  contentLanguages: TranslatedLanguage[]
-  categories: Record<string, string>
-  mediaTypes: MediaType[]
-  locale?: string
+  languages: FilterValue[]
+  categories: FilterValue[]
+  mediaTypes: FilterValue[]
   translations: Translations
-  filterByLocale: boolean
-  updateQuery: (query: SearchQuery) => void
+  languageFilterEnabled: boolean
+  typesFilterEnabled: boolean
+  categoriesFilterEnabled: boolean
+  initialLanguage?: string
 }
 
 export default function SearchFilter({
   categories,
   mediaTypes,
-  updateQuery,
   translations,
-  filterByLocale,
-  locale,
-  contentLanguages,
+  languages,
+  languageFilterEnabled,
+  typesFilterEnabled,
+  categoriesFilterEnabled,
+  initialLanguage,
 }: Props) {
-  const languageFilterEnabled = contentLanguages.length > 1
-  const typesFilterEnabled = mediaTypes.length > 1
-  // Not every media item has a category. So it makes
-  // sense to have the filter when there is only one category.
-  const categoriesFilterEnabled = Object.keys(categories).length > 0
-
-  const getSearchParam = (name: string, defaultValue = "") => {
-    // be lazy to avoid parsing search params all the time
-    return () => {
-      const searchParams = new URLSearchParams(window.location.search)
-      return searchParams.get(name) ?? defaultValue
-    }
-  }
-
-  const [search, setSearch] = useState(getSearchParam(SEARCH))
-  const [language, setLanguage] = useState(() => {
-    let initialLanguageFilter = ""
-    const hasContentLanguage = contentLanguages.find(
-      ({ code }) => code === locale,
-    )
-    if (
-      filterByLocale &&
-      locale &&
-      hasContentLanguage &&
-      languageFilterEnabled
-    ) {
-      initialLanguageFilter = locale
-    }
-    return getSearchParam(LANGUAGE, initialLanguageFilter)()
-  })
-  const [type, setType] = useState(getSearchParam(TYPE))
-  const [category, setCategory] = useState(getSearchParam(CATEGORY))
+  const [search, setSearch] = useSearchQueryParam(SEARCH)
+  const [language, setLanguage] = useSearchQueryParam(LANGUAGE, initialLanguage)
+  const [type, setType] = useSearchQueryParam(TYPE)
+  const [category, setCategory] = useSearchQueryParam(CATEGORY)
 
   const searchInput = useRef<HTMLInputElement | null>(null)
 
-  const t = useProvidedTranslations(translations)
+  const t = (key: TranslationKey) => translations[key]
 
   const debouncedSetSearch = useDebounce((value: string) => {
     setSearch(value)
   }, 300)
 
-  useEffect(() => {
-    const url = new URL(window.location.href)
-    const updateSearchParam = (name: string, value: string) => {
-      // Only update when value before and after are different and both are non empty.
-      if (value === (url.searchParams.get(name) ?? "")) {
-        return
-      }
-      url.searchParams.set(name, value)
-    }
-
-    updateSearchParam(SEARCH, search)
-    updateSearchParam(LANGUAGE, language)
-    updateSearchParam(TYPE, type)
-    updateSearchParam(CATEGORY, category)
-    history.replaceState({ ...history.state }, "", url.toString())
-
-    updateQuery({ search, language, type, category })
-  }, [search, language, type, category])
-
   return (
     <>
-      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2">
+      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2 rounded-2xl">
         <input
           type="search"
-          className="grow"
+          className="grow placeholder-gray-500"
+          name="search"
           ref={searchInput}
           placeholder={t("ln.search.placeholder")}
           enterKeyHint="search"
@@ -115,11 +69,8 @@ export default function SearchFilter({
             initialValue={language}
             valueChange={(val) => setLanguage(val)}
             options={[
-              { id: "", label: t("ln.search.all-languages") },
-              ...contentLanguages.map(({ code: id, name: label }) => ({
-                id,
-                label,
-              })),
+              { id: "", name: t("ln.search.all-languages") },
+              ...languages,
             ]}
           />
         )}
@@ -130,7 +81,7 @@ export default function SearchFilter({
             initialValue={type}
             valueChange={(val) => setType(val)}
             options={[
-              { id: "", label: t("ln.search.all-types") },
+              { id: "", name: t("ln.search.all-types") },
               ...mediaTypes,
             ]}
           />
@@ -142,10 +93,8 @@ export default function SearchFilter({
             initialValue={category}
             valueChange={(val) => setCategory(val)}
             options={[
-              { id: "", label: t("ln.search.all-categories") },
-              ...Object.entries(categories)
-                .sort((a, b) => a[1].localeCompare(b[1], locale))
-                .map(([id, label]) => ({ id, label })),
+              { id: "", name: t("ln.search.all-categories") },
+              ...categories,
             ]}
           />
         )}

package/src/pages/search-page/components/SearchList.astro

@@ -0,0 +1,50 @@
+---
+import { getCollection } from "astro:content"
+
+import { getUsedCategories } from "../../../content/get-categories"
+import { contentLanguages } from "../../../content/get-languages"
+import { getMediaTypes } from "../../../content/get-media-types"
+import { provideTranslations } from "../utils/search-translations"
+import SearchListReact from "./SearchList.tsx"
+
+const { t, currentLocale, direction } = Astro.locals.i18n
+
+const categories: Record<string, string> = {}
+for (const { id, name } of await getUsedCategories(currentLocale, t)) {
+  categories[id] = name
+}
+
+const mediaTypes = Object.fromEntries(
+  (await getMediaTypes()).map((type) => [
+    type.id,
+    {
+      name: t(type.data.label),
+      icon: type.data.icon,
+    },
+  ]),
+)
+
+const languages = Object.fromEntries(
+  contentLanguages.map((language) => [
+    language.code,
+    { direction: language.direction, name: t(language.label) },
+  ]),
+)
+
+const mediaItemsTotal = (await getCollection("media")).length
+
+const translations = provideTranslations(t)
+const showLanguage = contentLanguages.length > 1
+---
+
+<SearchListReact
+  client:load
+  currentLocale={currentLocale}
+  direction={direction}
+  translations={translations}
+  categories={categories}
+  mediaTypes={mediaTypes}
+  languages={languages}
+  showLanguage={showLanguage}
+  mediaItemsTotal={mediaItemsTotal}
+/>

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

@@ -0,0 +1,117 @@
+import { useWindowVirtualizer } from "@tanstack/react-virtual"
+import { useEffect, useRef, useState } from "react"
+
+import { useSearch } from "../hooks/use-search"
+import type { TranslationKey, Translations } from "../utils/search-translations"
+import LoadingSkeleton from "./LoadingSkeleton"
+import SearchListItem, {
+  type MediaType,
+  type TranslatedLanguage,
+} from "./SearchListItem"
+
+interface Props {
+  currentLocale: string | undefined
+  translations: Translations
+  direction: "rtl" | "ltr"
+  categories: Record<string, string>
+  languages: Record<string, TranslatedLanguage>
+  showLanguage: boolean
+  mediaTypes: Record<string, MediaType>
+  mediaItemsTotal: number
+}
+
+export default function SearchList({
+  currentLocale,
+  categories,
+  translations,
+  languages,
+  direction,
+  showLanguage,
+  mediaTypes,
+  mediaItemsTotal,
+}: Props) {
+  const listRef = useRef<HTMLDivElement | null>(null)
+  const [rowHeight, setRowHeight] = useState(256)
+  const { results, isLoading } = useSearch({
+    currentLocale,
+    categories,
+    languages,
+    mediaTypes,
+  })
+  const count = isLoading ? mediaItemsTotal : results.length
+
+  const virtualizer = useWindowVirtualizer({
+    count,
+    estimateSize: () => rowHeight,
+    getItemKey: (index) => (isLoading ? index : results[index].id),
+    overscan: 2,
+    scrollMargin: listRef.current?.offsetTop ?? 0,
+  })
+
+  useEffect(() => {
+    const updateRowHeight = () => {
+      // This is the fixed row heights that have a responsive breakpoint
+      // If you update here, also update the initial height
+      const newRowHeight = window.matchMedia("(min-width: 640px)").matches
+        ? 256
+        : 208
+      setRowHeight(newRowHeight)
+    }
+    const observer = new ResizeObserver(() => updateRowHeight())
+    observer.observe(document.body)
+    updateRowHeight()
+    return () => {
+      observer.disconnect()
+    }
+  }, [])
+
+  const t = (key: TranslationKey) => translations[key]
+
+  return (
+    <>
+      <div ref={listRef} className="px-4 md:px-8">
+        <ol
+          className="relative w-full divide-y divide-gray-200"
+          style={{
+            height: `${virtualizer.getTotalSize()}px`,
+          }}
+        >
+          {virtualizer.getVirtualItems().map((virtualRow) => {
+            const item = results[virtualRow.index]
+            return (
+              <li
+                key={virtualRow.key}
+                className="absolute left-0 top-0 block w-full"
+                style={{
+                  height: `${virtualRow.size}px`,
+                  transform: `translateY(${
+                    virtualRow.start - virtualizer.options.scrollMargin
+                  }px)`,
+                }}
+              >
+                {isLoading ? (
+                  <LoadingSkeleton direction={direction} />
+                ) : (
+                  <SearchListItem
+                    item={item}
+                    direction={direction}
+                    showLanguage={showLanguage}
+                    currentLocale={currentLocale}
+                    categories={categories}
+                    languages={languages}
+                    mediaTypes={mediaTypes}
+                  />
+                )}
+              </li>
+            )
+          })}
+        </ol>
+      </div>
+      {!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/SearchListItem.tsx

@@ -0,0 +1,105 @@
+import Icon from "../../../components/Icon"
+import { detailsPagePath } from "../../../utils/paths"
+import type { SearchItem } from "../../api/search-response"
+
+export type MediaType = {
+  name: string
+  icon: string
+}
+
+export type TranslatedLanguage = {
+  name: string
+  direction: "rtl" | "ltr"
+}
+
+interface Props {
+  item: SearchItem
+  currentLocale: string | undefined
+  direction: "rtl" | "ltr"
+  categories: Record<string, string>
+  languages: Record<string, TranslatedLanguage>
+  showLanguage: boolean
+  mediaTypes: Record<string, MediaType>
+}
+
+export default function SearchListItem({
+  item,
+  currentLocale,
+  categories,
+  languages,
+  direction,
+  showLanguage,
+  mediaTypes,
+}: Props) {
+  return (
+    <a
+      href={detailsPagePath(currentLocale, {
+        id: item.id,
+      })}
+      lang={item.language}
+      className="group flex h-52 overflow-hidden py-2 transition-colors ease-in-out sm:h-64 md:rounded-sm md:hover:bg-gray-100"
+    >
+      <div className="flex h-full 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="eager"
+        />
+      </div>
+
+      <div className="ms-5 flex grow flex-col justify-center text-xs sm:ms-8">
+        <h2 className="mb-1 line-clamp-2 text-balance text-sm font-bold text-gray-700 md:mb-3 md:text-base">
+          <Icon
+            className={`${mediaTypes[item.type].icon} me-2 align-bottom text-2xl text-gray-700`}
+            ariaLabel={mediaTypes[item.type].name}
+          />
+          <span>{item.title}</span>
+        </h2>
+        <div className="flex flex-col flex-wrap items-start gap-2 sm:mb-3 md:flex-row md:items-center md:gap-3">
+          {!!item.authors?.length && (
+            <p className="mb-1 line-clamp-2 sm:line-clamp-1 md:mb-0 md:text-base">
+              {item.authors.join(", ")}
+            </p>
+          )}
+          {showLanguage && (
+            <span className="rounded-lg border border-gray-300 px-2 py-1 text-gray-500">
+              {languages[item.language].name}
+            </span>
+          )}
+          <ul
+            lang={currentLocale}
+            className="flex max-h-14 flex-wrap gap-1 overflow-hidden sm:max-h-6"
+          >
+            {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>
+  )
+}

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

@@ -1,8 +1,8 @@
 type Props = {
   label: string
-  initialValue: string
+  initialValue: string | undefined
   valueChange: (value: string) => void
-  options: { id: string; label: string }[]
+  options: { id: string; name: string }[]
 }
 
 export default function Select({
@@ -17,13 +17,13 @@ export default function Select({
         {label}
       </span>
       <select
-        className="dy-select dy-select-bordered sm:dy-select-sm w-full"
+        className="dy-select dy-select-bordered sm:dy-select-sm w-full rounded-xl"
         value={initialValue}
         onChange={(e) => valueChange(e.currentTarget.value)}
       >
-        {options.map(({ id, label }) => (
+        {options.map(({ id, name }) => (
           <option key={id} value={id}>
-            {label}
+            {name}
           </option>
         ))}
       </select>

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

@@ -0,0 +1,31 @@
+import { useEffect, useState } from "react"
+
+import {
+  getSearchQueryParam,
+  type SearchQueryParam,
+  setSearchQueryParam,
+} from "../utils/search-query"
+
+export function useSearchQueryParam(
+  paramName: SearchQueryParam,
+  initialValue?: string,
+) {
+  const [state, updateState] = useState(initialValue)
+  const updateParam = (value: string) => {
+    setSearchQueryParam(paramName, value)
+    updateState(value)
+  }
+  // sync with url query param
+  useEffect(() => {
+    // if there is already a parameter set on the url
+    // override the initial state
+    if (getSearchQueryParam(paramName) !== undefined) {
+      updateState(getSearchQueryParam(paramName))
+      return
+    }
+    if (initialValue !== undefined) {
+      setSearchQueryParam(paramName, initialValue)
+    }
+  }, [])
+  return [state, updateParam] as const
+}