lightnet 3.10.7 → 3.11.0

package/src/astro-integration/integration.ts

@@ -72,12 +72,12 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
           })
 
           injectRoute({
-            pattern: "/[locale]/admin",
+            pattern: "/admin",
             entrypoint: "lightnet/admin/pages/AdminRoute.astro",
             prerender: true,
           })
           injectRoute({
-            pattern: "/[locale]/admin/media/[mediaId]",
+            pattern: "/admin/media/[mediaId]",
             entrypoint: "lightnet/admin/pages/media/EditRoute.astro",
             prerender: true,
           })
@@ -114,7 +114,11 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
             locales: resolveLocales(config),
             routing: {
               redirectToDefaultLocale: false,
-              prefixDefaultLocale: true,
+              // We need to set this to false to allow for
+              // admin paths without locale. But actually
+              // the default locale will be prefixed for regular
+              // LightNet pages.
+              prefixDefaultLocale: false,
               fallbackType: "rewrite",
             },
           },

package/src/components/SearchInput.astro

@@ -12,11 +12,11 @@ const { t } = Astro.locals.i18n
   action={`/${Astro.currentLocale}/media`}
   method="get"
   role="search"
-  class="group dy-join w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
+  class="group flex w-full rounded-2xl shadow-sm outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out group-focus-within:outline-gray-400"
   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"
+    class="grow rounded-s-2xl bg-gray-100/95 px-4 py-3 text-gray-900 placeholder-gray-500 shadow-inner focus:outline-none"
     enterkeyhint="search"
     type="search"
     name="search"
@@ -24,7 +24,7 @@ const { t } = Astro.locals.i18n
   />
   <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"
+    class="flex items-center rounded-e-2xl border border-gray-100/95 bg-gray-800 px-4 py-3 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
   >
     <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
   </button>

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

@@ -59,7 +59,8 @@ async function revertMediaItemEntry({ id, data: mediaItem }: MediaItemEntry) {
     ...collection,
     collection: collection.collection.id,
   }))
