lightnet 3.10.3 → 3.10.5

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

@@ -1,11 +1,18 @@
-import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { type MediaItem } from "../../types/media-item"
 import { writeJson } from "./file-system"
 
-export const loadMediaItem = (id: string) =>
-  fetch(`/api/media/${id}.json`)
-    .then((response) => response.json())
-    .then((json) => mediaItemSchema.parse(json.content))
-
 export const updateMediaItem = async (id: string, item: MediaItem) => {
-  return writeJson(`/src/content/media/${id}.json`, item)
+  return writeJson(`/src/content/media/${id}.json`, mapToContentSchema(item))
+}
+
+const mapToContentSchema = (item: MediaItem) => {
+  return {
+    ...item,
+    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,15 +1,51 @@
-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),
   title: z.string().nonempty(NON_EMPTY_STRING),
   type: z.string().nonempty(REQUIRED),
   language: z.string().nonempty(REQUIRED),
+  authors: z
+    .object({ value: z.string().nonempty(NON_EMPTY_STRING) })
+    .array()
+    .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),
 })
 
-export type MediaItem = z.infer<typeof mediaItemSchema>
+export type MediaItem = z.input<typeof mediaItemSchema>

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

@@ -52,7 +52,7 @@ const subtitleSizes = {
       alt=""
     />
     <div
-      class="bg-gradient-radial absolute top-0 flex h-full w-full flex-col items-center justify-center from-black/30 to-black/40 p-4 text-center text-gray-50"
+      class="absolute top-0 flex h-full w-full flex-col items-center justify-center bg-gradient-radial from-black/30 to-black/40 p-4 text-center text-gray-50"
       class:list={[className]}
     >
       {

package/src/components/HighlightSection.astro

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

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/components/SearchInput.astro

@@ -12,7 +12,7 @@ const { t } = Astro.locals.i18n
   action={`/${Astro.currentLocale}/media`}
   method="get"
   role="search"
-  class="dy-join group w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
+  class="group dy-join w-full rounded-2xl shadow-sm outline-2 outline-offset-2 outline-gray-400 group-focus-within:outline"
   class:list={[Astro.props.className]}
 >
   <input

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/react/i18n-context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "react"
+import { createContext, useMemo } from "react"
 
 export type I18n = {
   t: (key: string) => string
@@ -21,16 +21,18 @@ export const createI18n = ({
   currentLocale,
   direction,
 }: I18nConfig) => {
-  const t = (key: string) => {
-    const value = translations[key]
-    if (value) {
-      return value
+  return useMemo(() => {
+    const t = (key: string) => {
+      const value = translations[key]
+      if (value) {
+        return value
+      }
+      if (key.match(/^(?:ln|x)\../i)) {
+        console.error(`Missing translation for key ${key}`)
+        return ""
+      }
+      return key
     }
-    if (key.match(/^(?:ln|x)\../i)) {
-      console.error(`Missing translation for key ${key}`)
-      return ""
-    }
-    return key
-  }
-  return { t, currentLocale, direction }
+    return { t, currentLocale, direction }
+  }, [])
 }

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

@@ -9,7 +9,7 @@ type Props = {
 
 <Page>
   <article
-    class="prose prose-img:rounded-md mx-auto mt-8 max-w-screen-md px-4 sm:mt-16 md:px-8"
+    class="prose mx-auto mt-8 max-w-screen-md px-4 prose-img:rounded-md sm:mt-16 md:px-8"
     class:list={[Astro.props.className]}
   >
     <slot />

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

@@ -14,7 +14,7 @@ const { icon, label } = Astro.props
     role="button"
     tabindex="0"
     aria-label={Astro.locals.i18n.t(label)}
-    class="hover:text-primary flex cursor-pointer rounded-md p-3 text-gray-600"
+    class="flex cursor-pointer rounded-md p-3 text-gray-600 hover:text-primary"
   >
     <Icon className={icon} ariaLabel="" />
   </div>

package/src/layouts/components/PageNavigation.astro

@@ -35,7 +35,7 @@ const t = Astro.locals.i18n.t
   {
     !config.searchPage?.hideHeaderSearchIcon && (
       <a
-        class="hover:text-primary flex p-3 text-gray-600"
+        class="flex p-3 text-gray-600 hover:text-primary"
         aria-label={t("ln.search.title")}
         data-astro-prefetch="viewport"
         href={searchPagePath(Astro.currentLocale)}

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

@@ -24,7 +24,7 @@ const content = createContentMetadata(item.data.content[0])
     content.isExternal && (
       <Icon
         ariaLabel={Astro.locals.i18n.t("ln.external-link")}
-        className={`mdi--external-link shrink-0`}
+        className={`shrink-0 mdi--external-link`}
       />
     )
   }

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/LoadingSkeleton.tsx

@@ -12,7 +12,7 @@ export default function LoadingSkeleton() {
         <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
       </div>
       <Icon
-        className="mdi--chevron-right my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

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[]
@@ -57,7 +57,7 @@ export default function SearchFilter({
           onInput={(e) => debouncedSetSearch(e.currentTarget.value)}
           onKeyDown={(e) => e.key === "Enter" && searchInput.current?.blur()}
         />
-        <Icon className="mdi--magnify text-xl" ariaLabel="" />
+        <Icon className="text-xl mdi--magnify" ariaLabel="" />
       </label>
       <div className="mb-8 grid grid-cols-1 gap-2 sm:grid-cols-3 sm:gap-6 md:mb-10">
         {languageFilterEnabled && (
@@ -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) },
   ]),
 )
 

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

@@ -5,13 +5,13 @@ import { detailsPagePath } from "../../../utils/paths"
 import type { SearchItem } from "../api/search-response"
 
 export type MediaType = {
-  name: string
+  labelText: string
   icon: string
   coverImageStyle: "default" | "book" | "video"
 }
 
 export type TranslatedLanguage = {
-  name: string
+  labelText: string
   direction: "rtl" | "ltr"
 }
 
@@ -58,7 +58,7 @@ export default function SearchListItem({
         <h2 className="mb-1 line-clamp-2 text-balance text-sm font-bold text-gray-700 md:mb-3 md:text-base">
           <Icon
             className={`${mediaTypes[item.type].icon} me-2 align-bottom text-2xl text-gray-700`}
-            ariaLabel={mediaTypes[item.type].name}
+            ariaLabel={mediaTypes[item.type].labelText}
           />
           <span>{item.title}</span>
         </h2>
@@ -70,7 +70,7 @@ export default function SearchListItem({
           )}
           {showLanguage && (
             <span className="rounded-lg border border-gray-300 px-2 py-1 text-gray-500">
-              {languages[item.language].name}
+              {languages[item.language].labelText}
             </span>
           )}
           <ul
@@ -99,7 +99,7 @@ export default function SearchListItem({
         </div>
       </div>
       <Icon
-        className="mdi--chevron-right md:group-hover:text-primary my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 sm:block"
+        className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block md:group-hover:text-primary"
         flipIcon={direction === "rtl"}
         ariaLabel=""
       />

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

@@ -2,7 +2,7 @@ type Props = {
   label: string
   initialValue: string | undefined
   valueChange: (value: string) => void
-  options: { id: string; name: string }[]
+  options: { id: string; labelText: string }[]
 }
 
 export default function Select({
@@ -17,13 +17,13 @@ export default function Select({
         {label}
       </span>
       <select
-        className="dy-select dy-select-bordered sm:dy-select-sm w-full rounded-xl"
+        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, name }) => (
+        {options.map(({ id, labelText }) => (
           <option key={id} value={id}>
-            {name}
+            {labelText}
           </option>
         ))}
       </select>

package/src/pages/search-page/hooks/use-search.ts

@@ -6,8 +6,8 @@ import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
 interface Context {
   categories: Record<string, string>
-  mediaTypes: Record<string, { name: string }>
-  languages: Record<string, { name: string }>
+  mediaTypes: Record<string, { labelText: string }>
+  languages: Record<string, { labelText: string }>
 }
 
 export function useSearch({ categories, mediaTypes, languages }: Context) {
@@ -39,8 +39,8 @@ export function useSearch({ categories, mediaTypes, languages }: Context) {
           const translatedCategories =
             item.categories &&
             item.categories.map((categoryId) => categories[categoryId])
-          const translatedType = mediaTypes[item.type].name
-          const translatedLanguage = languages[item.language].name
+          const translatedType = mediaTypes[item.type].labelText
+          const translatedLanguage = languages[item.language].labelText
 
           return {
             ...item,