lightnet 2.15.2

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

@@ -0,0 +1,44 @@
+---
+import Authors from "./components/Authors.astro"
+import Content from "./components/Content.astro"
+import Cover from "./components/Cover.astro"
+import Description from "./components/Description.astro"
+import Details from "./components/details/Details.astro"
+import MediaCollections from "./components/MediaCollections.astro"
+import OpenButton from "./components/OpenButton.astro"
+import ShareButton from "./components/ShareButton.astro"
+import Title from "./components/Title.astro"
+
+export type Props = {
+  slug: string
+  coverStyle?: "default" | "book"
+  openActionLabel?: string
+}
+
+const {
+  slug,
+  coverStyle = "default",
+  openActionLabel = "ln.details.open",
+} = Astro.props
+---
+
+<div
+  class="mx-auto mt-10 flex max-w-screen-md flex-col items-center gap-8 px-4 sm:mt-20 sm:flex-row sm:items-start sm:gap-14 md:px-8"
+>
+  <Cover slug={slug} style={coverStyle} />
+  <div class="flex flex-col items-center sm:items-start">
+    <Title className="text-center sm:text-start" slug={slug} />
+    <Authors className="text-center sm:text-start" slug={slug} />
+
+    <div
+      class="mt-8 flex flex-col justify-center gap-4 sm:justify-start md:mt-14"
+    >
+      <OpenButton slug={slug} openActionLabel={openActionLabel} />
+      <ShareButton />
+    </div>
+  </div>
+</div>
+<Description slug={slug} />
+<Content slug={slug} />
+<MediaCollections slug={slug} />
+<Details slug={slug} />

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

@@ -0,0 +1,53 @@
+---
+import type { GetStaticPaths } from "astro"
+import { AstroError } from "astro/errors"
+import config from "virtual:lightnet/config"
+
+import { getMediaItem, getMediaItems } from "../../content/get-media-items"
+import { getMediaType } from "../../content/get-media-types"
+import { resolveLocales } from "../../i18n/resolve-locales"
+import Page from "../../layouts/Page.astro"
+import { markdownToText } from "../../utils/markdown"
+import DefaultDetails from "./DefaultDetails.astro"
+import VideoDetails from "./VideoDetails.astro"
+
+export const getStaticPaths = (async () => {
+  const mediaItems = await getMediaItems()
+  return resolveLocales(config).flatMap((locale) =>
+    mediaItems.map(({ id: slug }) => ({ params: { slug, locale } })),
+  )
+}) satisfies GetStaticPaths
+
+const { slug } = Astro.params
+const mediaItem = (await getMediaItem(Astro.params.slug)).data
+
+const {
+  data: { detailsPage },
+} = await getMediaType(mediaItem.type.id)
+
+let CustomDetails
+const layout = detailsPage?.layout ?? "default"
+if (detailsPage?.layout === "custom") {
+  const d = import.meta.glob("/src/details-pages/*.astro")
+  const customDetailsImport = d[
+    `/src/details-pages/${detailsPage.customComponent}`
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ] as () => Promise<any>
+  if (!customDetailsImport) {
+    throw new AstroError(
+      `Unknown details page ${detailsPage.customComponent}`,
+      "Make sure to add your details component within /src/details-pages/",
+    )
+  }
+  CustomDetails = (await customDetailsImport()).default
+}
+---
+
+<Page
+  title={mediaItem.title}
+  description={markdownToText(mediaItem.description)}
+>
+  {layout === "default" && <DefaultDetails slug={slug} {...detailsPage} />}
+  {layout === "video" && <VideoDetails slug={slug} {...detailsPage} />}
+  {CustomDetails && <CustomDetails slug={slug} {...detailsPage} />}
+</Page>

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

@@ -0,0 +1,43 @@
+---
+import { getMediaItem } from "../../content/get-media-items"
+import Authors from "./components/Authors.astro"
+import Content from "./components/Content.astro"
+import Description from "./components/Description.astro"
+import Details from "./components/details/Details.astro"
+import MediaCollections from "./components/MediaCollections.astro"
+import ShareButton from "./components/ShareButton.astro"
+import Title from "./components/Title.astro"
+import VideoPlayer from "./components/VideoPlayer.astro"
+
+export type Props = {
+  slug: string
+}
+
+const { slug } = Astro.props
+
+const item = await getMediaItem(slug)
+---
+
+<div class="mx-auto max-w-screen-md md:px-8">
+  <div
+    class="aspect-video w-full overflow-hidden bg-black md:mt-8 md:rounded-lg"
+  >
+    <VideoPlayer
+      url={item.data.content[0].url!}
+      title={item.data.title}
+      image={item.data.image}
+    />
+  </div>
+</div>
+<div
+  class="mx-auto mt-12 flex max-w-screen-md flex-col items-start px-4 md:mt-14 md:px-8"
+>
+  <Title slug={slug} />
+  <Authors slug={slug} />
+  <ShareButton className="mt-8" />
+</div>
+
+<Description slug={slug} />
+<Content slug={slug} />
+<MediaCollections slug={slug} />
+<Details slug={slug} />

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

