lightnet 3.10.4 → 3.10.5

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

@@ -3,6 +3,7 @@ import type { GetStaticPaths } from "astro"
 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 { getMediaTypes } from "../../../content/get-media-types"
 import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
@@ -23,42 +24,60 @@ const { data: mediaItem } = await getRawMediaItem(mediaId)
 const formData = {
   ...mediaItem,
   authors: mediaItem.authors?.map((value) => ({ value })) ?? [],
+  categories:
+    mediaItem.categories?.map((value) => ({
+      value,
+    })) ?? [],
+  collections: mediaItem.collections ?? [],
 }
 
 const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
   "ln.admin.*",
   "ln.type",
   "ln.language",
+  "ln.categories",
 ])
-const { t } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 
 const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
   id,
-  label: t(label),
+  labelText: t(label),
 }))
+
+const categories = (await getCategories(currentLocale, t)).map(
+  ({ id, labelText }) => ({ id, labelText }),
+)
+
+const collections = (await getCollection("media-collections")).map(
+  ({ id, data: { label } }) => ({ id, labelText: t(label) }),
+)
+
 const languages = config.languages.map(({ code, label }) => ({
   id: code,
-  label: t(label),
+  labelText: t(label),
 }))
 ---
 
-<Page>
-  <div class="mx-auto max-w-screen-md px-4 pt-12 md:px-8">
+<Page mainClass="bg-slate-500">
+  <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
-      class="underline"
+      class="block py-4 text-gray-200 underline"
       href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
       >{t("ln.admin.back-to-details-page")}</a
     >
-    <h1 class="mb-10 mt-10 text-2xl">
-      {t("ln.admin.edit-media-item")}
-    </h1>
+  </div>
 
+  <div
+    class="mx-auto max-w-screen-md rounded-2xl bg-gray-200 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>

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

@@ -1,58 +1,43 @@
-import { type Control, useFieldArray } from "react-hook-form"
+import { type Control } from "react-hook-form"
 
-import Icon from "../../../../components/Icon"
-import { useI18n } from "../../../../i18n/react/useI18n"
 import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
-import Hint from "../../../components/form/atoms/Hint"
-import Legend from "../../../components/form/atoms/Legend"
+import DynamicArray from "../../../components/form/DynamicArray"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Authors({ control }: { control: Control<MediaItem> }) {
-  const { fields, append, remove } = useFieldArray({
-    name: "authors",
-    control,
-  })
-  const { t } = useI18n()
   return (
-    <fieldset key="authors">
-      <Legend label="ln.admin.authors" />
-      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg border border-gray-300">
-        {fields.map((author, index) => (
-          <div className="p-2" key={author.id}>
-            <div className="flex w-full items-center gap-2">
-              <input
-                className="dy-input dy-input-sm grow"
-                {...control.register(`authors.${index}.value`)}
-              />
-              <button
-                className="flex items-center p-2 text-gray-600 hover:text-gray-900"
-                type="button"
-                onClick={() => remove(index)}
-              >
-                <Icon
-                  className="mdi--remove"
-                  ariaLabel={t("ln.admin.remove")}
-                />
-              </button>
-            </div>
-            <ErrorMessage name={`authors.${index}.value`} control={control} />
-          </div>
-        ))}
-        <button
-          type="button"
-          className="p-4 text-sm font-bold text-gray-600 hover:bg-gray-200"
-          onClick={() => {
-            append(
-              { value: "" },
-              { focusName: `authors.${fields.length}.value` },
-            )
-          }}
-        >
-          {t("ln.admin.add-author")}
-        </button>
-      </div>
-      <ErrorMessage name="authors" control={control} />
-      <Hint />
-    </fieldset>
+    <DynamicArray
+      control={control}
+      name="authors"
+      label="ln.admin.authors"
+      renderElement={(index) => <AuthorInput index={index} control={control} />}
+      addButton={{
+        label: "ln.admin.add-author",
+        onClick: (append, index) =>
+          append({ value: "" }, { focusName: `authors.${index}.value` }),
+      }}
+    />
+  )
+}
+
+function AuthorInput({
+  index,
+  control,
+}: {
+  index: number
+  control: Control<MediaItem>
+}) {
+  const name = `authors.${index}.value` as const
+  const errorMessage = useFieldError({ name, control })
+  return (
+    <>
+      <input
+        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
+        aria-invalid={!!errorMessage}
+        {...control.register(name)}
+      />
+      <ErrorMessage message={errorMessage} />
+    </>
   )
 }

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

