lightnet 3.10.7 → 3.11.0

package/src/admin/pages/media/EditRoute.astro

@@ -1,28 +1,40 @@
 ---
 import type { GetStaticPaths } from "astro"
+import { getImage } from "astro:assets"
 import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
 import { getCategories } from "../../../content/get-categories"
-import { getRawMediaItem } from "../../../content/get-media-items"
+import { getMediaItem, getRawMediaItem } from "../../../content/get-media-items"
 import { getMediaTypes } from "../../../content/get-media-types"
 import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
-import { resolveLocales } from "../../../i18n/resolve-locales"
 import Page from "../../../layouts/Page.astro"
+import { adminI18n } from "../../i18n/admin-i18n"
 import EditForm from "./EditForm"
 
 export const getStaticPaths = (async () => {
   const mediaItems = await getCollection("media")
-  return resolveLocales(config).flatMap((locale) =>
-    mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
-  )
+  return mediaItems.map(({ id: mediaId }) => ({ params: { mediaId } }))
 }) satisfies GetStaticPaths
 
 const { mediaId } = Astro.params
 const { data: mediaItem } = await getRawMediaItem(mediaId)
+const {
+  data: { image },
+} = await getMediaItem(mediaId)
+
+const previewImage = await getImage({
+  src: image,
+  width: 256,
+  format: "webp",
+})
 
 const formData = {
   ...mediaItem,
+  image: {
+    path: mediaItem.image,
+    previewSrc: previewImage.src,
+  },
   authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
   categories:
     mediaItem.categories?.map((value) => ({
@@ -31,44 +43,48 @@ const formData = {
   collections: mediaItem.collections ?? [],
 }
 
-const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+const i18nConfig = prepareI18nConfig(adminI18n, [
   "ln.admin.*",
   "ln.type",
   "ln.language",
   "ln.categories",
 ])
-const { t, currentLocale } = Astro.locals.i18n
+const { t, currentLocale } = adminI18n
 
-const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
+const mediaTypes = (await getMediaTypes()).map(({ id }) => ({
   id,
-  labelText: t(label),
+  labelText: id,
 }))
 
-const categories = (await getCategories(currentLocale, t)).map(
-  ({ id, labelText }) => ({ id, labelText }),
-)
+const categories = (await getCategories(currentLocale, t)).map(({ id }) => ({
+  id,
+  labelText: id,
+}))
 
 const collections = (await getCollection("media-collections")).map(
-  ({ id, data: { label } }) => ({ id, labelText: t(label) }),
+  ({ id }) => ({ id, labelText: id }),
 )
 
 const languages = config.languages.map(({ code, label }) => ({
   id: code,
-  labelText: t(label),
+  labelText: `${code} - ${t(label)}`,
 }))
 ---
 
-<Page mainClass="bg-gray-700">
+<Page
+  mainClass="bg-gradient-to-t from-sky-950 to-slate-800"
+  locale={currentLocale}
+>
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
-      class="block pb-4 pt-8 text-gray-200 underline"
+      class="block pb-4 pt-8 text-slate-200 underline"
       href=`/${Astro.currentLocale}/media/${mediaId}`
       >{t("ln.admin.back-to-details-page")}</a
     >
   </div>
 
   <div
-    class="mx-auto max-w-screen-md rounded-2xl bg-gray-200 px-4 py-8 shadow-md md:px-8"
+    class="mx-auto min-h-screen max-w-screen-md rounded-xl bg-slate-100 px-4 py-8 shadow-md md:px-8"
   >
     <EditForm
       mediaId={mediaId}

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Input from "../../../components/form/Input"
 import type { MediaItem } from "../../../types/media-item"
@@ -11,6 +13,7 @@ export default function Authors({
   control: Control<MediaItem>
   defaultValue: MediaItem["authors"]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
@@ -20,15 +23,22 @@ export default function Authors({
         <Input
           name={`authors.${index}.value`}
           preserveHintSpace={false}
+          placeholder={t("ln.admin.author-name")}
+          required
           control={control}
           defaultValue={defaultValue[index]?.value}
         />
       )}
-      addButton={{
-        label: "ln.admin.add-author",
-        onClick: (append, index) =>
-          append({ value: "" }, { focusName: `authors.${index}.value` }),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement({ value: "" }, { focusName: `authors.${index}.value` })
+          }
+        >
+          {t("ln.admin.add-author")}
+        </Button>
+      )}
     />
   )
 }

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
@@ -13,6 +15,7 @@ export default function Categories({
   defaultValue: MediaItem["categories"]
   categories: { id: string; labelText: string }[]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
@@ -22,16 +25,25 @@ export default function Categories({
         <Select
           options={categories}
           control={control}
+          required
           name={`categories.${index}.value`}
           defaultValue={defaultValue[index]?.value}
           preserveHintSpace={false}
         />
       )}
-      addButton={{
-        label: "ln.admin.add-category",
-        onClick: (append, index) =>
-          append({ value: "" }, { focusName: `categories.${index}.value` }),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement(
+              { value: "" },
+              { focusName: `categories.${index}.value` },
+            )
+          }
+        >
+          {t("ln.admin.add-category")}
+        </Button>
+      )}
     />
   )
 }

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

@@ -1,5 +1,7 @@
 import { type Control } from "react-hook-form"
 
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import Button from "../../../components/form/atoms/Button"
 import DynamicArray from "../../../components/form/DynamicArray"
 import Input from "../../../components/form/Input"
 import Select from "../../../components/form/Select"
@@ -14,17 +16,19 @@ export default function Collections({
   collections: { id: string; labelText: string }[]
   defaultValue: MediaItem["collections"]
 }) {
+  const { t } = useI18n()
   return (
     <DynamicArray
       control={control}
       name="collections"
       label="ln.admin.collections"
       renderElement={(index) => (
-        <div className="flex w-full flex-col gap-4 py-2">
+        <div className="flex w-full flex-col gap-6">
           <Select
             options={collections}
             label="ln.admin.name"
             labelSize="small"
+            required
             preserveHintSpace={false}
             name={`collections.${index}.collection`}
             control={control}
@@ -39,20 +43,26 @@ export default function Collections({
             min={0}
             preserveHintSpace={false}
             defaultValue={defaultValue[index]?.index}
-            {...control.register(`collections.${index}.index`, {
+            name={`collections.${index}.index`}
+            registerOptions={{
               setValueAs: (value) => (value === "" ? undefined : Number(value)),
-            })}
+            }}
           />
         </div>
       )}
-      addButton={{
-        label: "ln.admin.add-collection",
-        onClick: (append, index) =>
-          append(
-            { collection: "" },
-            { focusName: `collections.${index}.collection` },
-          ),
-      }}
+      renderAddButton={({ addElement, index }) => (
+        <Button
+          variant="secondary"
+          onClick={() =>
+            addElement(
+              { collection: "" },
+              { focusName: `collections.${index}.collection` },
+            )
+          }
+        >
+          {t("ln.admin.add-collection")}
+        </Button>
+      )}
     />
   )
 }

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

@@ -0,0 +1,150 @@
+import { type Control, useWatch } from "react-hook-form"
+
+import Icon from "../../../../components/Icon"
+import { useI18n } from "../../../../i18n/react/use-i18n"
+import { createContentMetadata } from "../../../../pages/details-page/utils/create-content-metadata"
+import Button from "../../../components/form/atoms/Button"
+import FileUpload from "../../../components/form/atoms/FileUpload"
+import DynamicArray from "../../../components/form/DynamicArray"
+import Input from "../../../components/form/Input"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Content({
+  control,
+  defaultValue,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["content"]
+}) {
+  const { t } = useI18n()
+  return (
+    <DynamicArray
+      control={control}
+      name="content"
+      required
+      label="ln.admin.content"
+      renderElement={(index) => (
+        <div className="flex w-full flex-col gap-6">
+          <URLInput
+            control={control}
+            defaultValue={defaultValue[index]?.url}
+            index={index}
+          />
+          <LabelInput
+            control={control}
+            defaultValue={defaultValue[index]?.label}
+            index={index}
+          />
+        </div>
+      )}
+      renderElementMeta={(index) => {
+        if (index !== 0) {
+          return <span></span>
+        }
+        return (
+          <span className="ms-1 flex items-center gap-1 rounded-lg bg-sky-700 px-2 py-1 text-xs uppercase text-slate-100">
+            <Icon className="text-sm mdi--star" ariaLabel="" />
+            {t("ln.admin.primary-content")}
+          </span>
+        )
+      }}
+      renderAddButton={({ addElement, index }) => (
+        <div className="flex w-2/3 flex-col items-center gap-2 pb-2 pt-4">
+          <Button
+            variant="secondary"
+            onClick={() =>
+              addElement({ url: "" }, { focusName: `content.${index}.url` })
+            }
+          >
+            <Icon className="mdi--link-variant" ariaLabel="" />
+            {t("ln.admin.add-link")}
+          </Button>
+          <span className="text-sm font-bold uppercase text-slate-500">
+            {t("ln.admin.or")}
+          </span>
+          <FileUpload
+            title="ln.admin.files-upload-title"
+            description="ln.admin.files-upload-description"
+            icon="mdi--file-upload-outline"
+            multiple
+            onUpload={(...files: File[]) =>
+              files.forEach((file, i) => {
+                addElement(
+                  { url: `/files/${file.name}`, file },
+                  { focusName: `content.${index + i}.url` },
+                )
+              })
+            }
+          />
+        </div>
+      )}
+    />
+  )
+}
+
+function URLInput({
+  control,
+  defaultValue,
+  index,
+}: {
+  defaultValue?: string
+  index: number
+  control: Control<MediaItem>
+}) {
+  const { url, file } = useWatch({ control, name: `content.${index}` })
+  const { t } = useI18n()
+  const isFile = url.startsWith("/files/")
+
+  const label = () => {
+    if (!isFile) {
+      return "ln.admin.link"
+    }
+    if (!file) {
+      return "ln.admin.file"
+    }
+    return t("ln.admin.file-upload", {
+      fileSize: (file.size / 1024 / 1024).toFixed(1),
+    })
+  }
+
+  return (
+    <Input
+      control={control}
+      label={label()}
+      disabled={isFile}
+      labelSize="small"
+      required
+      preserveHintSpace={false}
+      defaultValue={defaultValue}
+      name={`content.${index}.url`}
+    />
+  )
+}
+
+function LabelInput({
+  control,
+  defaultValue,
+  index,
+}: {
+  control: Control<MediaItem>
+  defaultValue?: string
+  index: number
+}) {
+  const url = useWatch({ control, name: `content.${index}.url` })
+  const { label: defaultLabel } = createContentMetadata({ url })
+
+  return (
+    <Input
+      name={`content.${index}.label`}
+      control={control}
+      label="ln.admin.label"
+      labelSize="small"
+      placeholder={defaultLabel}
+      preserveHintSpace={false}
+      defaultValue={defaultValue}
+      registerOptions={{
+        setValueAs: (value) => value?.trim() || undefined,
+      }}
+    />
+  )
+}

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

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from "react"
+import { type Control, useController } 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
+
+const sanitizeImageUrl = (url?: string) => {
+  if (!url) {
+    return undefined
+  }
+  const trimmed = url.trim()
+  if (!trimmed) {
+    return undefined
+  }
+  if (
+    trimmed.startsWith("/") ||
+    trimmed.startsWith("./") ||
+    trimmed.startsWith("blob:")
+  ) {
+    return trimmed
+  }
+  if (/^https?:\/\//i.test(trimmed)) {
+    return trimmed
+  }
+  if (/^data:image\/(png|jpe?g|webp);/i.test(trimmed)) {
+    return trimmed
+  }
+  return undefined
+}
+
+export default function Image({
+  control,
+  defaultValue,
+  mediaId,
+}: {
+  control: Control<MediaItem>
+  defaultValue: MediaItem["image"]
+  mediaId: string
+}) {
+  const { field } = useController({ control, name: "image" })
+  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
+
+    const nameParts = file.name.split(".")
+    const extension = nameParts.pop()
+    setPreviewSrc(objectUrl)
+    field.onChange({
+      ...field.value,
+      path: `./images/${mediaId}.${extension}`,
+      file,
+    })
+  }
+
+  return (
+    <div className="group flex w-full flex-col">
+      <label htmlFor="image">
+        <Label
+          label="ln.admin.image"
+          isDirty={isDirty}
+          required
+          isInvalid={!!errorMessage}
+        />
+      </label>
+      <div
+        className={`flex w-full items-stretch gap-4 rounded-xl rounded-ss-none border bg-slate-50 px-4 py-3 shadow-inner outline-none transition-colors focus-within:border-sky-700 focus-within:ring-1 focus-within:ring-sky-700 ${isDirty && !errorMessage ? "border-slate-700" : "border-slate-300"} ${errorMessage ? "border-rose-800" : ""} `}
+      >
+        <div className="flex h-32 w-32 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-slate-200 p-1">
+          <img
+            src={sanitizeImageUrl(previewSrc)}
+            alt=""
+            className="h-full w-full object-contain"
+          />
+        </div>
+        <FileUpload
+          title="ln.admin.image-upload-title"
+          description="ln.admin.image-upload-description"
+          onUpload={updateImage}
+          onBlur={field.onBlur}
+          acceptedFileTypes={acceptedFileTypes}
+        />
+      </div>
+      <ErrorMessage message={errorMessage} />
+      <Hint preserveSpace={true} />
+    </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,14 +1,57 @@
 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)
+  await Promise.all(item.content.map(saveContentFile))
+  return writeJson(
+    `/src/content/media/${id}.json`,
+    mapToContentSchema(item, imagePath),
+  )
 }
 
-const mapToContentSchema = (item: MediaItem) => {
+const ensureRelativePath = (path: string) => {
+  const trimmed = path.trim()
+  if (!trimmed) {
+    return ""
+  }
+  if (trimmed.startsWith("./")) {
+    return trimmed
+  }
+  return `./${trimmed}`
+}
+
+const saveImage = async (image: MediaItem["image"]) => {
+  const relativePath = ensureRelativePath(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 saveContentFile = async ({ url, file }: MediaItem["content"][number]) => {
+  if (!file) {
+    return
+  }
+  const path = `/public/${url.replace(/^\//, "")}`
+  return writeFile(
+    path,
+    await file.arrayBuffer(),
+    file.type || "application/octet-stream",
+  )
+}
+
+const mapToContentSchema = (item: MediaItem, imagePath: string) => {
   return {
     ...item,
+    image: imagePath,
     authors: flatten(item.authors),
+    content: item.content.map(({ file: _, ...content }) => content),
     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,8 @@ 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 NON_EMPTY_LIST = "ln.admin.errors.non-empty-list"
 
 const unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
   return (values: TArrayItem[], ctx: RefinementCtx) => {
@@ -23,6 +26,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 +63,19 @@ 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,
+  }),
+  content: z
+    .object({
+      url: z.string().nonempty(NON_EMPTY_STRING),
+      file: fileShape,
+      label: z.string().optional(),
+    })
+    .array()
+    .min(1, NON_EMPTY_LIST),
 })
 
 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(),
     })