lightnet 3.5.0 → 3.6.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # lightnet
 
+## 3.6.1
+
+### Patch Changes
+
+- [#286](https://github.com/LightNetDev/LightNet/pull/286) [`4c3b137`](https://github.com/LightNetDev/LightNet/commit/4c3b13762357d63f486261ba8eb8202e666dfb55) Thanks [@NorthernMoodler](https://github.com/NorthernMoodler)! - Refine de, ru and uk language strings
+
+## 3.6.0
+
+### Minor Changes
+
+- [#280](https://github.com/LightNetDev/LightNet/pull/280) [`b7a9fea`](https://github.com/LightNetDev/LightNet/commit/b7a9fea1b599458838ae96866ee0910f93b6f56e) Thanks [@smn-cds](https://github.com/smn-cds)! - Feature: Category Image Grid Enhancement
+  - Introduced an optional `image` property for categories, allowing for enhanced visual representation.
+  - Updated the `CategorySection` component to support the display of category images.
+  - To utilize this feature, set the `layout` attribute to `image-grid`, enabling a visually appealing grid layout for category images.
+
+- [#275](https://github.com/LightNetDev/LightNet/pull/275) [`d4bc7d4`](https://github.com/LightNetDev/LightNet/commit/d4bc7d4888b1282d9809e2451f7d867961d2dc07) Thanks [@sayedtenkanen](https://github.com/sayedtenkanen)! - Add Finnish translation
+
+- [#281](https://github.com/LightNetDev/LightNet/pull/281) [`ed115b6`](https://github.com/LightNetDev/LightNet/commit/ed115b6a515cb22dfbf644103025c5ceb06cef1d) Thanks [@ajjn](https://github.com/ajjn)! - Add translation files for Arabic, Chinese, French, Spanish, Hindi, Bengali, and Portuguese
+
+- [#280](https://github.com/LightNetDev/LightNet/pull/280) [`b7a9fea`](https://github.com/LightNetDev/LightNet/commit/b7a9fea1b599458838ae96866ee0910f93b6f56e) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve MarkdownPage
+  - add rounded corners for images for more consistency with other images on LightNet
+  - add `className` property to apply your own classes to the component
+
+- [#280](https://github.com/LightNetDev/LightNet/pull/280) [`b7a9fea`](https://github.com/LightNetDev/LightNet/commit/b7a9fea1b599458838ae96866ee0910f93b6f56e) Thanks [@smn-cds](https://github.com/smn-cds)! - Add reusable SearchInput component
+
+### Patch Changes
+
+- [#280](https://github.com/LightNetDev/LightNet/pull/280) [`b7a9fea`](https://github.com/LightNetDev/LightNet/commit/b7a9fea1b599458838ae96866ee0910f93b6f56e) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve text wrap behavior for titles by setting `text-wrap:balance`
+
+- [#280](https://github.com/LightNetDev/LightNet/pull/280) [`b7a9fea`](https://github.com/LightNetDev/LightNet/commit/b7a9fea1b599458838ae96866ee0910f93b6f56e) Thanks [@smn-cds](https://github.com/smn-cds)! - Update translations: Remove ellipsis from search placeholder
+
 ## 3.5.0
 
 ### Minor Changes

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

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

package/__e2e__/fixtures/basics/package.json

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

package/exports/components.ts

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

package/exports/content.ts

@@ -1,8 +1,18 @@
 export {
-  categorySchema,
+  createCategorySchema as categorySchema,
   LIGHTNET_COLLECTIONS,
   mediaCollectionSchema,
-  mediaSchema,
+  createMediaItemSchema as mediaItemSchema,
   mediaTypeSchema,
 } from "../src/content/content-schema"
-export { getMediaItems } from "../src/content/external-api"
+
+import { type CollectionEntry, getCollection } from "astro:content"
+
+import {
+  type MediaItemQuery,
+  queryMediaItems,
+} from "../src/content/query-media-items"
+
+export const getMediaItems = (
+  query?: MediaItemQuery<CollectionEntry<"media">>,
+) => queryMediaItems(getCollection("media"), query ?? {})

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -49,13 +49,13 @@
     "@types/react": "^19.1.8",
     "daisyui": "^4.12.24",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.3.0",
+    "i18next": "^25.3.2",
     "marked": "^16.0.0",
     "yaml": "^2.8.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.53.2",
-    "@types/node": "^22.15.34",
+    "@types/node": "^22.16.2",
     "vitest": "^3.2.4"
   },
   "scripts": {

package/src/components/CategoriesSection.astro

@@ -1,37 +1,87 @@
 ---
-import { getCategories } from "../content/get-categories"
+import { AstroError } from "astro/errors"
+import { Image } from "astro:assets"
+
+import { getUsedCategories } from "../content/get-categories"
 import { searchPagePath } from "../utils/paths"
 import Section from "./Section.astro"
 
 interface Props {
   title?: string
+  layout?: "button-grid" | "image-grid"
 }
 
-const { title } = Astro.props
+const { title, layout = "button-grid" } = Astro.props
 const { t, currentLocale } = Astro.locals.i18n
 
-const categories = await getCategories(currentLocale, t)
+const categories = await getUsedCategories(currentLocale, t)
+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.`,
+    )
+  }
+  return image
+}
 ---
 
 {
   categories.length && (
     <Section title={title ?? t("ln.categories")}>
-      <ul class="flex w-full flex-wrap gap-2 sm:gap-3">
-        {categories.map((category) => (
-          <li class="flex max-w-56 grow">
-            <a
-              class="flex h-12 w-full items-center justify-center rounded-xl bg-gray-200 p-2 px-8 shadow-sm hover:bg-gray-300 sm:h-14"
-              href={searchPagePath(currentLocale, {
-                category: category.id,
-              })}
-            >
-              <span class="line-clamp-2 block text-xs font-bold uppercase text-gray-600">
-                {category.name}
-              </span>
-            </a>
-          </li>
-        ))}
-      </ul>
+      {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,
+                })}
+              >
+                <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">
+                  <Image
+                    class="h-full w-full object-contain"
+                    src={getImage(category)}
+                    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"
+                    }
+                  />
+                  <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>
+              </a>
+            </li>
+          ))}
+        </ol>
+      )}
     </Section>
   )
 }

package/src/components/HeroSection.astro

@@ -2,7 +2,7 @@
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 
-import Icon from "./Icon"
+import SearchInput from "./SearchInput.astro"
 
 interface Props {
   image: ImageMetadata
@@ -40,8 +40,6 @@ const subtitleSizes = {
   lg: "text-lg sm:text-xl md:text-3xl",
   xl: "text-xl sm:text-2xl md:text-4xl",
 } as const
-
-const t = Astro.locals.i18n.t
 ---
 
 <div class="w-full">
@@ -60,7 +58,7 @@ const t = Astro.locals.i18n.t
       {
         title && (
           <h1
-            class="max-w-screen-md font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
+            class="max-w-screen-md text-balance font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
             class:list={[titleSizes[titleSize], titleClass]}
           >
             {title}
@@ -70,7 +68,7 @@ const t = Astro.locals.i18n.t
       {
         subtitle && (
           <p
-            class="mt-1 max-w-screen-sm font-bold md:mt-2"
+            class="mt-1 max-w-screen-sm text-balance font-bold md:mt-2"
             class:list={[
               "sm:text-lg md:text-2xl",
               subtitleSizes[subtitleSize],
@@ -83,25 +81,7 @@ const t = Astro.locals.i18n.t
       }
       {
         showSearch && (
-          <form
-            action={`/${Astro.currentLocale}/media`}
-            method="get"
-            class="dy-join group mt-6 w-full max-w-sm rounded-2xl shadow-md outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline md:mt-10 md:max-w-md"
-          >
-            <input
-              class="dy-input dy-join-item grow rounded-2xl bg-gray-100/95 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
-              enterkeyhint="search"
-              type="search"
-              name="search"
-              placeholder={t("ln.search.placeholder")}
-            />
-            <button
-              type="submit"
-              class="dy-btn dy-join-item rounded-2xl border-gray-100/95 bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
-            >
-              <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
-            </button>
-          </form>
+          <SearchInput className="mt-6 max-w-sm md:mt-10 md:max-w-md" />
         )
       }
       <slot />

package/src/components/HighlightSection.astro

@@ -36,7 +36,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         title && (
           <h2
-            class="mb-4 text-2xl font-bold sm:mb-8 sm:text-3xl"
+            class="mb-4 text-balance text-2xl font-bold sm:mb-8 sm:text-3xl"
             class:list={titleClass}
           >
             {title}

package/src/components/MediaGallery.astro

@@ -65,7 +65,7 @@ const items = itemsInput.filter((item) => !!item)
                 <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-sm font-bold text-gray-700">
+            <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}
@@ -109,7 +109,7 @@ const items = itemsInput.filter((item) => !!item)
                 }
               />
             </div>
-            <span class="line-clamp-2 h-12 text-sm font-bold text-gray-700">
+            <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}

package/src/components/MediaList.astro

@@ -71,14 +71,14 @@ const mediaTypes = Object.fromEntries(
             class="ms-5 flex grow flex-col justify-center sm:ms-8"
             lang={item.data.language}
           >
-            <p class="mb-1 line-clamp-3 font-bold text-gray-700 md:mb-3">
+            <p class="mb-1 line-clamp-3 text-balance font-bold text-gray-700 md:mb-3">
               <Icon
                 className={`${mediaTypes[item.data.type.id].icon} me-2 align-bottom text-2xl text-gray-700`}
                 ariaLabel={mediaTypes[item.data.type.id].name}
               />
               <span>{item.data.title}</span>
             </p>
-            <div class="mb-3 flex flex-col flex-wrap items-start gap-2 md:flex-row md:items-center md:gap-3">
+            <div class="mb-3 flex flex-col flex-wrap items-start gap-2 text-balance md:flex-row md:items-center md:gap-3">
               {!!item.data.authors?.length && (
                 <p class="mb-1 md:mb-0 md:text-base">
                   {item.data.authors.join(", ")}

package/src/components/SearchInput.astro

@@ -0,0 +1,30 @@
+---
+import Icon from "./Icon"
+
+type Props = {
+  className?: string
+}
+
+const { t } = Astro.locals.i18n
+---
+
+<form
+  action={`/${Astro.currentLocale}/media`}
+  method="get"
+  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]}
+>
+  <input
+    class="dy-input dy-join-item grow rounded-2xl bg-gray-100/95 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
+    enterkeyhint="search"
+    type="search"
+    name="search"
+    placeholder={t("ln.search.placeholder")}
+  />
+  <button
+    type="submit"
+    class="dy-btn dy-join-item rounded-2xl border-gray-100/95 bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
+  >
+    <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
+  </button>
+</form>

package/src/components/Section.astro

@@ -72,7 +72,7 @@ const marginTopValues = {
   {
     title && (
       <h2
-        class="mb-10 text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
+        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"]}
       >
         {title}

package/src/content/astro-image.ts

@@ -12,3 +12,13 @@ export const astroImage = (image: ImageFunction) =>
     .string()
     .transform((path) => (path.startsWith("./") ? path : `./${path}`))
     .pipe(image())
+
+/**
+ * The Astro image function resolves to this schema.
+ */
+export const imageSchema = z.object({
+  src: z.string(),
+  width: z.number(),
+  height: z.number(),
+  format: z.enum(["png", "jpg", "jpeg", "tiff", "webp", "gif", "svg", "avif"]),
+})

package/src/content/compare-media-collection-items.ts

@@ -1,4 +1,4 @@
-import type { MediaItemEntry } from "./content-schema-internal"
+import type { MediaItemEntry } from "./content-schema"
 
 export function compareMediaCollectionItems(
   item1: MediaItemEntry,

package/src/content/content-schema.ts

@@ -3,7 +3,7 @@ import { z } from "astro/zod"
 import type { SchemaContext } from "astro:content"
 import { defineCollection, reference } from "astro:content"
 
-import { astroImage } from "./astro-image"
+import { astroImage, imageSchema } from "./astro-image"
 
 /**
  * Category Schema
@@ -18,6 +18,16 @@ export const categorySchema = z.object({
    * @example "category.biography"
    */
   label: z.string(),
+
+  /* Relative path to the thumbnail image of this category.
+   *
+   * The image is expected to be inside the `images` folder next to category definition json.
+   * It can have one of these file types: png, jpg, tiff, webp, gif, svg, avif.
+   * We suggest to give it a size of at least 1000px for it's longer side.
+   *
+   * @example "./images/devotionals.jpg"
+   */
+  image: imageSchema.optional(),
 })
 
 /**
@@ -117,12 +127,12 @@ export const mediaItemSchema = z.object({
    *
    * The image is expected to be inside the `images` folder next to the media item definition json.
    * This image will be used for previews and on the media item detail page.
-   * It can have on of this file types: png, jpg, tiff, webp, gif, svg, avif.
+   * It can have one of these file types: png, jpg, tiff, webp, gif, svg, avif.
    * We suggest to give it a size of at least 1000px for it's longer side.
    *
    * @example "./images/a-book-about-love--en.jpg"
    */
-  image: z.string(),
+  image: imageSchema,
   /**
    * List of objects defining the content of this media item.
    */
@@ -160,11 +170,16 @@ export const mediaItemSchema = z.object({
  * @param schemaContext that is passed by astro's defineCollection schema.
  * @returns schema with image mixed in.
  */
-export const mediaSchema = ({ image }: SchemaContext) =>
+export const createMediaItemSchema = ({ image }: SchemaContext) =>
   mediaItemSchema.extend({
     image: astroImage(image),
   })
 
+export const createCategorySchema = ({ image }: SchemaContext) =>
+  categorySchema.extend({
+    image: astroImage(image).optional(),
+  })
+
 /**
  * Media Type Schema
  */
@@ -246,7 +261,7 @@ export const mediaTypeSchema = z.object({
 export const LIGHTNET_COLLECTIONS = {
   categories: defineCollection({
     loader: glob({ pattern: "*.json", base: "./src/content/categories" }),
-    schema: categorySchema,
+    schema: createCategorySchema,
   }),
   "media-collections": defineCollection({
     loader: glob({
@@ -260,7 +275,7 @@ export const LIGHTNET_COLLECTIONS = {
       pattern: "*.json",
       base: "./src/content/media",
     }),
-    schema: mediaSchema,
+    schema: createMediaItemSchema,
   }),
   "media-types": defineCollection({
     loader: glob({
@@ -270,3 +285,20 @@ export const LIGHTNET_COLLECTIONS = {
     schema: mediaTypeSchema,
   }),
 }
+
+export const mediaItemEntrySchema = z.object({
+  id: z.string(),
+  data: mediaItemSchema,
+})
+
+export type MediaItemEntry = z.infer<typeof mediaItemEntrySchema>
+
+export const mediaTypeEntrySchema = z.object({
+  id: z.string(),
+  data: mediaTypeSchema,
+})
+
+export const categoryEntrySchema = z.object({
+  id: z.string(),
+  data: categorySchema,
+})

package/src/content/get-categories.ts

@@ -1,15 +1,73 @@
+import { AstroError } from "astro/errors"
+import { getCollection } from "astro:content"
+
 import { type TranslateFn } from "../i18n/translate"
+import { verifySchemaAsync } from "../utils/verify-schema"
+import { categoryEntrySchema } from "./content-schema"
 import { getMediaItems } from "./get-media-items"
-import { resolveCategoryLabel } from "./resolve-category-label"
 
-const contentCategories = new Set<string>(
+const categoriesById = Object.fromEntries(
+  (await loadCategories()).map(({ id, data }) => [id, data]),
+)
+
+const contentCategories = Object.fromEntries(
   (await getMediaItems())
     .flatMap((item) => item.data.categories ?? [])
-    .map((c) => c.id),
+    .map((c) => {
+      const category = categoriesById[c.id]
+      if (!category) {
+        throw new AstroError(
+          "Missing Category",
+          `A media item references a non-existent category: "${c.id}".\n` +
+            `To fix this, create a category file at:\n` +
+            `src/content/categories/${c.id}.json`,
+        )
+      }
+      return [c.id, category]
+    }),
 )
 
-export async function getCategories(currentLocale: string, t: TranslateFn) {
-  return [...contentCategories.values()]
-    .map((id) => ({ id, name: resolveCategoryLabel(t, id) }))
+/**
+ * Get categories that are referenced from media items.
+ * Adds the translated name of the category and sorts by this name.
+ *
+ * @param currentLocale current locale
+ * @param t translate function
+ * @returns categories sorted by name
+ */
+export async function getUsedCategories(currentLocale: string, t: TranslateFn) {
+  return [...Object.entries(contentCategories)]
+    .map(([id, data]) => ({ id, ...data, name: t(data.label) }))
     .sort((a, b) => a.name.localeCompare(b.name, currentLocale))
 }
+
+export async function getCategory(id: string) {
+  const category = categoriesById[id]
+  if (!category) {
+    throw new AstroError(
+      `Missing category "${id}"`,
+      `To fix the issue, add a category at "src/content/categories/${id}.json".`,
+    )
+  }
+  return {
+    id,
+    ...category,
+  }
+}
+
+async function loadCategories() {
+  return Promise.all(
+    (await getCollection("categories")).map((category: unknown) =>
+      parseCategory(category),
+    ),
+  )
+}
+
+function parseCategory(item: unknown) {
+  return verifySchemaAsync(
+    categoryEntrySchema,
+    item,
+    (id) => `Invalid category: ${id}`,
+    (id) => `Fix these issues inside "src/content/category/${id}.json":`,
+  )
+}

package/src/content/get-media-items.ts

@@ -1,7 +1,7 @@
 import { getCollection, getEntry } from "astro:content"
 
 import { verifySchemaAsync } from "../utils/verify-schema"
-import { mediaItemEntrySchema } from "./content-schema-internal"
+import { mediaItemEntrySchema } from "./content-schema"
 
 /**
  * Internal API to get media items. Since this package is a Astro integration

package/src/content/get-media-types.ts

@@ -1,7 +1,7 @@
 import { getCollection, getEntry } from "astro:content"
 
 import { verifySchema } from "../utils/verify-schema"
-import { mediaTypeEntrySchema } from "./content-schema-internal"
+import { mediaTypeEntrySchema } from "./content-schema"
 
 export const getMediaType = async (id: string) => {
   return verifySchema(

package/src/content/query-media-items.ts

@@ -1,5 +1,5 @@
 import { compareMediaCollectionItems } from "./compare-media-collection-items"
-import type { MediaItemEntry } from "./content-schema-internal"
+import type { MediaItemEntry } from "./content-schema"
 
 export type MediaItemQuery<TMediaItem extends MediaItemEntry> = {
   /**

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

@@ -2,6 +2,14 @@
 
 This autogenerated report shows all built-in languages and the current status of their translations.
 
+## **AR** ([ar.yml](./ar.yml))
+
+All keys have been translated. ✅
+
+## **BN** ([bn.yml](./bn.yml))
+
+All keys have been translated. ✅
+
 ## **DE** ([de.yml](./de.yml))
 
 All keys have been translated. ✅
@@ -10,6 +18,26 @@ All keys have been translated. ✅
 
 All keys have been translated. ✅
 
+## **ES** ([es.yml](./es.yml))
+
+All keys have been translated. ✅
+
+## **FI** ([fi.yml](./fi.yml))
+
+All keys have been translated. ✅
+
+## **FR** ([fr.yml](./fr.yml))
+
+All keys have been translated. ✅
+
+## **HI** ([hi.yml](./hi.yml))
+
+All keys have been translated. ✅
+
+## **PT** ([pt.yml](./pt.yml))
+
+All keys have been translated. ✅
+
 ## **RU** ([ru.yml](./ru.yml))
 
 All keys have been translated. ✅
@@ -17,3 +45,7 @@ All keys have been translated. ✅
 ## **UK** ([uk.yml](./uk.yml))
 
 All keys have been translated. ✅
+
+## **ZH** ([zh.yml](./zh.yml))
+
+All keys have been translated. ✅

package/src/i18n/translations/ar.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/bn.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/de.yml

@@ -5,7 +5,7 @@ ln.category: Kategorie
 ln.language: Sprache
 ln.languages: Sprachen
 ln.type: Typ
-ln.external-link: Externer link
+ln.external-link: Externer Link
 ln.details.open: Öffnen
 ln.details.part-of-collection: Teil der Sammlung
 ln.details.download: Download
@@ -17,6 +17,6 @@ ln.search.all-categories: Alle Kategorien
 ln.search.all-languages: Alle Sprachen
 ln.search.all-types: Alle Typen
 ln.search.no-results: Keine Ergebnisse
-ln.search.placeholder: Medien durchsuchen...
+ln.search.placeholder: Suche Medien
 ln.search.title: Suche
 ln.share.url-copied-to-clipboard: Link in die Zwischenablage kopiert

package/src/i18n/translations/en.yml

@@ -62,10 +62,10 @@ ln.external-link: External link
 ln.search.title: Search
 
 # Placeholder text for the search input to search for media items.
-# English: Search media...
+# English: Search media
 #
 # Used on: https://sk8-ministries.pages.dev/en/media/
-ln.search.placeholder: Search media...
+ln.search.placeholder: Search media
 
 # Filter option to display content in all languages.
 #

package/src/i18n/translations/es.yml

@@ -0,0 +1,22 @@
+ln.header.open-main-menu: Abrir menú principal
+ln.header.select-language: Seleccionar idioma
+ln.home.title: Inicio
+ln.category: Categoría
+ln.categories: Categorías
+ln.language: Idioma
+ln.languages: Idiomas
+ln.type: Tipo
+ln.external-link: Enlace externo
+ln.search.title: Buscar
+ln.search.placeholder: Buscar medios
+ln.search.all-languages: Todos los idiomas
+ln.search.all-types: Todos los tipos
+ln.search.all-categories: Todas las categorías
+ln.search.no-results: Sin resultados
+ln.details.open: Abrir
+ln.details.share: Compartir
+ln.details.part-of-collection: Parte de la colección
+ln.details.download: Descargar
+ln.share.url-copied-to-clipboard: Enlace copiado al portapapeles
+ln.404.page-not-found: Página no encontrada
+ln.404.go-to-the-home-page: Ir a la página de inicio

package/src/i18n/translations/fi.yml

@@ -0,0 +1,22 @@
+ln.header.open-main-menu: Avaa päävalikko
+ln.header.select-language: Valitse kieli
+ln.home.title: Etusivu
+ln.category: Kategoria
+ln.categories: Kategoriat
+ln.language: Kieli
+ln.languages: Kielet
+ln.type: Mediatyyppi
+ln.external-link: Ulkoinen linkki
+ln.search.title: Haku
+ln.search.placeholder: Hae mediaa
+ln.search.all-languages: Kaikki kielet
+ln.search.all-types: Kaikki mediatyypit
+ln.search.all-categories: Kaikki kategoriat
+ln.search.no-results: Ei tuloksia
+ln.details.open: Avaa
+ln.details.share: Jaa
+ln.details.part-of-collection: Osa kokoelmaa
+ln.details.download: Lataa
+ln.share.url-copied-to-clipboard: Linkki kopioitu leikepöydälle
+ln.404.page-not-found: Sivua ei löytynyt
+ln.404.go-to-the-home-page: Palaa etusivulle

package/src/i18n/translations/fr.yml

@@ -0,0 +1,22 @@
+ln.header.open-main-menu: Ouvrir le menu principal
+ln.header.select-language: Sélectionner la langue
+ln.home.title: Accueil
+ln.category: Catégorie
+ln.categories: Catégories
+ln.language: Langue
+ln.languages: Langues
+ln.type: Type
+ln.external-link: Lien externe
+ln.search.title: Recherche
+ln.search.placeholder: Rechercher des médias
+ln.search.all-languages: Toutes les langues
+ln.search.all-types: Tous les types
+ln.search.all-categories: Toutes les catégories
+ln.search.no-results: Aucun résultat
+ln.details.open: Ouvrir
+ln.details.share: Partager
+ln.details.part-of-collection: Fait partie de la collection
+ln.details.download: Télécharger
+ln.share.url-copied-to-clipboard: Lien copié dans le presse-papiers
+ln.404.page-not-found: Page non trouvée
+ln.404.go-to-the-home-page: Aller à la page d’accueil

package/src/i18n/translations/hi.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/pt.yml

@@ -0,0 +1,22 @@
+ln.header.open-main-menu: Abrir menu principal
+ln.header.select-language: Escolher idioma
+ln.home.title: Início
+ln.category: Categoria
+ln.categories: Categorias
+ln.language: Idioma
+ln.languages: Idiomas
+ln.type: Tipo
+ln.external-link: Ligação externa
+ln.search.title: Pesquisa
+ln.search.placeholder: Pesquisar conteúdos
+ln.search.all-languages: Todos os idiomas
+ln.search.all-types: Todos os tipos
+ln.search.all-categories: Todas as categorias
+ln.search.no-results: Nenhum resultado
+ln.details.open: Abrir
+ln.details.share: Partilhar
+ln.details.part-of-collection: Parte da coleção
+ln.details.download: Transferir
+ln.share.url-copied-to-clipboard: Ligação copiada para a área de transferência
+ln.404.page-not-found: Página não encontrada
+ln.404.go-to-the-home-page: Ir para a página inicial

package/src/i18n/translations/ru.yml

@@ -8,7 +8,7 @@ ln.languages: Языки
 ln.type: Тип
 ln.external-link: Внешняя ссылка
 ln.search.title: Поиск
-ln.search.placeholder: Поиск медиа...
+ln.search.placeholder: Поиск медиа
 ln.search.all-languages: Все языки
 ln.search.all-types: Все типы
 ln.search.all-categories: Все категории
@@ -17,6 +17,6 @@ ln.details.open: Открыть
 ln.details.share: Поделиться
 ln.details.part-of-collection: Часть коллекции
 ln.details.download: Скачать
-ln.share.url-copied-to-clipboard: ссылка скопированa в буфер обмена
+ln.share.url-copied-to-clipboard: Ссылка скопированa в буфер
 ln.404.page-not-found: Страница не найдена
 ln.404.go-to-the-home-page: Перейти на главную страницу

package/src/i18n/translations/uk.yml

@@ -8,7 +8,7 @@ ln.languages: Мови
 ln.type: Тип
 ln.external-link: Зовнішнє посилання
 ln.search.title: Пошук
-ln.search.placeholder: Пошук медіа...
+ln.search.placeholder: Пошук медіа
 ln.search.all-languages: Усі мови
 ln.search.all-types: Усі типи
 ln.search.all-categories: Усі категорії
@@ -17,6 +17,6 @@ ln.details.open: Відкрити
 ln.details.share: Поділитися
 ln.details.part-of-collection: Частина колекції
 ln.details.download: Завантажити
-ln.share.url-copied-to-clipboard: посилання скопійовано в буфер обміну
+ln.share.url-copied-to-clipboard: Посилання скопійовано до буферу обміну
 ln.404.page-not-found: Сторінку не знайдено
 ln.404.go-to-the-home-page: Перейти на Головну сторінку

package/src/i18n/translations/zh.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

@@ -1,10 +1,18 @@
 import YAML from "yaml"
 
 const builtInTranslations = {
-  en: () => import("./translations/en.yml?raw"),
+  ar: () => import("./translations/ar.yml?raw"),
+  bn: () => import("./translations/bn.yml?raw"),
   de: () => import("./translations/de.yml?raw"),
-  uk: () => import("./translations/uk.yml?raw"),
+  en: () => import("./translations/en.yml?raw"),
+  es: () => import("./translations/es.yml?raw"),
+  fi: () => import("./translations/fi.yml?raw"),
+  fr: () => import("./translations/fr.yml?raw"),
+  hi: () => import("./translations/hi.yml?raw"),
+  pt: () => import("./translations/pt.yml?raw"),
   ru: () => import("./translations/ru.yml?raw"),
+  uk: () => import("./translations/uk.yml?raw"),
+  zh: () => import("./translations/zh.yml?raw"),
 } as const
 
 type BuiltInLanguage = keyof typeof builtInTranslations

package/src/layouts/MarkdownPage.astro

@@ -1,10 +1,16 @@
 ---
 import Page from "./Page.astro"
+
+// prettier-ignore
+type Props = {
+  className?: string
+};
 ---
 
 <Page>
   <article
-    class="prose prose-gray mx-auto mt-8 max-w-screen-md px-4 sm:mt-16 md:px-8"
+    class="prose prose-img:rounded-md mx-auto mt-8 max-w-screen-md px-4 sm:mt-16 md:px-8"
+    class:list={[Astro.props.className]}
   >
     <slot />
   </article>

package/src/pages/api/search.ts

@@ -1,7 +1,7 @@
 import type { APIRoute } from "astro"
 import { getImage } from "astro:assets"
 
-import type { MediaItemEntry } from "../../content/content-schema-internal"
+import type { MediaItemEntry } from "../../content/content-schema"
 import { getMediaItems } from "../../content/get-media-items"
 import { markdownToText } from "../../utils/markdown"
 import type { SearchItem } from "./search-response"

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

@@ -17,7 +17,7 @@ const titleSize = {
 ---
 
 <h1
-  class="font-bold"
+  class="text-balance font-bold"
   lang={language}
   class:list={[
     titleSize[title.length > 20 ? "md" : "xl"],

package/src/pages/details-page/components/more-details/Categories.astro

@@ -1,6 +1,6 @@
 ---
+import { getCategory } from "../../../../content/get-categories"
 import { getMediaItem } from "../../../../content/get-media-items"
-import { resolveCategoryLabel } from "../../../../content/resolve-category-label"
 import { searchPagePath } from "../../../../utils/paths"
 import Label from "./Label.astro"
 
@@ -10,8 +10,11 @@ interface Props {
 
 const item = await getMediaItem(Astro.props.mediaId)
 
-const categories = item.data.categories?.map(({ id }) => id)
 const { t } = Astro.locals.i18n
+
+const categories = await Promise.all(
+  item.data.categories?.map(({ id }) => getCategory(id)) ?? [],
+)
 ---
 
 {
@@ -21,8 +24,12 @@ const { t } = Astro.locals.i18n
       <ul class="flex flex-wrap gap-2">
         {categories.map(async (category) => (
           <li class="flex rounded-lg bg-gray-200 px-4 py-1 text-gray-500 hover:bg-gray-300">
-            <a href={searchPagePath(Astro.currentLocale, { category })}>
-              {resolveCategoryLabel(Astro.locals.i18n.t, category)}
+            <a
+              href={searchPagePath(Astro.currentLocale, {
+                category: category.id,
+              })}
+            >
+              {t(category.label)}
             </a>
           </li>
         ))}

package/src/pages/details-page/utils/get-collection-items.ts

@@ -1,5 +1,5 @@
 import { compareMediaCollectionItems } from "../../../content/compare-media-collection-items"
-import type { MediaItemEntry } from "../../../content/content-schema-internal"
+import type { MediaItemEntry } from "../../../content/content-schema"
 import { getMediaItems } from "../../../content/get-media-items"
 
 const groupItemsByCollections = async () => {

package/src/pages/search-page/SearchPageRoute.astro

@@ -11,7 +11,7 @@ const { t } = Astro.locals.i18n
 <Page>
   <div class="mx-auto max-w-screen-md">
     <div class="px-4 md:px-8">
-      <h1 class="mb-4 mt-8 text-4xl md:mb-8 md:mt-12 md:text-5xl">
+      <h1 class="mb-4 mt-8 text-balance text-4xl md:mb-8 md:mt-12 md:text-5xl">
         {t("ln.search.title")}
       </h1>
       <SearchFilter />

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

@@ -1,7 +1,7 @@
 ---
 import config from "virtual:lightnet/config"
 
-import { getCategories } from "../../../content/get-categories"
+import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
 import { provideTranslations } from "../utils/search-filter-translations"
@@ -12,7 +12,7 @@ const { t, currentLocale } = Astro.locals.i18n
 const sortByName = (array: { id: string; name: string }[]) =>
   array.sort((a, b) => a.name.localeCompare(b.name, currentLocale))
 
-const categories = (await getCategories(currentLocale, t)).map(
+const categories = (await getUsedCategories(currentLocale, t)).map(
   ({ id, name }) => ({ id, name }),
 )
 

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

@@ -1,7 +1,7 @@
 ---
 import { getCollection } from "astro:content"
 
-import { getCategories } from "../../../content/get-categories"
+import { getUsedCategories } from "../../../content/get-categories"
 import { contentLanguages } from "../../../content/get-languages"
 import { getMediaTypes } from "../../../content/get-media-types"
 import { provideTranslations } from "../utils/search-translations"
@@ -10,7 +10,7 @@ import SearchListReact from "./SearchList.tsx"
 const { t, currentLocale, direction } = Astro.locals.i18n
 
 const categories: Record<string, string> = {}
-for (const { id, name } of await getCategories(currentLocale, t)) {
+for (const { id, name } of await getUsedCategories(currentLocale, t)) {
   categories[id] = name
 }
 

package/src/content/content-schema-internal.ts

@@ -1,52 +0,0 @@
-/**
- * We use this internal content schema to make content schema easier to
- * comprehend for external users.
- */
-import { z } from "astro/zod"
-
-import {
-  mediaItemSchema as externalMediaItemSchema,
-  mediaTypeSchema,
-} from "./content-schema"
-
-export type MediaItem = z.infer<typeof mediaItemSchema>
-export type MediaItemEntry = {
-  id: string
-  data: MediaItem
-}
-
-/**
- * Media Item
- */
-const mediaItemSchema = externalMediaItemSchema.extend({
-  image: z.object({
-    src: z.string(),
-    width: z.number(),
-    height: z.number(),
-    format: z.enum([
-      "png",
-      "jpg",
-      "jpeg",
-      "tiff",
-      "webp",
-      "gif",
-      "svg",
-      "avif",
-    ]),
-  }),
-})
-
-export const mediaItemEntrySchema = z.object({
-  id: z.string(),
-  data: mediaItemSchema,
-})
-
-/**
- * Media Type
- */
-export const mediaTypeEntrySchema = z.object({
-  id: z.string(),
-  data: mediaTypeSchema,
-})
-
-export type MediaType = z.infer<typeof mediaTypeSchema>

package/src/content/external-api.ts

@@ -1,7 +0,0 @@
-import { type CollectionEntry, getCollection } from "astro:content"
-
-import { type MediaItemQuery, queryMediaItems } from "./query-media-items"
-
-export const getMediaItems = (
-  query?: MediaItemQuery<CollectionEntry<"media">>,
-) => queryMediaItems(getCollection("media"), query ?? {})

package/src/content/resolve-category-label.ts

@@ -1,20 +0,0 @@
-import { AstroError } from "astro/errors"
-import { getCollection } from "astro:content"
-
-import type { TranslateFn } from "../i18n/translate"
-
-const categories = await getCollection("categories")
-
-export const resolveCategoryLabel = (
-  translate: TranslateFn,
-  categoryId: string,
-) => {
-  const category = categories.find((c) => c.id === categoryId)
-  if (!category) {
-    throw new AstroError(
-      `Missing category "${categoryId}"`,
-      `To fix the issue, add a category at "src/content/categories/${categoryId}.json".`,
-    )
-  }
-  return translate(category.data.label)
-}