lightnet 2.15.2

package/src/astro-integration/config.ts

@@ -0,0 +1,185 @@
+import { z } from "astro/zod"
+
+/**
+ * Link Schema.
+ */
+const linkSchema = z.object({
+  /**
+   * Address this should link to.
+   * Can either be a path like "/about" or a full
+   * url, like "https://your-ministry.com".
+   */
+  href: z.string(),
+  /**
+   * Label to be used for the link.
+   * Can either be a translation key or a fixed string.
+   */
+  label: z.string(),
+  /**
+   * If this is set to true the currentLocale will be appended to
+   * the href path. Eg. for href="/about"
+   * the resolved value will be "/en/about" if the current locale is "en".
+   *
+   * This option will be ignored if the path is a external url.
+   *
+   * Default is true.
+   */
+  requiresLocale: z.boolean().default(true),
+})
+
+/**
+ * Language Schema.
+ */
+const languageSchema = z.object({
+  /**
+   * BCP-47 language code for this language.
+   *
+   * This will be the identifier of this language and will
+   * also appear on the URL paths of the website.
+   */
+  code: z.string({ description: "BCP-47 language code" }),
+  /**
+   * The name of the language that will be shown on the Website.
+   *
+   * Can either be a fixed string or a translation key.
+   */
+  label: z.string(),
+  /**
+   * The text direction of this language.
+   *
+   * Either right-to-left = rtl, or left-to-right = ltr.
+   *
+   * Default is "ltr".
+   */
+  direction: z.enum(["rtl", "ltr"]).default("ltr"),
+  /**
+   * Translations for this language.
+   * This needs to be set if the the language should be used a UI locale.
+   *
+   * We expect a flat object with the keys being the translation keys and
+   * the values being the translated strings for this language.
+   */
+  translations: z.record(z.string(), z.string()).optional(),
+  /**
+   * Should this language be used as the default language for the User Interface.
+   *
+   * Default locale will be the first language the user sees. Also translations
+   * will fallback to use the default locale if no translation entry is found.
+   *
+   * Default is false.
+   */
+  isDefaultLocale: z.boolean().default(false),
+})
+
+const absolutePath = (path: string) =>
+  `${path.startsWith("/") ? "" : "/"}${path}`
+
+/**
+ * This API for setting a favicon uses the
+ * HTML standard attributes.
+ *
+ * @see https://en.wikipedia.org/wiki/Favicon
+ *
+ * We automatically infer the "type" of the icon. So you
+ * do not have to set this.
+ */
+const faviconSchema = z.object({
+  /**
+   * Reference the favicon. This must be a path to an image in the `public/` directory.
+   *
+   * @example "/favicon.svg"
+   */
+  href: z.string().transform(absolutePath),
+  /**
+   * See HTML standard.
+   */
+  rel: z.enum(["icon", "apple-touch-icon"]).default("icon"),
+  /**
+   * See HTML standard.
+   */
+  sizes: z.string().optional(),
+})
+
+/**
+ * LightNet Config Schema.
+ */
+export const configSchema = z.object({
+  /**
+   * Title of the web site.
+   */
+  title: z.string(),
+  /**
+   * All languages: content languages and ui languages.
+   */
+  languages: languageSchema.array(),
+  /**
+   * Favicons for your site.
+   */
+  favicon: faviconSchema.array().optional(),
+  /**
+   * Link to manifest file within public/ folder
+   */
+  manifest: z.string().transform(absolutePath).optional(),
+  /**
+   * Logo to be used for the header.
+   */
+  logo: z
+    .object({
+      /**
+       * Path to a logo based in the /src/assets folder.
+       * We recommend a size of at least 150x150px. The logo
+       * will be optimized for performance.
+       *
+       * @example "/src/assets/your-logo.png"
+       */
+      src: z.string(),
+      /**
+       * Alt attribute to add for screen reader etc.
+       * This can be a fixed string or a translation key.
+       */
+      alt: z.string().default(""),
+      /**
+       * Size in px to use for the logo on the header bar.
+       * The size will be applied to the shorter side of your logo image.
+       *
+       * Default is 28 px.
+       */
+      size: z.number().default(28),
+    })
+    .optional(),
+  /**
+   * Main menu structure.
+   */
+  mainMenu: z.array(linkSchema).min(1).optional(),
+  /**
+   * The internalDomains configuration setting specifies a list of
+   * domain names that should be treated as internal.
+   *
+   * This setting is useful for bypassing external-link handling or marking
+   * trusted domains as internal resources.
+   *
+   * @notes
+   * - Domains are matched exactly as listed; wildcard or regex patterns are not supported.
+   * - Ensure that only trusted and necessary domains are included in this list.
+   */
+  internalDomains: z.array(z.string()).default([]),
+  /**
+   * Configure search page behavior
+   */
+  searchPage: z
+    .object({
+      /**
+       * When this is set to true, search results will be initially
+       * filtered by UI language. The filter will only be set when there
+       * is any media item in the UI language.
+       */
+      filterByLocale: z.boolean().default(false),
+    })
+    .optional(),
+})
+
+export type Language = z.input<typeof languageSchema>
+export type Link = z.input<typeof linkSchema>
+
+export type LightnetConfig = z.input<typeof configSchema>
+export type PreparedLightnetConfig = z.output<typeof configSchema>

