lightnet 3.7.0 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # lightnet
 
+## 3.8.0
+
+### Minor Changes
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - Added a new `titleHref` prop to the `Section` component.
+
+  This enables section titles to act as anchors, allowing navigation to dedicated pages for expanded content. Useful for situations where content previews need to link to full listings.
+
+- [#297](https://github.com/LightNetDev/LightNet/pull/297) [`537f6e5`](https://github.com/LightNetDev/LightNet/commit/537f6e50c8bbf7d9a22a17773acddf79fbd11c21) Thanks [@smn-cds](https://github.com/smn-cds)! - Add /api/versions.json endpoint to return the LightNet version.
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - Added filter parameters (`type`, `language`, `search`) to `searchPagePath` function.
+
+- [#298](https://github.com/LightNetDev/LightNet/pull/298) [`b5c3c7a`](https://github.com/LightNetDev/LightNet/commit/b5c3c7a6637b9973acdbd34af3db1de5ed01c9f5) Thanks [@smn-cds](https://github.com/smn-cds)! - Remove client router
+
+  We have been relying on [Astro's ClientRouter](https://docs.astro.build/en/reference/modules/astro-transitions/#clientrouter-) for
+  view transitions between different pages.
+  With this release we remove the use of ClientRouter and switch to the browser built-in [ViewTransitions API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API).
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - ⚠️ Added new translations
+  - ln.previous: "Previous"
+  - ln.next: "Next"
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - Improved CategorySection
+  - added `carousel` layout
+  - replaced `image-grid` layout with `grid`
+  - ⚠️ removed `button-grid`
+  - ⚠️ changed the default layout from `button-grid` to `carousel`
+
+### Patch Changes
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - ⚠️ Removed `disableHorizontalPadding` property from Section component.
+
+- [#299](https://github.com/LightNetDev/LightNet/pull/299) [`ecaf1f6`](https://github.com/LightNetDev/LightNet/commit/ecaf1f698231c3e4eec700ca07cb78d1dbf4378c) Thanks [@smn-cds](https://github.com/smn-cds)! - Accessibility improvements
+  - set `role=search` for SearchInput component
+  - set aria-label for Section component
+
 ## 3.7.0
 
 ### Minor Changes

package/README.md

@@ -1,25 +1,37 @@
-# LightNet
+![LightNet](https://github.com/LightNetDev/lightnet/blob/main/lightnet-banner.webp)
 
-Share the message of Jesus and strengthen believers worldwide.
+Share the gospel and strengthen believers in your community.
 
-LightNet empowers ministries to run their own digital media libraries. They can easily share content in the heart language of the communities they serve - including videos, audio, images, and documents.
+LightNet makes it easy to **run your own digital media library**, so more people can find what they need and grow in faith.
 
-It is built as an integration for the [Astro framework](https://astro.build), enabling the creation of statically generated sites that can be hosted on any file server. These sites are fast, easily extendable, and fully support internationalization.
+Built as an integration for the [Astro framework](https://astro.build), LightNet enables the creation of fast, statically generated websites that can be easily hosted on any file server.
+
+Learn more on the [LightNet homepage](https://lightnet.community).
+
+## Start Your Own Library
+
+Get up and running quickly with LightNet by exploring its features and best practices. You can build your own media library by starting with the [LightNet example template](https://github.com/LightNetDev/example-template), which creates a local copy of a demo site for a fictional skateboard ministry. This beginner-friendly template serves as a great starting point for developers.
+
+To get started, simply run the following command in your terminal:
+
+```bash
+npm create astro@latest -- --template LightNetDev/example-template
+```
+
+This will set up the demo site that you can customize and expand to meet your community’s needs.
 
 ## Documentation
 
-[Read the LightNet docs](https://docs.lightnet.community) to learn how to use LightNet.
+Need help? [Explore the LightNet developer docs](https://docs.lightnet.community) for everything you need to get started and make the most of LightNet.
 
-## Example site
+## Showcase
 
-[Check out the example site](/examples/sk8-ministries/) showcasing LightNet in action for a fictional skateboard ministry.
+Want to see LightNet in action? [Visit the MediaWorks digital library](https://library.mediaworks.global) and see how it powers a real-world digital library.
 
 ## Contributing
 
-We would love to partner with you. [Visit the contribution guide](https://github.com/LightNetDev/lightnet/blob/main/CONTRIBUTING.md) to learn how to help with LightNet development.
+Want to help improve LightNet? [Check out the contribution guide](https://github.com/LightNetDev/lightnet/blob/main/CONTRIBUTING.md) to learn how you can get involved and make a difference!
 
 ## License
 
-MIT
-
-Copyright (c) 2024–present [LightNet contributors](https://github.com/LightNetDev/LightNet/graphs/contributors)
+LightNet is licensed under the MIT License. See the full details in the [LICENSE](https://github.com/LightNetDev/lightnet/blob/main/LICENSE) file.

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

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.11.0_@types+node@24.0.12_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.2_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.11.0_@types+node@24.0.12_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.2_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.12.8_@types+node@24.2.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.46.2_terser@5.39.0_typescript@5.9.2_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.12.8_@types+node@24.2.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.46.2_terser@5.39.0_typescript@5.9.2_yaml@2.8.1/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.11.0_@types+node@24.0.12_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.2_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.11.0_@types+node@24.0.12_jiti@2.4.2_lightningcss@1.29.1_rollup@4.44.2_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.12.8_@types+node@24.2.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.46.2_terser@5.39.0_typescript@5.9.2_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.12.8_@types+node@24.2.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.46.2_terser@5.39.0_typescript@5.9.2_yaml@2.8.1/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/node_modules/.bin/tsc

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/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/typescript@5.9.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"

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

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.8.3/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/typescript@5.9.2/node_modules/typescript/bin/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules/typescript/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/typescript@5.9.2/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -6,13 +6,16 @@
   "dependencies": {
     "@astrojs/react": "^4.3.0",
     "@astrojs/tailwind": "^6.0.2",
-    "@lightnet/decap-admin": "^3.1.1",
-    "astro": "^5.11.0",
-    "lightnet": "^3.7.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "sharp": "^0.33.5",
+    "@lightnet/decap-admin": "^3.1.2",
+    "astro": "^5.12.8",
+    "lightnet": "^3.8.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "sharp": "^0.34.3",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
+  },
+  "engines": {
+    "node": ">=22"
   }
 }

package/__tests__/utils/markdown.spec.ts

@@ -52,3 +52,7 @@ test("Should remove block quotes", () => {
     "block quote\nmore quote",
   )
 })
+
+test("Should return undefined when markdown is undefined", () => {
+  expect(markdownToText(undefined)).toBeUndefined()
+})

package/__tests__/utils/urls.spec.ts

@@ -0,0 +1,27 @@
+import config from "virtual:lightnet/config"
+import projectContext from "virtual:lightnet/project-context"
+import { expect, test } from "vitest"
+
+import { isExternalUrl } from "../../src/utils/urls"
+
+// relative path should be treated as internal
+test("Should treat relative paths as internal", () => {
+  expect(isExternalUrl("/page")).toBe(false)
+})
+
+// absolute url that matches the configured site should be internal
+test("Should treat URLs matching projectContext.site as internal", () => {
+  expect(isExternalUrl(`${projectContext.site}/page`)).toBe(false)
+})
+
+// domains listed in internalDomains should be treated as internal
+test("Should treat configured internalDomains as internal", () => {
+  config.internalDomains.push("internal.test")
+  expect(isExternalUrl("https://internal.test/foo")).toBe(false)
+  config.internalDomains.pop()
+})
+
+// any other absolute url should be external
+test("Should treat other absolute URLs as external", () => {
+  expect(isExternalUrl("https://example.com")).toBe(true)
+})

package/exports/experimental-components.ts

@@ -0,0 +1 @@
+export { default as CarouselSection } from "../src/components/CarouselSection.astro"

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -20,6 +20,7 @@
     "./content": "./exports/content.ts",
     "./utils": "./exports/utils.ts",
     "./components": "./exports/components.ts",
+    "./experimental-components": "./exports/experimental-components.ts",
     "./experimental-details-page": "./exports/details-page.ts",
     "./i18n": "./exports/i18n.ts",
     "./locals": "./src/i18n/locals.ts",
@@ -29,7 +30,8 @@
     "./pages/RootRoute.astro": "./src/pages/RootRoute.astro",
     "./pages/SearchPageRoute.astro": "./src/pages/search-page/SearchPageRoute.astro",
     "./pages/DetailsPageRoute.astro": "./src/pages/details-page/DetailsPageRoute.astro",
-    "./pages/api/search.ts": "./src/pages/api/search.ts"
+    "./pages/api/search.ts": "./src/pages/api/search.ts",
+    "./pages/api/versions.ts": "./src/pages/api/versions.ts"
   },
   "peerDependencies": {
     "astro": "^5.1.0",
@@ -38,25 +40,31 @@
     "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
+    "@astrojs/react": "^4.3.0",
+    "@astrojs/tailwind": "^6.0.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@astrojs/react": "^4.1.0",
-    "@astrojs/tailwind": "^6.0.0",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
+    "embla-carousel": "^8.6.0",
+    "embla-carousel-auto-height": "^8.6.0",
+    "embla-carousel-wheel-gestures": "^8.0.2",
     "fuse.js": "^7.1.0",
     "i18next": "^25.3.2",
-    "marked": "^16.0.0",
-    "yaml": "^2.8.0"
+    "marked": "^16.1.2",
+    "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "typescript": "^5.5.3",
-    "@types/react": "^19.1.8",
-    "@playwright/test": "^1.53.2",
-    "@types/node": "^22.16.2",
+    "@playwright/test": "^1.54.2",
+    "@types/node": "^22.17.0",
+    "@types/react": "^19.1.9",
+    "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   },
+  "engines": {
+    "node": ">=22"
+  },
   "scripts": {
     "test": "vitest",
     "e2e": "playwright install --with-deps chromium && playwright test"

package/src/astro-integration/integration.ts

@@ -51,6 +51,12 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
           prerender: true,
         })
 
+        injectRoute({
+          pattern: "/api/versions.json",
+          entrypoint: "lightnet/pages/api/versions.ts",
+          prerender: true,
+        })
+
         injectRoute({
           pattern: "/[locale]/media/[mediaId]",
           entrypoint: "lightnet/pages/DetailsPageRoute.astro",

package/src/components/CarouselSection.astro

@@ -0,0 +1,182 @@
+---
+import Icon from "./Icon"
+import Section, { type Props as SectionProps } from "./Section.astro"
+
+type Props = SectionProps
+
+const { titleClass = "", ...props } = Astro.props
+const { t, direction } = Astro.locals.i18n
+---
+
+<Section {...props} titleClass={"!mb-8 sm:!-mb-1 " + titleClass}>
+  <ln-carousel data-direction={direction} aria-roledescription="carousel">
+    <div class="mb-2 hidden justify-end gap-1 sm:flex">
+      <button
+        data-button-prev
+        aria-label={t("ln.previous")}
+        class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-200 bg-gray-200 text-gray-600 transition-colors ease-in-out hover:border-gray-400 disabled:bg-transparent disabled:text-gray-300 disabled:hover:border-gray-200"
+        ><Icon
+          className="mdi--chevron-left"
+          ariaLabel=""
+          flipIcon={direction === "rtl"}
+        /></button
+      >
+      <button
+        data-button-next
+        aria-label={t("ln.next")}
+        class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-200 bg-gray-200 text-gray-600 transition-colors ease-in-out hover:border-gray-400 disabled:bg-transparent disabled:text-gray-300 disabled:hover:border-gray-200"
+        ><Icon
+          className="mdi--chevron-right"
+          ariaLabel=""
+          flipIcon={direction === "rtl"}
+        /></button
+      >
+    </div>
+
+    <div data-carousel class="-m-4 overflow-hidden p-4">
+      <ol
+        class="flex items-end gap-4 md:gap-8"
+        aria-atomic="false"
+        aria-live="polite"
+        data-carousel-container
+      >
+        <slot />
+      </ol>
+    </div>
+  </ln-carousel>
+
+  <script>
+    import EmblaCarousel from "embla-carousel"
+    import AutoHeightPlugin from "embla-carousel-auto-height"
+    import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
+
+    class Carousel extends HTMLElement {
+      preloadIndex = 0
+
+      connectedCallback() {
+        const carouselNode = this.querySelector(
+          "[data-carousel]",
+        ) as HTMLElement
+        const direction = this.dataset.direction as "ltr" | "rtl"
+        const carousel = EmblaCarousel(
+          carouselNode,
+          {
+            slidesToScroll: "auto",
+            skipSnaps: true,
+            direction,
+          },
+          [AutoHeightPlugin(), WheelGesturesPlugin({ forceWheelAxis: "x" })],
+        )
+        const prevBtn = this.querySelector(
+          "[data-button-prev]",
+        ) as HTMLButtonElement
+        const nextBtn = this.querySelector(
+          "[data-button-next]",
+        ) as HTMLButtonElement
+
+        prevBtn.addEventListener("click", () => carousel.scrollPrev())
+        nextBtn.addEventListener("click", () => carousel.scrollNext())
+
+        const updateArrowButtons = () => {
+          if (carousel.canScrollPrev()) {
+            prevBtn.removeAttribute("disabled")
+          } else {
+            prevBtn.setAttribute("disabled", "disabled")
+          }
+
+          if (carousel.canScrollNext()) {
+            nextBtn.removeAttribute("disabled")
+          } else {
+            nextBtn.setAttribute("disabled", "disabled")
+          }
+        }
+        carousel
+          .on("init", updateArrowButtons)
+          .on("select", updateArrowButtons)
+          .on("reInit", updateArrowButtons)
+
+        // when images are set to loading=lazy, safari and
+        // firefox fail to preload them before they are
+        // visible. We improve the browser heuristics
+        // by setting the next chunk of images to load
+        // eagerly.
+        const slideNodes =
+          this.querySelector("[data-carousel-container]")?.children ?? []
+        const preloadNextSlides = () => {
+          const slidesInView = carousel.slidesInView()
+          slidesInView.forEach((slideIndex) => {
+            const preloadIndex = slideIndex + slidesInView.length
+            if (preloadIndex > this.preloadIndex) {
+              this.preloadIndex = preloadIndex
+              const node = slideNodes[preloadIndex]
+              node?.querySelectorAll("img").forEach((img) => {
+                img.loading = "eager"
+              })
+            }
+          })
+        }
+
+        // start preloading once the carousel enters the viewport
+        const observer = new IntersectionObserver(([target]) => {
+          if (!target.isIntersecting) {
+            return
+          }
+          preloadNextSlides()
+          carousel.on("slidesInView", () => preloadNextSlides())
+          observer.unobserve(target.target)
+        })
+        observer.observe(carouselNode)
+      }
+    }
+    customElements.define("ln-carousel", Carousel)
+  </script>
+</Section>
+<style is:global>
+  .carousel-item--wide {
+    flex: 0 0 auto;
+    /* 1 column + part of the next */
+    width: 85%;
+  }
+
+  .carousel-item--narrow {
+    flex: 0 0 auto;
+    /* 2 columns + part of the next */
+    width: calc((100% - 1rem) / 2.3);
+  }
+
+  /* sm */
+  @media (min-width: 640px) {
+    .carousel-item--wide {
+      /* 2 columns */
+      width: calc((100% - 1rem) / 2);
+    }
+    .carousel-item--narrow {
+      /* 3 columns */
+      width: calc((100% - 2rem) / 3);
+    }
+  }
+
+  /* md */
+  @media (min-width: 768px) {
+    .carousel-item--wide {
+      /* 3 columns */
+      width: calc((100% - 4rem) / 3);
+    }
+    .carousel-item--narrow {
+      /* 4 columns */
+      width: calc((100% - 6rem) / 4);
+    }
+  }
+
+  /* lg */
+  @media (min-width: 1024px) {
+    .carousel-item--wide {
+      /* 4 columns */
+      width: calc((100% - 6rem) / 4);
+    }
+    .carousel-item--narrow {
+      /* 5 columns */
+      width: calc((100% - 8rem) / 5);
+    }
+  }
+</style>

package/src/components/CategoriesSection.astro

@@ -4,15 +4,16 @@ import { Image } from "astro:assets"
 
 import { getUsedCategories } from "../content/get-categories"
 import { searchPagePath } from "../utils/paths"
-import Section from "./Section.astro"
+import CarouselSection from "./CarouselSection.astro"
+import Section, { type Props as SectionProps } from "./Section.astro"
 
-interface Props {
-  title?: string
-  layout?: "button-grid" | "image-grid"
+type Props = SectionProps & {
+  layout?: "grid" | "carousel"
 }
 
-const { title, layout = "button-grid" } = Astro.props
+const { title, layout = "carousel", ...props } = Astro.props
 const { t, currentLocale } = Astro.locals.i18n
+const resolvedTitle = title ?? t("ln.categories")
 
 const categories = await getUsedCategories(currentLocale, t)
 type Category = (typeof categories)[number]
@@ -20,8 +21,8 @@ type Category = (typeof categories)[number]
 function getImage({ image, id }: Category) {
   if (!image) {
     throw new AstroError(
-      `The CategorySection with layout="image-grid" requires an image for category "${id}".`,
-      `To resolve this issue, either change the layout to "button-grid" or provide an image path in /src/content/categories/${id}.json.`,
+      `Expected an image for category "${id}".`,
+      `To resolve this issue, provide a valid image path in /src/content/categories/${id}.json.`,
     )
   }
   return image
@@ -29,40 +30,27 @@ function getImage({ image, id }: Category) {
 ---
 
 {
-  categories.length && (
-    <Section title={title ?? t("ln.categories")}>
-      {layout === "button-grid" && (
-        <ul class="grid w-full grid-cols-2 flex-wrap gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-          {categories.map((category) => (
-            <li class="grow">
-              <a
-                class="flex h-20 w-full items-center justify-center rounded-2xl bg-gray-200 p-3 text-gray-600 shadow-sm transition-colors ease-in-out hover:bg-gray-300"
-                href={searchPagePath(currentLocale, {
-                  category: category.id,
-                })}
+  !!categories.length && layout === "grid" && (
+    <Section {...props} title={resolvedTitle}>
+      <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
+        {categories.map((category) => (
+          <li class="h-full">
+            <a
+              href={searchPagePath(currentLocale, { category: category.id })}
+              class="group flex h-full flex-col gap-3"
+            >
+              <div
+                class="relative overflow-hidden rounded-2xl shadow-md outline-2 outline-gray-400 transition-colors duration-75 ease-in-out sm:group-hover:outline"
+                class:list={[
+                  !category.image && "h-full min-h-28 w-full bg-gray-300",
+                ]}
               >
-                <div class="line-clamp-3 overflow-hidden text-balance text-center text-xs font-bold">
-                  {category.name}
-                </div>
-              </a>
-            </li>
-          ))}
-        </ul>
-      )}
-      {layout === "image-grid" && (
-        <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
-          {categories.map((category) => (
-            <li>
-              <a
-                href={searchPagePath(currentLocale, { category: category.id })}
-                class="group flex flex-col gap-3"
-              >
-                <div class="relative overflow-hidden rounded-md shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline">
+                {category.image && (
                   <Image
-                    class="h-full w-full object-contain"
+                    class="h-full w-full bg-gray-500 object-contain"
                     src={getImage(category)}
                     alt=""
-                    widths={[256, 512, 768, 1024]}
+                    widths={[128, 256, 388, 512, 768]}
                     sizes={
                       "(max-width: 640px) calc(calc(100vw - 3.5rem ) / 2), " +
                       "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
@@ -71,17 +59,78 @@ function getImage({ image, id }: Category) {
                       "217px"
                     }
                   />
-                  <div class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t from-black/80 via-black/35 via-30% to-transparent to-65% p-4 text-gray-50">
-                    <span class="line-clamp-3 text-balance font-bold">
-                      {category.name}
-                    </span>
-                  </div>
+                )}
+
+                <div
+                  class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
+                  class:list={[
+                    category.image
+                      ? "from-black/80 via-black/30 via-50% to-transparent"
+                      : "from-black/35 to-transparent",
+                  ]}
+                >
+                  <span class="line-clamp-3 select-none text-balance font-bold">
+                    {category.name}
+                  </span>
                 </div>
-              </a>
-            </li>
-          ))}
-        </ol>
-      )}
+              </div>
+            </a>
+          </li>
+        ))}
+      </ol>
     </Section>
   )
 }
+{
+  !!categories.length && layout === "carousel" && (
+    <CarouselSection {...props} title={resolvedTitle}>
+      {categories.map((category) => (
+        <li
+          class="carousel-item--narrow h-full"
+          role="group"
+          aria-roledescription="slide"
+        >
+          <a
+            href={searchPagePath(currentLocale, { category: category.id })}
+            class="group flex h-full flex-col gap-3"
+          >
+            <div
+              class="relative overflow-hidden rounded-2xl shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              class:list={[
+                !category.image && "h-full min-h-28 w-full bg-gray-300",
+              ]}
+            >
+              {category.image && (
+                <Image
+                  class="h-full w-full bg-gray-300 object-contain"
+                  src={getImage(category)}
+                  alt=""
+                  widths={[128, 256, 388, 512, 768]}
+                  sizes={
+                    "(max-width: 640px) calc(calc(100vw - 3rem ) / 2.3), " +
+                    "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
+                    "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
+                    "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
+                    "217px"
+                  }
+                />
+              )}
+              <div
+                class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
+                class:list={[
+                  category.image
+                    ? "from-black/80 via-black/30 via-50% to-transparent"
+                    : "from-black/35 to-transparent",
+                ]}
+              >
+                <span class="line-clamp-3 select-none text-balance font-bold">
+                  {category.name}
+                </span>
+              </div>
+            </div>
+          </a>
+        </li>
+      ))}
+    </CarouselSection>
+  )
+}

package/src/components/MediaGallery.astro

@@ -81,7 +81,7 @@ const items = itemsInput.filter((item) => !!item)
 {
   (layout === "video" || layout === "landscape") && (
     <ol
-      class="grid grid-cols-1 justify-between gap-x-7 gap-y-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4 xl:grid-cols-4"
+      class="grid grid-cols-1 justify-between gap-x-7 gap-y-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4"
       class:list={[layout === "landscape" && "items-end"]}
     >
       {items.map((item) => (

package/src/components/SearchInput.astro

@@ -11,6 +11,7 @@ const { t } = Astro.locals.i18n
 <form
   action={`/${Astro.currentLocale}/media`}
   method="get"
+  role="search"
   class="dy-join group w-full rounded-2xl shadow-md outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
   class:list={[Astro.props.className]}
 >

package/src/components/SearchSection.astro

@@ -3,12 +3,17 @@ 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">;
+type Props = Omit<SectionProps, "maxWidth">
+
+const { className = "", titleClass = "", ...props } = Astro.props
 ---
 
-<Section {...Astro.props} disableHorizontalPadding={true} maxWidth="narrow">
+<Section
+  {...props}
+  className={"px-0 md:px-0 " + className}
+  titleClass={"px-4 md:px-8 " + titleClass}
+  maxWidth="narrow"
+>
   <div class="px-4 md:px-8">
     <SearchFilter />
   </div>

package/src/components/Section.astro

@@ -1,4 +1,6 @@
 ---
+import Icon from "./Icon"
+
 export interface Props {
   /**
    * Id to set to the section element.
@@ -21,30 +23,35 @@ export 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.
    */
   title?: string
+  /**
+   * A link to add to the section title. This link can be used to show
+   * more content related to the section.
+   *
+   * The link will not be transformed. You need to make sure to prepend the current locale.
+   */
+  titleHref?: string
   /**
    * Css classes to set to the section element.
    */
   className?: string
+  /**
+   * Css classes to set to the title element.
+   */
+  titleClass?: string
 }
 
 const {
   id,
   maxWidth = "wide",
   marginTop = "lg",
-  disableHorizontalPadding = false,
+  titleHref,
   title,
   className,
+  titleClass,
 } = Astro.props
 
 const maxWidths = {
@@ -60,22 +67,29 @@ const marginTopValues = {
 ---
 
 <section
-  class="mx-auto"
-  class:list={[
-    maxWidths[maxWidth],
-    marginTopValues[marginTop],
-    !disableHorizontalPadding && "px-4 md:px-8",
-    className,
-  ]}
+  class="mx-auto px-4 md:px-8"
+  class:list={[maxWidths[maxWidth], marginTopValues[marginTop], className]}
   id={id}
+  aria-label={title}
 >
   {
     title && (
       <h2
         class="mb-10 text-balance text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
-        class:list={[disableHorizontalPadding && "px-4 md:px-8"]}
+        class:list={[titleClass]}
       >
-        {title}
+        {titleHref ? (
+          <a href={titleHref} class="group flex items-center">
+            {title}
+            <Icon
+              className="mdi--chevron-right group-hover:text-primary transition-colors ease-in-out duration-75 text-4xl sm:text-5xl -ms-2"
+              ariaLabel=""
+              flipIcon={Astro.locals.i18n.direction === "rtl"}
+            />
+          </a>
+        ) : (
+          <>{title}</>
+        )}
       </h2>
     )
   }

package/src/content/get-categories.ts

@@ -68,6 +68,6 @@ function parseCategory(item: unknown) {
     categoryEntrySchema,
     item,
     (id) => `Invalid category: ${id}`,
-    (id) => `Fix these issues inside "src/content/category/${id}.json":`,
+    (id) => `Fix these issues inside "src/content/categories/${id}.json":`,
   )
 }

package/src/i18n/translations/README.md

@@ -8,7 +8,7 @@ Check the [translation status](TRANSLATION-STATUS.md) for an overview of complet
 Have you translated LightNet into a new language? Have you fixed a incorrect translation? Great! How about sharing
 your work with others, by adding it to this folder?
 
-This are the ways how you can contribute your translations:
+These are the ways you can contribute your translations:
 
 - [Open a GitHub pull-request](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project), if you are a git-native. 🤓
 - [Use the translation-update form](https://github.com/LightNetDev/LightNet/issues/new?template=---03-translations-update.yml) to share your work. ⭐️

package/src/i18n/translations/ar.yml

@@ -6,6 +6,8 @@ ln.categories: الفئات
 ln.language: اللغة
 ln.languages: اللغات
 ln.type: النوع
+ln.previous: السابق
+ln.next: التالي
 ln.external-link: رابط خارجي
 ln.search.title: بحث
 ln.search.placeholder: ابحث في الوسائط

package/src/i18n/translations/bn.yml

@@ -6,6 +6,8 @@ ln.categories: বিভাগসমূহ
 ln.language: ভাষা
 ln.languages: ভাষাসমূহ
 ln.type: ধরন
+ln.previous: পূর্ববর্তী
+ln.next: পরবর্তী
 ln.external-link: বহিরাগত লিঙ্ক
 ln.search.title: অনুসন্ধান
 ln.search.placeholder: মিডিয়া অনুসন্ধান করুন

package/src/i18n/translations/de.yml

@@ -5,6 +5,8 @@ ln.category: Kategorie
 ln.language: Sprache
 ln.languages: Sprachen
 ln.type: Typ
+ln.previous: Zurück
+ln.next: Weiter
 ln.external-link: Externer Link
 ln.details.open: Öffnen
 ln.details.part-of-collection: Teil der Sammlung

package/src/i18n/translations/en.yml

@@ -48,6 +48,18 @@ ln.languages: Languages
 # Used on: https://sk8-ministries.pages.dev/en/media
 ln.type: Type
 
+# Accessibility label for buttons to show the previous items.
+# This is used on the carousel arrow button.
+#
+# English: Previous
+ln.previous: Previous
+
+# Accessibility label for buttons to show the next items.
+# This is used on the carousel arrow button.
+#
+# English: Next
+ln.next: Next
+
 # Accessibility label for an external link.
 # This is only "visible" to a screen-reader.
 #

package/src/i18n/translations/es.yml

@@ -6,6 +6,8 @@ ln.categories: Categorías
 ln.language: Idioma
 ln.languages: Idiomas
 ln.type: Tipo
+ln.previous: Anterior
+ln.next: Siguiente
 ln.external-link: Enlace externo
 ln.search.title: Buscar
 ln.search.placeholder: Buscar medios

package/src/i18n/translations/fi.yml

@@ -6,6 +6,8 @@ ln.categories: Kategoriat
 ln.language: Kieli
 ln.languages: Kielet
 ln.type: Mediatyyppi
+ln.previous: Edellinen
+ln.next: Seuraava
 ln.external-link: Ulkoinen linkki
 ln.search.title: Haku
 ln.search.placeholder: Hae mediaa

package/src/i18n/translations/fr.yml

@@ -6,6 +6,8 @@ ln.categories: Catégories
 ln.language: Langue
 ln.languages: Langues
 ln.type: Type
+ln.previous: Précédent
+ln.next: Suivant
 ln.external-link: Lien externe
 ln.search.title: Recherche
 ln.search.placeholder: Rechercher des médias

package/src/i18n/translations/hi.yml

@@ -6,6 +6,8 @@ ln.categories: श्रेणियाँ
 ln.language: भाषा
 ln.languages: भाषाएँ
 ln.type: प्रकार
+ln.previous: पिछला
+ln.next: अगला
 ln.external-link: बाहरी लिंक
 ln.search.title: खोज
 ln.search.placeholder: मीडिया खोजें

package/src/i18n/translations/pt.yml

@@ -6,6 +6,8 @@ ln.categories: Categorias
 ln.language: Idioma
 ln.languages: Idiomas
 ln.type: Tipo
+ln.previous: Anterior
+ln.next: Seguinte
 ln.external-link: Ligação externa
 ln.search.title: Pesquisa
 ln.search.placeholder: Pesquisar conteúdos

package/src/i18n/translations/ru.yml

@@ -6,6 +6,8 @@ ln.categories: Категории
 ln.language: Язык
 ln.languages: Языки
 ln.type: Тип
+ln.previous: Предыдущий
+ln.next: Следующий
 ln.external-link: Внешняя ссылка
 ln.search.title: Поиск
 ln.search.placeholder: Поиск медиа

package/src/i18n/translations/uk.yml

@@ -6,6 +6,8 @@ ln.categories: Категорії
 ln.language: Мова
 ln.languages: Мови
 ln.type: Тип
+ln.previous: Попередній
+ln.next: Наступний
 ln.external-link: Зовнішнє посилання
 ln.search.title: Пошук
 ln.search.placeholder: Пошук медіа

package/src/i18n/translations/zh.yml

@@ -6,6 +6,8 @@ ln.categories: 分类
 ln.language: 语言
 ln.languages: 语言
 ln.type: 类型
+ln.previous: 上一个
+ln.next: 下一个
 ln.external-link: 外部链接
 ln.search.title: 搜索
 ln.search.placeholder: 搜索媒体…

package/src/i18n/translations.ts

@@ -64,6 +64,8 @@ export type LightNetTranslationKey =
   | "ln.languages"
   | "ln.external-link"
   | "ln.type"
+  | "ln.previous"
+  | "ln.next"
   | "ln.details.open"
   | "ln.details.share"
   | "ln.details.part-of-collection"

package/src/layouts/Page.astro

@@ -1,5 +1,4 @@
 ---
-import { ClientRouter } from "astro:transitions"
 import CustomFooter from "virtual:lightnet/components/CustomFooter"
 import CustomHead from "virtual:lightnet/components/CustomHead"
 import config from "virtual:lightnet/config"
@@ -8,6 +7,7 @@ import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
 import Header from "./components/Header.astro"
 import PreloadReact from "./components/PreloadReact"
+import ViewTransition from "./components/ViewTransition.astro"
 
 interface Props {
   title?: string
@@ -32,10 +32,9 @@ const language = resolveLanguage(currentLocale)
     {config.manifest && <link rel="manifest" href={config.manifest} />}
     <link rel="prefetch" href="/api/search.json" />
     <Favicon />
-    <ClientRouter />
+    <ViewTransition />
   </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/Header.astro

@@ -3,10 +3,7 @@ import PageNavigation from "./PageNavigation.astro"
 import PageTitle from "./PageTitle.astro"
 ---
 
-<header
-  class="fixed top-0 z-50 h-14 w-full bg-white shadow-lg sm:h-20"
-  transition:animate="none"
->
+<header class="fixed top-0 z-50 h-14 w-full bg-white shadow-lg sm:h-20">
   <div class="mx-auto flex h-full max-w-screen-xl justify-between px-4 md:px-8">
     <PageTitle />
     <PageNavigation />

package/src/layouts/components/ViewTransition.astro

@@ -0,0 +1,9 @@
+---
+
+---
+
+<style is:global>
+  @view-transition {
+    navigation: auto;
+  }
+</style>

package/src/pages/api/versions.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro"
+
+import pkg from "../../../package.json" assert { type: "json" }
+
+export const GET: APIRoute = () => {
+  return new Response(JSON.stringify({ lightnet: pkg.version }))
+}

package/src/pages/details-page/components/AudioPanel.astro

@@ -42,32 +42,23 @@ if (!content.length) {
   }
 </ol>
 <script>
-  document.addEventListener("astro:after-swap", () => {
-    initAudioPanel()
-  })
-  initAudioPanel()
-  function initAudioPanel() {
-    const audioPanel = document.getElementById("audio-panel")
-    if (!audioPanel) {
-      return
-    }
-    const audios = Array.from(audioPanel.querySelectorAll("audio"))
-
-    audios.forEach((audio, index) => {
-      audio.addEventListener("play", () => {
-        audios.forEach((otherAudio) => {
-          if (otherAudio !== audio) {
-            otherAudio.pause()
-          }
-        })
-      })
+  const audioPanel = document.getElementById("audio-panel")
+  const audios = Array.from(audioPanel?.querySelectorAll("audio") ?? [])
 
-      audio.addEventListener("ended", () => {
-        const nextAudio = audios[index + 1]
-        if (nextAudio) {
-          nextAudio.play()
+  audios.forEach((audio, index) => {
+    audio.addEventListener("play", () => {
+      audios.forEach((otherAudio) => {
+        if (otherAudio !== audio) {
+          otherAudio.pause()
         }
       })
     })
-  }
+
+    audio.addEventListener("ended", () => {
+      const nextAudio = audios[index + 1]
+      if (nextAudio) {
+        nextAudio.play()
+      }
+    })
+  })
 </script>

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

@@ -22,37 +22,25 @@ interface Props {
   </div>
 </div>
 <script>
-  document.addEventListener("astro:after-swap", () => {
-    initShareButton()
-  })
-  initShareButton()
-
-  function initShareButton() {
-    const btn = document.querySelector("#share-btn")
-    if (!btn) {
-      return
+  const btn = document.querySelector("#share-btn")
+  btn?.addEventListener("click", () => {
+    if (navigator.share) {
+      navigator
+        .share({
+          url: window.location.href,
+        })
+        .catch((e) => console.debug("Could not share", e))
+    } else {
+      navigator.clipboard
+        .writeText(window.location.href)
+        .then(() => {
+          const toast = document.querySelector<HTMLElement>("#share-success")!
+          toast.style.opacity = "100%"
+          setTimeout(() => {
+            toast.style.opacity = "0%"
+          }, 3000)
+        })
+        .catch((error) => console.log("Error copying URL to clipboard:", error))
     }
-    btn?.addEventListener("click", () => {
-      if (navigator.share) {
-        navigator
-          .share({
-            url: window.location.href,
-          })
-          .catch((e) => console.debug("Could not share", e))
-      } else {
-        navigator.clipboard
-          .writeText(window.location.href)
-          .then(() => {
-            const toast = document.querySelector<HTMLElement>("#share-success")!
-            toast.style.opacity = "100%"
-            setTimeout(() => {
-              toast.style.opacity = "0%"
-            }, 3000)
-          })
-          .catch((error) =>
-            console.log("Error copying URL to clipboard:", error),
-          )
-      }
-    })
-  }
+  })
 </script>

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

@@ -33,7 +33,6 @@ export default function SearchList({
   const listRef = useRef<HTMLDivElement | null>(null)
   const [rowHeight, setRowHeight] = useState(256)
   const { results, isLoading } = useSearch({
-    currentLocale,
     categories,
     languages,
     mediaTypes,

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

@@ -4,29 +4,13 @@ import { useEffect, useMemo, useRef, useState } from "react"
 import type { SearchItem, SearchResponse } from "../../api/search-response"
 import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
-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({
-  currentLocale,
-  categories,
-  mediaTypes,
-  languages,
-}: Context) {
+export function useSearch({ categories, mediaTypes, languages }: Context) {
   const fuse = useRef<Fuse<SearchItem>>(undefined)
   const [allItems, setAllItems] = useState<SearchItem[]>([])
   const [isLoading, setIsLoading] = useState(true)
@@ -83,27 +67,12 @@ export function useSearch({
           ignoreLocation: true,
         })
         setAllItems(items)
-        window.lnSearchState = {
-          locale: currentLocale,
-          items,
-          fuse: fuse.current,
-        }
       } catch (error) {
         console.error(error)
       }
       setIsLoading(false)
     }
-    // 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()
-    }
+    fetchData()
     return removeSearchQueryObserver
   }, [])
 

package/src/utils/paths.ts

@@ -21,12 +21,26 @@ export function detailsPagePath(
  */
 export function searchPagePath(
   locale: string | undefined,
-  filter?: { category: string },
+  filter?: {
+    category?: string
+    language?: string
+    search?: string
+    type?: string
+  },
 ) {
   const searchParams = new URLSearchParams()
   if (filter?.category) {
     searchParams.append("category", filter.category)
   }
+  if (filter?.language) {
+    searchParams.append("language", filter.language)
+  }
+  if (filter?.search) {
+    searchParams.append("search", filter.search)
+  }
+  if (filter?.type) {
+    searchParams.append("type", filter.type)
+  }
   const query = searchParams.size ? `?${searchParams.toString()}` : ""
   return `/${locale}/media${query}`
 }