lightnet 4.0.8 → 4.1.1

package/src/i18n/translations/zh.yml

@@ -17,6 +17,7 @@ ln.search.all-categories: 所有分类
 ln.search.no-results: 没有结果
 ln.details.open: 打开
 ln.details.share: 分享
+ln.details.edit: 编辑
 ln.details.part-of-collection: 属于一个合集
 ln.details.download: 下载
 ln.share.url-copied-to-clipboard: 链接已复制到剪贴板

package/src/i18n/translations.ts

@@ -1,3 +1,4 @@
+import { z } from "astro/zod"
 import YAML from "yaml"
 
 const builtInTranslations = {
@@ -19,6 +20,8 @@ const builtInTranslations = {
 
 type BuiltInLanguage = keyof typeof builtInTranslations
 
+const translationFileSchema = z.record(z.string(), z.string())
+
 const userTranslations = Object.fromEntries(
   Object.entries(
     import.meta.glob(["/src/translations/*.(yml|yaml)"], {
@@ -52,7 +55,7 @@ const loadBuiltInTranslations = async (
     return {}
   }
   const yml = (await translationMap[bcp47]()).default
-  return YAML.parse(yml)
+  return translationFileSchema.parse(YAML.parse(yml))
 }
 
 const loadUserTranslations = async (bcp47: string) => {
@@ -60,7 +63,7 @@ const loadUserTranslations = async (bcp47: string) => {
     return {}
   }
   const yml = (await userTranslations[bcp47]()) as string
-  return YAML.parse(yml)
+  return translationFileSchema.parse(YAML.parse(yml))
 }
 
 export type LightNetTranslationKey =

package/src/layouts/Page.astro

@@ -20,10 +20,9 @@ interface Props {
 }
 
 const { title, description, mainClass, locale } = Astro.props
-const currentLocale = locale ?? Astro.locals.i18n.currentLocale
-const configTitle = Astro.locals.i18n.tMap(config.title, {
-  path: ["config", "title"],
-})
+const { currentLocale: pathCurrentLocale, tConfigField } = Astro.locals.i18n
+const currentLocale = locale ?? pathCurrentLocale
+const configTitle = tConfigField(config.title, config)
 const { direction } = resolveLanguage(currentLocale)
 ---
 

package/src/layouts/components/Footer.astro

@@ -1,24 +1,77 @@
 ---
 import config from "virtual:lightnet/config"
 
+import { getLinkAttributes } from "../../utils/link-attributes"
+import { localizePath } from "../../utils/paths"
 import LightNetLogo from "./LightNetLogo.svg"
 
-if (!config.credits) {
+const { t, tConfigField, currentLocale } = Astro.locals.i18n
+
+// Resolve optional footer text for the current locale.
+const footerText = config.footerText
+  ? tConfigField(config.footerText, config)
+  : undefined
+
+// Prepare footer links using the same locale rules as the main menu.
+const footerLinks = (config.footerLinks ?? []).map(
+  ({ href, label, requiresLocale }) => {
+    return {
+      href: requiresLocale ? localizePath(currentLocale, href) : href,
+      label: tConfigField(label, config),
+    }
+  },
+)
+
+// Hide the footer entirely when there is nothing to show.
+const shouldRenderFooter =
+  config.credits || !!footerText || footerLinks.length > 0
+
+if (!shouldRenderFooter) {
   return
 }
 ---
 
-<footer class="w-full border-t border-gray-300">
+<footer class="w-full border-t border-gray-200 bg-white">
   <div
-    class="mx-auto flex w-full max-w-screen-xl justify-end px-4 py-4 md:px-8"
+    class="mx-auto flex w-full max-w-screen-xl flex-col items-center justify-between gap-4 px-4 py-6 md:flex-row md:px-8"
   >
-    <a
-      class="flex items-center gap-2 py-2 text-sm text-gray-800 hover:underline"
-      href="https://lightnet.community"
-      target="_blank"
+    <div
+      class="flex flex-wrap items-center justify-center gap-2 text-sm text-gray-700 md:justify-start"
     >
-      <img src={LightNetLogo.src} alt="" class="h-5 w-auto" loading="lazy" />
-      {Astro.locals.i18n.t("ln.footer.powered-by-lightnet")}
-    </a>
+      {footerText && <span>{footerText}</span>}
+
+      {
+        footerLinks.map((link, index) => (
+          <Fragment>
+            {(footerText || index > 0) && <span class="text-gray-400">·</span>}
+            <a
+              {...getLinkAttributes(link.href)}
+              class="underline-offset-4 hover:underline"
+            >
+              {link.label}
+            </a>
+          </Fragment>
+        ))
+      }
+    </div>
+
+    {
+      config.credits && (
+        <div class="flex items-center text-sm">
+          <a
+            class="flex items-center gap-2 text-gray-800 underline-offset-4 hover:underline"
+            {...getLinkAttributes("https://lightnet.community")}
+          >
+            <img
+              src={LightNetLogo.src}
+              alt=""
+              class="h-5 w-auto"
+              loading="lazy"
+            />
+            <span>{t("ln.footer.powered-by-lightnet")}</span>
+          </a>
+        </div>
+      )
+    }
   </div>
 </footer>

package/src/layouts/components/LanguagePicker.astro

@@ -6,7 +6,7 @@ import { localizePath, pathWithoutBase } from "../../utils/paths"
 import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 
-const { locales, currentLocale, tMap } = Astro.locals.i18n
+const { locales, currentLocale, tConfigField } = Astro.locals.i18n
 
 const currentPath = pathWithoutBase(Astro.url.pathname)
 const hasLocale =
@@ -18,7 +18,7 @@ const translations = (
   await Promise.all(
     locales.map(async (locale) => ({
       locale,
-      label: resolveTranslatedLanguage(locale, tMap).labelText,
+      label: resolveTranslatedLanguage(locale, tConfigField).labelText,
       active: locale === currentLocale,
       href: currentPathWithLocale(locale),
     })),

package/src/layouts/components/MenuItem.astro

@@ -1,18 +1,18 @@
 ---
+import { getLinkAttributes } from "../../utils/link-attributes"
+
 interface Props {
   href: string
   active: boolean
   hreflang?: string
-  target?: "_blank" | "_self"
 }
-const { href, hreflang, active, target } = Astro.props
+const { href, hreflang, active } = Astro.props
 ---
 
 <li>
   <a
-    href={href}
+    {...getLinkAttributes(href)}
     hreflang={hreflang}
-    target={target}
     class="flex items-center gap-2 px-6 py-3 decoration-gray-800"
     class:list={[active ? "font-bold" : "hover:underline"]}
   >

package/src/layouts/components/PageNavigation.astro

@@ -2,35 +2,28 @@
 import { ExternalLinkIcon, MenuIcon, SearchIcon } from "lucide-react"
 import config from "virtual:lightnet/config"
 
+import { isExternalUrl } from "../../utils/is-external-url"
 import { localizePath, searchPagePath } from "../../utils/paths"
-import { isExternalUrl } from "../../utils/urls"
 import LanguagePicker from "./LanguagePicker.astro"
 import Menu from "./Menu.astro"
 import MenuItem from "./MenuItem.astro"
 
 const currentPath = Astro.url.pathname
-const { t, tMap, currentLocale } = Astro.locals.i18n
+const { t, tConfigField, currentLocale } = Astro.locals.i18n
 
-const items = (config.mainMenu ?? []).map(
-  ({ href, label, requiresLocale }, index) => {
-    const isExternal = isExternalUrl(href)
-    const path =
-      isExternal || !requiresLocale ? href : localizePath(currentLocale, href)
-    const isActive =
-      !isExternal &&
-      (currentPath === localizePath(currentLocale, href) ||
-        currentPath === localizePath(currentLocale, `${href}/`) ||
-        currentPath === href)
-    return {
-      path,
-      isExternal,
-      labelText: tMap(label, {
-        path: ["config", "mainMenu", index, "label"],
-      }),
-      isActive,
-    }
-  },
-)
+const items = (config.mainMenu ?? []).map(({ href, label, requiresLocale }) => {
+  const isExternal = isExternalUrl(href)
+  const isActive =
+    currentPath === localizePath(currentLocale, href) ||
+    currentPath === localizePath(currentLocale, `${href}/`) ||
+    currentPath === href
+  return {
+    href: requiresLocale ? localizePath(currentLocale, href) : href,
+    labelText: tConfigField(label, config),
+    isActive,
+    isExternal,
+  }
+})
 ---
 
 <nav class="-me-3 flex items-center">
@@ -53,15 +46,14 @@ const items = (config.mainMenu ?? []).map(
     !!items.length && (
       <Menu label="ln.header.open-main-menu">
         <MenuIcon slot="icon" />
-        {items.map(({ labelText, path, isActive, isExternal }) => (
-          <MenuItem
-            href={path}
-            active={isActive}
-            target={isExternal ? "_blank" : "_self"}
-          >
+        {items.map(({ labelText, href, isActive, isExternal }) => (
+          <MenuItem href={href} active={isActive}>
             {labelText}
             {isExternal && (
-              <ExternalLinkIcon size="1.2rem" className="shrink-0" />
+              <ExternalLinkIcon
+                size="1.2rem"
+                className="shrink-0 rtl:scale-x-[-1]"
+              />
             )}
           </MenuItem>
         ))}

package/src/layouts/components/PageTitle.astro

@@ -14,18 +14,14 @@ function getWidth(logo: ImageMetadata) {
   return Math.floor(size * Math.max(1, logo.width / logo.height))
 }
 
-const { currentLocale, tMap } = Astro.locals.i18n
+const { currentLocale, tConfigField } = Astro.locals.i18n
 
 const logoAlt = (() => {
   if (config.logo?.alt) {
-    return tMap(config.logo.alt, {
-      path: ["config", "logo", "alt"],
-    })
+    return tConfigField(config.logo.alt, config)
   }
   if (config.logo?.replacesTitle) {
-    return tMap(config.title, {
-      path: ["config", "title"],
-    })
+    return tConfigField(config.title, config)
   }
   return ""
 })()
@@ -53,10 +49,5 @@ const logoAlt = (() => {
           loading="eager"
         />
       ))
-  }{
-    !config.logo?.replacesTitle &&
-      tMap(config.title, {
-        path: ["config", "title"],
-      })
-  }</a
+  }{!config.logo?.replacesTitle && tConfigField(config.title, config)}</a
 >

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

@@ -1,5 +1,4 @@
 ---
-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"
@@ -10,25 +9,13 @@ import MoreDetailsSection from "./components/MoreDetailsSection.astro"
 
 export type Props = {
   mediaId: string
-  openActionLabel?: TranslationMap
 }
-
-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
+const { mediaId } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>
   <MainDetailsSection mediaId={mediaId}>
-    <OpenButton
-      className="mt-8"
-      mediaId={mediaId}
-      openActionLabel={openActionLabel}
-    />
+    <OpenButton className="mt-8" mediaId={mediaId} />
   </MainDetailsSection>
   <DescriptionSection mediaId={mediaId} />
   <ContentSection mediaId={mediaId} />

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

@@ -9,13 +9,14 @@ interface Props {
 }
 
 const { mediaId, className } = Astro.props
-const { tMap } = Astro.locals.i18n
+const { tContentField } = Astro.locals.i18n
 
 const item = await getMediaItem(mediaId)
 
-const content = item.data.content.map((contentItem, index) =>
-  createContentMetadata(contentItem, tMap, {
-    path: ["media-items", mediaId, "content", index],
+const content = item.data.content.map(({ url, label }) =>
+  createContentMetadata({
+    url,
+    labelText: label && tContentField(label, item),
   }),
 )
 ---

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

@@ -1,6 +1,8 @@
 ---
 import { ExternalLinkIcon } from "lucide-react"
 
+import { getLinkAttributes } from "../../../utils/link-attributes"
+
 type Props = {
   src: string
   className?: string
@@ -20,9 +22,7 @@ const isMp3 = audioExtension.endsWith(".mp3")
     <a
       class="group flex w-full items-center gap-4 rounded-2xl border border-gray-200 bg-white px-4 py-4 shadow-sm transition hover:border-gray-300 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-900/70"
       class:list={[className]}
-      href={src}
-      target="_blank"
-      rel="noreferrer noopener"
+      {...getLinkAttributes(src)}
       aria-label={t("ln.external-link")}
     >
       <span class="flex h-12 w-12 items-center justify-center rounded-full border border-gray-700 text-gray-700 shadow-sm transition group-hover:scale-105">
@@ -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">
-          <ExternalLinkIcon className="shrink-0" />
+          <ExternalLinkIcon className="shrink-0 rtl:scale-x-[-1]" />
           {t("ln.external-link")}
         </span>
         <div class="h-2 w-full rounded-full bg-gray-200">

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

@@ -13,6 +13,7 @@ import {
 } from "lucide-react"
 
 import { getMediaItem } from "../../../content/get-media-items"
+import { getLinkAttributes } from "../../../utils/link-attributes"
 import {
   createContentMetadata,
   type UrlType,
@@ -30,11 +31,12 @@ const item = await getMediaItem(mediaId)
 if (item.data.content.length < minimumItems) {
   return
 }
-const { t, tMap, direction } = Astro.locals.i18n
+const { t, tContentField, direction } = Astro.locals.i18n
 
-const content = item.data.content.map((contentItem, index) =>
-  createContentMetadata(contentItem, tMap, {
-    path: ["media-items", mediaId, "content", index],
+const content = item.data.content.map(({ url, label }) =>
+  createContentMetadata({
+    url,
+    labelText: label && tContentField(label, item),
   }),
 )
 const typeIcons: Record<UrlType, LucideIcon> = {
@@ -53,47 +55,44 @@ const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
   class="mx-auto mt-16 max-w-screen-md overflow-hidden bg-gray-200 md:mt-20 md:rounded-xl"
 >
   {
-    content.map(
-      ({ extension, labelText, type, canBeOpened, url, target }, index) => {
-        const TypeIcon = typeIcons[type]
+    content.map(({ extension, labelText, type, isDownload, url }, 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>
+      return (
+        <li class="group -mt-px px-4 transition-colors ease-in-out hover:bg-gray-300 md:px-8">
+          <a
+            {...getLinkAttributes(url)}
+            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">
-                {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" />
+            <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>
+            {isDownload ? (
+              <>
+                <DownloadIcon className="shrink-0 text-gray-600 group-hover:text-gray-800" />
+                <span class="sr-only">{t("ln.details.download")}</span>
+              </>
+            ) : (
+              <>
+                <ChevronRightIcon
+                  className={`shrink-0 text-gray-600 group-hover:text-gray-800 ${iconDirectionClass}`}
+                />
+                <span class="sr-only">{t("ln.details.open")}</span>
+              </>
             )}
-          </li>
-        )
-      },
-    )
+          </a>
+          {index !== content.length - 1 && (
+            <div class="h-px w-full bg-gray-300" />
+          )}
+        </li>
+      )
+    })
   }
 </ol>

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

@@ -26,7 +26,7 @@ const items = (await getEntries(collection.data.mediaItems)).map((item) => ({
 if (items.length < 2) {
   return
 }
-const { t, tMap } = Astro.locals.i18n
+const { t, tContentField } = Astro.locals.i18n
 ---
 
 <section class="mx-auto mt-16 max-w-screen-md px-4 md:mt-20 md:px-8">
@@ -34,11 +34,7 @@ const { t, tMap } = Astro.locals.i18n
     {t("ln.details.part-of-collection")}
   </h2>
   <h3 class="mb-6 text-lg font-bold text-gray-700 sm:mb-8">
-    {
-      tMap(collection.data.label, {
-        path: ["media-collections", collectionId, "label"],
-      })
-    }
+    {tContentField(collection.data.label, collection)}
   </h3>
   <MediaList items={items} />
 </section>

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

@@ -2,40 +2,46 @@
 import { ExternalLinkIcon } from "lucide-react"
 
 import { getMediaItem } from "../../../../content/get-media-items"
-import type { TranslationMap } from "../../../../i18n/translate-map"
+import { getMediaType } from "../../../../content/get-media-types"
+import { getLinkAttributes } from "../../../../utils/link-attributes"
 import { createContentMetadata } from "../../utils/create-content-metadata"
 
 interface Props {
   mediaId: string
-  openActionLabel: TranslationMap
   className?: string
 }
-const { mediaId, openActionLabel, className } = Astro.props
-const { tMap } = Astro.locals.i18n
+const { mediaId, className } = Astro.props
+const { tContentField, t } = Astro.locals.i18n
 const item = await getMediaItem(mediaId)
-const content = createContentMetadata(item.data.content[0], tMap, {
-  path: ["media-items", mediaId, "content", 0],
+const { url, label } = item.data.content[0]
+const content = createContentMetadata({
+  url,
+  labelText: label && tContentField(label, item),
 })
+const mediaType = await getMediaType(item.data.type.id)
+
+const getOpenActionLabel = () => {
+  const defaultLabel = t("ln.details.open")
+  if (mediaType.data.detailsPage?.layout !== "default") {
+    return defaultLabel
+  }
+  if (!mediaType.data.detailsPage.openActionLabel) {
+    return defaultLabel
+  }
+  return tContentField(mediaType.data.detailsPage.openActionLabel, mediaType)
+}
 ---
 
 <a
   class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
-  href={content.url}
-  target={content.target}
+  {...getLinkAttributes(content.url)}
   hreflang={item.data.language}
   class:list={[className]}
 >
-  {content.isExternal && <ExternalLinkIcon className="shrink-0" />}
   {
-    content.canBeOpened
-      ? tMap(openActionLabel, {
-          path: [
-            "media-types",
-            item.data.type.id,
-            "detailsPage",
-            "openActionLabel",
-          ],
-        })
-      : Astro.locals.i18n.t("ln.details.download")
+    content.isExternal && (
+      <ExternalLinkIcon className="shrink-0 rtl:scale-x-[-1]" />
+    )
   }
+  {content.isDownload ? t("ln.details.download") : getOpenActionLabel()}
 </a>

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

@@ -14,7 +14,7 @@ const { t } = Astro.locals.i18n
   class="flex cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
   class:list={[Astro.props.className]}
   id="share-btn"
-  ><ForwardIcon />
+  ><ForwardIcon className="rtl:scale-x-[-1]" />
   {t("ln.details.share")}</button
 >
 <Toast id="share-success" variant="success">

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

@@ -10,10 +10,10 @@ interface Props {
 
 const item = await getMediaItem(Astro.props.mediaId)
 
-const { t, tMap, currentLocale } = Astro.locals.i18n
+const { t, tContentField, currentLocale } = Astro.locals.i18n
 
 const categories = await Promise.all(
-  item.data.categories?.map(({ id }) => getCategory(id)) ?? [],
+  item.data.categories?.map(({ id }) => getCategory(id, tContentField)) ?? [],
 )
 ---
 
@@ -29,9 +29,7 @@ const categories = await Promise.all(
                 category: category.id,
               })}
             >
-              {tMap(category.label, {
-                path: ["categories", category.id, "label"],
-              })}
+              {category.labelText}
             </a>
           </li>
         ))}

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

@@ -14,12 +14,16 @@ const item = await getMediaItem(Astro.props.mediaId)
 const { mediaId } = Astro.props
 const translations = await getTranslations(mediaId)
 
-const { t, tMap, currentLocale } = Astro.locals.i18n
-const currentLanguage = resolveTranslatedLanguage(item.data.language, tMap)
+const { t, tConfigField, currentLocale } = Astro.locals.i18n
+const currentLanguage = resolveTranslatedLanguage(
+  item.data.language,
+  tConfigField,
+)
 const translationLanguages = await Promise.all(
   translations.map(async (translation) => ({
     ...translation,
-    labelText: resolveTranslatedLanguage(translation.language, tMap).labelText,
+    labelText: resolveTranslatedLanguage(translation.language, tConfigField)
+      .labelText,
   })),
 )
 ---