lightnet 3.12.0 → 3.12.2

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

@@ -1,100 +0,0 @@
----
-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 { getMediaItem, getRawMediaItem } from "../../../content/get-media-items"
-import { getMediaTypes } from "../../../content/get-media-types"
-import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
-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 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) => ({
-      value,
-    })) ?? [],
-  collections: mediaItem.collections ?? [],
-}
-
-const i18nConfig = prepareI18nConfig(adminI18n, [
-  "ln.admin.*",
-  "ln.type",
-  "ln.language",
-  "ln.categories",
-])
-const { t, currentLocale } = adminI18n
-
-const mediaTypes = (await getMediaTypes()).map(({ id }) => ({
-  id,
-  labelText: id,
-}))
-
-const categories = (await getCategories(currentLocale, t)).map(({ id }) => ({
-  id,
-  labelText: id,
-}))
-
-const collections = (await getCollection("media-collections")).map(
-  ({ id }) => ({ id, labelText: id }),
-)
-
-const languages = config.languages.map(({ code, label }) => ({
-  id: code,
-  labelText: `${code} - ${t(label)}`,
-}))
----
-
-<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-slate-200 underline"
-      href=`/${Astro.currentLocale}/media/${mediaId}`
-      >{t("ln.admin.back-to-details-page")}</a
-    >
-  </div>
-
-  <div
-    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}
-      mediaItem={formData}
-      i18nConfig={i18nConfig}
-      mediaTypes={mediaTypes}
-      languages={languages}
-      categories={categories}
-      collections={collections}
-      client:load
-    />
-  </div>
-</Page>

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

@@ -1,44 +0,0 @@
-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"
-
-export default function Authors({
-  control,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  defaultValue: MediaItem["authors"]
-}) {
-  const { t } = useI18n()
-  return (
-    <DynamicArray
-      control={control}
-      name="authors"
-      label="ln.admin.authors"
-      renderElement={(index) => (
-        <Input
-          name={`authors.${index}.value`}
-          preserveHintSpace={false}
-          placeholder={t("ln.admin.author-name")}
-          required
-          control={control}
-          defaultValue={defaultValue[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,49 +0,0 @@
-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"
-
-export default function Categories({
-  control,
-  categories,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  defaultValue: MediaItem["categories"]
-  categories: { id: string; labelText: string }[]
-}) {
-  const { t } = useI18n()
-  return (
-    <DynamicArray
-      control={control}
-      name="categories"
-      label="ln.categories"
-      renderElement={(index) => (
-        <Select
-          options={categories}
-          control={control}
-          required
-          name={`categories.${index}.value`}
-          defaultValue={defaultValue[index]?.value}
-          preserveHintSpace={false}
-        />
-      )}
-      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,68 +0,0 @@
-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"
-import type { MediaItem } from "../../../types/media-item"
-
-export default function Collections({
-  control,
-  collections,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  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-6">
-          <Select
-            options={collections}
-            label="ln.admin.name"
-            labelSize="small"
-            required
-            preserveHintSpace={false}
-            name={`collections.${index}.collection`}
-            control={control}
-            defaultValue={defaultValue[index]?.collection}
-          />
-          <Input
-            type="number"
-            control={control}
-            label="ln.admin.position-in-collection"
-            labelSize="small"
-            step={1}
-            min={0}
-            preserveHintSpace={false}
-            defaultValue={defaultValue[index]?.index}
-            name={`collections.${index}.index`}
-            registerOptions={{
-              setValueAs: (value) => (value === "" ? undefined : Number(value)),
-            }}
-          />
-        </div>
-      )}
-      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

@@ -1,150 +0,0 @@
-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-slate-200 px-2 py-1 text-xs font-bold uppercase text-slate-600">
-            <Icon className="text-sm text-sky-700 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

@@ -1,119 +0,0 @@
-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,41 +0,0 @@
-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": contentType ?? resolveContentType(path) },
-      body,
-    },
-  )
-}
-
-export const writeJson = async (path: string, object: unknown) => {
-  return writeFile(path, JSON.stringify(sortObject(object), null, 2))
-}
-
-const resolveContentType = (path: string) => {
-  const normalizedPath = path.trim().toLowerCase()
-  return normalizedPath.endsWith(".json")
-    ? "application/json"
-    : "text/plain; charset=utf-8"
-}
-
-const sortObject = (value: unknown): unknown => {
-  if (Array.isArray(value)) {
-    return value.map(sortObject)
-  }
-
-  if (value && typeof value === "object") {
-    const entries = Object.entries(value as Record<string, unknown>)
-      .sort(([a], [b]) => (a > b ? 1 : a < b ? -1 : 0))
-      .map(([key, nestedValue]) => [key, sortObject(nestedValue)])
-
-    return Object.fromEntries(entries)
-  }
-
-  return value
-}

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

@@ -1,61 +0,0 @@
-import { type MediaItem } from "../../types/media-item"
-import { writeFile, writeJson } from "./file-system"
-
-export const updateMediaItem = async (id: string, item: MediaItem) => {
-  const imagePath = await saveImage(item.image)
-  await Promise.all(item.content.map(saveContentFile))
-  return writeJson(
-    `/src/content/media/${id}.json`,
-    mapToContentSchema(item, imagePath),
-  )
-}
-
-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),
-  }
-}
-
-const flatten = <TValue>(valueArray: { value: TValue }[]) => {
-  return valueArray.map(({ value }) => value)
-}