@@ -0,0 +1,19 @@
+---
+import { getMediaItem } from "../../../content/get-media-items"
+
+interface Props {
+  slug: string
+  className?: string
+}
+
+const item = await getMediaItem(Astro.props.slug)
+const authors = item.data.authors?.join(", ")
+---
+
+{
+  authors && (
+    <p class="mt-2 text-xl sm:text-2xl" class:list={Astro.props.className}>
+      {authors}
+    </p>
+  )
+}

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

@@ -0,0 +1,73 @@
+---
+import Icon from "../../../components/Icon"
+import { getMediaItem } from "../../../content/get-media-items"
+import {
+  createContentMetadata,
+  type UrlType,
+} from "../utils/create-content-metadata"
+
+interface Props {
+  slug: string
+}
+
+const item = await getMediaItem(Astro.props.slug)
+
+if (item.data.content.length < 2) {
+  return
+}
+
+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",
+} as const
+
+const { t, direction } = Astro.locals.i18n
+---
+
+<ol
+  class="mx-auto mt-20 max-w-screen-md overflow-hidden bg-gray-200 md:mt-24 md:rounded-xl"
+>
+  {
+    content.map(
+      ({ extension, name, 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>
+
+            <div class="ms-4 line-clamp-1 shrink grow overflow-hidden sm:ms-8">
+              {name}
+            </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>
+      ),
+    )
+  }
+</ol>

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

@@ -0,0 +1,35 @@
+---
+import { Image } from "astro:assets"
+
+import { getMediaItem } from "../../../content/get-media-items"
+
+interface Props {
+  slug: string
+  style?: "default" | "book"
+}
+const { slug, style = "default" } = Astro.props
+
+const item = await getMediaItem(slug)
+const image = item.data.image
+const isPortraitImage = image.height > image.width
+---
+
+<div
+  class="relative shrink-0 overflow-hidden shadow-sm"
+  class:list={style === "book" ? "rounded-sm" : "rounded-md"}
+>
+  <Image
+    class:list={isPortraitImage ? "h-52 w-auto sm:h-72" : "h-auto w-52 sm:w-72"}
+    alt=""
+    widths={[208, 288, 576, 864]}
+    sizes="(max-width: 640px) 13rem, 18rem"
+    src={image}
+    quality="high"
+    loading="eager"
+  />
+  {
+    style === "book" && (
+      <span class="absolute start-[3px] top-0 h-full w-[4px] bg-gradient-to-r from-gray-500/20 to-transparent" />
+    )
+  }
+</div>

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

@@ -0,0 +1,26 @@
+---
+import { getMediaItem } from "../../../content/get-media-items"
+import { resolveLanguage } from "../../../i18n/resolve-language"
+import { markdownToHtml } from "../../../utils/markdown"
+
+interface Props {
+  slug: string
+}
+const item = await getMediaItem(Astro.props.slug)
+
+const { description, language } = item.data
+
+const { direction, code: lang } = resolveLanguage(language)
+---
+
+{
+  description && (
+    <div
+      dir={direction}
+      class="prose prose-gray mx-auto mt-10 max-w-screen-md px-4 sm:mt-14 md:px-8"
+      set:html={await markdownToHtml(description)}
+      lang={lang}
+      id="description"
+    />
+  )
+}

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

@@ -0,0 +1,39 @@
+---
+import { AstroError } from "astro/errors"
+import { getEntry } from "astro:content"
+
+import MediaItemList from "../../../components/MediaItemList.astro"
+import { getMediaItems } from "../../../content/get-media-items"
+import { queryMediaItems } from "../../../content/query-media-items"
+
+interface Props {
+  collectionId: string
+  disableItem: string
+}
+const { collectionId, disableItem } = Astro.props
+
+const collection = await getEntry("media-collections", collectionId)
+if (!collection) {
+  throw new AstroError(`Unknown media collection id ${collection}.`)
+}
+const items = (
+  await queryMediaItems(getMediaItems(), {
+    where: { collection: collection.id },
+  })
+).map((item) => ({ ...item, disabled: item.id === disableItem }))
+
+if (items.length < 2) {
+  return
+}
+const t = Astro.locals.i18n.t
+---
+
+<section class="mx-auto mt-16 max-w-screen-md px-4 md:mt-20 md:px-8">
+  <h2 class="mb-3 text-xs font-bold uppercase text-gray-600">
+    {t("ln.details.part-of-collection")}
+  </h2>
+  <h3 class="mb-2 text-lg font-bold text-gray-700">
+    {t(collection.data.label, { allowFixedStrings: true })}
+  </h3>
+  <MediaItemList items={items} />
+</section>

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

@@ -0,0 +1,21 @@
+---
+import { getMediaItem } from "../../../content/get-media-items"
+import MediaCollection from "./MediaCollection.astro"
+
+interface Props {
+  slug: string
+}
+
+const { slug } = Astro.props
+const item = await getMediaItem(slug)
+
+const collections = item.data.collections?.map(
+  ({ collection }) => collection.id,
+)
+---
+
+{
+  collections?.map((id) => (
+    <MediaCollection collectionId={id} disableItem={slug} />
+  ))
+}

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

@@ -0,0 +1,34 @@
+---
+import Icon from "../../../components/Icon"
+import { getMediaItem } from "../../../content/get-media-items"
+import { createContentMetadata } from "../utils/create-content-metadata"
+
+interface Props {
+  slug: string
+  openActionLabel: string
+}
+const { slug, openActionLabel } = Astro.props
+const item = await getMediaItem(slug)
+const content = createContentMetadata(item.data.content[0])
+---
+
+<a
+  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
+  href={content.url}
+  target={content.target}
+  hreflang={item.data.language}
+>
+  {
+    content.canBeOpened
+      ? Astro.locals.i18n.t(openActionLabel)
+      : Astro.locals.i18n.t("ln.details.download")
+  }
+  {
+    content.isExternal && (
+      <Icon
+        ariaLabel={Astro.locals.i18n.t("ln.common.a11y.external-link")}
+        className={`mdi--external-link shrink-0`}
+      />
+    )
+  }
+</a>

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

@@ -0,0 +1,8 @@
+---
+interface Props {
+  text: string
+}
+const { text } = Astro.props
+---
+
+<h2 class="mb-2 text-xs font-bold uppercase text-gray-600">{text}</h2>

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

@@ -0,0 +1,58 @@
+---
+import Icon from "../../../components/Icon"
+
+interface Props {
+  className?: string
+}
+---
+
+<button
+  class="flex items-center justify-center gap-2 rounded-2xl bg-gray-200 px-4 py-2 text-xs font-bold uppercase text-gray-600 shadow-sm hover:bg-gray-300"
+  class:list={[Astro.props.className]}
+  id="share-btn"
+  ><Icon className="mdi--share-variant-outline" ariaLabel="" />
+  {Astro.locals.i18n.t("ln.details.share")}</button
+>
+<div
+  id="share-success"
+  class="dy-toast pointer-events-none opacity-0 transition-opacity duration-300"
+>
+  <div class="dy-alert dy-alert-success">
+    <span>{Astro.locals.i18n.t("ln.share.url-copied-to-clipboard")}</span>
+  </div>
+</div>
+<script>
+  document.addEventListener("astro:after-swap", () => {
+    initShareButton()
+  })
+  initShareButton()
+
+  function initShareButton() {
+    const btn = document.querySelector("#share-btn")
+    if (!btn) {
+      return
+    }
+    btn?.addEventListener("click", () => {
+      if (navigator.share) {
+        navigator
+          .share({
+            url: window.location.href,
+          })
+          .catch((e) => console.debug("Could not share", e))
+      } else {
+        navigator.clipboard
+          .writeText(window.location.href)
+          .then(() => {
+            const toast = document.querySelector<HTMLElement>("#share-success")!
+            toast.style.opacity = "100%"
+            setTimeout(() => {
+              toast.style.opacity = "0%"
+            }, 3000)
+          })
+          .catch((error) =>
+            console.log("Error copying URL to clipboard:", error),
+          )
+      }
+    })
+  }
+</script>

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

@@ -0,0 +1,18 @@
+---
+import { getMediaItem } from "../../../content/get-media-items"
+
+interface Props {
+  slug: string
+  className?: string
+}
+
+const item = await getMediaItem(Astro.props.slug)
+---
+
+<h1
+  class="text-4xl font-bold sm:text-5xl"
+  lang={item.data.language}
+  class:list={Astro.props.className}
+>
+  {item.data.title}
+</h1>

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

@@ -0,0 +1,78 @@
+---
+import type { ImageMetadata } from "astro"
+import { getImage } from "astro:assets"
+
+interface Props {
+  url: string
+  title: string
+  image: ImageMetadata
+}
+
+const { url, title, image: imageMetadata } = Astro.props
+
+const { host, id, image } = await parseUrl(url)
+
+async function parseUrl(urlToParse: string): Promise<{
+  host: "youtube" | "vimeo" | "mp4"
+  id: string | null
+  image?: string
+}> {
+  const url = new URL(urlToParse)
+  // https://www.youtube.com/embed/ABC123abc
+  // https://www.youtube.com/watch?v=ABC123abc
+  if (url.hostname === "www.youtube.com") {
+    if (url.pathname.startsWith("/embed/")) {
+      return { host: "youtube", id: url.pathname.slice(7) }
+    }
+    return { host: "youtube", id: url.searchParams.get("v") }
+  }
+  // https://youtu.be/ABC123abc
+  if (url.hostname === "youtu.be") {
+    return { host: "youtube", id: url.pathname.slice(1) }
+  }
+  // https://www.youtube-nocookie.com/embed/ABC123abc
+  if (url.hostname === "www.youtube-nocookie.com") {
+    return { host: "youtube", id: url.pathname.slice(7) }
+  }
+  // https://vimeo.com/12345678
+  if (url.hostname === "vimeo.com") {
+    return { host: "vimeo", id: url.pathname.slice(1) }
+  }
+  // https://player.vimeo.com/video/12345678
+  if (url.hostname === "player.vimeo.com") {
+    return { host: "vimeo", id: url.pathname.slice(7) }
+  }
+
+  // https://domain.com/video.mp4
+  if (url.pathname.endsWith(".mp4")) {
+    const image = (await getImage({ src: imageMetadata, format: "webp" })).src
+    return { host: "mp4", id: url.toString(), image }
+  }
+  throw Error(`Unsupported video url: ${urlToParse}`)
+}
+---
+
+{
+  host === "youtube" ? (
+    <iframe
+      class="h-full w-full"
+      src={`https://www.youtube-nocookie.com/embed/${id}`}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+    />
+  ) : host === "vimeo" ? (
+    <iframe
+      class="h-full w-full"
+      src={`https://player.vimeo.com/video/${id}`}
+      allow="autoplay; fullscreen; picture-in-picture"
+      allowfullscreen
+    />
+  ) : host === "mp4" ? (
+    <video class="h-full w-full" controls preload="auto" poster={image}>
+      <source src={id} type="video/mp4" />
+      Your browser does not support the video tag.
+    </video>
+  ) : null
+}

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

@@ -0,0 +1,31 @@
+---
+import { getMediaItem } from "../../../../content/get-media-items"
+import { resolveCategoryLabel } from "../../../../content/resolve-category-label"
+import { searchPagePath } from "../../../../utils/paths"
+import Label from "./Label.astro"
+
+interface Props {
+  slug: string
+}
+
+const item = await getMediaItem(Astro.props.slug)
+
+const categories = item.data.categories?.map(({ id }) => id)
+---
+
+{
+  !!categories?.length && (
+    <div>
+      <Label>{Astro.locals.i18n.t("ln.common.categories")}</Label>
+      <ul class="flex flex-wrap gap-2">
+        {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, { category })}>
+              {resolveCategoryLabel(Astro.locals.i18n.t, category)}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

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

@@ -0,0 +1,17 @@
+---
+import Categories from "./Categories.astro"
+import Languages from "./Languages.astro"
+
+interface Props {
+  slug: string
+}
+
+const { slug } = Astro.props
+---
+
+<div class="mx-auto mt-20 max-w-screen-md px-4 sm:mt-24 md:px-8" id="details">
+  <div class="flex flex-col gap-4">
+    <Languages slug={slug} />
+    <Categories slug={slug} />
+  </div>
+</div>

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

@@ -0,0 +1,3 @@
+<div class="mb-2 font-bold text-gray-700">
+  <slot />
+</div>

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

@@ -0,0 +1,46 @@
+---
+import {
+  getMediaItem,
+  getMediaItems,
+} from "../../../../content/get-media-items"
+import { resolveTranslatedLanguage } from "../../../../i18n/resolve-language"
+import { detailsPagePath } from "../../../../utils/paths"
+import Label from "./Label.astro"
+
+interface Props {
+  slug: string
+}
+
+const item = await getMediaItem(Astro.props.slug)
+
+const { slug } = Astro.props
+const translations = (await getMediaItems())
+  .filter(
+    (entry) => entry.data.commonId === item.data.commonId && entry.id !== slug,
+  )
+  .sort((a, b) => a.data.language.localeCompare(b.data.language))
+
+const label = translations.length ? "ln.common.languages" : "ln.common.language"
+const { t } = Astro.locals.i18n
+---
+
+<div>
+  <Label>{t(label)}</Label>
+  <ul class="flex flex-wrap gap-2">
+    <li class="py-1 pe-2 text-gray-800">
+      {resolveTranslatedLanguage(item.data.language, t).name}
+    </li>
+    {
+      translations.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)}
+            hreflang={translation.data.language}
+          >
+            {resolveTranslatedLanguage(translation.data.language, t).name}
+          </a>
+        </li>
+      ))
+    }
+  </ul>
+</div>