lightnet 2.15.2

package/src/pages/details-page/utils/create-content-metadata.ts

@@ -0,0 +1,78 @@
+import { isExternalUrl } from "../../../utils/urls"
+
+export type UrlType =
+  | "link"
+  | "source"
+  | "image"
+  | "audio"
+  | "video"
+  | "text"
+  | "package"
+
+const KNOWN_EXTENSIONS: Record<
+  string,
+  { type: UrlType; canBeOpened?: boolean } | undefined
+> = {
+  htm: { type: "link", canBeOpened: true },
+  html: { type: "link", canBeOpened: true },
+  php: { type: "link", canBeOpened: true },
+  json: { type: "source", canBeOpened: true },
+  xml: { type: "source", canBeOpened: true },
+  svg: { type: "image", canBeOpened: true },
+  jpg: { type: "image", canBeOpened: true },
+  jpeg: { type: "image", canBeOpened: true },
+  png: { type: "image", canBeOpened: true },
+  gif: { type: "image", canBeOpened: true },
+  ico: { type: "image", canBeOpened: true },
+  webp: { type: "image", canBeOpened: true },
+  mp3: { type: "audio", canBeOpened: true },
+  wav: { type: "audio", canBeOpened: true },
+  aac: { type: "audio", canBeOpened: true },
+  ogg: { type: "audio", canBeOpened: true },
+  mp4: { type: "video", canBeOpened: true },
+  webm: { type: "video", canBeOpened: true },
+  ogv: { type: "video", canBeOpened: true },
+  pdf: { type: "text", canBeOpened: true },
+  txt: { type: "text", canBeOpened: true },
+  epub: { type: "text" },
+  zip: { type: "package" },
+  ppt: { type: "text" },
+  pptx: { type: "text" },
+  doc: { type: "text" },
+  docx: { type: "text" },
+} as const
+
+export function createContentMetadata({
+  url,
+  name: customName,
+}: {
+  url: string
+  name?: string
+}) {
+  const lastUrlSegment = url.split("/").slice(-1)[0]
+  const hasExtension = lastUrlSegment.includes(".")
+  const extension = hasExtension
+    ? lastUrlSegment.split(".").slice(-1)[0].toLowerCase()
+    : ""
+
+  const isExternal = isExternalUrl(url)
+
+  const linkName = isExternal ? new URL(url).hostname : lastUrlSegment
+  const fileName = hasExtension
+    ? lastUrlSegment.slice(0, -(extension.length + 1))
+    : undefined
+  const name = customName ?? fileName ?? linkName
+  const type = KNOWN_EXTENSIONS[extension]?.type ?? "link"
+  const canBeOpened =
+    !hasExtension || !!KNOWN_EXTENSIONS[extension]?.canBeOpened
+
+  return {
+    url,
+    extension,
+    isExternal,
+    name,
+    canBeOpened,
+    type,
+    target: isExternal ? "_blank" : "_self",
+  } as const
+}

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

@@ -0,0 +1,71 @@
+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/SearchPage.astro

@@ -0,0 +1,51 @@
+---
+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"
+
+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, { allowFixedStrings: true }),
+    icon: type.data.icon,
+  }))
+  .sort((a, b) => a.label.localeCompare(b.label, currentLocale))
+
+const translatedContentLanguages = contentLanguages
+  .map((language) => ({
+    ...language,
+    name: t(language.label, { allowFixedStrings: true }),
+  }))
+  .sort((a, b) => a.name.localeCompare(b.name, currentLocale))
+
+const filterByLocale = !!config.searchPage?.filterByLocale
+---
+
+<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>
+</Page>

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

@@ -0,0 +1,135 @@
+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 text-gray-500"
+                    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"
+              onClick={() => setMaxItems(maxItems + PAGE_SIZE)}
+            >
+              {t("ln.search.more-results")}
+              <Icon className="mdi--chevron-down" ariaLabel="" />
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

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

