lightnet 3.12.2 → 4.0.1

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

@@ -1,5 +1,4 @@
-import { compareMediaCollectionItems } from "./compare-media-collection-items"
-import type { MediaItemEntry } from "./content-schema"
+import type { MediaCollectionEntry, MediaItemEntry } from "./content-schema"
 
 export type MediaItemQuery<TMediaItem extends MediaItemEntry> = {
   /**
@@ -9,9 +8,7 @@ export type MediaItemQuery<TMediaItem extends MediaItemEntry> = {
     type?: TMediaItem["data"]["type"]["id"]
     language?: string
     category?: NonNullable<TMediaItem["data"]["categories"]>[number]["id"]
-    collection?: NonNullable<
-      TMediaItem["data"]["collections"]
-    >[number]["collection"]["id"]
+    collection?: MediaCollectionEntry["id"]
   }
   orderBy?: "dateCreated" | "title"
   limit?: number
@@ -19,6 +16,7 @@ export type MediaItemQuery<TMediaItem extends MediaItemEntry> = {
 
 export const queryMediaItems = async <TMediaItem extends MediaItemEntry>(
   allItems: Promise<TMediaItem[]>,
+  mediaCollections: Promise<MediaCollectionEntry[]>,
   query: MediaItemQuery<TMediaItem>,
 ) => {
   const { where = {}, orderBy, limit } = query
@@ -35,14 +33,18 @@ export const queryMediaItems = async <TMediaItem extends MediaItemEntry>(
       (item) => !!item.data.categories?.find(({ id }) => id === where.category),
     )
   }
+
+  let mediaCollection: MediaCollectionEntry | undefined
   if (where.collection) {
-    filters.push(
-      (item) =>
-        !!item.data.collections?.find(
-          ({ collection }) => collection.id === where.collection,
-        ),
+    mediaCollection = (await mediaCollections).find(
+      (mc) => mc.id === where.collection,
     )
+    const mediaIdsInCollection = new Set(
+      mediaCollection?.data.mediaItems.map(({ id }) => id),
+    )
+    filters.push((item) => mediaIdsInCollection.has(item.id))
   }
+
   const combinedFilter = (item: TMediaItem) =>
     filters.every((filter) => filter(item))
 
@@ -58,9 +60,17 @@ export const queryMediaItems = async <TMediaItem extends MediaItemEntry>(
       item1.data.title.localeCompare(item2.data.title),
     )
   }
-  const { collection } = where
-  if (!orderBy && collection) {
-    items.sort((a, b) => compareMediaCollectionItems(a, b, collection))
+
+  if (!orderBy && mediaCollection) {
+    const positionMap = new Map<string, number>()
+    mediaCollection.data.mediaItems.forEach((item, index) =>
+      positionMap.set(item.id, index),
+    )
+
+    items.sort(
+      (item1, item2) =>
+        (positionMap.get(item1.id) ?? -1) - (positionMap.get(item2.id) ?? -1),
+    )
   }
 
   return items.slice(0, limit)

package/src/i18n/bcp-47.ts

@@ -0,0 +1,8 @@
+export const isBcp47 = (value: string) => {
+  try {
+    new Intl.Locale(value)
+    return true
+  } catch {
+    return false
+  }
+}

package/src/i18n/get-locale-paths.ts

@@ -1,8 +1,6 @@
 import type { GetStaticPaths } from "astro"
 import config from "virtual:lightnet/config"
 
-import { resolveLocales } from "./resolve-locales"
-
 export const getLocalePaths = (() => {
-  return resolveLocales(config).map((locale) => ({ params: { locale } }))
+  return config.locales.map((locale) => ({ params: { locale } }))
 }) satisfies GetStaticPaths

package/src/i18n/locals.d.ts

@@ -16,10 +16,28 @@ type I18n = {
   t: import("./translate").TranslateFn
 
   /**
-   *  The current locale or the default locale if the current locale is not available.
+   * Resolve a translation map to the language of the current locale.
    *
-   *  In comparison to Astro.currentLocale this will always return a locale.
-   *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
+   * Use this for inline translation maps, such as labels from config or content entries.
+   *
+   * @param translationMap Localized values keyed by locale code.
+   * @param context Describes where the map came from. Pass the original
+   * field path so missing-translation messages can point to the exact config
+   * or content field that needs a value, for example `["config", "title"]`
+   * or `["content", 0, "label"]`.
+   *
+   * @example
+   * Astro.locals.i18n.tMap(config.title, {
+   *   path: ["config", "title"],
+   * })
+   */
+  tMap: import("./translate-map").TranslateMapFn
+
+  /**
+   *  The current locale resolved by LightNet from the URL pathname.
+   *
+   *  If no supported locale is present in the pathname,
+   *  this falls back to the configured default locale.
    */
   currentLocale: string
 

package/src/i18n/locals.ts

@@ -1,23 +1,30 @@
 import type { MiddlewareHandler } from "astro"
 import config from "virtual:lightnet/config"
 
-import { resolveDefaultLocale } from "./resolve-default-locale"
+import { resolveCurrentLocaleFromPathname } from "./resolve-current-locale"
 import { resolveLanguage } from "./resolve-language"
-import { resolveLocales } from "./resolve-locales"
-import { translationKeys, useTranslate } from "./translate"
+import { getTranslationKeys, useTranslate } from "./translate"
+import { useTranslateMap } from "./translate-map"
 
-export const onRequest: MiddlewareHandler = (
-  { locals, currentLocale: astroCurrentLocale },
-  next,
-) => {
+export const onRequest: MiddlewareHandler = async ({ locals, url }, next) => {
   if (!locals.i18n) {
-    const t = useTranslate(astroCurrentLocale)
-    const defaultLocale = resolveDefaultLocale(config)
-    const locales = resolveLocales(config)
-    const currentLocale = astroCurrentLocale ?? defaultLocale
+    const defaultLocale = config.defaultLocale
+    const locales = config.locales
+    const currentLocale = resolveCurrentLocaleFromPathname({
+      pathname: url.pathname,
+      base: import.meta.env.BASE_URL,
+      locales,
+      defaultLocale,
+    })
+    const [t, translationKeys] = await Promise.all([
+      useTranslate(currentLocale),
+      getTranslationKeys(),
+    ])
+    const tMap = useTranslateMap(currentLocale)
     const { direction } = resolveLanguage(currentLocale)
     locals.i18n = {
       t,
+      tMap,
       currentLocale,
       defaultLocale,
       direction,

package/src/i18n/resolve-current-locale.ts

@@ -0,0 +1,18 @@
+import { pathWithoutBase } from "../utils/paths"
+
+export function resolveCurrentLocaleFromPathname({
+  pathname,
+  base,
+  locales,
+  defaultLocale,
+}: {
+  pathname: string
+  base?: string
+  locales: string[]
+  defaultLocale: string
+}) {
+  const pathnameWithoutBase = base ? pathWithoutBase(pathname, base) : pathname
+  const firstPathSegment = pathnameWithoutBase.split("/")[1]
+
+  return locales.includes(firstPathSegment) ? firstPathSegment : defaultLocale
+}

package/src/i18n/resolve-language.ts

@@ -2,10 +2,10 @@ import { AstroError } from "astro/errors"
 import i18next from "i18next"
 import config from "virtual:lightnet/config"
 
-import type { TranslateFn } from "./translate"
+import type { TranslateMapFn } from "./translate-map"
 
 const languages = Object.fromEntries(
-  config.languages.map((lang) => [lang.code, lang]),
+  config.languages.map((language) => [language.code, language]),
 )
 
 export const resolveLanguage = (bcp47: string) => {
@@ -14,7 +14,7 @@ export const resolveLanguage = (bcp47: string) => {
   if (!language) {
     throw new AstroError(
       `Missing language code "${bcp47}"`,
-      `To fix the issue, add a language with the code "${bcp47}" to the LightNet configuration in your astro.config.mjs file.`,
+      `To fix the issue, add a language with the code "${bcp47}" to the LightNet configuration in your astro.config file.`,
     )
   }
   return {
@@ -23,10 +23,15 @@ export const resolveLanguage = (bcp47: string) => {
   }
 }
 
-export const resolveTranslatedLanguage = (bcp47: string, t: TranslateFn) => {
+export const resolveTranslatedLanguage = (
+  bcp47: string,
+  tMap: TranslateMapFn,
+) => {
   const language = resolveLanguage(bcp47)
   return {
     ...language,
-    labelText: t(language.label),
+    labelText: tMap(language.label, {
+      path: ["languages", bcp47, "label"],
+    }),
   }
 }

package/src/i18n/translate-map.ts

@@ -0,0 +1,70 @@
+import { AstroError } from "astro/errors"
+import config from "virtual:lightnet/config"
+
+/**
+ * A map of translated values keyed by locale code.
+ *
+ * @example
+ * {
+ *   en: "Hello",
+ *   de: "Hallo"
+ * }
+ */
+export type TranslationMap = Record<string, string | undefined>
+
+/**
+ * Describes where a translation map comes from so missing-value
+ * errors can point to the exact field in config or content.
+ */
+export type TranslationMapContext = {
+  path: (string | number)[]
+}
+
+/**
+ * Resolve a translation map for the current locale, falling back
+ * to configured default locale when needed.
+ *
+ * @param translationMap Localized values keyed by locale code.
+ * @param context Describes where this map came from in config or content.
+ * The `path` is required so missing-translation errors can name the exact
+ * field that needs fixing, for example `["config", "title"]` or
+ * `["content", 0, "label"]`.
+ */
+export type TranslateMapFn = (
+  translationMap: TranslationMap,
+  context: TranslationMapContext,
+) => string
+
+/**
+ * Create a locale-bound translation-map resolver.
+ *
+ * Use this for values that already contain their own translations,
+ * such as labels in config or content frontmatter. In contrast to `t`,
+ * this does not look up translation keys in translation files.
+ *
+ * @param currentLocale The locale that should be resolved first before
+ * falling back to LightNet's configured default locale.
+ */
+export function useTranslateMap(currentLocale: string): TranslateMapFn {
+  return (translationMap: TranslationMap, context: TranslationMapContext) => {
+    const currentLocaleValue = translationMap[currentLocale]
+    if (currentLocaleValue) {
+      return currentLocaleValue
+    }
+
+    const defaultLocaleValue = translationMap[config.defaultLocale]
+    if (defaultLocaleValue) {
+      return defaultLocaleValue
+    }
+
+    const availableLocales = Object.keys(translationMap)
+    const availableLocalesText = availableLocales.length
+      ? availableLocales.map((locale) => `"${locale}"`).join(", ")
+      : "none"
+
+    throw new AstroError(
+      `Missing translation map value for "${context.path.join(".")}" in locales "${currentLocale}" and "${config.defaultLocale}"`,
+      `Available locales: ${availableLocalesText}. Add a value for "${currentLocale}" or "${config.defaultLocale}" to this inline translation map.`,
+    )
+  }
+}

package/src/i18n/translate.ts

@@ -2,8 +2,7 @@ import { AstroError } from "astro/errors"
 import i18next, { type TOptions } from "i18next"
 import config from "virtual:lightnet/config"
 
-import { resolveDefaultLocale } from "./resolve-default-locale"
-import { resolveLanguage } from "./resolve-language"
+import { lazy } from "../utils/lazy"
 import { type LightNetTranslationKey, loadTranslations } from "./translations"
 
 // We add (string & NonNullable<unknown>) to preserve typescript autocompletion for known keys
@@ -11,67 +10,89 @@ export type TranslationKey =
   | LightNetTranslationKey
   | (string & NonNullable<unknown>)
 
-export type TranslateFn = (key: TranslationKey, options?: TOptions) => string
+export type TranslateFn = (input: TranslationKey, options?: TOptions) => string
+
+const fallbackLanguages = Object.fromEntries(
+  config.languages.map(({ code, fallbackLanguages }) => [
+    code,
+    fallbackLanguages,
+  ]),
+)
 
 const languageCodes = [
   ...new Set(
     config.languages
-      .filter((lng) => lng.isSiteLanguage)
-      .flatMap((lng) => [lng.code, ...lng.fallbackLanguages, "en"]),
+      .filter(({ isSiteLanguage }) => isSiteLanguage)
+      .flatMap(({ code, fallbackLanguages }) => [
+        code,
+        ...fallbackLanguages,
+        "en",
+      ]),
   ),
 ]
-const defaultLocale = resolveDefaultLocale(config)
 
-const translations = await prepareI18nextTranslations()
-export const translationKeys = [
-  ...new Set(
-    Object.values(translations)
-      .map(({ translation }) => translation)
-      .flatMap((oneLanguageTranslations) =>
-        Object.keys(oneLanguageTranslations),
-      ),
-  ),
-]
+const i18nextTranslations = lazy(async () => {
+  const result: Record<string, { translation: Record<string, string> }> = {}
+  for (const bcp47 of languageCodes) {
+    result[bcp47] = {
+      translation: await loadTranslations(bcp47),
+    }
+  }
+  return result
+})
 
-const i18n = i18next.createInstance({ showSupportNotice: false })
-await i18n.init({
-  lng: defaultLocale,
-  // don't use name spacing
-  nsSeparator: false,
-  // only use flat keys
-  keySeparator: false,
-  resources: translations,
+const translationKeys = lazy(async () => {
+  const translations = await i18nextTranslations.get()
+  return [
+    ...new Set(
+      Object.values(translations)
+        .map(({ translation }) => translation)
+        .flatMap((oneLanguageTranslations) =>
+          Object.keys(oneLanguageTranslations),
+        ),
+    ),
+  ]
 })
 
-export function useTranslate(bcp47: string | undefined): TranslateFn {
-  const resolvedLocale = bcp47 ?? defaultLocale
-  const t = i18n.getFixedT<TranslationKey>(resolvedLocale)
+export function getTranslationKeys() {
+  return translationKeys.get()
+}
+
+export async function useTranslate(
+  bcp47: string | undefined,
+): Promise<TranslateFn> {
+  const resolvedLocale = bcp47 ?? config.defaultLocale
+  const translations = await i18nextTranslations.get()
+  const availableTranslationKeys = new Set(await translationKeys.get())
+
+  const i18n = i18next.createInstance({ showSupportNotice: false })
+
+  await i18n.init({
+    lng: config.defaultLocale,
+    // don't use name spacing
+    nsSeparator: false,
+    // only use flat keys
+    keySeparator: false,
+    resources: translations,
+  })
+
   const fallbackLng = [
-    ...resolveLanguage(resolvedLocale).fallbackLanguages,
-    defaultLocale,
+    ...(fallbackLanguages[resolvedLocale] ?? []),
+    config.defaultLocale,
     "en",
   ]
-  return (key, options) => {
-    const value = t(key, { fallbackLng, ...options })
-    // i18next will return the key if no translation is found.
-    // If a value starts with ln. or x. we consider it to be
-    // a untranslated translation key.
-    if (value.match(/^(?:ln|x)\../i)) {
+  return (input, options) => {
+    const t = i18n.getFixedT(resolvedLocale) as (
+      key: TranslationKey,
+      options?: TOptions,
+    ) => string
+    const value = t(input, { fallbackLng, ...options })
+    if (value === input && !availableTranslationKeys.has(input)) {
       throw new AstroError(
-        `Missing translation: '${key}' is undefined for language '${resolvedLocale}'.`,
-        `To fix the issue, add a translation for '${key}' to src/translations/${resolvedLocale}.yml`,
+        `Missing translation: '${input}' is undefined for language '${resolvedLocale}'.`,
+        `To fix the issue, add a translation for '${input}' to src/translations/${resolvedLocale}.yml`,
       )
     }
     return value
   }
 }
-
-async function prepareI18nextTranslations() {
-  const result: Record<string, { translation: Record<string, string> }> = {}
-  for (const bcp47 of languageCodes) {
-    result[bcp47] = {
-      translation: await loadTranslations(bcp47),
-    }
-  }
-  return result
-}

package/src/layouts/Page.astro

@@ -6,6 +6,7 @@ import CustomHead from "virtual:lightnet/components/CustomHead"
 import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
+import { pathWithBase } from "../utils/paths"
 import Favicon from "./components/Favicon.astro"
 import Footer from "./components/Footer.astro"
 import Header from "./components/Header.astro"
@@ -19,9 +20,10 @@ interface Props {
 }
 
 const { title, description, mainClass, locale } = Astro.props
-const configTitle = Astro.locals.i18n.t(config.title)
-
 const currentLocale = locale ?? Astro.locals.i18n.currentLocale
+const configTitle = Astro.locals.i18n.tMap(config.title, {
+  path: ["config", "title"],
+})
 const { direction } = resolveLanguage(currentLocale)
 ---
 
@@ -34,7 +36,7 @@ const { direction } = resolveLanguage(currentLocale)
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}
     {config.manifest && <link rel="manifest" href={config.manifest} />}
-    <link rel="prefetch" href="/api/internal/search.json" />
+    <link rel="prefetch" href={pathWithBase("/api/internal/search.json")} />
     <Favicon />
     <ViewTransition />
   </head>

package/src/layouts/components/LanguagePicker.astro

@@ -1,39 +1,44 @@
 ---
+import { GlobeIcon } from "lucide-react"
+
 import { resolveTranslatedLanguage } from "../../i18n/resolve-language"
-import { localizePath } from "../../utils/paths"
+import { localizePath, pathWithoutBase } from "../../utils/paths"
 import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 
-const { t, locales } = Astro.locals.i18n
+const { locales, currentLocale, tMap } = Astro.locals.i18n
 
+const currentPath = pathWithoutBase(Astro.url.pathname)
 const hasLocale =
-  Astro.currentLocale &&
-  (Astro.url.pathname.startsWith(`/${Astro.currentLocale}/`) ||
-    Astro.url.pathname === `/${Astro.currentLocale}`)
+  currentLocale &&
+  (currentPath.startsWith(`/${currentLocale}/`) ||
+    currentPath === `/${currentLocale}`)
 
-const translations = locales
-  .map((locale) => ({
-    locale,
-    label: resolveTranslatedLanguage(locale, t).labelText,
-    active: locale === Astro.currentLocale,
-    href: currentPathWithLocale(locale),
-  }))
-  .sort((a, b) => a.label.localeCompare(b.label))
+const translations = (
+  await Promise.all(
+    locales.map(async (locale) => ({
+      locale,
+      label: resolveTranslatedLanguage(locale, tMap).labelText,
+      active: locale === currentLocale,
+      href: currentPathWithLocale(locale),
+    })),
+  )
+).sort((a, b) => a.label.localeCompare(b.label))
 
 function currentPathWithLocale(locale: string) {
-  const currentPath = Astro.url.pathname
   const currentPathWithoutLocale = hasLocale
-    ? currentPath.slice(Astro.currentLocale.length + 1)
+    ? currentPath.slice(currentLocale.length + 1)
     : currentPath
   return localizePath(locale, currentPathWithoutLocale)
 }
 
-const disabled = !hasLocale && Astro.url.pathname !== "/"
+const disabled = !hasLocale && currentPath !== "/"
 ---
 
 {
   translations.length > 1 && (
-    <Menu disabled={disabled} icon="mdi--web" label="ln.header.select-language">
+    <Menu disabled={disabled} label="ln.header.select-language">
+      <GlobeIcon slot="icon" />
       {translations.map(({ label, locale, active, href }) => (
         <MenuItem href={href} hreflang={locale} active={active}>
           {label}

package/src/layouts/components/Menu.astro

@@ -1,13 +1,10 @@
 ---
-import Icon from "../../components/Icon"
-
 interface Props {
-  icon: string
   label: string
   disabled?: boolean
 }
 
-const { icon, label, disabled } = Astro.props
+const { label, disabled } = Astro.props
 ---
 
 <ln-menu class="relative flex h-full items-center">
@@ -17,7 +14,7 @@ const { icon, label, disabled } = Astro.props
     aria-label={Astro.locals.i18n.t(label)}
     class="flex rounded-md p-3 text-gray-600 hover:text-primary disabled:text-gray-300"
   >
-    <Icon className={icon} ariaLabel="" />
+    <slot name="icon" />
   </button>
 
   <ul

package/src/layouts/components/MenuItem.astro

@@ -13,7 +13,7 @@ const { href, hreflang, active, target } = Astro.props
     href={href}
     hreflang={hreflang}
     target={target}
-    class="flex items-center gap-3 px-6 py-3 decoration-gray-800"
+    class="flex items-center gap-2 px-6 py-3 decoration-gray-800"
     class:list={[active ? "font-bold" : "hover:underline"]}
   >
     <slot />

package/src/layouts/components/PageNavigation.astro

@@ -1,7 +1,7 @@
 ---
+import { ExternalLinkIcon, MenuIcon, SearchIcon } from "lucide-react"
 import config from "virtual:lightnet/config"
 
-import Icon from "../../components/Icon"
 import { localizePath, searchPagePath } from "../../utils/paths"
 import { isExternalUrl } from "../../utils/urls"
 import LanguagePicker from "./LanguagePicker.astro"
@@ -9,26 +9,28 @@ import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 
 const currentPath = Astro.url.pathname
-const items = (config.mainMenu ?? []).map(({ href, label, requiresLocale }) => {
-  const isExternal = isExternalUrl(href)
-  const path =
-    isExternal || !requiresLocale
-      ? href
-      : localizePath(Astro.currentLocale, href)
-  const isActive =
-    !isExternal &&
-    (currentPath === localizePath(Astro.currentLocale, href) ||
-      currentPath === localizePath(Astro.currentLocale, `${href}/`) ||
-      currentPath === href)
-  return {
-    path,
-    isExternal,
-    label,
-    isActive,
-  }
-})
+const { t, tMap, currentLocale } = Astro.locals.i18n
 
-const t = Astro.locals.i18n.t
+const items = (config.mainMenu ?? []).map(
+  ({ href, label, requiresLocale }, index) => {
+    const isExternal = isExternalUrl(href)
+    const path =
+      isExternal || !requiresLocale ? href : localizePath(currentLocale, href)
+    const isActive =
+      !isExternal &&
+      (currentPath === localizePath(currentLocale, href) ||
+        currentPath === localizePath(currentLocale, `${href}/`) ||
+        currentPath === href)
+    return {
+      path,
+      isExternal,
+      labelText: tMap(label, {
+        path: ["config", "mainMenu", index, "label"],
+      }),
+      isActive,
+    }
+  },
+)
 ---
 
 <nav class="-me-3 flex items-center">
@@ -38,9 +40,9 @@ const t = Astro.locals.i18n.t
         class="flex p-3 text-gray-600 hover:text-primary"
         aria-label={t("ln.search.title")}
         data-astro-prefetch="viewport"
-        href={searchPagePath(Astro.currentLocale)}
+        href={searchPagePath(currentLocale)}
       >
-        <Icon className="mdi--magnify" ariaLabel="" />
+        <SearchIcon />
       </a>
     )
   }
@@ -49,19 +51,17 @@ const t = Astro.locals.i18n.t
 
   {
     !!items.length && (
-      <Menu icon="mdi--menu" label="ln.header.open-main-menu">
-        {items.map(({ label, path, isActive, isExternal }) => (
+      <Menu label="ln.header.open-main-menu">
+        <MenuIcon slot="icon" />
+        {items.map(({ labelText, path, isActive, isExternal }) => (
           <MenuItem
             href={path}
             active={isActive}
             target={isExternal ? "_blank" : "_self"}
           >
-            {t(label)}
+            {labelText}
             {isExternal && (
-              <Icon
-                className="mdi--external-link shrink-0 text-base"
-                ariaLabel=""
-              />
+              <ExternalLinkIcon size="1.2rem" className="shrink-0" />
             )}
           </MenuItem>
         ))}