lightnet 3.6.1 → 3.8.0

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # 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
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - Improves support for media items with more than one audio file
+  - Audio details page shows embedded player for each mp3 inside the media item's content array
+  - Audio player stops playing a mp3 when the next is started
+  - Audio player resumes with next mp3 when one mp3 ends
+
+### Patch Changes
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - Reorganized dependencies
+
+  If you are using npm as the package manager, you can remove these
+  dependencies from your `package.json`.
+  - sharp
+  - @astrojs/react
+  - @astrojs/tailwind
+
+- [#288](https://github.com/LightNetDev/LightNet/pull/288) [`008553f`](https://github.com/LightNetDev/LightNet/commit/008553f7c016931b617ba2c632e0b473e32bad8d) Thanks [@smn-cds](https://github.com/smn-cds)! - ‼️ Breaking changes on experimental custom details page components
+  - Design of `ShareButton` has changed from a gray button to a underlined text
+  - `MainDetailsSection` now already contains the `ShareButton`
+
 ## 3.6.1
 
 ### Patch 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

@@ -2,13 +2,17 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 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/tailwind

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

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

@@ -2,7 +2,11 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 esac
 
 if [ -z "$NODE_PATH" ]; then

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

@@ -2,13 +2,17 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 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

@@ -2,13 +2,17 @@
 basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
 
 case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
 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.6.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.6.1",
+  "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,35 +30,41 @@
     "./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": {
-    "@astrojs/react": "^4.1.0",
-    "@astrojs/tailwind": "^6.0.0",
     "astro": "^5.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "sharp": "^0.33.4",
-    "tailwindcss": "^3.4.17",
-    "typescript": "^5.5.3"
+    "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",
     "@tailwindcss/typography": "^0.5.16",
     "@tanstack/react-virtual": "^3.13.12",
-    "@types/react": "^19.1.8",
     "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": {
-    "@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>