@@ -0,0 +1,189 @@
+import { useEffect, useRef, useState } 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"
+
+// URL search params
+const SEARCH = "search"
+const LANGUAGE = "language"
+const TYPE = "type"
+const CATEGORY = "category"
+
+interface Props {
+  contentLanguages: TranslatedLanguage[]
+  categories: Record<string, string>
+  mediaTypes: MediaType[]
+  locale?: string
+  translations: Translations
+  filterByLocale: boolean
+  updateQuery: (query: SearchQuery) => void
+}
+
+export default function SearchFilter({
+  categories,
+  mediaTypes,
+  updateQuery,
+  translations,
+  filterByLocale,
+  locale,
+  contentLanguages,
+}: 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 searchInput = useRef<HTMLInputElement | null>(null)
+
+  const t = useProvidedTranslations(translations)
+
+  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">
+        <input
+          type="search"
+          className="grow"
+          id="search-input"
+          ref={searchInput}
+          placeholder={t("ln.search.placeholder")}
+          enterKeyHint="search"
+          defaultValue={search}
+          onInput={(e) => debouncedSetSearch(e.currentTarget.value)}
+          onKeyDown={(e) => e.key === "Enter" && searchInput.current?.blur()}
+        />
+        <Icon className="mdi--magnify text-xl" ariaLabel="" />
+      </label>
+      <div className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-6 md:mb-10">
+        {languageFilterEnabled && (
+          <label className="dy-form-control">
+            <div className="dy-label">
+              <span className="text-xs font-bold uppercase text-gray-500">
+                {t("ln.common.language")}
+              </span>
+            </div>
+            <select
+              className="dy-select dy-select-bordered sm:dy-select-sm"
+              value={language}
+              id="language-select"
+              onChange={(e) => setLanguage(e.currentTarget.value)}
+            >
+              <option value="">{t("ln.search.all-languages")}</option>
+              {contentLanguages.map(({ code, name }) => (
+                <option key={code} value={code} lang={code}>
+                  {name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+
+        {typesFilterEnabled && (
+          <label className="dy-form-control">
+            <div className="dy-label">
+              <span className="text-xs font-bold uppercase text-gray-500">
+                {t("ln.common.type")}
+              </span>
+            </div>
+            <select
+              className="dy-select dy-select-bordered sm:dy-select-sm"
+              value={type}
+              id="type-select"
+              onChange={(e) => setType(e.currentTarget.value)}
+            >
+              <option key="" value="">
+                {t("ln.search.all-types")}
+              </option>
+              {mediaTypes.map(({ id, label }) => (
+                <option key={id} value={id}>
+                  {label}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+
+        {categoriesFilterEnabled && (
+          <label className="dy-form-control">
+            <div className="dy-label">
+              <span className="text-xs font-bold uppercase text-gray-500">
+                {t("ln.common.category")}
+              </span>
+            </div>
+            <select
+              className="dy-select dy-select-bordered sm:dy-select-sm"
+              value={category}
+              id="category-select"
+              onChange={(e) => setCategory(e.currentTarget.value)}
+            >
+              <option key="" value="">
+                {t("ln.search.all-categories")}
+              </option>
+              {Object.entries(categories)
+                .sort((a, b) => a[1].localeCompare(b[1], locale))
+                .map(([id, label]) => (
+                  <option key={id} value={id}>
+                    {label}
+                  </option>
+                ))}
+            </select>
+          </label>
+        )}
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,17 @@
+import { useRef } from "react"
+
+export function useDebounce<T>(
+  callback: (...args: T[]) => unknown,
+  time: number,
+) {
+  const timeout = useRef<number>()
+  return (...args: T[]) => {
+    if (timeout.current) {
+      window.clearTimeout(timeout.current)
+    }
+    timeout.current = window.setTimeout(() => {
+      callback(...args)
+      timeout.current = undefined
+    }, time)
+  }
+}

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

@@ -0,0 +1,95 @@
+import Fuse from "fuse.js"
+import { useEffect, useRef, useState } from "react"
+
+import type { SearchItem, SearchResponse } from "../../api/search-response"
+
+export type SearchQuery = {
+  search?: string
+  language?: string
+  type?: string
+  category?: string
+}
+
+export function useSearch() {
+  const fuse = useRef<Fuse<SearchItem>>()
+  const [allItems, setAllItems] = useState<SearchItem[]>([])
+  const [isLoading, setIsLoading] = useState(true)
+  const [query, setQuery] = useState<SearchQuery>({})
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const response = await fetch("/api/search.json")
+        if (!response.ok) {
+          throw new Error("Network response was not ok")
+        }
+        const { items }: SearchResponse = await response.json()
+        fuse.current = new Fuse(items, {
+          keys: [
+            { name: "title", weight: 3 },
+            "language",
+            { name: "authors", weight: 2 },
+            "description",
+            "type",
+            "categories",
+            "id",
+          ],
+          useExtendedSearch: true,
+          threshold: 0.3,
+          ignoreLocation: true,
+        })
+        setAllItems(items)
+      } catch (error) {
+        console.error(error)
+      }
+      setIsLoading(false)
+    }
+    fetchData()
+  }, [])
+
+  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]))
+
+    if (!queryIsUpdated) {
+      return
+    }
+    setQuery(newQuery)
+  }
+
+  if (!fuse.current || !fuseQuery.length) {
+    return { results: allItems, updateQuery, isLoading }
+  }
+
+  return {
+    results: fuse.current
+      .search({ $and: fuseQuery })
+      .map((fuseItem) => fuseItem.item),
+    updateQuery,
+    isLoading,
+  }
+}

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

@@ -0,0 +1,9 @@
+import type { Language } from "../../i18n/languages"
+
+export type MediaType = {
+  id: string
+  label: string
+  icon: string
+}
+
+export type TranslatedLanguage = Language & { name: string }

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

@@ -0,0 +1,22 @@
+const translationKeys = [
+  "ln.search.no-results",
+  "ln.search.title",
+  "ln.common.language",
+  "ln.search.placeholder",
+  "ln.search.all-languages",
+  "ln.common.type",
+  "ln.search.all-types",
+  "ln.common.category",
+  "ln.search.all-categories",
+  "ln.search.more-results",
+] 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/use-provided-translations.ts

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