lightnet 3.10.6 → 3.10.8

package/src/admin/pages/media/fields/Collections.tsx

@@ -1,9 +1,8 @@
 import { type Control } from "react-hook-form"
 
-import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
-import Label from "../../../components/form/atoms/Label"
 import DynamicArray from "../../../components/form/DynamicArray"
-import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import Input from "../../../components/form/Input"
+import Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Collections({
@@ -21,17 +20,28 @@ export default function Collections({
       name="collections"
       label="ln.admin.collections"
       renderElement={(index) => (
-        <div className="flex w-full flex-col py-2">
-          <CollectionSelect
-            collections={collections}
+        <div className="flex w-full flex-col gap-4 py-2">
+          <Select
+            options={collections}
+            label="ln.admin.name"
+            labelSize="small"
+            preserveHintSpace={false}
+            name={`collections.${index}.collection`}
             control={control}
-            index={index}
             defaultValue={defaultValue[index]?.collection}
           />
-          <CollectionIndex
+          <Input
+            type="number"
             control={control}
-            index={index}
+            label="ln.admin.position-in-collection"
+            labelSize="small"
+            step={1}
+            min={0}
+            preserveHintSpace={false}
             defaultValue={defaultValue[index]?.index}
+            {...control.register(`collections.${index}.index`, {
+              setValueAs: (value) => (value === "" ? undefined : Number(value)),
+            })}
           />
         </div>
       )}
@@ -46,72 +56,3 @@ export default function Collections({
     />
   )
 }
-
-function CollectionSelect({
-  control,
-  collections,
-  index,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  collections: { id: string; labelText: string }[]
-  defaultValue?: string
-  index: number
-}) {
-  const name = `collections.${index}.collection` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <Label for={name} label="ln.admin.name" size="xs" />
-      <select
-        {...control.register(name)}
-        id={name}
-        defaultValue={defaultValue}
-        aria-invalid={!!errorMessage}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
-      >
-        {collections.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText}
-          </option>
-        ))}
-      </select>
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}
-
-function CollectionIndex({
-  control,
-  index,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  index: number
-  defaultValue?: number
-}) {
-  const name = `collections.${index}.index` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <Label
-        for={name}
-        label="ln.admin.position-in-collection"
-        size="xs"
-        className="mt-3"
-      />
-      <input
-        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
-        aria-invalid={!!errorMessage}
-        type="number"
-        id={name}
-        defaultValue={defaultValue}
-        step={1}
-        {...control.register(name, {
-          setValueAs: (value) => (value === "" ? undefined : Number(value)),
-        })}
-      />
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

package/src/admin/pages/media/fields/Image.tsx

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from "react"
+import { type Control } from "react-hook-form"
+
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import FileUpload from "../../../components/form/atoms/FileUpload"
+import Hint from "../../../components/form/atoms/Hint"
+import Label from "../../../components/form/atoms/Label"
+import { useFieldDirty } from "../../../components/form/hooks/use-field-dirty"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import type { MediaItem } from "../../../types/media-item"
+
+const acceptedFileTypes = ["image/jpeg", "image/png", "image/webp"] as const
+
+export default function Image({
+  control,
+  defaultValue,
+  mediaId,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["image"]
+  mediaId: string
+}) {
+  const objectUrlRef = useRef<string | null>(null)
+  const [previewSrc, setPreviewSrc] = useState<string | undefined>(
+    defaultValue.previewSrc,
+  )
+  const isDirty = useFieldDirty({ control, name: "image" })
+  const errorMessage = useFieldError({ control, name: "image", exact: false })
+
+  useEffect(() => {
+    // cleanup on component unmount
+    return () => {
+      if (objectUrlRef.current) {
+        URL.revokeObjectURL(objectUrlRef.current)
+      }
+    }
+  }, [])
+
+  const updateImage = (file?: File) => {
+    if (!file) {
+      return
+    }
+    if (!acceptedFileTypes.includes(file.type as any)) {
+      return
+    }
+    if (objectUrlRef.current) {
+      URL.revokeObjectURL(objectUrlRef.current)
+    }
+    const objectUrl = URL.createObjectURL(file)
+    objectUrlRef.current = objectUrl
+    setPreviewSrc(objectUrl)
+  }
+
+  return (
+    <div className="group flex w-full flex-col">
+      <label htmlFor="image">
+        <Label
+          label="ln.admin.image"
+          isDirty={isDirty}
+          isInvalid={!!errorMessage}
+        />
+      </label>
+      <div
+        className={`flex w-full items-stretch gap-4 rounded-lg rounded-ss-none border bg-gray-50 px-4 py-3 shadow-inner outline-none transition-colors ${isDirty && !errorMessage ? "border-gray-700" : "border-gray-300"} ${errorMessage ? "border-rose-800" : ""} `}
+      >
+        <div className="flex h-32 w-32 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-gray-200 p-1">
+          <img
+            src={previewSrc}
+            alt=""
+            className="h-full w-full object-contain"
+          />
+        </div>
+        <FileUpload
+          name="image"
+          control={control}
+          onFileChange={updateImage}
+          destinationPath="./images"
+          acceptedFileTypes={acceptedFileTypes}
+          fileName={mediaId}
+        />
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint preserveSpace={true} label="ln.admin.image-hint" />
+    </div>
+  )
+}

package/src/admin/pages/media/file-system.ts

@@ -1,9 +1,13 @@
-export const writeFile = (path: string, body: string) => {
+export const writeFile = (
+  path: string,
+  body: BodyInit,
+  contentType?: string,
+) => {
   return fetch(
     `/api/internal/fs/write-file?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
     {
       method: "POST",
-      headers: { "Content-Type": resolveContentType(path) },
+      headers: { "Content-Type": contentType ?? resolveContentType(path) },
       body,
     },
   )

package/src/admin/pages/media/media-item-store.ts

@@ -1,13 +1,42 @@
 import { type MediaItem } from "../../types/media-item"
-import { writeJson } from "./file-system"
+import { writeFile, writeJson } from "./file-system"
 
 export const updateMediaItem = async (id: string, item: MediaItem) => {
-  return writeJson(`/src/content/media/${id}.json`, mapToContentSchema(item))
+  const imagePath = await saveImage(item.image)
+  return writeJson(
+    `/src/content/media/${id}.json`,
+    mapToContentSchema(item, imagePath),
+  )
 }
 
-const mapToContentSchema = (item: MediaItem) => {
+const ensureRelativeImagePath = (path: string) => {
+  const trimmed = path.trim()
+  if (!trimmed) {
+    return ""
+  }
+  if (trimmed.startsWith("./")) {
+    return trimmed
+  }
+  return `./${trimmed}`
+}
+
+const saveImage = async (image: MediaItem["image"]) => {
+  const relativePath = ensureRelativeImagePath(image?.path ?? "")
+  if (!relativePath || !image?.file) {
+    return relativePath
+  }
+  await writeFile(
+    `/src/content/media/${relativePath.replace(/^\.\//, "")}`,
+    await image.file.arrayBuffer(),
+    image.file.type || "application/octet-stream",
+  )
+  return relativePath
+}
+
+const mapToContentSchema = (item: MediaItem, imagePath: string) => {
   return {
     ...item,
+    image: imagePath,
     authors: flatten(item.authors),
     categories: flatten(item.categories),
   }

package/src/admin/types/media-item.ts

@@ -1,4 +1,5 @@
 import { type RefinementCtx, z } from "astro/zod"
+import config from "virtual:lightnet/config"
 
 const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
 const INVALID_DATE = "ln.admin.errors.invalid-date"
@@ -6,6 +7,7 @@ const REQUIRED = "ln.admin.errors.required"
 const GTE_0 = "ln.admin.errors.gte-0"
 const INTEGER = "ln.admin.errors.integer"
 const UNIQUE_ELEMENTS = "ln.admin.errors.unique-elements"
+const FILE_SIZE_EXCEEDED = "ln.admin.error.file-size-exceeded"
 
 const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   return (values: TArrayItem[], ctx: RefinementCtx) => {
@@ -23,6 +25,19 @@ const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   }
 }
 
+const fileShape = z
+  .instanceof(File)
+  .optional()
+  .refine(
+    (file) =>
+      !file ||
+      !!(
+        file.size <
+        (config.experimental?.admin?.maxFileSize ?? 0) * 1024 * 1024
+      ),
+    { message: FILE_SIZE_EXCEEDED },
+  )
+
 export const mediaItemSchema = z.object({
   commonId: z.string().nonempty(NON_EMPTY_STRING),
   title: z.string().nonempty(NON_EMPTY_STRING),
@@ -47,6 +62,11 @@ export const mediaItemSchema = z.object({
     .superRefine(unique("collection")),
   dateCreated: z.string().date(INVALID_DATE),
   description: z.string().optional(),
+  image: z.object({
+    path: z.string().nonempty(NON_EMPTY_STRING),
+    previewSrc: z.string(),
+    file: fileShape,
+  }),
 })
 
 export type MediaItem = z.input<typeof mediaItemSchema>

package/src/astro-integration/config.ts

@@ -228,6 +228,16 @@ export const configSchema = z.object({
       admin: z
         .object({
           enabled: z.boolean().default(false),
+          /**
+           * Currently we only support english as Admin UI language.
+           */
+          languageCode: z.literal("en").default("en"),
+          /**
+           * Max file size to upload in mega bytes.
+           *
+           * Default is 25 (this aligns with Cloudflare's max file size).
+           */
+          maxFileSize: z.number().default(25),
         })
         .optional(),
     })

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

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
+            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
             href={link.href}
           >
             {link.text}

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/layouts/Page.astro

@@ -14,17 +14,18 @@ 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" />

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 right-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/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/components/main-details/OpenButton.astro

@@ -14,7 +14,7 @@ const content = createContentMetadata(item.data.content[0])
 ---
 
 <a
-  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
+  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
   href={content.url}
   target={content.target}
   hreflang={item.data.language}

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

@@ -1,5 +1,5 @@
 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()

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/utils/markdown.ts

@@ -19,6 +19,12 @@ export function markdownToText(markdown?: string) {
       .replaceAll(/^#+ ?/gm, "")
       // lists
       .replaceAll(/^- /gm, "")
+      // escaped white space
+      .replaceAll(/ /g, " ")
+      // underlines
+      .replaceAll(/<\/?u>/g, "")
+      // code block
+      .replaceAll(/^```[a-zA-Z ]*\n/gm, "")
       // block quotes
       .replaceAll(/^>+ ?/gm, "")
       // bold and italics

package/src/admin/components/form/atoms/Legend.tsx

@@ -1,20 +0,0 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
-
-export default function Legend({
-  label,
-  size = "sm",
-  className,
-}: {
-  label: string
-  className?: string
-  size?: "sm" | "xs"
-}) {
-  const { t } = useI18n()
-  return (
-    <legend
-      className={`pb-2 font-bold uppercase text-gray-600 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
-    >
-      {t(label)}
-    </legend>
-  )
-}