package/src/astro-integration/integration.ts

@@ -0,0 +1,74 @@
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../i18n/locals.d.ts" />
+import react from "@astrojs/react"
+import tailwind from "@astrojs/tailwind"
+import type { AstroIntegration } from "astro"
+
+import { resolveDefaultLocale } from "../i18n/resolve-default-locale"
+import { resolveLocales } from "../i18n/resolve-locales"
+import type { LightnetConfig } from "./config"
+import { vitePluginLightnetConfig } from "./vite-plugin-lightnet-config"
+
+export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
+  return {
+    name: "lightnet",
+    hooks: {
+      "astro:config:setup": ({
+        injectRoute,
+        config,
+        updateConfig,
+        logger,
+        addMiddleware,
+      }) => {
+        injectRoute({
+          pattern: "404",
+          entrypoint: "lightnet/pages/404.astro",
+          prerender: true,
+        })
+
+        injectRoute({
+          pattern: "",
+          entrypoint: "lightnet/pages/RedirectToDefaultLocale.astro",
+          prerender: true,
+        })
+
+        injectRoute({
+          pattern: "/[locale]/media",
+          entrypoint: "lightnet/pages/SearchPage.astro",
+          prerender: true,
+        })
+
+        injectRoute({
+          pattern: "/api/search.json",
+          entrypoint: "lightnet/pages/api/search.ts",
+          prerender: true,
+        })
+
+        injectRoute({
+          pattern: "/[locale]/media/[slug]",
+          entrypoint: "lightnet/pages/DetailsPage.astro",
+          prerender: true,
+        })
+
+        addMiddleware({ entrypoint: "lightnet/locals", order: "pre" })
+
+        config.integrations.push(tailwind(), react())
+
+        updateConfig({
+          vite: {
+            plugins: [vitePluginLightnetConfig(lightnetConfig, config, logger)],
+          },
+          i18n: {
+            defaultLocale: resolveDefaultLocale(lightnetConfig),
+            locales: resolveLocales(lightnetConfig),
+            routing: {
+              redirectToDefaultLocale: false,
+              prefixDefaultLocale: false,
+              fallbackType: "rewrite",
+            },
+          },
+        })
+      },
+    },
+  }
+}

package/src/astro-integration/project-context.ts

@@ -0,0 +1,5 @@
+export type ProjectContext = {
+  root: URL
+  srcDir: URL
+  site?: string
+}

package/src/astro-integration/virtual.d.ts

@@ -0,0 +1,14 @@
+declare module "virtual:lightnet/config" {
+  const config: import("./config").PreparedLightnetConfig
+  export default config
+}
+
+declare module "virtual:lightnet/logo" {
+  const logo: ImageMetadata | undefined = import("astro").ImageMetadata
+  export default logo
+}
+
+declare module "virtual:lightnet/project-context" {
+  const context: import("./project-context").ProjectContext
+  export default context
+}

