lightnet 4.2.0 → 4.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # lightnet
 
+## 4.3.0
+
+### Minor Changes
+
+- [#405](https://github.com/LightNetDev/LightNet/pull/405) [`522ffae`](https://github.com/LightNetDev/LightNet/commit/522ffaed830b9e68f5479567ee326c5439ea0f27) - Add a footer language selector with shared locale-path logic and a footer-specific accessible label.
+
+- [#408](https://github.com/LightNetDev/LightNet/pull/408) [`d0aaa12`](https://github.com/LightNetDev/LightNet/commit/d0aaa12477bec601bcd10d46290f287dc2174b60) - Support a `{{year}}` placeholder in localized footer text.
+
+### Patch Changes
+
+- [#407](https://github.com/LightNetDev/LightNet/pull/407) [`e5fa59b`](https://github.com/LightNetDev/LightNet/commit/e5fa59bbfce0aca158db08c91201fc8e03ecbaeb) - Update dependencies
+
+- [#405](https://github.com/LightNetDev/LightNet/pull/405) [`522ffae`](https://github.com/LightNetDev/LightNet/commit/522ffaed830b9e68f5479567ee326c5439ea0f27) - Rename the shared language selection translation key to `ln.select-language` and update all locale files, comments, and call sites. This changes the public translation key used by downstream custom translations.
+
+## 4.2.1
+
+### Patch Changes
+
+- [#401](https://github.com/LightNetDev/LightNet/pull/401) [`b3db519`](https://github.com/LightNetDev/LightNet/commit/b3db519e7c0492b66f6aa26875cb91fe841fcdd5) - Adjusted footer link separator and wrapping behavior to use the updated CSS-only footer layout.
+
+- [#404](https://github.com/LightNetDev/LightNet/pull/404) [`5acab49`](https://github.com/LightNetDev/LightNet/commit/5acab49ca79078edbba3868b9b7bce249b2fca8a) - Update dependencies.
+
 ## 4.2.0
 
 ### Minor Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -51,29 +51,29 @@
     "tailwindcss": ">=3.4.0 <4.0.0"
   },
   "dependencies": {
-    "@astrojs/react": "^5.0.5",
-    "@iconify-json/lucide": "^1.2.108",
+    "@astrojs/react": "^5.0.7",
+    "@iconify-json/lucide": "^1.2.111",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.19",
-    "@tanstack/react-virtual": "^3.13.24",
+    "@tanstack/react-virtual": "^3.14.2",
     "autoprefixer": "^10.5.0",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "fuse.js": "^7.3.0",
-    "i18next": "^26.2.0",
-    "lucide-react": "^1.16.0",
-    "marked": "^18.0.3",
-    "postcss": "^8.5.14",
+    "fuse.js": "^7.4.2",
+    "i18next": "^26.3.1",
+    "lucide-react": "^1.17.0",
+    "marked": "^18.0.5",
+    "postcss": "^8.5.15",
     "postcss-load-config": "^6.0.1",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.60.0",
-    "@types/react": "^19.2.14",
-    "astro": "^6.3.3",
+    "@types/react": "^19.2.17",
+    "astro": "^6.4.4",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.6",
+    "vitest": "^4.1.8",
     "@internal/e2e-test-utils": "^0.0.1"
   },
   "engines": {

package/src/astro-integration/config.ts

@@ -115,6 +115,10 @@ export const configSchema = z.object({
   credits: z.boolean().default(false),
   /**
    * Optional localized text to display in your site's footer.
+   *
+   * Use `{{year}}` to render the current calendar year.
+   *
+   * @example { en: "Copyright {{year}} LightNet" }
    */
   footerText: translationMapSchema.optional(),
   /**

package/src/i18n/translations/ar.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: افتح القائمة الرئيسية
-ln.header.select-language: اختر اللغة
+ln.select-language: اختر اللغة
 ln.home.title: الصفحة الرئيسية
 ln.category: الفئة
 ln.categories: الفئات

package/src/i18n/translations/bn.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: প্রধান মেনু খুলুন
-ln.header.select-language: ভাষা নির্বাচন করুন
+ln.select-language: ভাষা নির্বাচন করুন
 ln.home.title: হোম
 ln.category: বিভাগ
 ln.categories: বিভাগসমূহ

package/src/i18n/translations/de.yml

@@ -14,7 +14,7 @@ ln.details.download: Download
 ln.details.edit: Bearbeiten
 ln.details.share: Teilen
 ln.header.open-main-menu: Öffne Hauptmenü
-ln.header.select-language: Sprache auswählen
+ln.select-language: Sprache auswählen
 ln.home.title: Startseite
 ln.search.all-categories: Alle Kategorien
 ln.search.all-languages: Alle Sprachen

package/src/i18n/translations/en.yml

@@ -10,7 +10,7 @@ ln.header.open-main-menu: Open main menu
 #
 # English: Select language
 # Used on: https://kuuluu.org/en (not visible)
-ln.header.select-language: Select language
+ln.select-language: Select language
 
 # Display name for the home page.
 #

package/src/i18n/translations/es.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Abrir menú principal
-ln.header.select-language: Seleccionar idioma
+ln.select-language: Seleccionar idioma
 ln.home.title: Inicio
 ln.category: Categoría
 ln.categories: Categorías

package/src/i18n/translations/fi.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Avaa päävalikko
-ln.header.select-language: Valitse kieli
+ln.select-language: Valitse kieli
 ln.home.title: Etusivu
 ln.category: Kategoria
 ln.categories: Kategoriat

package/src/i18n/translations/fr.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Ouvrir le menu principal
-ln.header.select-language: Sélectionner la langue
+ln.select-language: Sélectionner la langue
 ln.home.title: Accueil
 ln.category: Catégorie
 ln.categories: Catégories

package/src/i18n/translations/hi.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: मुख्य मेनू खोलें
-ln.header.select-language: भाषा चुनें
+ln.select-language: भाषा चुनें
 ln.home.title: मुखपृष्ठ
 ln.category: श्रेणी
 ln.categories: श्रेणियाँ

package/src/i18n/translations/kk.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Бастапқы мәзірді ашу
-ln.header.select-language: Тіл таңдау
+ln.select-language: Тіл таңдау
 ln.home.title: Басты бет
 ln.category: Санат
 ln.categories: Барлық санаттар

package/src/i18n/translations/pt.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Abrir menu principal
-ln.header.select-language: Escolher idioma
+ln.select-language: Escolher idioma
 ln.home.title: Início
 ln.category: Categoria
 ln.categories: Categorias

package/src/i18n/translations/ru.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Открыть главное меню
-ln.header.select-language: Выберите язык
+ln.select-language: Выберите язык
 ln.home.title: Главная
 ln.category: Категория
 ln.categories: Категории

package/src/i18n/translations/uk.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: Відкрити головне меню
-ln.header.select-language: Оберіть мову
+ln.select-language: Оберіть мову
 ln.home.title: Головна
 ln.category: Категорія
 ln.categories: Категорії

package/src/i18n/translations/ur.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: مرکزی مینو کھولیں
-ln.header.select-language: زبان منتخب کریں
+ln.select-language: زبان منتخب کریں
 ln.home.title: ہوم
 ln.category: زمرہ
 ln.categories: زمروں

package/src/i18n/translations/zh.yml

@@ -1,5 +1,5 @@
 ln.header.open-main-menu: 打开主菜单
-ln.header.select-language: 选择语言
+ln.select-language: 选择语言
 ln.home.title: 首页
 ln.category: 分类
 ln.categories: 分类

package/src/i18n/translations.ts

@@ -82,7 +82,7 @@ export type LightNetTranslationKey =
   | "ln.details.part-of-collection"
   | "ln.details.download"
   | "ln.header.open-main-menu"
-  | "ln.header.select-language"
+  | "ln.select-language"
   | "ln.home.title"
   | "ln.search.all-categories"
   | "ln.search.all-languages"

package/src/layouts/components/Footer.astro

@@ -1,15 +1,18 @@
 ---
+import { GlobeIcon } from "lucide-react"
 import config from "virtual:lightnet/config"
 
 import { getLinkAttributes } from "../../utils/link-attributes"
 import { localizePath } from "../../utils/paths"
+import { formatFooterText } from "./format-footer-text"
+import { getLanguageSelectionMenuItems } from "./get-language-selection-menu-items"
 import LightNetLogo from "./LightNetLogo.svg"
 
 const { t, tConfigField, currentLocale } = Astro.locals.i18n
 
 // Resolve optional footer text for the current locale.
 const footerText = config.footerText
-  ? tConfigField(config.footerText, config)
+  ? formatFooterText(tConfigField(config.footerText, config))
   : undefined
 
 // Prepare footer links using the same locale rules as the main menu.
@@ -22,56 +25,125 @@ const footerLinks = (config.footerLinks ?? []).map(
   },
 )
 
+const { links: languageMenuItems } = getLanguageSelectionMenuItems({
+  currentLocale,
+  pathname: Astro.url.pathname,
+  tConfigField,
+})
+
+const shouldShowLanguageSelector = languageMenuItems.length > 1
+
 // Hide the footer entirely when there is nothing to show.
 const shouldRenderFooter =
-  config.credits || !!footerText || footerLinks.length > 0
+  config.credits ||
+  !!footerText ||
+  footerLinks.length > 0 ||
+  shouldShowLanguageSelector
 
 if (!shouldRenderFooter) {
   return
 }
+
+const footerItems = [
+  ...(footerText ? [{ type: "text" as const, label: footerText }] : []),
+  ...footerLinks.map((link) => ({ type: "link" as const, ...link })),
+]
 ---
 
 <footer class="w-full border-t border-gray-200 bg-white">
-  <div
-    class="mx-auto flex w-full max-w-screen-xl flex-col items-center justify-between gap-4 px-4 py-6 md:flex-row md:px-8"
-  >
-    <div
-      class="flex flex-wrap items-center justify-center gap-2 text-sm text-gray-700 md:justify-start"
-    >
-      {footerText && <span>{footerText}</span>}
-
+  <div class="mx-auto w-full max-w-screen-xl px-4 md:px-8">
+    <div class="flex flex-col gap-4 py-6">
       {
-        footerLinks.map((link, index) => (
-          <Fragment>
-            {(footerText || index > 0) && <span class="text-gray-400">·</span>}
-            <a
-              {...getLinkAttributes(link.href)}
-              class="underline-offset-4 hover:underline"
-            >
-              {link.label}
-            </a>
-          </Fragment>
-        ))
+        shouldShowLanguageSelector && (
+          <div class="flex w-full justify-start">
+            <label class="inline-flex items-center gap-2 bg-white py-2 text-sm text-gray-800">
+              <GlobeIcon
+                className="h-4 w-4 shrink-0 text-gray-500"
+                aria-hidden="true"
+              />
+              <span class="sr-only">{t("ln.select-language")}</span>
+              <select
+                class="min-w-0 cursor-pointer appearance-none border-0 bg-transparent p-0 pr-0 text-sm font-medium text-gray-800 outline-none focus:ring-0"
+                aria-label={t("ln.select-language")}
+                data-footer-language-select
+              >
+                {languageMenuItems.map(({ href, label, locale, active }) => (
+                  <option value={href} selected={active} lang={locale}>
+                    {label}
+                  </option>
+                ))}
+              </select>
+            </label>
+          </div>
+        )
       }
-    </div>
 
-    {
-      config.credits && (
-        <div class="flex items-center text-sm">
-          <a
-            class="flex items-center gap-2 text-gray-800 underline-offset-4 hover:underline"
-            {...getLinkAttributes("https://lightnet.community")}
-          >
-            <img
-              src={LightNetLogo.src}
-              alt=""
-              class="h-5 w-auto"
-              loading="lazy"
-            />
-            <span>{t("ln.footer.powered-by-lightnet")}</span>
-          </a>
-        </div>
-      )
-    }
+      <div
+        class="flex w-full flex-col gap-4 text-sm text-gray-800 md:flex-row md:items-center md:justify-between md:gap-6"
+      >
+        {
+          footerItems.length > 0 && (
+            <div class="flex w-full flex-row flex-wrap items-center gap-x-2 gap-y-1 md:w-auto">
+              {footerItems.map((item, index) => (
+                <span class="inline-flex items-center gap-1.5">
+                  <span
+                    class:list={[
+                      "w-3 shrink-0 justify-center text-center text-[0.8em] leading-none text-gray-400",
+                      index === 0 ? "hidden" : "inline-flex",
+                    ]}
+                    aria-hidden="true"
+                  >
+                    &middot;
+                  </span>
+                  {item.type === "text" ? (
+                    <span class="text-gray-800">{item.label}</span>
+                  ) : (
+                    <a
+                      {...getLinkAttributes(item.href)}
+                      class="text-gray-800 underline-offset-4 hover:underline"
+                    >
+                      {item.label}
+                    </a>
+                  )}
+                </span>
+              ))}
+            </div>
+          )
+        }
+
+        {
+          config.credits && (
+            <div class="flex w-full items-center justify-start md:w-auto md:justify-end">
+              <a
+                class="flex items-center gap-2 whitespace-nowrap text-gray-800 underline-offset-4 hover:underline"
+                {...getLinkAttributes("https://lightnet.community")}
+              >
+                <img
+                  src={LightNetLogo.src}
+                  alt=""
+                  class="h-5 w-auto"
+                  loading="lazy"
+                />
+                <span>{t("ln.footer.powered-by-lightnet")}</span>
+              </a>
+            </div>
+          )
+        }
+      </div>
+    </div>
   </div>
 </footer>
+
+<script>
+  const footerLanguageSelect = document.querySelector<HTMLSelectElement>(
+    "[data-footer-language-select]",
+  )
+
+  footerLanguageSelect?.addEventListener("change", () => {
+    if (!footerLanguageSelect.value) {
+      return
+    }
+
+    window.location.assign(footerLanguageSelect.value)
+  })
+</script>

package/src/layouts/components/LanguagePicker.astro

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

package/src/layouts/components/format-footer-text.ts

@@ -0,0 +1,14 @@
+/**
+ * Replaces supported placeholders in localized footer text.
+ *
+ * Use `{{year}}` to render the current calendar year.
+ *
+ * @param text Localized footer text from LightNet config.
+ * @param currentYear Year to render. Defaults to the current system year.
+ */
+export const formatFooterText = (
+  text: string,
+  currentYear = new Date().getFullYear(),
+) => {
+  return text.replaceAll("{{year}}", String(currentYear))
+}

package/src/layouts/components/get-language-selection-menu-items.ts

@@ -0,0 +1,47 @@
+import config from "virtual:lightnet/config"
+
+import { resolveLanguage } from "../../i18n/resolve-language"
+import type { TranslateConfigFieldFn } from "../../i18n/translate-map"
+import { localizePath, pathWithoutBase } from "../../utils/paths"
+
+export type LanguageLink = {
+  active: boolean
+  href: string
+  label: string
+  locale: string
+}
+
+export function getLanguageSelectionMenuItems({
+  currentLocale,
+  pathname,
+  tConfigField,
+}: {
+  currentLocale: string
+  pathname: string
+  tConfigField: TranslateConfigFieldFn
+}) {
+  const currentPath = pathWithoutBase(pathname)
+  const hasLocale = Boolean(
+    currentLocale &&
+    (currentPath.startsWith(`/${currentLocale}/`) ||
+      currentPath === `/${currentLocale}`),
+  )
+
+  const links = config.locales
+    .map((locale) => ({
+      locale,
+      label: tConfigField(resolveLanguage(locale).label, config),
+      active: locale === currentLocale,
+      href: localizePath(
+        locale,
+        hasLocale ? currentPath.slice(currentLocale.length + 1) : currentPath,
+      ),
+    }))
+    .sort((a, b) => a.label.localeCompare(b.label, currentLocale))
+
+  return {
+    currentPath,
+    hasLocale,
+    links,
+  }
+}