lightnet 3.8.1 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # lightnet
 
+## 3.9.0
+
+### Minor Changes
+
+- [#309](https://github.com/LightNetDev/LightNet/pull/309) [`5ea2c13`](https://github.com/LightNetDev/LightNet/commit/5ea2c139e52a20b951643530dd0a57e50ed04ad1) Thanks [@smn-cds](https://github.com/smn-cds)! - Media type config: Added `coverImageStyle`
+  - Introduced a new `coverImageStyle` option for media type configuration.
+  - Controls how cover images are rendered for media items.
+
+  Supported values:
+  - `"default"` — unmodified media item image (default)
+  - `"book"` — styled as a book cover (book fold, sharper edges)
+  - `"video"` — forced 16:9 aspect ratio, ⚠️ removed filling up with a black background but scale the image to cover the whole cover area.
+
+  #### Deprecation Notice
+
+  The existing `detailsPage.coverStyle` option is now deprecated and will be removed in a future major release. Use `coverImageStyle` instead.
+
+- [#309](https://github.com/LightNetDev/LightNet/pull/309) [`5ea2c13`](https://github.com/LightNetDev/LightNet/commit/5ea2c139e52a20b951643530dd0a57e50ed04ad1) Thanks [@smn-cds](https://github.com/smn-cds)! - `MediaGallerySection`: Added `carousel` layout option
+  - Introduced a new `viewLayout` prop for `MediaGallerySection`.
+  - Supported values:
+    - `"grid"` (default; existing behavior)
+    - `"carousel"` (new; renders items in a horizontal carousel)
+  - This change is **backwards-compatible**. Existing usages without `viewLayout` will continue to render as a grid.
+
+  ### Example
+
+  ```astro
+  <MediaGallerySection
+    title={t("x.home.our-latest-books")}
+    items={latestBooks}
+    layout="book"
+    viewLayout="carousel"
+  />
+  ```
+
+- [#309](https://github.com/LightNetDev/LightNet/pull/309) [`5ea2c13`](https://github.com/LightNetDev/LightNet/commit/5ea2c139e52a20b951643530dd0a57e50ed04ad1) Thanks [@smn-cds](https://github.com/smn-cds)! - Added Kazakh language.
+
+### Patch Changes
+
+- [#309](https://github.com/LightNetDev/LightNet/pull/309) [`5ea2c13`](https://github.com/LightNetDev/LightNet/commit/5ea2c139e52a20b951643530dd0a57e50ed04ad1) Thanks [@smn-cds](https://github.com/smn-cds)! - Improved page styling: shadows, spacing
+
 ## 3.8.1
 
 ### Patch Changes

package/README.md

@@ -1,37 +1,29 @@
 ![LightNet](https://github.com/LightNetDev/lightnet/blob/main/lightnet-banner.webp)
 
-Share the gospel and strengthen believers in your community.
+Many ministries struggle to share media content effectively. LightNet makes it easy to **run your own digital media library**, so more people can find what they need and grow in faith.
 
-LightNet makes it easy to **run your own digital media library**, so more people can find what they need and grow in faith.
-
-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.
+Built as an integration for the [Astro framework](https://astro.build), LightNet creates fast, static sites that run anywhere.
 
 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
-```
+## 🚀 Launch your own library
 
-This will set up the demo site that you can customize and expand to meet your community’s needs.
+Quickly launch your own media library with LightNet. [Follow the getting started guide](https://docs.lightnet.community/start-here/getting-started/) to spin up a template, then customize and expand it to fit your community’s needs.
 
-## Documentation
+## 🌍 Real-world example
 
-Need help? [Explore the LightNet developer docs](https://docs.lightnet.community) for everything you need to get started and make the most of LightNet.
+Curious what LightNet looks like in action? [Check out the MediaWorks digital library](https://library.mediaworks.global)
+to see how it powers a live site.
 
-## Showcase
+## 👀 Want to learn more?
 
-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.
+Take a look at the [LightNet developer docs](https://docs.lightnet.community).
 
-## Contributing
+## 🤝 Contributing
 
-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!
+Got ideas or improvements? We’d love your help! [See the contribution guide](https://github.com/LightNetDev/lightnet/blob/main/CONTRIBUTING.md) to get started.
 
-## License
+## 📄 License
 
-LightNet is licensed under the MIT License. See the full details in the [LICENSE](https://github.com/LightNetDev/lightnet/blob/main/LICENSE) file.
+LightNet uses the MIT License. You can read 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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.13.3_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.48.1_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.13.3_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.48.1_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.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"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.13.3_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.48.1_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.13.3_@types+node@24.3.0_jiti@2.4.2_lightningcss@1.29.1_rollup@4.48.1_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/package.json

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.3.0",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.2",
-    "astro": "^5.12.8",
-    "lightnet": "^3.8.0",
+    "astro": "^5.13.3",
+    "lightnet": "^3.9.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "sharp": "^0.34.3",

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.8.1",
+  "version": "3.9.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -48,17 +48,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",
+    "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.3.2",
-    "marked": "^16.1.2",
+    "i18next": "^25.4.2",
+    "marked": "^16.2.0",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
-    "@playwright/test": "^1.54.2",
-    "@types/node": "^22.17.0",
-    "@types/react": "^19.1.9",
+    "@playwright/test": "^1.55.0",
+    "@types/node": "^22.18.0",
+    "@types/react": "^19.1.11",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   },

package/src/components/CarouselSection.astro

@@ -47,7 +47,6 @@ const { t, direction } = Astro.locals.i18n
 
   <script>
     import EmblaCarousel from "embla-carousel"
-    import AutoHeightPlugin from "embla-carousel-auto-height"
     import { WheelGesturesPlugin } from "embla-carousel-wheel-gestures"
 
     class Carousel extends HTMLElement {
@@ -65,7 +64,7 @@ const { t, direction } = Astro.locals.i18n
             skipSnaps: true,
             direction,
           },
-          [AutoHeightPlugin(), WheelGesturesPlugin({ forceWheelAxis: "x" })],
+          [WheelGesturesPlugin({ forceWheelAxis: "x" })],
         )
         const prevBtn = this.querySelector(
           "[data-button-prev]",
@@ -78,6 +77,14 @@ const { t, direction } = Astro.locals.i18n
         nextBtn.addEventListener("click", () => carousel.scrollNext())
 
         const updateArrowButtons = () => {
+          if (!carousel.canScrollPrev() && !carousel.canScrollNext()) {
+            prevBtn.style.visibility = "hidden"
+            nextBtn.style.visibility = "hidden"
+          } else {
+            prevBtn.style.visibility = "visible"
+            nextBtn.style.visibility = "visible"
+          }
+
           if (carousel.canScrollPrev()) {
             prevBtn.removeAttribute("disabled")
           } else {

package/src/components/CategoriesSection.astro

@@ -40,7 +40,7 @@ function getImage({ image, id }: Category) {
               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="relative overflow-hidden rounded-2xl shadow-sm 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",
                 ]}
@@ -52,8 +52,8 @@ function getImage({ image, id }: Category) {
                     alt=""
                     widths={[128, 256, 388, 512, 768]}
                     sizes={
-                      "(max-width: 640px) calc(calc(100vw - 3.5rem ) / 2), " +
-                      "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
+                      "(max-width: 640px) calc(calc(100vw - 3rem ) / 2), " +
+                      "(max-width: 768px) calc(calc(100vw - 4rem ) / 3), " +
                       "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
                       "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
                       "217px"
@@ -86,18 +86,22 @@ function getImage({ image, id }: Category) {
     <CarouselSection {...props} title={resolvedTitle}>
       {categories.map((category) => (
         <li
-          class="carousel-item--narrow h-full"
+          class="carousel-item--narrow"
           role="group"
           aria-roledescription="slide"
+          class:list={[
+            /** Category cards without images should take the full height of other cards */
+            category.image ? "h-full" : "self-stretch",
+          ]}
         >
           <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="relative overflow-hidden rounded-2xl shadow-sm 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 && "min-h-28 w-full flex-1 bg-gray-300",
               ]}
             >
               {category.image && (

package/src/components/CoverImageDecorator.tsx

@@ -0,0 +1,29 @@
+import type { ReactNode } from "react"
+
+type ImageStyle = "default" | "book" | "video"
+
+type Props = {
+  children: ReactNode
+  style?: ImageStyle
+  className?: string
+}
+
+const containerClass: { [key in ImageStyle]: string } = {
+  default: "rounded-md",
+  book: "rounded-sm",
+  video: "rounded-md aspect-video",
+}
+
+export default function CoverImageDecorator(props: Props) {
+  const { children, style = "default", className = "" } = props
+  return (
+    <div
+      className={`relative overflow-hidden ${containerClass[style]} shadow-sm ${className}`}
+    >
+      {children}
+      {style === "book" && (
+        <span className="absolute start-[1%] top-0 h-full w-[2%] bg-gradient-to-r from-gray-500/20 to-transparent" />
+      )}
+    </div>
+  )
+}

package/src/components/MediaGallerySection.astro

@@ -1,9 +1,16 @@
 ---
 import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
 
-import MediaGallery from "./MediaGallery.astro"
+import { getMediaTypes } from "../content/get-media-types"
+import { detailsPagePath } from "../utils/paths"
+import CarouselSection from "./CarouselSection.astro"
+import CoverImageDecorator from "./CoverImageDecorator"
+import Icon from "./Icon"
 import Section, { type Props as SectionProps } from "./Section.astro"
 
+type ItemStyle = "book" | "video" | "portrait" | "landscape"
+
 type MediaItem = {
   id: string
   data: {
@@ -15,12 +22,150 @@ type MediaItem = {
 
 type Props = SectionProps & {
   items: (MediaItem | undefined)[]
-  layout: "book" | "video" | "portrait" | "landscape"
+  layout: ItemStyle
+  viewLayout?: "grid" | "carousel"
 }
 
-const { items, layout, ...sectionProps } = Astro.props
+const {
+  items: itemsInput,
+  layout: itemStyle,
+  viewLayout = "grid",
+  ...sectionProps
+} = Astro.props
+
+const t = Astro.locals.i18n.t
+
+const types = Object.fromEntries(
+  (await getMediaTypes()).map((type) => [
+    type.id,
+    { ...type.data, name: t(type.data.label) },
+  ]),
+)
+
+// We allow for undefined values because
+// this is in the return type of getEntry
+const items = itemsInput.filter((item) => !!item)
+
+const itemWidth = (
+  {
+    book: "narrow",
+    portrait: "narrow",
+    video: "wide",
+    landscape: "wide",
+  } as const
+)[itemStyle]
+
+const imageSizes = {
+  narrow:
+    // 2 columns
+    "(max-width: 640px) calc(calc(100vw - 3rem ) / 2), " +
+    // 3 columns
+    "(max-width: 768px) calc(calc(100vw - 4rem ) / 3), " +
+    // 4 columns
+    "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
+    // 5 columns
+    "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
+    // 5 columns - full size
+    "217px",
+  wide:
+    // 1 column
+    "(max-width: 640px) calc(calc(100vw - 2rem ) / 1), " +
+    // 2 columns
+    "(max-width: 768px) calc(calc(100vw - 3rem ) / 2), " +
+    // 3 columns
+    "(max-width: 1024px) calc(calc(100vw - 8rem ) / 3), " +
+    // 4 columns
+    "(max-width: 1280px) calc(calc(100vw - 10rem ) / 4), " +
+    // 5 columns - full size
+    "280px",
+} as const
+
+const gridLayouts = {
+  narrow: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
+  wide: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
+} as const
+
+const coverImageStyle =
+  (["book", "video"] as const).find((style) => itemStyle === style) ?? "default"
 ---
 
-<Section {...sectionProps}>
-  <MediaGallery items={items} layout={layout} />
-</Section>
+{
+  viewLayout === "grid" && (
+    <Section {...sectionProps}>
+      <ol
+        class="grid items-end justify-between gap-4 md:gap-8"
+        class:list={gridLayouts[itemWidth]}
+      >
+        {items.map((item) => (
+          <li>
+            <a
+              href={detailsPagePath(Astro.currentLocale, item)}
+              class="group flex flex-col gap-3"
+            >
+              <CoverImageDecorator
+                style={coverImageStyle}
+                className="outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              >
+                <Image
+                  class="h-full w-full object-cover"
+                  class:list={[itemStyle === "video" && "absolute top-0"]}
+                  src={item.data.image}
+                  alt=""
+                  widths={[128, 256, 512, 768]}
+                  sizes={imageSizes[itemWidth]}
+                />
+              </CoverImageDecorator>
+
+              <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
+                <Icon
+                  className={`${types[item.data.type.id].icon} me-2 align-bottom`}
+                  ariaLabel={types[item.data.type.id].name}
+                />
+                {item.data.title}
+              </span>
+            </a>
+          </li>
+        ))}
+      </ol>
+    </Section>
+  )
+}
+{
+  viewLayout === "carousel" && (
+    <CarouselSection {...sectionProps}>
+      {items.map((item) => (
+        <li
+          class={`carousel-item--${itemWidth} h-full`}
+          role="group"
+          aria-roledescription="slide"
+        >
+          <a
+            href={detailsPagePath(Astro.currentLocale, item)}
+            class="group flex h-full flex-col justify-end gap-3"
+          >
+            <CoverImageDecorator
+              style={coverImageStyle}
+              className="outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+            >
+              <Image
+                class="h-full w-full object-cover"
+                src={item.data.image}
+                alt=""
+                widths={[128, 256, 512, 768]}
+                sizes={imageSizes[itemWidth]}
+              />
+            </CoverImageDecorator>
+
+            <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
+              <Icon
+                className={`${types[item.data.type.id].icon} me-2 align-bottom`}
+                ariaLabel={types[item.data.type.id].name}
+              />
+              {item.data.title}
+            </span>
+          </a>
+        </li>
+      ))}
+    </CarouselSection>
+  )
+}

package/src/components/MediaList.astro

@@ -4,6 +4,7 @@ import { Image } from "astro:assets"
 
 import { getMediaTypes } from "../content/get-media-types"
 import { detailsPagePath } from "../utils/paths"
+import CoverImageDecorator from "./CoverImageDecorator"
 import Icon from "./Icon"
 
 type MediaItem = {
@@ -35,6 +36,7 @@ const mediaTypes = Object.fromEntries(
       id: type.id,
       name: t(type.data.label),
       icon: type.data.icon,
+      coverImageStyle: type.data.coverImageStyle,
     },
   ]),
 )
@@ -59,16 +61,24 @@ const mediaTypes = Object.fromEntries(
           tabindex={item.disabled ? -1 : 0}
         >
           <div class="flex h-32 w-32 shrink-0 flex-col items-start justify-center">
-            <Image
-              class="max-h-32 w-auto max-w-32 rounded-sm object-contain shadow-md"
-              src={item.data.image}
-              width={256}
-              alt=""
-            />
+            <CoverImageDecorator
+              style={mediaTypes[item.data.type.id].coverImageStyle}
+            >
+              <Image
+                class="max-h-32 w-auto max-w-32 object-cover"
+                class:list={[
+                  mediaTypes[item.data.type.id].coverImageStyle === "video" &&
+                    "aspect-video",
+                ]}
+                src={item.data.image}
+                width={256}
+                alt=""
+              />
+            </CoverImageDecorator>
           </div>
 
           <div
-            class="ms-5 flex grow flex-col justify-center sm:ms-8"
+            class="ms-4 flex grow flex-col justify-center sm:ms-6"
             lang={item.data.language}
           >
             <p class="mb-1 line-clamp-3 text-balance font-bold text-gray-700 md:mb-3">

package/src/components/SearchInput.astro

@@ -12,7 +12,7 @@ const { t } = Astro.locals.i18n
   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="dy-join group w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
   class:list={[Astro.props.className]}
 >
   <input

package/src/content/content-schema.ts

@@ -183,80 +183,111 @@ export const createCategorySchema = ({ image }: SchemaContext) =>
 /**
  * Media Type Schema
  */
-export const mediaTypeSchema = z.object({
-  /**
-   * Name of this media type that will be shown on the pages.
-   *
-   * This can either be a fixed string or a translation key.
-   *
-   * @example "media-type.book"
-   */
-  label: z.string(),
-  /**
-   * What media item details page to use for media items with this type.
-   *
-   */
-  detailsPage: z
-    .discriminatedUnion("layout", [
-      z.object({
-        /**
-         * Details page for all media types.
-         */
-        layout: z.literal("default"),
-        /**
-         * Label for the open action button. Use this if you want to change the text
-         * of the "Open" button to be more matching to your media item.
-         * For example you could change the text to be "Read" for a book media type.
-         *
-         * The label is a translation key.
-         *
-         * @example "ln.details.open"
-         */
-        openActionLabel: z.string().optional(),
-        /**
-         * What style to use for the cover image.
-         *
-         * @example "book"
-         */
-        coverStyle: z.enum(["default", "book"]).default("default"),
-      }),
-      z.object({
-        /**
-         * Custom details page.
-         */
-        layout: z.literal("custom"),
-        /**
-         * This references a custom component name to be used for the
-         * details page. The custom component has be located at src/details-pages/
-         *
-         * @example "MyArticleDetails.astro"
-         */
-        customComponent: z.string(),
-      }),
-      z.object({
-        /**
-         * Detail page for videos.
-         */
-        layout: z.literal("video"),
-      }),
-      z.object({
-        /**
-         * Detail page for audio files.
-         *
-         * This only supports mp3 files.
-         */
-        layout: z.literal("audio"),
-      }),
-    ])
-    .optional(),
-  /**
-   * Pick the media type's icon from https://pictogrammers.com/library/mdi/
-   * Prefix it's name with "mdi--"
-   *
-   * @example "mdi--ab-testing"
-   */
-  icon: z.string(),
-})
+export const mediaTypeSchema = z
+  .object({
+    /**
+     * Name of this media type that will be shown on the pages.
+     *
+     * This can either be a fixed string or a translation key.
+     *
+     * @example "media-type.book"
+     */
+    label: z.string(),
+    /**
+     * Defines how the cover image for a media item of this type is rendered.
+     *
+     * Options:
+     * - `"default"` — Renders the media item image with no modifications.
+     * - `"book"` — Adds a book fold effect and sharper edges, styled like a book cover.
+     * - `"video"` — Constrains the image to a 16:9 aspect ratio with a black background.
+     *
+     * @default "default"
+     */
+    coverImageStyle: z.enum(["default", "book", "video"]).default("default"),
+    /**
+     * What media item details page to use for media items with this type.
+     *
+     */
+    detailsPage: z
+      .discriminatedUnion("layout", [
+        z.object({
+          /**
+           * Details page for all media types.
+           */
+          layout: z.literal("default"),
+          /**
+           * Label for the open action button. Use this if you want to change the text
+           * of the "Open" button to be more matching to your media item.
+           * For example you could change the text to be "Read" for a book media type.
+           *
+           * The label is a translation key.
+           *
+           * @example "ln.details.open"
+           */
+          openActionLabel: z.string().optional(),
+          /**
+           * (Deprecated) Specifies the style of the cover image.
+           *
+           * Use `coverImageStyle` instead. This option will be removed in a future major release.
+           *
+           * Supported values:
+           * - `"default"` — unmodified media item image
+           * - `"book"` — styled as a book cover (book fold, sharper edges)
+           *
+           * @example "book"
+           * @deprecated Use `coverImageStyle` instead
+           */
+          coverStyle: z.enum(["default", "book"]).default("default"),
+        }),
+        z.object({
+          /**
+           * Custom details page.
+           */
+          layout: z.literal("custom"),
+          /**
+           * This references a custom component name to be used for the
+           * details page. The custom component has be located at src/details-pages/
+           *
+           * @example "MyArticleDetails.astro"
+           */
+          customComponent: z.string(),
+        }),
+        z.object({
+          /**
+           * Detail page for videos.
+           */
+          layout: z.literal("video"),
+        }),
+        z.object({
+          /**
+           * Detail page for audio files.
+           *
+           * This only supports mp3 files.
+           */
+          layout: z.literal("audio"),
+        }),
+      ])
+      .optional(),
+    /**
+     * Pick the media type's icon from https://pictogrammers.com/library/mdi/
+     * Prefix it's name with "mdi--"
+     *
+     * @example "mdi--ab-testing"
+     */
+    icon: z.string(),
+  })
+  .transform((mediaType) => {
+    // migrate old cover images style to new property
+    const hasDeprecatedBookCover =
+      mediaType.detailsPage?.layout === "default" &&
+      mediaType.detailsPage.coverStyle === "book"
+    return {
+      ...mediaType,
+      coverImageStyle: hasDeprecatedBookCover
+        ? "book"
+        : mediaType.coverImageStyle,
+    }
+  })
 
 export const LIGHTNET_COLLECTIONS = {
   categories: defineCollection({

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

@@ -34,6 +34,13 @@ All keys have been translated. ✅
 
 All keys have been translated. ✅
 
+## **KK** ([kk.yml](./kk.yml))
+
+Missing keys:
+
+- ln.previous
+- ln.next
+
 ## **PT** ([pt.yml](./pt.yml))
 
 All keys have been translated. ✅

package/src/i18n/translations/kk.yml

@@ -0,0 +1,22 @@
+ln.header.open-main-menu: Бастапқы мәзірді ашу
+ln.header.select-language: Тіл таңдау
+ln.home.title: Басты бет
+ln.category: Санат
+ln.categories: Барлық санаттар
+ln.language: Тіл
+ln.languages: Тілдер
+ln.type: Түрі
+ln.external-link: Сыртқы сілтеме
+ln.search.title: Іздеу
+ln.search.placeholder: Медиа іздеу
+ln.search.all-languages: Барлық тілдер
+ln.search.all-types: Барлық түрлер
+ln.search.all-categories: Барлық санаттар
+ln.search.no-results: Нәтижие жоқ
+ln.details.open: Ашу
+ln.details.share: Бөлісу
+ln.details.part-of-collection: Жинақ бөлімі
+ln.details.download: Жүктеу
+ln.share.url-copied-to-clipboard: Жүктеме көшірілді
+ln.404.page-not-found: Ештеңе табылмады
+ln.404.go-to-the-home-page: Бастапқы бетке өту

package/src/i18n/translations.ts

@@ -9,6 +9,7 @@ const builtInTranslations = {
   fi: () => import("./translations/fi.yml?raw"),
   fr: () => import("./translations/fr.yml?raw"),
   hi: () => import("./translations/hi.yml?raw"),
+  kk: () => import("./translations/kk.yml?raw"),
   pt: () => import("./translations/pt.yml?raw"),
   ru: () => import("./translations/ru.yml?raw"),
   uk: () => import("./translations/uk.yml?raw"),

package/src/layouts/components/Header.astro

@@ -3,7 +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">
+<header class="fixed top-0 z-50 h-14 w-full bg-white shadow-md 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/pages/details-page/AudioDetailsPage.astro

@@ -15,7 +15,7 @@ const { mediaId } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection thumbnailSize="md" mediaId={mediaId} />
+  <MainDetailsSection imageSize="md" mediaId={mediaId} />
   <AudioPanel mediaId={mediaId} className="mt-10" />
   <DescriptionSection mediaId={mediaId} />
   <ContentSection mediaId={mediaId} minimumItems={1} />

package/src/pages/details-page/DefaultDetailsPage.astro

@@ -9,15 +9,14 @@ import MoreDetailsSection from "./components/MoreDetailsSection.astro"
 
 export type Props = {
   mediaId: string
-  coverStyle?: "default" | "book"
   openActionLabel?: string
 }
 
-const { mediaId, coverStyle, openActionLabel = "ln.details.open" } = Astro.props
+const { mediaId, openActionLabel = "ln.details.open" } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection mediaId={mediaId} thumbnailStyle={coverStyle}>
+  <MainDetailsSection mediaId={mediaId}>
     <OpenButton
       className="mt-8"
       mediaId={mediaId}

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

@@ -1,22 +1,21 @@
 ---
 import Authors from "./main-details/Authors.astro"
+import CoverImage from "./main-details/CoverImage.astro"
 import ShareButton from "./main-details/ShareButton.astro"
-import Thumbnail from "./main-details/Thumbnail.astro"
 import Title from "./main-details/Title.astro"
 
 export type Props = {
   mediaId: string
-  thumbnailStyle?: "default" | "book"
-  thumbnailSize?: "md" | "lg"
+  imageSize?: "md" | "lg"
 }
 
-const { mediaId, thumbnailStyle, thumbnailSize } = Astro.props
+const { mediaId, imageSize } = Astro.props
 ---
 
 <div
   class="mx-auto mt-10 flex max-w-screen-md flex-col items-center gap-8 px-4 sm:mt-20 sm:flex-row sm:items-start sm:gap-14 md:px-8"
 >
-  <Thumbnail size={thumbnailSize} mediaId={mediaId} style={thumbnailStyle} />
+  <CoverImage size={imageSize} mediaId={mediaId} />
   <div class="flex w-full grow flex-col items-center sm:items-start">
     <Title className="text-center sm:text-start" mediaId={mediaId} />
     <Authors className="mt-2" mediaId={mediaId} />

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

@@ -33,7 +33,7 @@ const t = Astro.locals.i18n.t
   <h2 class="mb-1 text-xs font-bold uppercase text-gray-600 md:mb-2">
     {t("ln.details.part-of-collection")}
   </h2>
-  <h3 class="text-lg font-bold text-gray-700">
+  <h3 class="mb-6 text-lg font-bold text-gray-700 sm:mb-8">
     {t(collection.data.label)}
   </h3>
   <MediaList items={items} />

package/src/pages/details-page/components/main-details/{Thumbnail.astro → CoverImage.astro}

@@ -1,16 +1,18 @@
 ---
 import { Image } from "astro:assets"
 
+import CoverImageDecorator from "../../../../components/CoverImageDecorator"
 import { getMediaItem } from "../../../../content/get-media-items"
+import { getMediaType } from "../../../../content/get-media-types"
 
 interface Props {
   mediaId: string
-  style?: "default" | "book"
   size?: "md" | "lg"
 }
-const { mediaId, style = "default", size = "lg" } = Astro.props
+const { mediaId, size = "lg" } = Astro.props
 
 const item = await getMediaItem(mediaId)
+const type = await getMediaType(item.data.type.id)
 const image = item.data.image
 const isPortraitImage = image.height > image.width
 const imageSizes = {
@@ -25,10 +27,7 @@ const imageSizes = {
 }
 ---
 
-<div
-  class="relative shrink-0 overflow-hidden shadow-sm"
-  class:list={style === "book" ? "rounded-sm" : "rounded-md"}
->
+<CoverImageDecorator className="shrink-0" style={type.data.coverImageStyle}>
   <Image
     class:list={imageSizes[size].css}
     alt=""
@@ -39,9 +38,4 @@ const imageSizes = {
     loading="eager"
     fetchpriority="high"
   />
-  {
-    style === "book" && (
-      <span class="absolute start-[3px] top-0 h-full w-[4px] bg-gradient-to-r from-gray-500/20 to-transparent" />
-    )
-  }
-</div>
+</CoverImageDecorator>

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

@@ -20,6 +20,7 @@ const mediaTypes = Object.fromEntries(
     {
       name: t(type.data.label),
       icon: type.data.icon,
+      coverImageStyle: type.data.coverImageStyle,
     },
   ]),
 )

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

@@ -1,3 +1,4 @@
+import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
 import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../../api/search-response"
@@ -5,6 +6,7 @@ import type { SearchItem } from "../../api/search-response"
 export type MediaType = {
   name: string
   icon: string
+  coverImageStyle: "default" | "book" | "video"
 }
 
 export type TranslatedLanguage = {
@@ -31,6 +33,7 @@ export default function SearchListItem({
   showLanguage,
   mediaTypes,
 }: Props) {
+  const coverImageStyle = mediaTypes[item.type].coverImageStyle
   return (
     <a
       href={detailsPagePath(currentLocale, {
@@ -40,15 +43,17 @@ export default function SearchListItem({
       className="group flex h-52 overflow-hidden py-2 transition-colors ease-in-out sm:h-64 md:rounded-sm md:hover:bg-gray-100"
     >
       <div className="flex h-full w-36 shrink-0 flex-col items-start justify-center">
-        <img
-          className="max-h-36 w-auto max-w-36 rounded-sm object-contain shadow-md"
-          src={item.image.src}
-          width={item.image.width}
-          height={item.image.height}
-          alt=""
-          decoding="async"
-          loading="eager"
-        />
+        <CoverImageDecorator style={coverImageStyle}>
+          <img
+            className={`max-h-40 w-auto max-w-36 object-cover ${coverImageStyle === "video" ? "aspect-video" : ""}`}
+            src={item.image.src}
+            width={item.image.width}
+            height={item.image.height}
+            alt=""
+            decoding="async"
+            loading="eager"
+          />
+        </CoverImageDecorator>
       </div>
 
       <div className="ms-5 flex grow flex-col justify-center text-xs sm:ms-8">

package/src/components/MediaGallery.astro

@@ -1,124 +0,0 @@
----
-import type { ImageMetadata } from "astro"
-import { Image } from "astro:assets"
-
-import { getMediaTypes } from "../content/get-media-types"
-import { detailsPagePath } from "../utils/paths"
-import Icon from "./Icon"
-
-type MediaItem = {
-  id: string
-  data: {
-    title: string
-    type: { id: string }
-    image: ImageMetadata
-  }
-}
-
-const t = Astro.locals.i18n.t
-
-const types = Object.fromEntries(
-  (await getMediaTypes()).map((type) => [
-    type.id,
-    { ...type.data, name: t(type.data.label) },
-  ]),
-)
-
-interface Props {
-  items: (MediaItem | undefined)[]
-  layout: "book" | "video" | "portrait" | "landscape"
-}
-
-const { items: itemsInput, layout } = Astro.props
-// We allow users to pass undefined values because
-// this is in the return type of getEntry
-const items = itemsInput.filter((item) => !!item)
----
-
-{
-  (layout === "book" || layout === "portrait") && (
-    <ol class="grid grid-cols-2 items-end justify-between gap-x-7 gap-y-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
-      {items.map((item) => (
-        <li>
-          <a
-            href={detailsPagePath(Astro.currentLocale, item)}
-            class="group flex flex-col gap-3"
-          >
-            <div
-              class="relative overflow-hidden shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
-              class:list={layout === "book" ? "rounded-sm" : "rounded-md"}
-            >
-              <Image
-                class="h-full w-full object-contain"
-                src={item.data.image}
-                alt=""
-                widths={[256, 512, 768, 1024]}
-                sizes={
-                  "(max-width: 640px) calc(calc(100vw - 3.5rem ) / 2), " +
-                  "(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"
-                }
-              />
-              {layout === "book" && (
-                <span class="absolute start-[3px] top-0 h-full w-[4px] bg-gradient-to-r from-gray-500/20 to-transparent" />
-              )}
-            </div>
-            <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
-              <Icon
-                className={`${types[item.data.type.id].icon} me-2 align-bottom`}
-                ariaLabel={types[item.data.type.id].name}
-              />
-              {item.data.title}
-            </span>
-          </a>
-        </li>
-      ))}
-    </ol>
-  )
-}
-{
-  (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"
-      class:list={[layout === "landscape" && "items-end"]}
-    >
-      {items.map((item) => (
-        <li>
-          <a
-            href={detailsPagePath(Astro.currentLocale, item)}
-            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"
-              class:list={[layout === "video" && "aspect-video bg-gray-950"]}
-            >
-              <Image
-                class="h-full w-full object-contain"
-                class:list={[layout === "video" && "absolute top-0"]}
-                src={item.data.image}
-                alt=""
-                widths={[120, 160, 240, 320, 640]}
-                sizes={
-                  "(max-width: 640px) calc(calc(100vw - 2rem ) / 1), " +
-                  "(max-width: 768px) calc(calc(100vw - 3.5rem ) / 2), " +
-                  "(max-width: 1024px) calc(calc(100vw - 8.5rem ) / 3), " +
-                  "(max-width: 1280px) calc(calc(100vw - 10.5rem ) / 4), " +
-                  "280px"
-                }
-              />
-            </div>
-            <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
-              <Icon
-                className={`${types[item.data.type.id].icon} me-2 align-bottom`}
-                ariaLabel={types[item.data.type.id].name}
-              />
-              {item.data.title}
-            </span>
-          </a>
-        </li>
-      ))}
-    </ol>
-  )
-}