package/src/astro-integration/vite-plugin-lightnet-config.ts

@@ -0,0 +1,55 @@
+import { resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+import type { AstroConfig, AstroIntegrationLogger, ViteUserConfig } from "astro"
+
+import { verifySchema } from "../utils/verify-schema"
+import { configSchema, type LightnetConfig } from "./config"
+
+const CONFIG = "virtual:lightnet/config"
+const LOGO = "virtual:lightnet/logo"
+const PROJECT_CONTEXT = "virtual:lightnet/project-context"
+
+const VIRTUAL_MODULES = [CONFIG, LOGO, PROJECT_CONTEXT] as const
+
+export function vitePluginLightnetConfig(
+  lightnetConfig: LightnetConfig,
+  { root, srcDir, site }: Pick<AstroConfig, "root" | "srcDir" | "site">,
+  logger: AstroIntegrationLogger,
+): NonNullable<ViteUserConfig["plugins"]>[number] {
+  const resolveFilePath = (id: string) =>
+    JSON.stringify(id.startsWith(".") ? resolve(fileURLToPath(root), id) : id)
+
+  const config = verifySchema(
+    configSchema,
+    lightnetConfig,
+    "Invalid config passed to LightNet integration.",
+  )
+  return {
+    name: "vite-plugin-lightnet-config",
+    resolveId(id): string | undefined {
+      const module = VIRTUAL_MODULES.find((m) => m === id)
+      if (module) return `\0${module}`
+    },
+    handleHotUpdate({ file, server }) {
+      const srcPath = resolve(fileURLToPath(root), "src/translations/")
+      if (file.endsWith(".json") && file.startsWith(srcPath)) {
+        logger.info(`Update translations ${file.slice(srcPath.length)}`)
+        server.restart()
+      }
+    },
+    load(id): string | undefined {
+      const module = VIRTUAL_MODULES.find((m) => id === `\0${m}`)
+      switch (module) {
+        case CONFIG:
+          return `export default ${JSON.stringify(config)};`
+        case LOGO:
+          return config.logo
+            ? `import logo from ${resolveFilePath(config.logo.src)}; export default logo;`
+            : "export default undefined;"
+        case PROJECT_CONTEXT:
+          return `export default ${JSON.stringify({ root, srcDir, site })}`
+      }
+    },
+  }
+}

package/src/components/CategoriesOverview.astro

@@ -0,0 +1,37 @@
+---
+import { getCategories } from "../content/get-categories"
+import { searchPagePath } from "../utils/paths"
+import Section from "./Section.astro"
+
+interface Props {
+  title?: string
+}
+
+const { title } = Astro.props
+const { t, currentLocale } = Astro.locals.i18n
+
+const categories = await getCategories(currentLocale, t)
+---
+
+{
+  categories.length && (
+    <Section title={title ?? t("ln.common.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>
+    </Section>
+  )
+}

package/src/components/Gallery.astro

@@ -0,0 +1,121 @@
+---
+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 GalleryItem = {
+  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, { allowFixedStrings: true }) },
+  ]),
+)
+
+interface Props {
+  items: GalleryItem[]
+  layout: "book" | "video" | "portrait" | "landscape"
+}
+
+const { items, layout } = Astro.props
+---
+
+{
+  (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={[120, 160, 240, 320, 640]}
+                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-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 xl: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-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>
+  )
+}

package/src/components/Hero.astro

