lightnet 3.4.6 → 3.5.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # lightnet
 
+## 3.5.0
+
+### Minor Changes
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add `disableHorizontalPadding` option to `Section` component.
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add lightnet config option `searchPage.hideHeaderSearchIcon`
+
+  Set to true, this will remove the search magnifier icon from the header bar. For example this option can
+  be useful if a site directly provides the search on the homepage.
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Implement infinite scroll for search results.
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add `SearchSection` component.
+
+  Add the search to your homepage as simple as:
+
+  ```astro
+  ---
+  import { Page, SearchSection } from "lightnet/components"
+  ---
+
+  <Page>
+    <SearchSection />
+  </Page>
+  ```
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add optional search input to `HeroSection`.
+
+  Enable it by setting the HeroSection's `showSearch` property to `true`.
+  By default `showSearch` is set to `false`.
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add fields to search index
+
+  The search text input also searches language, type and categories of a media item in the current site language.
+
+  Pro tip: Search for "theology | book" to find theology books. The [extended search syntax](https://www.fusejs.io/examples.html#extended-search) can do even more...
+
+- [#273](https://github.com/LightNetDev/LightNet/pull/273) [`5b0b24f`](https://github.com/LightNetDev/LightNet/commit/5b0b24f58a6b8df8a3bc7dc66b751981f4e0498e) Thanks [@smn-cds](https://github.com/smn-cds)! - Update Translations
+  - remove `ln.search.more-results`. Because search now uses infinite scroll there is no need for this button label anymore 🎉.
+  - change value of `ln.search.placeholder` from "Search by title, author or description..." to "Search media...". Search now also searches on categories, type, language and id of a media item.
+
 ## 3.4.6
 
 ### Patch Changes
@@ -37,7 +79,6 @@
 ### Patch Changes
 
 - [#254](https://github.com/LightNetDev/LightNet/pull/254) [`46c0f7c`](https://github.com/LightNetDev/LightNet/commit/46c0f7c693a46a7a2e06e72c4a333368aa8f7485) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve responsive image variants:
-
   - Improve image quality on search result items
   - Limit the size of the media list image
   - Streamline details page cover image variants
@@ -120,7 +161,6 @@
 - [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Renames custom details pages prop `slug` to `mediaId`.
 
 - [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Streamline handling of components. Make sure all components including a section are suffixed with `Section`.
-
   - Removes `Gallery` export
   - Adds `MediaGallerySection` that includes the section component
   - Renames `Hero` to `HeroSection`
@@ -128,7 +168,6 @@
   - Renames `MediaItemList` to `MediaList`
 
 - [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve Section
-
   - rename maxWidth values: `full` => `wide`, `prose` => `narrow`
   - add marginTop settings: `none`, `sm`, `lg`
 
@@ -159,7 +198,6 @@
 ### Minor Changes
 
 - [#228](https://github.com/LightNetDev/LightNet/pull/228) [`b3bb5cc`](https://github.com/LightNetDev/LightNet/commit/b3bb5cc97a4f14ccb46c68f9dcdbe73d74563452) Thanks [@smn-cds](https://github.com/smn-cds)! - Add builtin languages
-
   - Russian
   - Ukrainian
 
@@ -186,7 +224,6 @@
 ### Minor Changes
 
 - [#220](https://github.com/LightNetDev/LightNet/pull/220) [`e10c96f`](https://github.com/LightNetDev/LightNet/commit/e10c96fb850db6d043c9bc0c929170c271979492) Thanks [@smn-cds](https://github.com/smn-cds)! - Update Tailwind CSS to v4
-
   - updates `tailwindcss` dependency to version ^4.
   - `@astro/tailwindcss` dependency has been replaced with `@tailwindcss/vite`
   - removes the use of `tailwind.config.js` inside site projects
@@ -224,7 +261,6 @@
   This update introduces major changes on our translation system.
 
   Changes:
-
   - Translations are now stored inside `.yml` files.
   - Added i18next as our translation engine
   - Translations now support a flat i18next syntax including (pluralization, contextualization, interpolation)
@@ -292,7 +328,6 @@
 - [#183](https://github.com/LightNetDev/lightnet/pull/183) [`9c0bb8d`](https://github.com/LightNetDev/lightnet/commit/9c0bb8d2508f8bfbb18dd224a36e7f5d75f89268) Thanks [@smn-cds](https://github.com/si-fab)! - Makes logo config optional.
 
 - [#183](https://github.com/LightNetDev/lightnet/pull/183) [`9c0bb8d`](https://github.com/LightNetDev/lightnet/commit/9c0bb8d2508f8bfbb18dd224a36e7f5d75f89268) Thanks [@smn-cds](https://github.com/si-fab)! - Rename `Section` component properties
-
   - change property name `width` to `maxWidth`
   - change property value `content` to `prose`
 
@@ -305,7 +340,6 @@
   Prefixing custom translation strings with `custom.` is non mandatory but recommended as it improves validation.
 
   This is changed:
-
   - rename translate parameter `fallbackToKey` to `allowFixedStrings`.
   - change behavior of the translate function. If `allowFixedStrings` is set to `true`, return the translation key if no translation is found. But fail if the key starts with `custom.` or `ln.` prefix.
   - change example to reflect the new convention of prefixing custom translation keys with `custom.`.
@@ -375,7 +409,6 @@
 - [#176](https://github.com/LightNetDev/lightnet/pull/176) [`6b4a664`](https://github.com/LightNetDev/lightnet/commit/6b4a66490079b0688577e6052ab9d7f2d0686170) Thanks [@smn-cds](https://github.com/si-fab)! - Extend Astro.locals.i18n object
 
   Provide:
-
   - `defaultLocale`
   - `currentLocale`
   - `locales`
@@ -396,7 +429,6 @@
 - [#174](https://github.com/LightNetDev/lightnet/pull/174) [`bb011bf`](https://github.com/LightNetDev/lightnet/commit/bb011bfef8c2d7745e3c3417f7f6ef608867e184) Thanks [@smn-cds](https://github.com/si-fab)! - Update Astro to version 5.
 
   Fix your project by doing this:
-
   - move `/src/content/config.ts` to `/src/content.config.ts`.
   - update tsconfig.json to match the following:
 

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.10.1_@types+node@24.0.8_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.10.1_@types+node@24.0.8_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.10.1_@types+node@24.0.8_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.10.1_@types+node@24.0.8_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.3.0",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.1",
-    "astro": "^5.8.1",
-    "lightnet": "^3.4.4",
+    "astro": "^5.10.1",
+    "lightnet": "^3.5.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.33.5",

package/exports/components.ts

@@ -4,6 +4,7 @@ export { default as HighlightSection } from "../src/components/HighlightSection.
 export { default as Icon } from "../src/components/Icon"
 export { default as MediaGallerySection } from "../src/components/MediaGallerySection.astro"
 export { default as MediaList } from "../src/components/MediaList.astro"
+export { default as SearchSection } from "../src/components/SearchSection.astro"
 export { default as Section } from "../src/components/Section.astro"
 export { default as VideoPlayer } from "../src/components/VideoPlayer.astro"
 export { default as MarkdownPage } from "../src/layouts/MarkdownPage.astro"

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.4.6",
+  "version": "3.5.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -45,17 +45,18 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/react": "^19.1.6",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@types/react": "^19.1.8",
     "daisyui": "^4.12.24",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.2.1",
-    "marked": "^15.0.12",
+    "i18next": "^25.3.0",
+    "marked": "^16.0.0",
     "yaml": "^2.8.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
-    "@types/node": "^22.15.29",
-    "vitest": "^3.1.4"
+    "@playwright/test": "^1.53.2",
+    "@types/node": "^22.15.34",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "test": "vitest",

package/src/astro-integration/config.ts

@@ -203,11 +203,14 @@ export const configSchema = z.object({
   searchPage: z
     .object({
       /**
-       * When this is set to true, search results will be initially
-       * filtered by site language. The filter will only be set when there
-       * is any media item in the site language.
+       * Set this to true, to initially filter search results by current site language.
+       * The filter will only be set when there is any media item in the site language.
        */
       filterByLocale: z.boolean().default(false),
+      /**
+       * Set this to true, to remove the search magnifier icon from the header bar.
+       */
+      hideHeaderSearchIcon: z.boolean().default(false),
     })
     .optional(),
 })

package/src/components/HeroSection.astro

@@ -2,6 +2,8 @@
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 
+import Icon from "./Icon"
+
 interface Props {
   image: ImageMetadata
   title?: string
@@ -11,6 +13,7 @@ interface Props {
   subtitleSize?: "sm" | "md" | "lg" | "xl"
   subtitleClass?: string
   className?: string
+  showSearch?: boolean
 }
 const {
   image,
@@ -21,6 +24,7 @@ const {
   titleClass,
   subtitleClass,
   className,
+  showSearch = false,
 } = Astro.props
 
 const titleSizes = {
@@ -36,26 +40,27 @@ const subtitleSizes = {
   lg: "text-lg sm:text-xl md:text-3xl",
   xl: "text-xl sm:text-2xl md:text-4xl",
 } as const
+
+const t = Astro.locals.i18n.t
 ---
 
 <div class="w-full">
   <div class="group relative">
     <Image
-      class="h-72 w-full object-cover object-center md:h-[20rem] lg:h-[24rem] xl:h-[30rem]"
+      class="h-[20rem] w-full object-cover object-center lg:h-[24rem] xl:h-[30rem]"
       src={image}
-      widths={[320, 768, 1280, 2560, 3000]}
-      sizes="100vw"
-      loading="eager"
+      layout="full-width"
+      priority={true}
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {
         title && (
           <h1
-            class="max-w-screen-md font-bold transition-transform duration-1000 group-hover:scale-[102%]"
+            class="max-w-screen-md font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
             class:list={[titleSizes[titleSize], titleClass]}
           >
             {title}
@@ -65,7 +70,7 @@ const subtitleSizes = {
       {
         subtitle && (
           <p
-            class="max-w-screen-sm font-bold"
+            class="mt-1 max-w-screen-sm font-bold md:mt-2"
             class:list={[
               "sm:text-lg md:text-2xl",
               subtitleSizes[subtitleSize],
@@ -76,6 +81,29 @@ const subtitleSizes = {
           </p>
         )
       }
+      {
+        showSearch && (
+          <form
+            action={`/${Astro.currentLocale}/media`}
+            method="get"
+            class="dy-join group mt-6 w-full max-w-sm rounded-2xl shadow-md outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline md:mt-10 md:max-w-md"
+          >
+            <input
+              class="dy-input dy-join-item grow rounded-2xl bg-gray-100/95 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
+              enterkeyhint="search"
+              type="search"
+              name="search"
+              placeholder={t("ln.search.placeholder")}
+            />
+            <button
+              type="submit"
+              class="dy-btn dy-join-item rounded-2xl border-gray-100/95 bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
+            >
+              <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
+            </button>
+          </form>
+        )
+      }
       <slot />
     </div>
   </div>

package/src/components/SearchSection.astro

@@ -0,0 +1,16 @@
+---
+import SearchFilter from "../pages/search-page/components/SearchFilter.astro"
+import SearchList from "../pages/search-page/components/SearchList.astro"
+import Section, { type Props as SectionProps } from "./Section.astro"
+
+// we need the semi-colon for the astro compiler :(
+// prettier-ignore
+type Props = Omit<SectionProps, "disableHorizontalPadding" | "maxWidth">;
+---
+
+<Section {...Astro.props} disableHorizontalPadding={true} maxWidth="narrow">
+  <div class="px-4 md:px-8">
+    <SearchFilter />
+  </div>
+  <SearchList />
+</Section>

package/src/components/Section.astro

@@ -1,5 +1,5 @@
 ---
-interface Props {
+export interface Props {
   /**
    * Id to set to the section element.
    * For example this can be used to reference it inside anchors.
@@ -21,6 +21,13 @@ interface Props {
    * @default "lg"
    */
   marginTop?: "sm" | "lg" | "none"
+  /**
+   * Remove padding from the left and right side of the content.
+   * This will not apply to the section title.
+   *
+   * @default false
+   */
+  disableHorizontalPadding?: boolean
   /**
    * Title on top of the section.
    */
@@ -35,6 +42,7 @@ const {
   id,
   maxWidth = "wide",
   marginTop = "lg",
+  disableHorizontalPadding = false,
   title,
   className,
 } = Astro.props
@@ -52,13 +60,21 @@ const marginTopValues = {
 ---
 
 <section
-  class="mx-auto px-4 md:px-8"
-  class:list={[maxWidths[maxWidth], marginTopValues[marginTop], className]}
+  class="mx-auto"
+  class:list={[
+    maxWidths[maxWidth],
+    marginTopValues[marginTop],
+    !disableHorizontalPadding && "px-4 md:px-8",
+    className,
+  ]}
   id={id}
 >
   {
     title && (
-      <h2 class="mb-10 text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl">
+      <h2
+        class="mb-10 text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
+        class:list={[disableHorizontalPadding && "px-4 md:px-8"]}
+      >
         {title}
       </h2>
     )

package/src/i18n/translations/TRANSLATION-STATUS.md

@@ -1,6 +1,6 @@
 # Translation status
 
-This report provides an overview of all built-in languages and the current progress of their translations.
+This autogenerated report shows all built-in languages and the current status of their translations.
 
 ## **DE** ([de.yml](./de.yml))
 

package/src/i18n/translations/de.yml

@@ -16,8 +16,7 @@ ln.home.title: Startseite
 ln.search.all-categories: Alle Kategorien
 ln.search.all-languages: Alle Sprachen
 ln.search.all-types: Alle Typen
-ln.search.more-results: Mehr Ergebnisse
 ln.search.no-results: Keine Ergebnisse
-ln.search.placeholder: Suche in Titel, Autor, Beschreibung...
+ln.search.placeholder: Medien durchsuchen...
 ln.search.title: Suche
 ln.share.url-copied-to-clipboard: Link in die Zwischenablage kopiert

package/src/i18n/translations/en.yml

@@ -61,11 +61,11 @@ ln.external-link: External link
 # Used on: https://sk8-ministries.pages.dev/en/media/ (not visible)
 ln.search.title: Search
 
-# Placeholder text for the main search box.
-# English: Search by title, author or description...
+# Placeholder text for the search input to search for media items.
+# English: Search media...
 #
 # Used on: https://sk8-ministries.pages.dev/en/media/
-ln.search.placeholder: Search by title, author or description...
+ln.search.placeholder: Search media...
 
 # Filter option to display content in all languages.
 #
@@ -85,11 +85,6 @@ ln.search.all-types: All types
 # Used on: https://sk8-ministries.pages.dev/en/media/
 ln.search.all-categories: All categories
 
-# Button label to load more search results.
-#
-# English: More results
-ln.search.more-results: More results
-
 # Message displayed when no search results are found.
 #
 # English: No results

package/src/i18n/translations/ru.yml

@@ -8,11 +8,10 @@ ln.languages: Языки
 ln.type: Тип
 ln.external-link: Внешняя ссылка
 ln.search.title: Поиск
-ln.search.placeholder: Поиск по названию, автору, описанию...
+ln.search.placeholder: Поиск медиа...
 ln.search.all-languages: Все языки
 ln.search.all-types: Все типы
 ln.search.all-categories: Все категории
-ln.search.more-results: Больше результатов
 ln.search.no-results: Нет результатов
 ln.details.open: Открыть
 ln.details.share: Поделиться

package/src/i18n/translations/uk.yml

@@ -8,11 +8,10 @@ ln.languages: Мови
 ln.type: Тип
 ln.external-link: Зовнішнє посилання
 ln.search.title: Пошук
-ln.search.placeholder: Пошук за назвою, автором, описом...
+ln.search.placeholder: Пошук медіа...
 ln.search.all-languages: Усі мови
 ln.search.all-types: Усі типи
 ln.search.all-categories: Усі категорії
-ln.search.more-results: Більше результатів
 ln.search.no-results: Немає результатів
 ln.details.open: Відкрити
 ln.details.share: Поділитися

package/src/i18n/translations.ts

@@ -66,7 +66,6 @@ export type LightNetTranslationKey =
   | "ln.search.all-categories"
   | "ln.search.all-languages"
   | "ln.search.all-types"
-  | "ln.search.more-results"
   | "ln.search.no-results"
   | "ln.search.placeholder"
   | "ln.search.title"

package/src/layouts/Page.astro

@@ -35,6 +35,7 @@ const language = resolveLanguage(currentLocale)
     <ClientRouter />
   </head>
   <body
+    transition:animate="none"
     class="flex min-h-screen flex-col overflow-y-scroll bg-gray-50 text-gray-900"
   >
     <Header />

package/src/layouts/components/PageNavigation.astro

@@ -32,13 +32,19 @@ const t = Astro.locals.i18n.t
 ---
 
 <nav class="-me-3 flex items-center">
-  <a
-    class="hover:text-primary flex p-3 text-gray-600"
-    aria-label={t("ln.search.title")}
-    data-astro-prefetch="viewport"
-    href={searchPagePath(Astro.currentLocale)}
-    ><Icon className="mdi--magnify" ariaLabel="" /></a
-  >
+  {
+    !config.searchPage?.hideHeaderSearchIcon && (
+      <a
+        class="hover:text-primary flex p-3 text-gray-600"
+        aria-label={t("ln.search.title")}
+        data-astro-prefetch="viewport"
+        href={searchPagePath(Astro.currentLocale)}
+      >
+        <Icon className="mdi--magnify" ariaLabel="" />
+      </a>
+    )
+  }
+
   <LanguagePicker />
 
   {

package/src/pages/details-page/components/main-details/AudioPlayer.astro

@@ -14,7 +14,7 @@ if (!src.endsWith(".mp3")) {
 }
 ---
 
-<audio class="rounded-xl" class:list={[className]} src={src} controls></audio>
+<audio class="rounded-2xl" class:list={[className]} src={src} controls></audio>
 
 <style>
   audio::-webkit-media-controls-enclosure {

package/src/pages/details-page/components/main-details/Cover.astro

@@ -26,6 +26,7 @@ const isPortraitImage = image.height > image.width
     src={image}
     quality="high"
     loading="eager"
+    fetchpriority="high"
   />
   {
     style === "book" && (

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-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>
+  )
+}