lightnet 3.6.1 → 3.8.0

package/src/components/CategoriesSection.astro

@@ -4,15 +4,16 @@ import { Image } from "astro:assets"
 
 import { getUsedCategories } from "../content/get-categories"
 import { searchPagePath } from "../utils/paths"
-import Section from "./Section.astro"
+import CarouselSection from "./CarouselSection.astro"
+import Section, { type Props as SectionProps } from "./Section.astro"
 
-interface Props {
-  title?: string
-  layout?: "button-grid" | "image-grid"
+type Props = SectionProps & {
+  layout?: "grid" | "carousel"
 }
 
-const { title, layout = "button-grid" } = Astro.props
+const { title, layout = "carousel", ...props } = Astro.props
 const { t, currentLocale } = Astro.locals.i18n
+const resolvedTitle = title ?? t("ln.categories")
 
 const categories = await getUsedCategories(currentLocale, t)
 type Category = (typeof categories)[number]
@@ -20,8 +21,8 @@ type Category = (typeof categories)[number]
 function getImage({ image, id }: Category) {
   if (!image) {
     throw new AstroError(
-      `The CategorySection with layout="image-grid" requires an image for category "${id}".`,
-      `To resolve this issue, either change the layout to "button-grid" or provide an image path in /src/content/categories/${id}.json.`,
+      `Expected an image for category "${id}".`,
+      `To resolve this issue, provide a valid image path in /src/content/categories/${id}.json.`,
     )
   }
   return image
@@ -29,40 +30,27 @@ function getImage({ image, id }: Category) {
 ---
 
 {
-  categories.length && (
-    <Section title={title ?? t("ln.categories")}>
-      {layout === "button-grid" && (
-        <ul class="grid w-full grid-cols-2 flex-wrap gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
-          {categories.map((category) => (
-            <li class="grow">
-              <a
-                class="flex h-20 w-full items-center justify-center rounded-2xl bg-gray-200 p-3 text-gray-600 shadow-sm transition-colors ease-in-out hover:bg-gray-300"
-                href={searchPagePath(currentLocale, {
-                  category: category.id,
-                })}
+  !!categories.length && layout === "grid" && (
+    <Section {...props} title={resolvedTitle}>
+      <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
+        {categories.map((category) => (
+          <li class="h-full">
+            <a
+              href={searchPagePath(currentLocale, { category: category.id })}
+              class="group flex h-full flex-col gap-3"
+            >
+              <div
+                class="relative overflow-hidden rounded-2xl shadow-md outline-2 outline-gray-400 transition-colors duration-75 ease-in-out sm:group-hover:outline"
+                class:list={[
+                  !category.image && "h-full min-h-28 w-full bg-gray-300",
+                ]}
               >
-                <div class="line-clamp-3 overflow-hidden text-balance text-center text-xs font-bold">
-                  {category.name}
-                </div>
-              </a>
-            </li>
-          ))}
-        </ul>
-      )}
-      {layout === "image-grid" && (
-        <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
-          {categories.map((category) => (
-            <li>
-              <a
-                href={searchPagePath(currentLocale, { category: category.id })}
-                class="group flex flex-col gap-3"
-              >
-                <div class="relative overflow-hidden rounded-md shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline">
+                {category.image && (
                   <Image
-                    class="h-full w-full object-contain"
+                    class="h-full w-full bg-gray-500 object-contain"
                     src={getImage(category)}
                     alt=""
-                    widths={[256, 512, 768, 1024]}
+                    widths={[128, 256, 388, 512, 768]}
                     sizes={
                       "(max-width: 640px) calc(calc(100vw - 3.5rem ) / 2), " +
                       "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
@@ -71,17 +59,78 @@ function getImage({ image, id }: Category) {
                       "217px"
                     }
                   />
-                  <div class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t from-black/80 via-black/35 via-30% to-transparent to-65% p-4 text-gray-50">
-                    <span class="line-clamp-3 text-balance font-bold">
-                      {category.name}
-                    </span>
-                  </div>
+                )}
+
+                <div
+                  class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
+                  class:list={[
+                    category.image
+                      ? "from-black/80 via-black/30 via-50% to-transparent"
+                      : "from-black/35 to-transparent",
+                  ]}
+                >
+                  <span class="line-clamp-3 select-none text-balance font-bold">
+                    {category.name}
+                  </span>
                 </div>
-              </a>
-            </li>
-          ))}
-        </ol>
-      )}
+              </div>
+            </a>
+          </li>
+        ))}
+      </ol>
     </Section>
   )
 }
+{
+  !!categories.length && layout === "carousel" && (
+    <CarouselSection {...props} title={resolvedTitle}>
+      {categories.map((category) => (
+        <li
+          class="carousel-item--narrow h-full"
+          role="group"
+          aria-roledescription="slide"
+        >
+          <a
+            href={searchPagePath(currentLocale, { category: category.id })}
+            class="group flex h-full flex-col gap-3"
+          >
+            <div
+              class="relative overflow-hidden rounded-2xl shadow-md outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              class:list={[
+                !category.image && "h-full min-h-28 w-full bg-gray-300",
+              ]}
+            >
+              {category.image && (
+                <Image
+                  class="h-full w-full bg-gray-300 object-contain"
+                  src={getImage(category)}
+                  alt=""
+                  widths={[128, 256, 388, 512, 768]}
+                  sizes={
+                    "(max-width: 640px) calc(calc(100vw - 3rem ) / 2.3), " +
+                    "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
+                    "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
+                    "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
+                    "217px"
+                  }
+                />
+              )}
+              <div
+                class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
+                class:list={[
+                  category.image
+                    ? "from-black/80 via-black/30 via-50% to-transparent"
+                    : "from-black/35 to-transparent",
+                ]}
+              >
+                <span class="line-clamp-3 select-none text-balance font-bold">
+                  {category.name}
+                </span>
+              </div>
+            </div>
+          </a>
+        </li>
+      ))}
+    </CarouselSection>
+  )
+}

package/src/components/MediaGallery.astro

@@ -81,7 +81,7 @@ const items = itemsInput.filter((item) => !!item)
 {
   (layout === "video" || layout === "landscape") && (
     <ol
-      class="grid grid-cols-1 justify-between gap-x-7 gap-y-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4 xl:grid-cols-4"
+      class="grid grid-cols-1 justify-between gap-x-7 gap-y-4 sm:grid-cols-2 md:grid-cols-3 md:gap-8 lg:grid-cols-4"
       class:list={[layout === "landscape" && "items-end"]}
     >
       {items.map((item) => (

package/src/components/SearchInput.astro

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

package/src/components/SearchSection.astro

@@ -3,12 +3,17 @@ import SearchFilter from "../pages/search-page/components/SearchFilter.astro"
 import SearchList from "../pages/search-page/components/SearchList.astro"
 import Section, { type Props as SectionProps } from "./Section.astro"
 
-// we need the semi-colon for the astro compiler :(
-// prettier-ignore
-type Props = Omit<SectionProps, "disableHorizontalPadding" | "maxWidth">;
+type Props = Omit<SectionProps, "maxWidth">
+
+const { className = "", titleClass = "", ...props } = Astro.props
 ---
 
-<Section {...Astro.props} disableHorizontalPadding={true} maxWidth="narrow">
+<Section
+  {...props}
+  className={"px-0 md:px-0 " + className}
+  titleClass={"px-4 md:px-8 " + titleClass}
+  maxWidth="narrow"
+>
   <div class="px-4 md:px-8">
     <SearchFilter />
   </div>

package/src/components/Section.astro

@@ -1,4 +1,6 @@
 ---
+import Icon from "./Icon"
+
 export interface Props {
   /**
    * Id to set to the section element.
@@ -21,30 +23,35 @@ export interface Props {
    * @default "lg"
    */
   marginTop?: "sm" | "lg" | "none"
-  /**
-   * Remove padding from the left and right side of the content.
-   * This will not apply to the section title.
-   *
-   * @default false
-   */
-  disableHorizontalPadding?: boolean
   /**
    * Title on top of the section.
    */
   title?: string
+  /**
+   * A link to add to the section title. This link can be used to show
+   * more content related to the section.
+   *
+   * The link will not be transformed. You need to make sure to prepend the current locale.
+   */
+  titleHref?: string
   /**
    * Css classes to set to the section element.
    */
   className?: string
+  /**
+   * Css classes to set to the title element.
+   */
+  titleClass?: string
 }
 
 const {
   id,
   maxWidth = "wide",
   marginTop = "lg",
-  disableHorizontalPadding = false,
+  titleHref,
   title,
   className,
+  titleClass,
 } = Astro.props
 
 const maxWidths = {
@@ -60,22 +67,29 @@ const marginTopValues = {
 ---
 
 <section
-  class="mx-auto"
-  class:list={[
-    maxWidths[maxWidth],
-    marginTopValues[marginTop],
-    !disableHorizontalPadding && "px-4 md:px-8",
-    className,
-  ]}
+  class="mx-auto px-4 md:px-8"
+  class:list={[maxWidths[maxWidth], marginTopValues[marginTop], className]}
   id={id}
+  aria-label={title}
 >
   {
     title && (
       <h2
         class="mb-10 text-balance text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
-        class:list={[disableHorizontalPadding && "px-4 md:px-8"]}
+        class:list={[titleClass]}
       >
-        {title}
+        {titleHref ? (
+          <a href={titleHref} class="group flex items-center">
+            {title}
+            <Icon
+              className="mdi--chevron-right group-hover:text-primary transition-colors ease-in-out duration-75 text-4xl sm:text-5xl -ms-2"
+              ariaLabel=""
+              flipIcon={Astro.locals.i18n.direction === "rtl"}
+            />
+          </a>
+        ) : (
+          <>{title}</>
+        )}
       </h2>
     )
   }

package/src/content/get-categories.ts

@@ -68,6 +68,6 @@ function parseCategory(item: unknown) {
     categoryEntrySchema,
     item,
     (id) => `Invalid category: ${id}`,
-    (id) => `Fix these issues inside "src/content/category/${id}.json":`,
+    (id) => `Fix these issues inside "src/content/categories/${id}.json":`,
   )
 }

package/src/i18n/translations/README.md

@@ -8,7 +8,7 @@ Check the [translation status](TRANSLATION-STATUS.md) for an overview of complet
 Have you translated LightNet into a new language? Have you fixed a incorrect translation? Great! How about sharing
 your work with others, by adding it to this folder?
 
-This are the ways how you can contribute your translations:
+These are the ways you can contribute your translations:
 
 - [Open a GitHub pull-request](https://docs.github.com/en/get-started/exploring-projects-on-github/contributing-to-a-project), if you are a git-native. 🤓
 - [Use the translation-update form](https://github.com/LightNetDev/LightNet/issues/new?template=---03-translations-update.yml) to share your work. ⭐️

package/src/i18n/translations/ar.yml

@@ -6,6 +6,8 @@ ln.categories: الفئات
 ln.language: اللغة
 ln.languages: اللغات
 ln.type: النوع
+ln.previous: السابق
+ln.next: التالي
 ln.external-link: رابط خارجي
 ln.search.title: بحث
 ln.search.placeholder: ابحث في الوسائط

package/src/i18n/translations/bn.yml

@@ -6,6 +6,8 @@ ln.categories: বিভাগসমূহ
 ln.language: ভাষা
 ln.languages: ভাষাসমূহ
 ln.type: ধরন
+ln.previous: পূর্ববর্তী
+ln.next: পরবর্তী
 ln.external-link: বহিরাগত লিঙ্ক
 ln.search.title: অনুসন্ধান
 ln.search.placeholder: মিডিয়া অনুসন্ধান করুন

package/src/i18n/translations/de.yml

@@ -5,6 +5,8 @@ ln.category: Kategorie
 ln.language: Sprache
 ln.languages: Sprachen
 ln.type: Typ
+ln.previous: Zurück
+ln.next: Weiter
 ln.external-link: Externer Link
 ln.details.open: Öffnen
 ln.details.part-of-collection: Teil der Sammlung

package/src/i18n/translations/en.yml

@@ -48,6 +48,18 @@ ln.languages: Languages
 # Used on: https://sk8-ministries.pages.dev/en/media
 ln.type: Type
 
+# Accessibility label for buttons to show the previous items.
+# This is used on the carousel arrow button.
+#
+# English: Previous
+ln.previous: Previous
+
+# Accessibility label for buttons to show the next items.
+# This is used on the carousel arrow button.
+#
+# English: Next
+ln.next: Next
+
 # Accessibility label for an external link.
 # This is only "visible" to a screen-reader.
 #

package/src/i18n/translations/es.yml

@@ -6,6 +6,8 @@ ln.categories: Categorías
 ln.language: Idioma
 ln.languages: Idiomas
 ln.type: Tipo
+ln.previous: Anterior
+ln.next: Siguiente
 ln.external-link: Enlace externo
 ln.search.title: Buscar
 ln.search.placeholder: Buscar medios

package/src/i18n/translations/fi.yml

@@ -6,6 +6,8 @@ ln.categories: Kategoriat
 ln.language: Kieli
 ln.languages: Kielet
 ln.type: Mediatyyppi
+ln.previous: Edellinen
+ln.next: Seuraava
 ln.external-link: Ulkoinen linkki
 ln.search.title: Haku
 ln.search.placeholder: Hae mediaa

package/src/i18n/translations/fr.yml

@@ -6,6 +6,8 @@ ln.categories: Catégories
 ln.language: Langue
 ln.languages: Langues
 ln.type: Type
+ln.previous: Précédent
+ln.next: Suivant
 ln.external-link: Lien externe
 ln.search.title: Recherche
 ln.search.placeholder: Rechercher des médias

package/src/i18n/translations/hi.yml

@@ -6,6 +6,8 @@ ln.categories: श्रेणियाँ
 ln.language: भाषा
 ln.languages: भाषाएँ
 ln.type: प्रकार
+ln.previous: पिछला
+ln.next: अगला
 ln.external-link: बाहरी लिंक
 ln.search.title: खोज
 ln.search.placeholder: मीडिया खोजें

package/src/i18n/translations/pt.yml

@@ -6,6 +6,8 @@ ln.categories: Categorias
 ln.language: Idioma
 ln.languages: Idiomas
 ln.type: Tipo
+ln.previous: Anterior
+ln.next: Seguinte
 ln.external-link: Ligação externa
 ln.search.title: Pesquisa
 ln.search.placeholder: Pesquisar conteúdos

package/src/i18n/translations/ru.yml

@@ -6,6 +6,8 @@ ln.categories: Категории
 ln.language: Язык
 ln.languages: Языки
 ln.type: Тип
+ln.previous: Предыдущий
+ln.next: Следующий
 ln.external-link: Внешняя ссылка
 ln.search.title: Поиск
 ln.search.placeholder: Поиск медиа

package/src/i18n/translations/uk.yml

@@ -6,6 +6,8 @@ ln.categories: Категорії
 ln.language: Мова
 ln.languages: Мови
 ln.type: Тип
+ln.previous: Попередній
+ln.next: Наступний
 ln.external-link: Зовнішнє посилання
 ln.search.title: Пошук
 ln.search.placeholder: Пошук медіа

package/src/i18n/translations/zh.yml

@@ -6,6 +6,8 @@ ln.categories: 分类
 ln.language: 语言
 ln.languages: 语言
 ln.type: 类型
+ln.previous: 上一个
+ln.next: 下一个
 ln.external-link: 外部链接
 ln.search.title: 搜索
 ln.search.placeholder: 搜索媒体…

package/src/i18n/translations.ts

@@ -64,6 +64,8 @@ export type LightNetTranslationKey =
   | "ln.languages"
   | "ln.external-link"
   | "ln.type"
+  | "ln.previous"
+  | "ln.next"
   | "ln.details.open"
   | "ln.details.share"
   | "ln.details.part-of-collection"

package/src/layouts/Page.astro

@@ -1,5 +1,4 @@
 ---
-import { ClientRouter } from "astro:transitions"
 import CustomFooter from "virtual:lightnet/components/CustomFooter"
 import CustomHead from "virtual:lightnet/components/CustomHead"
 import config from "virtual:lightnet/config"
@@ -8,6 +7,7 @@ import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
 import Header from "./components/Header.astro"
 import PreloadReact from "./components/PreloadReact"
+import ViewTransition from "./components/ViewTransition.astro"
 
 interface Props {
   title?: string
@@ -32,10 +32,9 @@ const language = resolveLanguage(currentLocale)
     {config.manifest && <link rel="manifest" href={config.manifest} />}
     <link rel="prefetch" href="/api/search.json" />
     <Favicon />
-    <ClientRouter />
+    <ViewTransition />
   </head>
   <body
-    transition:animate="none"
     class="flex min-h-screen flex-col overflow-y-scroll bg-gray-50 text-gray-900"
   >
     <Header />

package/src/layouts/components/Header.astro

@@ -3,10 +3,7 @@ import PageNavigation from "./PageNavigation.astro"
 import PageTitle from "./PageTitle.astro"
 ---
 
-<header
-  class="fixed top-0 z-50 h-14 w-full bg-white shadow-lg sm:h-20"
-  transition:animate="none"
->
+<header class="fixed top-0 z-50 h-14 w-full bg-white shadow-lg sm:h-20">
   <div class="mx-auto flex h-full max-w-screen-xl justify-between px-4 md:px-8">
     <PageTitle />
     <PageNavigation />

package/src/layouts/components/ViewTransition.astro

@@ -0,0 +1,9 @@
+---
+
+---
+
+<style is:global>
+  @view-transition {
+    navigation: auto;
+  }
+</style>

package/src/pages/api/versions.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro"
+
+import pkg from "../../../package.json" assert { type: "json" }
+
+export const GET: APIRoute = () => {
+  return new Response(JSON.stringify({ lightnet: pkg.version }))
+}

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

@@ -1,10 +1,8 @@
 ---
-import { getMediaItem } from "../../content/get-media-items"
+import AudioPanel from "./components/AudioPanel.astro"
 import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
 import DetailsPage from "./components/DetailsPage.astro"
-import AudioPlayer from "./components/main-details/AudioPlayer.astro"
-import ShareButton from "./components/main-details/ShareButton.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
@@ -14,16 +12,13 @@ export type Props = {
 }
 
 const { mediaId } = Astro.props
-const audioSrc = (await getMediaItem(mediaId)).data.content[0].url
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection mediaId={mediaId}>
-    <AudioPlayer src={audioSrc} className="mt-10 w-full" />
-    <ShareButton className="mt-4 min-w-40" />
-  </MainDetailsSection>
+  <MainDetailsSection thumbnailSize="md" mediaId={mediaId} />
+  <AudioPanel mediaId={mediaId} className="mt-10" />
   <DescriptionSection mediaId={mediaId} />
-  <ContentSection mediaId={mediaId} />
+  <ContentSection mediaId={mediaId} minimumItems={1} />
   <MediaCollectionsSection mediaId={mediaId} />
   <MoreDetailsSection mediaId={mediaId} />
 </DetailsPage>

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

@@ -3,7 +3,6 @@ import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
 import DetailsPage from "./components/DetailsPage.astro"
 import OpenButton from "./components/main-details/OpenButton.astro"
-import ShareButton from "./components/main-details/ShareButton.astro"
 import MainDetailsSection from "./components/MainDetailsSection.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
@@ -18,11 +17,12 @@ const { mediaId, coverStyle, openActionLabel = "ln.details.open" } = Astro.props
 ---
 
 <DetailsPage mediaId={mediaId}>
-  <MainDetailsSection mediaId={mediaId} coverStyle={coverStyle}>
-    <div class="mt-10 flex flex-col justify-center gap-4 sm:justify-start">
-      <OpenButton mediaId={mediaId} openActionLabel={openActionLabel} />
-      <ShareButton />
-    </div>
+  <MainDetailsSection mediaId={mediaId} thumbnailStyle={coverStyle}>
+    <OpenButton
+      className="mt-8"
+      mediaId={mediaId}
+      openActionLabel={openActionLabel}
+    />
   </MainDetailsSection>
   <DescriptionSection mediaId={mediaId} />
   <ContentSection mediaId={mediaId} />

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

@@ -0,0 +1,64 @@
+---
+import { AstroError } from "astro/errors"
+
+import { getMediaItem } from "../../../content/get-media-items"
+import { createContentMetadata } from "../utils/create-content-metadata"
+import AudioPlayer from "./AudioPlayer.astro"
+
+interface Props {
+  mediaId: string
+  className?: string
+}
+
+const { mediaId, className } = Astro.props
+const { t } = Astro.locals.i18n
+
+const item = await getMediaItem(mediaId)
+
+const content = item.data.content
+  .map((c) => createContentMetadata(c))
+  .filter((c) => c.extension === "mp3")
+
+if (!content.length) {
+  throw new AstroError(
+    `Missing mp3 content for ${mediaId}`,
+    `Add at least one mp3 file to the content array of /src/media/${mediaId}.json`,
+  )
+}
+---
+
+<ol
+  class="mx-auto mt-10 flex max-w-screen-md flex-col gap-10 px-4 md:px-8"
+  class:list={[className]}
+  id="audio-panel"
+>
+  {
+    content.map((c) => (
+      <li>
+        {content.length > 1 && <div class="mb-3 font-bold">{t(c.label)}</div>}
+        <AudioPlayer className="w-full" src={c.url} />
+      </li>
+    ))
+  }
+</ol>
+<script>
+  const audioPanel = document.getElementById("audio-panel")
+  const audios = Array.from(audioPanel?.querySelectorAll("audio") ?? [])
+
+  audios.forEach((audio, index) => {
+    audio.addEventListener("play", () => {
+      audios.forEach((otherAudio) => {
+        if (otherAudio !== audio) {
+          otherAudio.pause()
+        }
+      })
+    })
+
+    audio.addEventListener("ended", () => {
+      const nextAudio = audios[index + 1]
+      if (nextAudio) {
+        nextAudio.play()
+      }
+    })
+  })
+</script>