lightnet 3.12.2 → 4.0.0

package/src/layouts/components/PageTitle.astro

@@ -14,33 +14,49 @@ function getWidth(logo: ImageMetadata) {
   return Math.floor(size * Math.max(1, logo.width / logo.height))
 }
 
-const logoAlt =
-  config.logo?.alt ?? (config.logo?.replacesTitle ? config.title : "")
+const { currentLocale, tMap } = Astro.locals.i18n
 
-const { t } = Astro.locals.i18n
+const logoAlt = (() => {
+  if (config.logo?.alt) {
+    return tMap(config.logo.alt, {
+      path: ["config", "logo", "alt"],
+    })
+  }
+  if (config.logo?.replacesTitle) {
+    return tMap(config.title, {
+      path: ["config", "title"],
+    })
+  }
+  return ""
+})()
 ---
 
 <a
   class="flex items-center gap-3 font-bold text-gray-600 md:text-lg"
-  href={localizePath(Astro.currentLocale, "/")}
+  href={localizePath(currentLocale, "/")}
 >
   {
     logo &&
       (logo.format === "svg" ? (
         <img
           src={logo.src}
-          alt={t(logoAlt)}
+          alt={logoAlt}
           style={`width:${getWidth(logo)}px;`}
         />
       ) : (
         <Image
           src={logo}
-          alt={t(logoAlt)}
+          alt={logoAlt}
           style={`width:${getWidth(logo)}px;`}
           width={getWidth(logo)}
           densities={[1.5, 2, 3]}
           loading="eager"
         />
       ))
-  }{!config.logo?.replacesTitle && t(config.title)}</a
+  }{
+    !config.logo?.replacesTitle &&
+      tMap(config.title, {
+        path: ["config", "title"],
+      })
+  }</a
 >

package/src/pages/404Route.astro

@@ -1,5 +1,6 @@
 ---
 import Page from "../layouts/Page.astro"
+import { localizePath } from "../utils/paths"
 ---
 
 <Page>
@@ -8,7 +9,7 @@ import Page from "../layouts/Page.astro"
       {Astro.locals.i18n.t("ln.404.page-not-found")}
     </p>
     <a
-      href={`/${Astro.locals.i18n.defaultLocale}`}
+      href={localizePath(Astro.locals.i18n.defaultLocale, "/")}
       class="rounded-2xl bg-gray-200 px-8 py-4 text-sm font-bold transition-colors ease-in-out hover:bg-gray-400"
       >{Astro.locals.i18n.t("ln.404.go-to-the-home-page")}</a
     >

package/src/pages/RootRoute.astro

@@ -1,3 +1,8 @@
 ---
-return Astro.rewrite(`/${Astro.locals.i18n.defaultLocale}`)
+return Astro.rewrite(
+  (await import("../utils/paths")).localizePath(
+    Astro.locals.i18n.defaultLocale,
+    "/",
+  ),
+)
 ---

package/src/pages/details-page/DefaultDetailsPage.astro

@@ -1,4 +1,5 @@
 ---
+import type { TranslationMap } from "../../i18n/translate-map"
 import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
 import DetailsPage from "./components/DetailsPage.astro"
@@ -9,10 +10,16 @@ import MoreDetailsSection from "./components/MoreDetailsSection.astro"
 
 export type Props = {
   mediaId: string
-  openActionLabel?: string
+  openActionLabel?: TranslationMap
 }
 
-const { mediaId, openActionLabel = "ln.details.open" } = Astro.props
+const defaultOpenActionLabel = Object.fromEntries(
+  Astro.locals.i18n.locales.map((locale) => [
+    locale,
+    Astro.locals.i18n.t("ln.details.open", { lng: locale }),
+  ]),
+)
+const { mediaId, openActionLabel = defaultOpenActionLabel } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>

package/src/pages/details-page/DetailsPageRoute.astro

@@ -6,14 +6,13 @@ import config from "virtual:lightnet/config"
 
 import { getMediaItem } from "../../content/get-media-items"
 import { getMediaType } from "../../content/get-media-types"