@@ -0,0 +1,82 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+interface Props {
+  image: ImageMetadata
+  title?: string
+  subtitle?: string
+  titleSize?: "sm" | "md" | "lg" | "xl"
+  titleClass?: string
+  subtitleSize?: "sm" | "md" | "lg" | "xl"
+  subtitleClass?: string
+  className?: string
+}
+const {
+  image,
+  title,
+  subtitle,
+  titleSize = "md",
+  subtitleSize = "md",
+  titleClass,
+  subtitleClass,
+  className,
+} = Astro.props
+
+const titleSizes = {
+  sm: "text-3xl sm:text-4xl md:text-5xl",
+  md: "text-4xl sm:text-5xl md:text-6xl",
+  lg: "text-5xl sm:text-6xl md:text-7xl",
+  xl: "text-6xl sm:text-7xl md:text-8xl",
+} as const
+
+const subtitleSizes = {
+  sm: "text-sm sm:text-base md:text-lg",
+  md: "sm:text-lg md:text-2xl",
+  lg: "text-lg sm:text-xl md:text-3xl",
+  xl: "text-xl sm:text-2xl md:text-4xl",
+} as const
+---
+
+<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]"
+      src={image}
+      widths={[320, 768, 1280, 2560, 3000]}
+      sizes="100vw"
+      loading="eager"
+      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:list={[className]}
+    >
+      {
+        title && (
+          <h1
+            class="max-w-screen-md font-bold transition-transform duration-1000 group-hover:scale-[102%]"
+            class:list={[titleSizes[titleSize], titleClass]}
+          >
+            {title}
+          </h1>
+        )
+      }
+      {
+        subtitle && (
+          <p
+            class="max-w-screen-sm font-bold"
+            class:list={[
+              "sm:text-lg md:text-2xl",
+              subtitleSizes[subtitleSize],
+              subtitleClass,
+            ]}
+          >
+            {subtitle}
+          </p>
+        )
+      }
+      <slot />
+    </div>
+  </div>
+</div>

package/src/components/HighlightSection.astro

@@ -0,0 +1,71 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import Icon from "./Icon"
+
+interface Props {
+  image: ImageMetadata
+  id?: string
+  title?: string
+  text?: string
+  link?: { href: string; text: string }
+  className?: string
+  titleClass?: string
+  textClass?: string
+}
+
+const { image, id, title, text, link, className, titleClass, textClass } =
+  Astro.props
+---
+
+<section
+  class="mt-24 w-full bg-gray-200 md:mt-28"
+  class:list={[className]}
+  id={id}
+>
+  <div class="flex flex-col overflow-hidden md:flex-row">
+    <Image
+      src={image}
+      alt=""
+      widths={[320, 640, 768, 1024, 1280, 2560]}
+      sizes="(max-width: 768px) 100vw, 50vw"
+      class="aspect-[4/3] w-full shrink-0 object-cover md:w-1/2 xl:aspect-video"
+    />
+    <div class="my-16 max-w-screen-sm px-4 md:px-8 lg:my-24 xl:px-16">
+      {
+        title && (
+          <h2
+            class="mb-4 text-2xl font-bold sm:mb-8 sm:text-3xl"
+            class:list={titleClass}
+          >
+            {title}
+          </h2>
+        )
+      }
+      {
+        text && (
+          <p class="mb-10 text-lg sm:mb-12" class:list={textClass}>
+            {text}
+          </p>
+        )
+      }
+      {
+        link && (
+          <a
+            class="bg-primary hover:bg-primary/85 inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:text-gray-100"
+            href={link.href}
+          >
+            {link.text}
+            <Icon
+              flipIcon={Astro.locals.i18n.direction === "rtl"}
+              className="mdi--arrow-right"
+              ariaLabel=""
+            />
+          </a>
+        )
+      }
+      <slot />
+    </div>
+  </div>
+</section>

package/src/components/Icon.tsx

@@ -0,0 +1,27 @@
+/**
+ * Icon Component.
+ *
+ * @param className containing a material design icon name prefixed with 'mdi--'
+ * @param ariaLabel accessibility label to be added e.g. for people using a screen reader. Empty string will hide the icon from a screen reader.
+ * @param flipIcon if set to true this will mirror the icon along its x-axis. Useful for RTL layouts.
+ * @see https://pictogrammers.com/library/mdi/ for available icons
+ * @returns icon
+ */
+export default function Icon({
+  className,
+  ariaLabel,
+  flipIcon,
+}: {
+  className: string
+  ariaLabel: string
+  flipIcon?: boolean
+}) {
+  return (
+    <span
+      className={`iconify text-2xl ${className} ${flipIcon && "scale-x-[-1]"}`}
+      aria-label={ariaLabel || undefined}
+      hidden={!ariaLabel}
+      role={ariaLabel ? "img" : undefined}
+    />
+  )
+}