lightnet 3.4.6 → 3.6.0

package/CHANGELOG.md

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

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

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.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.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.8.1_@types+node@22.15.29_jiti@2.4.2_lightningcss@1.29.1_rollup@4.41.1_terser@5.39.0_typescript@5.8.3_yaml@2.8.0/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.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.8.1",
-    "lightnet": "^3.4.4",
+    "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,8 @@ 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"
 export { default as MarkdownPage } from "../src/layouts/MarkdownPage.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.4.6",
+  "version": "3.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -45,17 +45,18 @@
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.16",
-    "@types/react": "^19.1.6",
+    "@tanstack/react-virtual": "^3.13.12",
+    "@types/react": "^19.1.8",
     "daisyui": "^4.12.24",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.2.1",
-    "marked": "^15.0.12",
+    "i18next": "^25.3.2",
+    "marked": "^16.0.0",
     "yaml": "^2.8.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.52.0",
-    "@types/node": "^22.15.29",
-    "vitest": "^3.1.4"
+    "@playwright/test": "^1.53.2",
+    "@types/node": "^22.16.2",
+    "vitest": "^3.2.4"
   },
   "scripts": {
     "test": "vitest",

package/src/astro-integration/config.ts

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

package/src/components/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,6 +2,8 @@
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 
+import SearchInput from "./SearchInput.astro"
+
 interface Props {
   image: ImageMetadata
   title?: string
@@ -11,6 +13,7 @@ interface Props {
   subtitleSize?: "sm" | "md" | "lg" | "xl"
   subtitleClass?: string
   className?: string
+  showSearch?: boolean
 }
 const {
   image,
@@ -21,6 +24,7 @@ const {
   titleClass,
   subtitleClass,
   className,
+  showSearch = false,
 } = Astro.props
 
 const titleSizes = {
@@ -41,21 +45,20 @@ const subtitleSizes = {
 <div class="w-full">
   <div class="group relative">
     <Image
-      class="h-72 w-full object-cover object-center md:h-[20rem] lg:h-[24rem] xl:h-[30rem]"
+      class="h-[20rem] w-full object-cover object-center lg:h-[24rem] xl:h-[30rem]"
       src={image}
-      widths={[320, 768, 1280, 2560, 3000]}
-      sizes="100vw"
-      loading="eager"
+      layout="full-width"
+      priority={true}
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center gap-6 from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {
         title && (
           <h1
-            class="max-w-screen-md font-bold transition-transform duration-1000 group-hover:scale-[102%]"
+            class="max-w-screen-md text-balance font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
             class:list={[titleSizes[titleSize], titleClass]}
           >
             {title}
@@ -65,7 +68,7 @@ const subtitleSizes = {
       {
         subtitle && (
           <p
-            class="max-w-screen-sm font-bold"
+            class="mt-1 max-w-screen-sm text-balance font-bold md:mt-2"
             class:list={[
               "sm:text-lg md:text-2xl",
               subtitleSizes[subtitleSize],
@@ -76,6 +79,11 @@ const subtitleSizes = {
           </p>
         )
       }
+      {
+        showSearch && (
+          <SearchInput className="mt-6 max-w-sm md:mt-10 md:max-w-md" />
+        )
+      }
       <slot />
     </div>
   </div>

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/SearchSection.astro

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

package/src/components/Section.astro

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

package/src/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,