@@ -0,0 +1,64 @@
+import { type Control } from "react-hook-form"
+
+import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
+import DynamicArray from "../../../components/form/DynamicArray"
+import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import type { MediaItem } from "../../../types/media-item"
+
+export default function Categories({
+  control,
+  categories,
+}: {
+  control: Control<MediaItem>
+  categories: { id: string; labelText: string }[]
+}) {
+  return (
+    <DynamicArray
+      control={control}
+      name="categories"
+      label="ln.categories"
+      renderElement={(index) => (
+        <CategorySelect
+          categories={categories}
+          control={control}
+          index={index}
+        />
+      )}
+      addButton={{
+        label: "ln.admin.add-category",
+        onClick: (append, index) =>
+          append({ value: "" }, { focusName: `categories.${index}.value` }),
+      }}
+    />
+  )
+}
+
+function CategorySelect({
+  control,
+  categories,
+  index,
+}: {
+  control: Control<MediaItem>
+  categories: { id: string; labelText: string }[]
+  index: number
+}) {
+  const name = `categories.${index}.value` as const
+  const errorMessage = useFieldError({ name, control })
+  return (
+    <>
+      <select
+        {...control.register(name)}
+        id={name}
+        aria-invalid={!!errorMessage}
+        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
+      >
+        {categories.map(({ id, labelText }) => (
+          <option key={id} value={id}>
+            {labelText}
+          </option>
+        ))}
+      </select>
+      <ErrorMessage message={errorMessage} />
+    </>
+  )
+}

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

@@ -0,0 +1,103 @@
+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 type { MediaItem } from "../../../types/media-item"
+
+export default function Collections({
+  control,
+  collections,
+}: {
+  control: Control<MediaItem>
+  collections: { id: string; labelText: string }[]
+}) {
+  return (
+    <DynamicArray
+      control={control}
+      name="collections"
+      label="ln.admin.collections"
+      renderElement={(index) => (
+        <div className="flex w-full flex-col py-2">
+          <CollectionSelect
+            collections={collections}
+            control={control}
+            index={index}
+          />
+          <CollectionIndex control={control} index={index} />
+        </div>
+      )}
+      addButton={{
+        label: "ln.admin.add-collection",
+        onClick: (append, index) =>
+          append(
+            { collection: "" },
+            { focusName: `collections.${index}.collection` },
+          ),
+      }}
+    />
+  )
+}
+
+function CollectionSelect({
+  control,
+  collections,
+  index,
+}: {
+  control: Control<MediaItem>
+  collections: { id: string; labelText: 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}
+        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,
+}: {
+  control: Control<MediaItem>
+  index: 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"
+        step={1}
+        {...control.register(name, {
+          setValueAs: (value) => (value === "" ? undefined : Number(value)),
+        })}
+      />
+      <ErrorMessage message={errorMessage} />
+    </>
+  )
+}

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