-import { resolveLocales } from "../../i18n/resolve-locales"
 import AudioDetailsPage from "./AudioDetailsPage.astro"
 import DefaultDetailsPage from "./DefaultDetailsPage.astro"
 import VideoDetailsPage from "./VideoDetailsPage.astro"
 
 export const getStaticPaths = (async () => {
   const mediaItems = await getCollection("media")
-  return resolveLocales(config).flatMap((locale) =>
+  return config.locales.flatMap((locale) =>
     mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
   )
 }) satisfies GetStaticPaths

package/src/pages/details-page/components/AudioPanel.astro

@@ -9,11 +9,15 @@ interface Props {
 }
 
 const { mediaId, className } = Astro.props
-const { t } = Astro.locals.i18n
+const { tMap } = Astro.locals.i18n
 
 const item = await getMediaItem(mediaId)
 
-const content = item.data.content.map((c) => createContentMetadata(c))
+const content = item.data.content.map((contentItem, index) =>
+  createContentMetadata(contentItem, tMap, {
+    path: ["media-items", mediaId, "content", index],
+  }),
+)
 ---
 
 <ol
@@ -24,7 +28,7 @@ const content = item.data.content.map((c) => createContentMetadata(c))
   {
     content.map((c) => (
       <li>
-        {content.length > 1 && <div class="mb-3 font-bold">{t(c.label)}</div>}
+        {content.length > 1 && <div class="mb-3 font-bold">{c.labelText}</div>}
         <AudioPlayer className="w-full" src={c.url} />
       </li>
     ))

package/src/pages/details-page/components/AudioPlayer.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from "../../../components/Icon"
+import { ExternalLinkIcon } from "lucide-react"
 
 type Props = {
   src: string
@@ -37,7 +37,7 @@ const isMp3 = audioExtension.endsWith(".mp3")
       </span>
       <div class="flex h-full grow flex-col gap-3">
         <span class="flex items-center gap-2 font-semibold text-gray-900">
-          <Icon className="mdi--external-link" ariaLabel="" />
+          <ExternalLinkIcon className="shrink-0" />
           {t("ln.external-link")}
         </span>
         <div class="h-2 w-full rounded-full bg-gray-200">

package/src/pages/details-page/components/ContentSection.astro

@@ -1,5 +1,17 @@
 ---
-import Icon from "../../../components/Icon"
+import {
+  ChevronRightIcon,
+  CodeIcon,
+  DownloadIcon,
+  ImageIcon,
+  LinkIcon,
+  type LucideIcon,
+  MusicIcon,
+  PackageIcon,
+  TextIcon,
+  VideoIcon,
+} from "lucide-react"
+
 import { getMediaItem } from "../../../content/get-media-items"
 import {
   createContentMetadata,
@@ -18,19 +30,23 @@ const item = await getMediaItem(mediaId)
 if (item.data.content.length < minimumItems) {
   return
 }
+const { t, tMap, direction } = Astro.locals.i18n
 
-const content = item.data.content.map((c) => createContentMetadata(c))
-const typeIcons: { [k in UrlType]: string } = {
-  audio: "mdi--music",
-  text: "mdi--text",
-  source: "mdi--code-tags",
-  link: "mdi--link-variant",
-  image: "mdi--image-outline",
-  video: "mdi--video-outline",
-  package: "mdi--zip-box-outline",
+const content = item.data.content.map((contentItem, index) =>
+  createContentMetadata(contentItem, tMap, {
+    path: ["media-items", mediaId, "content", index],
+  }),
+)
+const typeIcons: Record<UrlType, LucideIcon> = {
+  audio: MusicIcon,
+  text: TextIcon,
+  source: CodeIcon,
+  link: LinkIcon,
+  image: ImageIcon,
+  video: VideoIcon,
+  package: PackageIcon,
 } as const
-
-const { t, direction } = Astro.locals.i18n
+const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <ol
@@ -38,39 +54,46 @@ const { t, direction } = Astro.locals.i18n
 >
   {
     content.map(
-      ({ extension, label, type, canBeOpened, url, target }, index) => (
-        <li class="group -mt-px px-4 transition-colors ease-in-out hover:bg-gray-300 md:px-8">
-          <a
-            href={url}
-            target={target}
-            class="flex items-center justify-between py-8"
-          >
-            <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-800">
-              <Icon
-                className={`${typeIcons[type]} text-gray-200`}
-                ariaLabel=""
-              />
-            </span>
+      ({ extension, labelText, type, canBeOpened, url, target }, index) => {
+        const TypeIcon = typeIcons[type]
+
+        return (
+          <li class="group -mt-px px-4 transition-colors ease-in-out hover:bg-gray-300 md:px-8">
+            <a
+              href={url}
+              target={target}
+              class="flex items-center justify-between py-8"
+            >
+              <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-gray-800 text-gray-200">
+                <TypeIcon size="1.2rem" />
+              </span>
 
-            <div class="ms-4 line-clamp-1 shrink grow overflow-hidden sm:ms-8">
-              {t(label)}
-            </div>
-            <div class="me-4 ms-2 shrink-0 font-bold uppercase text-gray-600 sm:me-8">
-              {extension}
-            </div>
-            <Icon
-              className={`${canBeOpened ? "mdi--chevron-right" : "mdi--download"} shrink-0 bg-gray-600 group-hover:bg-gray-800`}
-              ariaLabel={
-                canBeOpened ? t("ln.details.open") : t("ln.details.download")
-              }
-              flipIcon={direction === "rtl"}
-            />
-          </a>
-          {index !== content.length - 1 && (
-            <div class="h-px w-full bg-gray-300" />
-          )}
-        </li>
-      ),
+              <div class="ms-4 line-clamp-1 shrink grow overflow-hidden sm:ms-8">
+                {labelText}
+              </div>
+              <div class="me-4 ms-2 shrink-0 font-bold uppercase text-gray-600 sm:me-8">
+                {extension}
+              </div>
+              {canBeOpened ? (
+                <>
+                  <ChevronRightIcon
+                    className={`shrink-0 text-gray-600 group-hover:text-gray-800 ${iconDirectionClass}`}
+                  />
+                  <span class="sr-only">{t("ln.details.open")}</span>
+                </>
+              ) : (
+                <>
+                  <DownloadIcon className="shrink-0 text-gray-600 group-hover:text-gray-800" />
+                  <span class="sr-only">{t("ln.details.download")}</span>
+                </>
+              )}
+            </a>
+            {index !== content.length - 1 && (
+              <div class="h-px w-full bg-gray-300" />
+            )}
+          </li>
+        )
+      },
     )
   }
 </ol>

package/src/pages/details-page/components/MediaCollection.astro

@@ -1,9 +1,9 @@
 ---
 import { AstroError } from "astro/errors"
 import { getEntry } from "astro:content"
+import { getEntries } from "astro:content"
 
 import MediaList from "../../../components/MediaList.astro"
-import { getCollectionItems } from "../utils/get-collection-items"
 
 interface Props {
   collectionId: string
@@ -18,7 +18,7 @@ if (!collection) {
     `To fix the issue, add a media-collection at "src/content/media-collections/${collectionId}.json".`,
   )
 }
-const items = (await getCollectionItems(collection.id)).map((item) => ({
+const items = (await getEntries(collection.data.mediaItems)).map((item) => ({
   ...item,
   disabled: item.id === disableItem,
 }))
@@ -26,7 +26,7 @@ const items = (await getCollectionItems(collection.id)).map((item) => ({
 if (items.length < 2) {
   return
 }
-const t = Astro.locals.i18n.t
+const { t, tMap } = Astro.locals.i18n
 ---
 
 <section class="mx-auto mt-16 max-w-screen-md px-4 md:mt-20 md:px-8">
@@ -34,7 +34,11 @@ const t = Astro.locals.i18n.t
     {t("ln.details.part-of-collection")}
   </h2>
   <h3 class="mb-6 text-lg font-bold text-gray-700 sm:mb-8">
-    {t(collection.data.label)}
+    {
+      tMap(collection.data.label, {
+        path: ["media-collections", collectionId, "label"],
+      })
+    }
   </h3>
   <MediaList items={items} />
 </section>

package/src/pages/details-page/components/MediaCollectionsSection.astro

@@ -1,5 +1,5 @@
 ---
-import { getMediaItem } from "../../../content/get-media-items"
+import { getCollectionsForMediaItem } from "../../../content/get-media-collections"
 import MediaCollection from "./MediaCollection.astro"
 
 interface Props {
@@ -7,15 +7,12 @@ interface Props {
 }
 
 const { mediaId } = Astro.props
-const item = await getMediaItem(mediaId)
 
-const collections = item.data.collections?.map(
-  ({ collection }) => collection.id,
-)
+const collections = await getCollectionsForMediaItem(mediaId)
 ---
 
 {
-  collections?.map((id) => (
+  collections.map((id) => (
     <MediaCollection collectionId={id} disableItem={mediaId} />
   ))
 }

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

@@ -1,5 +1,10 @@
 ---
-import Icon from "../../../../components/Icon"
+import { SquarePenIcon } from "lucide-react"
+import mediaItemEditButtonController from "virtual:lightnet/components/media-item-edit-button-controller"
+
+if (!mediaItemEditButtonController) {
+  return
+}
 
 interface Props {
   mediaId: string
@@ -11,18 +16,25 @@ const { mediaId } = Astro.props
 <a
   class="hidden cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   id="edit-btn"
-  data-admin-enabled={false}
-  href={`/admin/media/${mediaId}`}
-  ><Icon className="mdi--square-edit-outline" ariaLabel="" />
+  data-media-id={mediaId}
+  href="#"
+  ><SquarePenIcon />
   {Astro.locals.i18n.t("ln.details.edit")}</a
 >
 <script>
+  import mediaItemEditButtonController from "virtual:lightnet/components/media-item-edit-button-controller"
+
   const btn: HTMLAnchorElement | null = document.querySelector("#edit-btn")
-  const showEditButton =
-    btn?.dataset.adminEnabled === "true" &&
-    (import.meta.env.DEV || localStorage.getItem("ln-admin-enabled") === "true")
-  if (showEditButton) {
-    btn?.classList.remove("hidden")
-    btn?.classList.add("flex")
+  const mediaId = btn?.dataset.mediaId
+
+  if (
+    mediaItemEditButtonController &&
+    btn &&
+    mediaId &&
+    mediaItemEditButtonController.shouldShow()
+  ) {
+    btn.href = mediaItemEditButtonController.createHref(mediaId)
+    btn.classList.remove("hidden")
+    btn.classList.add("flex")
   }
 </script>

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

@@ -1,16 +1,21 @@
 ---
-import Icon from "../../../../components/Icon"
+import { ExternalLinkIcon } from "lucide-react"
+
 import { getMediaItem } from "../../../../content/get-media-items"
+import type { TranslationMap } from "../../../../i18n/translate-map"
 import { createContentMetadata } from "../../utils/create-content-metadata"
 
 interface Props {
   mediaId: string
-  openActionLabel: string
+  openActionLabel: TranslationMap
   className?: string
 }
 const { mediaId, openActionLabel, className } = Astro.props
+const { tMap } = Astro.locals.i18n
 const item = await getMediaItem(mediaId)
-const content = createContentMetadata(item.data.content[0])
+const content = createContentMetadata(item.data.content[0], tMap, {
+  path: ["media-items", mediaId, "content", 0],
+})
 ---
 
 <a
@@ -20,17 +25,17 @@ const content = createContentMetadata(item.data.content[0])
   hreflang={item.data.language}
   class:list={[className]}
 >
-  {
-    content.isExternal && (
-      <Icon
-        ariaLabel={Astro.locals.i18n.t("ln.external-link")}
-        className={`shrink-0 mdi--external-link`}
-      />
-    )
-  }
+  {content.isExternal && <ExternalLinkIcon className="shrink-0" />}
   {
     content.canBeOpened
-      ? Astro.locals.i18n.t(openActionLabel)
+      ? tMap(openActionLabel, {
+          path: [
+            "media-types",
+            item.data.type.id,
+            "detailsPage",
+            "openActionLabel",
+          ],
+        })
       : Astro.locals.i18n.t("ln.details.download")
   }
 </a>

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

@@ -1,5 +1,6 @@
 ---
-import Icon from "../../../../components/Icon"
+import { ForwardIcon } from "lucide-react"
+
 import Toast from "../../../../components/Toast"
 
 interface Props {
@@ -11,7 +12,7 @@ interface Props {
   class="flex cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   class:list={[Astro.props.className]}
   id="share-btn"
-  ><Icon className="mdi--share" ariaLabel="" />
+  ><ForwardIcon />
   {Astro.locals.i18n.t("ln.details.share")}</button
 >
 <Toast id="share-success" variant="success">

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

@@ -10,7 +10,7 @@ interface Props {
 
 const item = await getMediaItem(Astro.props.mediaId)
 
-const { t } = Astro.locals.i18n
+const { t, tMap, currentLocale } = Astro.locals.i18n
 
 const categories = await Promise.all(
   item.data.categories?.map(({ id }) => getCategory(id)) ?? [],
@@ -25,11 +25,13 @@ const categories = await Promise.all(
         {categories.map(async (category) => (
           <li class="flex rounded-lg bg-gray-200 px-4 py-1 text-gray-500 hover:bg-gray-300">
             <a
-              href={searchPagePath(Astro.currentLocale, {
+              href={searchPagePath(currentLocale, {
                 category: category.id,
               })}
             >
-              {t(category.label)}
+              {tMap(category.label, {
+                path: ["categories", category.id, "label"],
+              })}
             </a>
           </li>
         ))}

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

@@ -14,23 +14,28 @@ const item = await getMediaItem(Astro.props.mediaId)
 const { mediaId } = Astro.props
 const translations = await getTranslations(mediaId)
 
-const { t } = Astro.locals.i18n
+const { t, tMap, currentLocale } = Astro.locals.i18n
+const currentLanguage = resolveTranslatedLanguage(item.data.language, tMap)
+const translationLanguages = await Promise.all(
+  translations.map(async (translation) => ({
+    ...translation,
+    labelText: resolveTranslatedLanguage(translation.language, tMap).labelText,
+  })),
+)
 ---
 
 <div>
   <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).labelText}
-    </li>
+    <li class="py-1 pe-2 text-gray-800">{currentLanguage.labelText}</li>
     {
-      translations.map((translation) => (
+      translationLanguages.map((translation) => (
         <li class="flex rounded-lg border border-gray-200 px-4 py-1 text-gray-600 hover:bg-gray-200">
           <a
-            href={detailsPagePath(Astro.currentLocale, translation)}
+            href={detailsPagePath(currentLocale, translation)}
             hreflang={translation.language}
           >
-            {resolveTranslatedLanguage(translation.language, t).labelText}
+            {translation.labelText}
           </a>
         </li>
       ))

package/src/pages/details-page/utils/create-content-metadata.ts

@@ -1,3 +1,7 @@
+import {
+  type TranslateMapFn,
+  type TranslationMap,
+} from "../../../i18n/translate-map"
 import { isExternalUrl } from "../../../utils/urls"
 
 export type UrlType =
@@ -43,13 +47,17 @@ const KNOWN_EXTENSIONS: Record<
   docx: { type: "text" },
 } as const
 
-export function createContentMetadata({
-  url,
-  label: customLabel,
-}: {
-  url: string
-  label?: string
-}) {
+export function createContentMetadata(
+  {
+    url,
+    label: customLabel,
+  }: {
+    url: string
+    label?: TranslationMap
+  },
+  tMap: TranslateMapFn,
+  context: { path: (string | number)[] },
+) {
   const isExternal = isExternalUrl(url)
   const path = isExternal ? new URL(url).pathname : url
 
@@ -63,7 +71,14 @@ export function createContentMetadata({
   const fileName = hasExtension
     ? lastPathSegment.slice(0, -(extension.length + 1))
     : undefined
-  const label = customLabel || fileName || linkName
+
+  const labelText =
+    (customLabel &&
+      tMap(customLabel, {
+        path: [...context.path, "label"],
+      })) ??
+    fileName ??
+    linkName
   const type = KNOWN_EXTENSIONS[extension]?.type ?? "link"
   const canBeOpened =
     !hasExtension || !!KNOWN_EXTENSIONS[extension]?.canBeOpened
@@ -72,7 +87,7 @@ export function createContentMetadata({
     url,
     extension,
     isExternal,
-    label,
+    labelText,
     canBeOpened,
     type,
     target: isExternal ? "_blank" : "_self",

package/src/pages/details-page/utils/get-translations.ts

@@ -3,6 +3,9 @@ import { getMediaItem, getMediaItems } from "../../../content/get-media-items"
 const groupItemsByCommonId = async () => {
   const items = await getMediaItems()
   items.forEach(({ id, data: { commonId, language } }) => {
+    if (!commonId) {
+      return
+    }
     if (!itemsByCommonId.has(commonId)) {
       itemsByCommonId.set(commonId, [])
     }
@@ -24,6 +27,9 @@ export const getTranslations = async (mediaId: string) => {
     await groupItemsByCommonId()
   }
   const item = await getMediaItem(mediaId)
+  if (!item.data.commonId) {
+    return []
+  }
   const sameCommonId = itemsByCommonId.get(item.data.commonId)
   if (!sameCommonId) {
     return []

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

@@ -1,8 +1,11 @@
-import Icon from "../../../components/Icon"
+import { ChevronRightIcon } from "lucide-react"
+
 import { useI18n } from "../../../i18n/react/use-i18n"
 
 export default function LoadingSkeleton() {
   const { direction } = useI18n()
+  const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
+
   return (
     <ul>
       {Array.from({ length: 8 }, (_, index) => (
@@ -16,10 +19,8 @@ export default function LoadingSkeleton() {
             <div className="h-4 w-3/4 rounded-md bg-gray-200 md:h-6"></div>
             <div className="h-4 w-5/6 rounded-md bg-gray-200 md:h-6"></div>
           </div>
-          <Icon
-            className="my-auto me-4 ms-2 hidden shrink-0 text-2xl text-gray-300 mdi--chevron-right sm:block"
-            flipIcon={direction === "rtl"}
-            ariaLabel=""
+          <ChevronRightIcon
+            className={`my-auto me-4 ms-2 hidden shrink-0 text-gray-300 sm:block ${iconDirectionClass}`}
           />
         </li>
       ))}