-  const image = (await getEntry("internal-media-image-path", id))?.data.image
+  const image =
+    (await getEntry("internal-media-image-path", id))?.data.image ?? ""
   return {
     id,
     data: {

package/src/i18n/react/i18n-context.ts

@@ -1,7 +1,7 @@
 import { createContext, useMemo } from "react"
 
 export type I18n = {
-  t: (key: string) => string
+  t: (key: string, params?: Record<string, unknown>) => string
   currentLocale: string
   direction: "rtl" | "ltr"
 }
@@ -12,6 +12,17 @@ export type I18nConfig = Omit<I18n, "t"> & {
 
 export const I18nContext = createContext<I18n | undefined>(undefined)
 
+const interpolate = (value: string, params?: Record<string, unknown>) => {
+  if (!params) {
+    return value
+  }
+  return Object.entries(params ?? {}).reduce(
+    (prev, [paramName, paramValue]) =>
+      prev.replaceAll(`{{${paramName}}}`, `${paramValue}`),
+    value,
+  )
+}
+
 /**
  * Creates the runtime i18n helpers given a prepared configuration.
  * Wraps the raw translation dictionary with a lookup that throws on missing keys.
@@ -22,16 +33,16 @@ export const createI18n = ({
   direction,
 }: I18nConfig) => {
   return useMemo(() => {
-    const t = (key: string) => {
+    const t = (key: string, params?: Record<string, unknown>) => {
       const value = translations[key]
       if (value) {
-        return value
+        return interpolate(value, params)
       }
-      if (key.match(/^(?:ln|x)\../i)) {
+      if (!key || key.match(/^(?:ln|x)\../i)) {
         console.error(`Missing translation for key ${key}`)
         return ""
       }
-      return key
+      return interpolate(key, params)
     }
     return { t, currentLocale, direction }
   }, [])

package/src/i18n/react/prepare-i18n-config.ts

@@ -1,5 +1,5 @@
 /**
- * Prepares the configuration object passed from an Astro page to the React i18n context.
+ * Prepares the configuration object passed from an Astro page to the react i18n context.
  * Resolves every requested translation key (supporting wildcard suffixes like `ln.dashboard.*`)
  * so the React island receives only the strings it needs.
  *

package/src/i18n/react/{useI18n.ts → use-i18n.ts}

@@ -4,7 +4,7 @@ import { I18nContext } from "./i18n-context"
 
 /**
  * Retrieves the current i18n helpers from context.
- * Must be called inside a React tree wrapped with `I18nContext.Provider`, otherwise throws.
+ * Must be called inside a react tree wrapped with `I18nContext.Provider`, otherwise throws.
  */
 export const useI18n = () => {
   const i18n = useContext(I18nContext)

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

@@ -53,6 +53,10 @@ All keys have been translated. ✅
 
 All keys have been translated. ✅
 
+## **UR** ([ur.yml](./ur.yml))
+
+All keys have been translated. ✅
+
 ## **ZH** ([zh.yml](./zh.yml))
 
 All keys have been translated. ✅

package/src/i18n/translations/ur.yml

@@ -0,0 +1,25 @@
+ln.header.open-main-menu: مرکزی مینو کھولیں
+ln.header.select-language: زبان منتخب کریں
+ln.home.title: ہوم
+ln.category: زمرہ
+ln.categories: زمروں
+ln.language: زبان
+ln.languages: زبانیں
+ln.type: قسم
+ln.previous: پچھلا
+ln.next: اگلا
+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: ہوم پیج پر جائیں
+ln.footer.powered-by-lightnet: لائٹ نیٹ کے ذریعے چلایا گیا

package/src/i18n/translations.ts

@@ -18,6 +18,7 @@ const builtInTranslations = {
   pt: () => import("./translations/pt.yml?raw"),
   ru: () => import("./translations/ru.yml?raw"),
   uk: () => import("./translations/uk.yml?raw"),
+  ur: () => import("./translations/ur.yml?raw"),
   zh: () => import("./translations/zh.yml?raw"),
 } as const
 

package/src/layouts/Page.astro

@@ -7,24 +7,24 @@ import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
 import Footer from "./components/Footer.astro"
 import Header from "./components/Header.astro"
-import PreloadReact from "./components/PreloadReact"
 import ViewTransition from "./components/ViewTransition.astro"
 
 interface Props {
   title?: string
   description?: string
   mainClass?: string
+  locale?: string
 }
 
-const { title, description, mainClass } = Astro.props
+const { title, description, mainClass, locale } = Astro.props
 const configTitle = Astro.locals.i18n.t(config.title)
 
-const { currentLocale } = Astro.locals.i18n
-const language = resolveLanguage(currentLocale)
+const currentLocale = locale ?? Astro.locals.i18n.currentLocale
+const { direction } = resolveLanguage(currentLocale)
 ---
 
 <!doctype html>
-<html lang={currentLocale} dir={language.direction}>
+<html lang={currentLocale} dir={direction}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -44,6 +44,5 @@ const language = resolveLanguage(currentLocale)
       <slot />
     </main>
     {CustomFooter ? <CustomFooter /> : <Footer />}
-    <PreloadReact client:idle />
   </body>
 </html>

package/src/layouts/components/LanguagePicker.astro

@@ -6,6 +6,11 @@ import MenuItem from "./MenuItem.astro"
 
 const { t, locales } = Astro.locals.i18n
 
+const hasLocale =
+  Astro.currentLocale &&
+  (Astro.url.pathname.startsWith(`/${Astro.currentLocale}/`) ||
+    Astro.url.pathname === `/${Astro.currentLocale}`)
+
 const translations = locales
   .map((locale) => ({
     locale,
@@ -17,17 +22,18 @@ const translations = locales
 
 function currentPathWithLocale(locale: string) {
   const currentPath = Astro.url.pathname
-  const currentPathWithoutLocale =
-    Astro.currentLocale && currentPath.startsWith(`/${Astro.currentLocale}`)
-      ? currentPath.slice(Astro.currentLocale.length + 1)
-      : currentPath
+  const currentPathWithoutLocale = hasLocale
+    ? currentPath.slice(Astro.currentLocale.length + 1)
+    : currentPath
   return localizePath(locale, currentPathWithoutLocale)
 }
+
+const disabled = !hasLocale && Astro.url.pathname !== "/"
 ---
 
 {
   translations.length > 1 && (
-    <Menu icon="mdi--web" label="ln.header.select-language">
+    <Menu disabled={disabled} icon="mdi--web" label="ln.header.select-language">
       {translations.map(({ label, locale, active, href }) => (
         <MenuItem href={href} hreflang={locale} active={active}>
           {label}

package/src/layouts/components/Menu.astro

@@ -4,25 +4,91 @@ import Icon from "../../components/Icon"
 interface Props {
   icon: string
   label: string
+  disabled?: boolean
 }
 
-const { icon, label } = Astro.props
+const { icon, label, disabled } = Astro.props
 ---
 
-<div class="dy-dropdown dy-dropdown-end">
-  <div
-    role="button"
-    tabindex="0"
+<ln-menu class="relative flex h-full items-center">
+  <button
+    disabled={disabled}
+    aria-disabled={disabled}
     aria-label={Astro.locals.i18n.t(label)}
-    class="flex cursor-pointer rounded-md p-3 text-gray-600 hover:text-primary"
+    class="flex rounded-md p-3 text-gray-600 hover:text-primary disabled:text-gray-300"
   >
     <Icon className={icon} ariaLabel="" />
-  </div>
+  </button>
 
   <ul
-    tabindex="0"
-    class="dy-dropdown-content top-px me-3 mt-[3.25rem] w-48 overflow-hidden rounded-b-md bg-white py-3 shadow-lg sm:mt-16"
+    data-menu-panel
+    aria-hidden="true"
+    inert
+    class="pointer-events-none absolute end-3 top-full mt-px flex w-48 origin-top scale-y-90 flex-col overflow-hidden rounded-b-md bg-white py-3 opacity-0 shadow-lg transition-all duration-100 ease-out"
   >
     <slot />
   </ul>
-</div>
+</ln-menu>
+<script>
+  class Menu extends HTMLElement {
+    menuPanel = this.querySelector<HTMLElement>("[data-menu-panel]")!
+    isMenuOpened = false
+    handleOutsideClick = (event: MouseEvent) => {
+      if (!this.isMenuOpened) {
+        return
+      }
+      const target = event.target as Node | null
+      if (target && this.contains(target)) {
+        return
+      }
+      this.closeMenu()
+    }
+
+    toggleMenu() {
+      if (this.isMenuOpened) {
+        this.closeMenu()
+      } else {
+        this.openMenu()
+      }
+    }
+
+    openMenu() {
+      if (this.isMenuOpened) {
+        return
+      }
+      this.menuPanel.style.opacity = "1"
+      this.menuPanel.style.pointerEvents = "auto"
+      this.menuPanel.style.transform = "scaleY(1)"
+
+      this.menuPanel.setAttribute("aria-hidden", "false")
+      this.menuPanel.removeAttribute("inert")
+      document.addEventListener("click", this.handleOutsideClick)
+      this.isMenuOpened = true
+    }
+
+    closeMenu() {
+      if (!this.isMenuOpened) {
+        return
+      }
+      this.menuPanel.style.opacity = "0"
+      this.menuPanel.style.pointerEvents = "none"
+      this.menuPanel.style.transform = "scaleY(0.9)"
+
+      this.menuPanel.setAttribute("aria-hidden", "true")
+      this.menuPanel.setAttribute("inert", "")
+      document.removeEventListener("click", this.handleOutsideClick)
+      this.isMenuOpened = false
+    }
+
+    connectedCallback() {
+      this.querySelector("button")?.addEventListener("click", () =>
+        this.toggleMenu(),
+      )
+
+      window.addEventListener("beforeunload", () => {
+        this.closeMenu()
+      })
+    }
+  }
+  customElements.define("ln-menu", Menu)
+</script>

package/src/pages/404Route.astro

@@ -7,7 +7,9 @@ import Page from "../layouts/Page.astro"
     <p class="pb-8 pt-20 text-center text-3xl opacity-80">
       {Astro.locals.i18n.t("ln.404.page-not-found")}
     </p>
-    <a href={`/${Astro.locals.i18n.defaultLocale}`} class="dy-btn"
+    <a
+      href={`/${Astro.locals.i18n.defaultLocale}`}
+      class="rounded-2xl bg-gray-200 px-8 py-4 text-sm font-bold transition-colors ease-in-out hover:bg-gray-400"
       >{Astro.locals.i18n.t("ln.404.go-to-the-home-page")}</a
     >
   </div>

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

@@ -14,7 +14,7 @@ const { mediaId } = Astro.props
   class="hidden cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   id="edit-btn"
   data-admin-enabled={config.experimental?.admin?.enabled}
-  href={`/${Astro.currentLocale}/admin/media/${mediaId}`}
+  href={`/admin/media/${mediaId}`}
   ><Icon className="mdi--square-edit-outline" ariaLabel="" />
   {Astro.locals.i18n.t("ln.admin.edit")}</a
 >

package/src/pages/details-page/utils/create-content-metadata.ts

@@ -18,6 +18,7 @@ const KNOWN_EXTENSIONS: Record<
   php: { type: "link", canBeOpened: true },
   json: { type: "source", canBeOpened: true },
   xml: { type: "source", canBeOpened: true },
+  md: { type: "source", canBeOpened: true },
   svg: { type: "image", canBeOpened: true },
   jpg: { type: "image", canBeOpened: true },
   jpeg: { type: "image", canBeOpened: true },
@@ -62,7 +63,7 @@ export function createContentMetadata({
   const fileName = hasExtension
     ? lastPathSegment.slice(0, -(extension.length + 1))
     : undefined
-  const label = customLabel ?? fileName ?? linkName
+  const label = customLabel || fileName || linkName
   const type = KNOWN_EXTENSIONS[extension]?.type ?? "link"
   const canBeOpened =
     !hasExtension || !!KNOWN_EXTENSIONS[extension]?.canBeOpened

package/src/pages/search-page/components/LoadingSkeleton.tsx

@@ -1,21 +1,28 @@
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 
 export default function LoadingSkeleton() {
   const { direction } = useI18n()
   return (
-    <div className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64">
-      <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>
-      <div className="ms-5 flex grow flex-col gap-3">
-        <div className="h-4 w-1/2 rounded-md bg-gray-200 md:h-6"></div>
-        <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
-        <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
-      </div>
-      <Icon
-        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
-        flipIcon={direction === "rtl"}
-        ariaLabel=""
-      />
-    </div>
+    <ul>
+      {Array.from({ length: 8 }, (_, index) => (
+        <li
+          key={index}
+          className="flex h-52 animate-pulse items-center overflow-hidden py-2 sm:h-64"
+        >
+          <div className="h-36 w-36 shrink-0 rounded-md bg-gray-200"></div>
+          <div className="ms-5 flex grow flex-col gap-3">
+            <div className="h-4 w-1/2 rounded-md bg-gray-200 md:h-6"></div>
+            <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
+            <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
+          </div>
+          <Icon
+            className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
+            flipIcon={direction === "rtl"}
+            ariaLabel=""
+          />
+        </li>
+      ))}
+    </ul>
   )
 }

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

@@ -45,10 +45,10 @@ export default function SearchFilter({
 
   return (
     <>
-      <label className="dy-input dy-input-bordered mb-2 flex items-center gap-2 rounded-2xl">
+      <label className="mb-2 flex items-center gap-2 rounded-2xl border border-gray-300 bg-white px-4 py-3 shadow-inner outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out focus-within:outline-gray-300">
         <input
           type="search"
-          className="grow placeholder-gray-500"
+          className="grow placeholder-gray-500 focus:outline-none"
           name="search"
           ref={searchInput}
           placeholder={t("ln.search.placeholder")}

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

@@ -1,5 +1,5 @@
 import { useWindowVirtualizer } from "@tanstack/react-virtual"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 import {
   createI18n,
@@ -38,11 +38,15 @@ export default function SearchList({
     mediaTypes,
   })
   const count = isLoading ? mediaItemsTotal : results.length
+  const getItemKey = useCallback(
+    (index: number) => (isLoading ? index : results[index].id),
+    [isLoading, results],
+  )
 
   const virtualizer = useWindowVirtualizer({
     count,
     estimateSize: () => rowHeight,
-    getItemKey: (index) => (isLoading ? index : results[index].id),
+    getItemKey,
     overscan: 2,
     scrollMargin: listRef.current?.offsetTop ?? 0,
   })
@@ -68,28 +72,28 @@ export default function SearchList({
   return (
     <I18nContext.Provider value={i18n}>
       <div ref={listRef} className="px-4 md:px-8">
-        <ol
-          className="relative w-full divide-y divide-gray-200"
-          style={{
-            height: `${virtualizer.getTotalSize()}px`,
-          }}
-        >
-          {virtualizer.getVirtualItems().map((virtualRow) => {
-            const item = results[virtualRow.index]
-            return (
-              <li
-                key={virtualRow.key}
-                className="absolute left-0 top-0 block w-full"
-                style={{
-                  height: `${virtualRow.size}px`,
-                  transform: `translateY(${
-                    virtualRow.start - virtualizer.options.scrollMargin
-                  }px)`,
-                }}
-              >
-                {isLoading ? (
-                  <LoadingSkeleton />
-                ) : (
+        {isLoading ? (
+          <LoadingSkeleton />
+        ) : (
+          <ol
+            className="relative w-full divide-y divide-gray-200"
+            style={{
+              height: `${virtualizer.getTotalSize()}px`,
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualRow) => {
+              const item = results[virtualRow.index]
+              return (
+                <li
+                  key={virtualRow.key}
+                  className="absolute left-0 top-0 block w-full"
+                  style={{
+                    height: `${virtualRow.size}px`,
+                    transform: `translateY(${
+                      virtualRow.start - virtualizer.options.scrollMargin
+                    }px)`,
+                  }}
+                >
                   <SearchListItem
                     item={item}
                     showLanguage={showLanguage}
@@ -97,11 +101,11 @@ export default function SearchList({
                     languages={languages}
                     mediaTypes={mediaTypes}
                   />
-                )}
-              </li>
-            )
-          })}
-        </ol>
+                </li>
+              )
+            })}
+          </ol>
+        )}
       </div>
       {!results.length && !isLoading && (
         <div className="mt-24 text-center font-bold text-gray-500">

package/src/pages/search-page/components/SearchListItem.tsx

@@ -1,6 +1,6 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../i18n/react/use-i18n"
 import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../api/search-response"
 

package/src/pages/search-page/components/Select.tsx

@@ -12,21 +12,23 @@ export default function Select({
   options,
 }: Props) {
   return (
-    <label className="dy-form-control">
-      <span className="my-2 block text-xs font-bold uppercase text-gray-500">
+    <label>
+      <span className="mb-1 mt-2 block text-xs font-bold uppercase text-gray-600">
         {label}
       </span>
-      <select
-        className="dy-select dy-select-bordered w-full rounded-xl sm:dy-select-sm"
-        value={initialValue}
-        onChange={(e) => valueChange(e.currentTarget.value)}
-      >
-        {options.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText}
-          </option>
-        ))}
-      </select>
+      <div className="rounded-2xl border border-gray-300 bg-white px-4 py-3 shadow-sm outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out focus-within:outline-gray-300 sm:p-2">
+        <select
+          className="w-full bg-white focus:outline-none sm:text-sm"
+          value={initialValue}
+          onChange={(e) => valueChange(e.currentTarget.value)}
+        >
+          {options.map(({ id, labelText }) => (
+            <option key={id} value={id}>
+              {labelText}
+            </option>
+          ))}
+        </select>
+      </div>
     </label>
   )
 }

package/src/layouts/components/PreloadReact.tsx

@@ -1,3 +0,0 @@
-export default function PreloadReact() {
-  return <></>
-}