@@ -8,6 +8,11 @@ export const updateMediaItem = async (id: string, item: MediaItem) => {
 const mapToContentSchema = (item: MediaItem) => {
   return {
     ...item,
-    authors: item.authors.map(({ value }) => value),
+    authors: flatten(item.authors),
+    categories: flatten(item.categories),
   }
 }
+
+const flatten = <TValue>(valueArray: { value: TValue }[]) => {
+  return valueArray.map(({ value }) => value)
+}

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

@@ -1,8 +1,27 @@
-import { z } from "astro/zod"
+import { type RefinementCtx, z } from "astro/zod"
 
 const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
 const INVALID_DATE = "ln.admin.errors.invalid-date"
 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 unique = <TArrayItem>(path: Extract<keyof TArrayItem, string>) => {
+  return (values: TArrayItem[], ctx: RefinementCtx) => {
+    const seenValues = new Set<unknown>()
+    values.forEach((value, index) => {
+      if (seenValues.has(value[path])) {
+        ctx.addIssue({
+          path: [index, path],
+          message: UNIQUE_ELEMENTS,
+          code: "custom",
+        })
+      }
+      seenValues.add(value[path])
+    })
+  }
+}
 
 export const mediaItemSchema = z.object({
   commonId: z.string().nonempty(NON_EMPTY_STRING),
@@ -12,7 +31,20 @@ export const mediaItemSchema = z.object({
   authors: z
     .object({ value: z.string().nonempty(NON_EMPTY_STRING) })
     .array()
-    .min(1),
+    .superRefine(unique("value")),
+  categories: z
+    .object({
+      value: z.string().nonempty(REQUIRED),
+    })
+    .array()
+    .superRefine(unique("value")),
+  collections: z
+    .object({
+      collection: z.string().nonempty(REQUIRED),
+      index: z.number().int(INTEGER).gte(0, GTE_0).optional(),
+    })
+    .array()
+    .superRefine(unique("collection")),
   dateCreated: z.string().date(INVALID_DATE),
 })
 

package/src/components/CategoriesSection.astro

@@ -70,7 +70,7 @@ function getImage({ image, id }: Category) {
                   ]}
                 >
                   <span class="line-clamp-3 select-none text-balance font-bold">
-                    {category.name}
+                    {category.labelText}
                   </span>
                 </div>
               </div>
@@ -128,7 +128,7 @@ function getImage({ image, id }: Category) {
                 ]}
               >
                 <span class="line-clamp-3 select-none text-balance font-bold">
-                  {category.name}
+                  {category.labelText}
                 </span>
               </div>
             </div>

package/src/components/MediaGallerySection.astro

@@ -38,7 +38,7 @@ const t = Astro.locals.i18n.t
 const types = Object.fromEntries(
   (await getMediaTypes()).map((type) => [
     type.id,
-    { ...type.data, name: t(type.data.label) },
+    { ...type.data, labelText: t(type.data.label) },
   ]),
 )
 
@@ -119,7 +119,7 @@ const coverImageStyle =
               <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
                 <Icon
                   className={`${types[item.data.type.id].icon} me-2 align-bottom`}
-                  ariaLabel={types[item.data.type.id].name}
+                  ariaLabel={types[item.data.type.id].labelText}
                 />
                 {item.data.title}
               </span>
@@ -159,7 +159,7 @@ const coverImageStyle =
             <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
               <Icon
                 className={`${types[item.data.type.id].icon} me-2 align-bottom`}
-                ariaLabel={types[item.data.type.id].name}
+                ariaLabel={types[item.data.type.id].labelText}
               />
               {item.data.title}
             </span>

package/src/components/MediaList.astro

@@ -34,7 +34,7 @@ const mediaTypes = Object.fromEntries(
     type.id,
     {
       id: type.id,
-      name: t(type.data.label),
+      labelText: t(type.data.label),
       icon: type.data.icon,
       coverImageStyle: type.data.coverImageStyle,
     },
@@ -84,7 +84,7 @@ const mediaTypes = Object.fromEntries(
             <p class="mb-1 line-clamp-3 text-balance font-bold text-gray-700 md:mb-3">
               <Icon
                 className={`${mediaTypes[item.data.type.id].icon} me-2 align-bottom text-2xl text-gray-700`}
-                ariaLabel={mediaTypes[item.data.type.id].name}
+                ariaLabel={mediaTypes[item.data.type.id].labelText}
               />
               <span>{item.data.title}</span>
             </p>

package/src/content/get-categories.ts

@@ -33,12 +33,27 @@ const contentCategories = Object.fromEntries(
  *
  * @param currentLocale current locale
  * @param t translate function
- * @returns categories sorted by name
+ * @returns categories sorted by labelText
  */
 export async function getUsedCategories(currentLocale: string, t: TranslateFn) {
   return [...Object.entries(contentCategories)]
-    .map(([id, data]) => ({ id, ...data, name: t(data.label) }))
-    .sort((a, b) => a.name.localeCompare(b.name, currentLocale))
+    .map(([id, data]) => ({ id, ...data, labelText: t(data.label) }))
+    .sort((a, b) => a.labelText.localeCompare(b.labelText, currentLocale))
+}
+
+/**
+ * Get all categories. This includes categories that are not
+ * referenced by any media item. If you only need categories that are referenced
+ * by media items use `getUsedCategories`.
+ *
+ * @param currentLocale current locale
+ * @param t translate function
+ * @returns categories sorted by labelText
+ */
+export async function getCategories(currentLocale: string, t: TranslateFn) {
+  return [...Object.entries(categoriesById)]
+    .map(([id, data]) => ({ id, ...data, labelText: t(data.label) }))
+    .sort((a, b) => a.labelText.localeCompare(b.labelText, currentLocale))
 }
 
 export async function getCategory(id: string) {

package/src/i18n/resolve-language.ts

@@ -27,6 +27,6 @@ export const resolveTranslatedLanguage = (bcp47: string, t: TranslateFn) => {
   const language = resolveLanguage(bcp47)
   return {
     ...language,
-    name: t(language.label),
+    labelText: t(language.label),
   }
 }

package/src/layouts/Page.astro

@@ -13,9 +13,10 @@ import ViewTransition from "./components/ViewTransition.astro"
 interface Props {
   title?: string
   description?: string
+  mainClass?: string
 }
 
-const { title, description } = Astro.props
+const { title, description, mainClass } = Astro.props
 const configTitle = Astro.locals.i18n.t(config.title)
 
 const { currentLocale } = Astro.locals.i18n
@@ -39,7 +40,7 @@ const language = resolveLanguage(currentLocale)
     class="flex min-h-screen flex-col overflow-y-scroll bg-gray-50 text-gray-900"
   >
     <Header />
-    <main class="grow pb-8 pt-14 sm:py-20">
+    <main class={`grow pb-8 pt-14 sm:py-20 ${mainClass ?? ""}`}>
       <slot />
     </main>
     {CustomFooter ? <CustomFooter /> : <Footer />}

package/src/layouts/components/LanguagePicker.astro

@@ -9,7 +9,7 @@ const { t, locales } = Astro.locals.i18n
 const translations = locales
   .map((locale) => ({
     locale,
-    label: resolveTranslatedLanguage(locale, t).name,
+    label: resolveTranslatedLanguage(locale, t).labelText,
     active: locale === Astro.currentLocale,
     href: currentPathWithLocale(locale),
   }))

package/src/pages/details-page/components/more-details/Languages.astro

@@ -21,7 +21,7 @@ const { t } = Astro.locals.i18n
   <Label>{translations.length ? t("ln.languages") : t("ln.language")}</Label>
   <ul class="flex flex-wrap gap-2">
     <li class="py-1 pe-2 text-gray-800">
-      {resolveTranslatedLanguage(item.data.language, t).name}
+      {resolveTranslatedLanguage(item.data.language, t).labelText}
     </li>
     {
       translations.map((translation) => (
@@ -30,7 +30,7 @@ const { t } = Astro.locals.i18n
             href={detailsPagePath(Astro.currentLocale, translation)}
             hreflang={translation.language}
           >
-            {resolveTranslatedLanguage(translation.language, t).name}
+            {resolveTranslatedLanguage(translation.language, t).labelText}
           </a>
         </li>
       ))

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

@@ -9,24 +9,24 @@ import SearchFilterReact from "./SearchFilter.tsx"
 
 const { t, currentLocale } = Astro.locals.i18n
 
-const sortByName = (array: { id: string; name: string }[]) =>
-  array.sort((a, b) => a.name.localeCompare(b.name, currentLocale))
+const sortByLabelText = (array: { id: string; labelText: string }[]) =>
+  array.sort((a, b) => a.labelText.localeCompare(b.labelText, currentLocale))
 
 const categories = (await getUsedCategories(currentLocale, t)).map(
-  ({ id, name }) => ({ id, name }),
+  ({ id, labelText }) => ({ id, labelText }),
 )
 
-const mediaTypes = sortByName(
+const mediaTypes = sortByLabelText(
   (await getMediaTypes()).map((type) => ({
     id: type.id,
-    name: t(type.data.label),
+    labelText: t(type.data.label),
   })),
 )
 
-const languages = sortByName(
+const languages = sortByLabelText(
   contentLanguages.map((language) => ({
     id: language.code,
-    name: t(language.label),
+    labelText: t(language.label),
   })),
 )
 

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

@@ -7,7 +7,7 @@ import { useSearchQueryParam } from "../hooks/use-search-query-param"
 import { CATEGORY, LANGUAGE, SEARCH, TYPE } from "../utils/search-query"
 import Select from "./Select"
 
-type FilterValue = { id: string; name: string }
+type FilterValue = { id: string; labelText: string }
 
 interface Props {
   languages: FilterValue[]
@@ -66,7 +66,7 @@ export default function SearchFilter({
             initialValue={language}
             valueChange={(val) => setLanguage(val)}
             options={[
-              { id: "", name: t("ln.search.all-languages") },
+              { id: "", labelText: t("ln.search.all-languages") },
               ...languages,
             ]}
           />
@@ -78,7 +78,7 @@ export default function SearchFilter({
             initialValue={type}
             valueChange={(val) => setType(val)}
             options={[
-              { id: "", name: t("ln.search.all-types") },
+              { id: "", labelText: t("ln.search.all-types") },
               ...mediaTypes,
             ]}
           />
@@ -90,7 +90,7 @@ export default function SearchFilter({
             initialValue={category}
             valueChange={(val) => setCategory(val)}
             options={[
-              { id: "", name: t("ln.search.all-categories") },
+              { id: "", labelText: t("ln.search.all-categories") },
               ...categories,
             ]}
           />

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

@@ -10,15 +10,15 @@ import SearchListReact from "./SearchList.tsx"
 const { t, currentLocale } = Astro.locals.i18n
 
 const categories: Record<string, string> = {}
-for (const { id, name } of await getUsedCategories(currentLocale, t)) {
-  categories[id] = name
+for (const { id, labelText } of await getUsedCategories(currentLocale, t)) {
+  categories[id] = labelText
 }
 
 const mediaTypes = Object.fromEntries(
   (await getMediaTypes()).map((type) => [
     type.id,
     {
-      name: t(type.data.label),
+      labelText: t(type.data.label),
       icon: type.data.icon,
       coverImageStyle: type.data.coverImageStyle,
     },
@@ -28,7 +28,7 @@ const mediaTypes = Object.fromEntries(
 const languages = Object.fromEntries(
   contentLanguages.map((language) => [
     language.code,
-    { direction: language.direction, name: t(language.label) },
+    { direction: language.direction, labelText: t(language.label) },
   ]),
 )