lightnet 2.18.2 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # lightnet
 
+## 3.0.1
+
+### Patch Changes
+
+- [#236](https://github.com/LightNetDev/LightNet/pull/236) [`91776f2`](https://github.com/LightNetDev/LightNet/commit/91776f2998a5a98568b6d96815eeed44c03e0df5) Thanks [@smn-cds](https://github.com/smn-cds)! - Fix details components export.
+
+## 3.0.0
+
+### Major Changes
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Renames custom details pages prop `slug` to `mediaId`.
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Streamline handling of components. Make sure all components including a section are suffixed with `Section`.
+
+  - Removes `Gallery` export
+  - Adds `MediaGallerySection` that includes the section component
+  - Renames `Hero` to `HeroSection`
+  - Renames `CategoriesOverview` to `CategoriesSection`
+  - Renames `MediaItemList` to `MediaList`
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Improve Section
+
+  - rename maxWidth values: `full` => `wide`, `prose` => `narrow`
+  - add marginTop settings: `none`, `sm`, `lg`
+
+### Minor Changes
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Exports experimental details page components
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Accept undefined media items on Gallery and List component.
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Add VideoPlayer component
+
+- [#234](https://github.com/LightNetDev/LightNet/pull/234) [`1cb0dc0`](https://github.com/LightNetDev/LightNet/commit/1cb0dc0ef2d7a3ecb5d2a37a36f2f2e8fa97a756) Thanks [@smn-cds](https://github.com/smn-cds)! - Add support for custom head components.
+
 ## 2.18.2
 
 ### Patch Changes

package/__e2e__/fixtures/basics/package.json

@@ -6,9 +6,9 @@
   "dependencies": {
     "@astrojs/react": "^4.2.1",
     "@astrojs/tailwind": "^6.0.0",
-    "@lightnet/decap-admin": "^2.4.2",
+    "@lightnet/decap-admin": "^3.0.0",
     "astro": "^5.5.3",
-    "lightnet": "^2.18.0",
+    "lightnet": "^3.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sharp": "^0.33.5",

package/__e2e__/fixtures/basics/src/pages/[locale]/index.astro

@@ -1,14 +1,16 @@
 ---
 export { getLocalePaths as getStaticPaths } from "lightnet/i18n"
 
-import { Gallery, Page, Section } from "lightnet/components"
+import { MediaGallerySection, Page } from "lightnet/components"
 import { getMediaItems } from "lightnet/content"
 
-const allItems = await getMediaItems({})
+const allItems = await getMediaItems()
 ---
 
 <Page>
-  <Section title={Astro.locals.i18n.t("home.all-items")}>
-    <Gallery items={allItems} layout="book" />
-  </Section>
+  <MediaGallerySection
+    title={Astro.locals.i18n.t("home.all-items")}
+    items={allItems}
+    layout="book"
+  />
 </Page>

package/exports/components.ts

@@ -1,9 +1,10 @@
-export { default as CategoriesOverview } from "../src/components/CategoriesOverview.astro"
-export { default as Gallery } from "../src/components/Gallery.astro"
-export { default as Hero } from "../src/components/Hero.astro"
+export { default as CategoriesSection } from "../src/components/CategoriesSection.astro"
+export { default as HeroSection } from "../src/components/HeroSection.astro"
 export { default as HighlightSection } from "../src/components/HighlightSection.astro"
 export { default as Icon } from "../src/components/Icon"
-export { default as MediaItemList } from "../src/components/MediaItemList.astro"
+export { default as MediaGallerySection } from "../src/components/MediaGallerySection.astro"
+export { default as MediaList } from "../src/components/MediaList.astro"
 export { default as Section } from "../src/components/Section.astro"
+export { default as VideoPlayer } from "../src/components/VideoPlayer.astro"
 export { default as MarkdownPage } from "../src/layouts/MarkdownPage.astro"
 export { default as Page } from "../src/layouts/Page.astro"

package/exports/details-page.ts

@@ -1 +1,12 @@
-export { default as MediaCollections } from "../src/pages/details-page/components/MediaCollections.astro"
+/**
+ * Details page components are still experimental.
+ * We might break the API without updating the major version.
+ */
+export { default as ContentSection } from "../src/pages/details-page/components/ContentSection.astro"
+export { default as DescriptionSection } from "../src/pages/details-page/components/DescriptionSection.astro"
+export { default as OpenButton } from "../src/pages/details-page/components/main-details/OpenButton.astro"
+export { default as ShareButton } from "../src/pages/details-page/components/main-details/ShareButton.astro"
+export { default as MainDetailsSection } from "../src/pages/details-page/components/MainDetailsSection.astro"
+export { default as MediaCollectionsSection } from "../src/pages/details-page/components/MediaCollectionsSection.astro"
+export { default as MoreDetailsSection } from "../src/pages/details-page/components/MoreDetailsSection.astro"
+export { default as VideoDetailsSection } from "../src/pages/details-page/components/VideoDetailsSection.astro"

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "2.18.2",
+  "version": "3.0.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -20,7 +20,7 @@
     "./content": "./exports/content.ts",
     "./utils": "./exports/utils.ts",
     "./components": "./exports/components.ts",
-    "./details-page": "./exports/details-page.ts",
+    "./experimental-details-page": "./exports/details-page.ts",
     "./i18n": "./exports/i18n.ts",
     "./locals": "./src/i18n/locals.ts",
     "./tailwind.config.ts": "./tailwind.config.ts",

package/src/astro-integration/config.ts

@@ -179,6 +179,13 @@ export const configSchema = z.object({
    * - Ensure that only trusted and necessary domains are included in this list.
    */
   internalDomains: z.array(z.string()).default([]),
+  /**
+   * Path to an Astro component to be added to the HTML head element of all pages.
+   * For example use this if you need to add an analytics script to every page.
+   *
+   * @example "./src/components/MyHeadTag.astro"
+   */
+  headComponent: z.string().optional(),
   /**
    * Configure search page behavior
    */

package/src/astro-integration/integration.ts

@@ -51,7 +51,7 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         })
 
         injectRoute({
-          pattern: "/[locale]/media/[slug]",
+          pattern: "/[locale]/media/[mediaId]",
           entrypoint: "lightnet/pages/DetailsPage.astro",
           prerender: true,
         })

package/src/astro-integration/virtual.d.ts

@@ -12,3 +12,8 @@ declare module "virtual:lightnet/project-context" {
   const context: import("./project-context").ProjectContext
   export default context
 }
+
+declare module "virtual:lightnet/components/CustomHeadComponent" {
+  const CustomHeadComponent: ((props: Record<string, any>) => any) | undefined
+  export default CustomHeadComponent
+}

package/src/astro-integration/vite-plugin-lightnet-config.ts

@@ -8,8 +8,14 @@ import { type LightnetConfig } from "./config"
 const CONFIG = "virtual:lightnet/config"
 const LOGO = "virtual:lightnet/logo"
 const PROJECT_CONTEXT = "virtual:lightnet/project-context"
+const CUSTOM_HEAD_COMPONENT = "virtual:lightnet/components/CustomHeadComponent"
 
-const VIRTUAL_MODULES = [CONFIG, LOGO, PROJECT_CONTEXT] as const
+const VIRTUAL_MODULES = [
+  CONFIG,
+  LOGO,
+  PROJECT_CONTEXT,
+  CUSTOM_HEAD_COMPONENT,
+] as const
 
 export function vitePluginLightnetConfig(
   config: LightnetConfig,
@@ -46,6 +52,10 @@ export function vitePluginLightnetConfig(
             : "export default undefined;"
         case PROJECT_CONTEXT:
           return `export default ${JSON.stringify({ root, srcDir, site })}`
+        case CUSTOM_HEAD_COMPONENT:
+          return config.headComponent
+            ? `export { default } from ${resolveFilePath(config.headComponent)};`
+            : "export default undefined;"
       }
     },
   }

package/src/components/{Gallery.astro → MediaGallery.astro}

@@ -6,7 +6,7 @@ import { getMediaTypes } from "../content/get-media-types"
 import { detailsPagePath } from "../utils/paths"
 import Icon from "./Icon"
 
-type GalleryItem = {
+type MediaItem = {
   id: string
   data: {
     title: string
@@ -25,11 +25,14 @@ const types = Object.fromEntries(
 )
 
 interface Props {
-  items: GalleryItem[]
+  items: (MediaItem | undefined)[]
   layout: "book" | "video" | "portrait" | "landscape"
 }
 
-const { items, layout } = Astro.props
+const { items: itemsInput, layout } = Astro.props
+// We allow users to pass undefined values because
+// this is in the return type of getEntry
+const items = itemsInput.filter((item) => !!item)
 ---
 
 {

package/src/components/MediaGallerySection.astro

@@ -0,0 +1,27 @@
+---
+import type { ImageMetadata } from "astro"
+
+import MediaGallery from "./MediaGallery.astro"
+import Section from "./Section.astro"
+
+type MediaItem = {
+  id: string
+  data: {
+    title: string
+    type: { id: string }
+    image: ImageMetadata
+  }
+}
+
+interface Props {
+  title?: string
+  items: (MediaItem | undefined)[]
+  layout: "book" | "video" | "portrait" | "landscape"
+}
+
+const { title, items, layout } = Astro.props
+---
+
+<Section title={title}>
+  <MediaGallery items={items} layout={layout} />
+</Section>

package/src/components/{MediaItemList.astro → MediaList.astro}

@@ -1,16 +1,30 @@
 ---
+import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
 
-import type { MediaItemEntry } from "../content/content-schema-internal"
 import { getMediaTypes } from "../content/get-media-types"
 import { detailsPagePath } from "../utils/paths"
 import Icon from "./Icon"
 
+type MediaItem = {
+  id: string
+  disabled?: boolean
+  data: {
+    title: string
+    language: string
+    authors?: string[]
+    type: { id: string }
+    image: ImageMetadata
+  }
+}
+
 interface Props {
-  items: (MediaItemEntry & { disabled?: boolean })[]
+  items: (MediaItem | undefined)[]
 }
 
-const { items } = Astro.props
+// We allow users to pass undefined values because
+// this is in the return type of getEntry
+const items = Astro.props.items.filter((item) => !!item)
 
 const { t, direction } = Astro.locals.i18n
 
@@ -38,7 +52,7 @@ const mediaTypes = Object.fromEntries(
                   id: item.id,
                 })
           }
-          class="group flex overflow-hidden py-4 transition-colors ease-in-out md:rounded-sm md:py-8 md:hover:bg-gray-100"
+          class="group flex overflow-hidden py-4 transition-colors ease-in-out md:rounded-sm md:py-6 md:hover:bg-gray-100"
           class:list={
             item.disabled ? "pointer-events-none cursor-default opacity-50" : ""
           }

package/src/components/Section.astro

@@ -6,15 +6,21 @@ interface Props {
    */
   id?: string
   /**
-   * Maximum width of the section container.
+   * Maximum width of the section container. This limits how wide the section grows
+   * on bigger screens. After reaching this width the section will be centered horizontally.
    *
-   * - "full" takes the full available width of the LightNet page. This is not equal to the screen width.
-   *    For example the full width typically is used on the homepage.
-   * - "prose" width ensures text is well readable. This is the width used on the details page.
+   * - "wide" (1280 px) is the maximum homepage width.
+   * - "narrow" (768 px) is the maximum details page width. Optimized for good text readability.
    *
-   * @default "full"
+   * @default "wide"
    */
-  maxWidth?: "full" | "prose"
+  maxWidth?: "wide" | "narrow"
+  /**
+   * Gap to the component above.
+   *
+   * @default "lg"
+   */
+  marginTop?: "sm" | "lg" | "none"
   /**
    * Title on top of the section.
    */
@@ -25,17 +31,29 @@ interface Props {
   className?: string
 }
 
-const { id, maxWidth = "full", title, className } = Astro.props
+const {
+  id,
+  maxWidth = "wide",
+  marginTop = "lg",
+  title,
+  className,
+} = Astro.props
 
 const maxWidths = {
-  full: "max-w-screen-xl",
-  prose: "max-w-screen-md",
+  wide: "max-w-screen-xl",
+  narrow: "max-w-screen-md",
+}
+
+const marginTopValues = {
+  none: "",
+  sm: "mt-16 md:mt-20",
+  lg: "mt-24 md:mt-28",
 }
 ---
 
 <section
-  class="mx-auto mt-24 px-4 md:mt-28 md:px-8"
-  class:list={[maxWidths[maxWidth], className]}
+  class="mx-auto px-4 md:px-8"
+  class:list={[maxWidths[maxWidth], marginTopValues[marginTop], className]}
   id={id}
 >
   {

package/src/{pages/details-page/components → components}/VideoPlayer.astro

@@ -3,9 +3,18 @@ import type { ImageMetadata } from "astro"
 import { getImage } from "astro:assets"
 
 interface Props {
+  /**
+   * Url of the video. This can be YouTube, vimeo, or a mp4 file.
+   */
   url: string
-  title: string
-  image: ImageMetadata
+  /**
+   * Title attribute of the video. Used for screen readers.
+   */
+  title?: string
+  /**
+   * Poster image to use for the mp4 video player.
+   */
+  image?: ImageMetadata
 }
 
 const { url, title, image: imageMetadata } = Astro.props
@@ -45,34 +54,38 @@ async function parseUrl(urlToParse: string): Promise<{
 
   // https://domain.com/video.mp4
   if (url.pathname.endsWith(".mp4")) {
-    const image = (await getImage({ src: imageMetadata, format: "webp" })).src
+    const image =
+      imageMetadata &&
+      (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
-}
+<div class="aspect-video w-full overflow-hidden bg-black md:rounded-lg">
+  {
+    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"
+        title={title}
+        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" />
+      </video>
+    ) : null
+  }
+</div>

package/src/layouts/Page.astro

@@ -1,5 +1,6 @@
 ---
 import { ClientRouter } from "astro:transitions"
+import CustomHeadComponent from "virtual:lightnet/components/CustomHeadComponent"
 import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
@@ -25,6 +26,7 @@ const language = resolveLanguage(currentLocale)
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    {CustomHeadComponent && <CustomHeadComponent />}
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}
     {config.manifest && <link rel="manifest" href={config.manifest} />}

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

@@ -0,0 +1,26 @@
+---
+import ContentSection from "./components/ContentSection.astro"
+import DescriptionSection from "./components/DescriptionSection.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"
+
+export type Props = {
+  mediaId: string
+  coverStyle?: "default" | "book"
+  openActionLabel?: string
+}
+
+const { mediaId, coverStyle, openActionLabel = "ln.details.open" } = Astro.props
+---
+
+<MainDetailsSection mediaId={mediaId} coverStyle={coverStyle}>
+  <OpenButton mediaId={mediaId} openActionLabel={openActionLabel} />
+  <ShareButton />
+</MainDetailsSection>
+<DescriptionSection mediaId={mediaId} />
+<ContentSection mediaId={mediaId} />
+<MediaCollectionsSection mediaId={mediaId} />
+<MoreDetailsSection mediaId={mediaId} />

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

@@ -8,18 +8,18 @@ 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"
+import DefaultDetailsPage from "./DefaultDetailsPage.astro"
+import VideoDetailsPage from "./VideoDetailsPage.astro"
 
 export const getStaticPaths = (async () => {
   const mediaItems = await getMediaItems()
   return resolveLocales(config).flatMap((locale) =>
-    mediaItems.map(({ id: slug }) => ({ params: { slug, locale } })),
+    mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
   )
 }) satisfies GetStaticPaths
 
-const { slug } = Astro.params
-const mediaItem = (await getMediaItem(Astro.params.slug)).data
+const { mediaId } = Astro.params
+const mediaItem = (await getMediaItem(Astro.params.mediaId)).data
 
 const {
   data: { detailsPage },
@@ -31,7 +31,6 @@ 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(
@@ -47,7 +46,15 @@ if (detailsPage?.layout === "custom") {
   title={mediaItem.title}
   description={markdownToText(mediaItem.description)}
 >
-  {layout === "default" && <DefaultDetails slug={slug} {...detailsPage} />}
-  {layout === "video" && <VideoDetails slug={slug} {...detailsPage} />}
-  {CustomDetails && <CustomDetails slug={slug} {...detailsPage} />}
+  {
+    layout === "default" && (
+      <DefaultDetailsPage mediaId={mediaId} {...detailsPage} />
+    )
+  }
+  {
+    layout === "video" && (
+      <VideoDetailsPage mediaId={mediaId} {...detailsPage} />
+    )
+  }
+  {CustomDetails && <CustomDetails mediaId={mediaId} {...detailsPage} />}
 </Page>

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

@@ -0,0 +1,19 @@
+---
+import ContentSection from "./components/ContentSection.astro"
+import DescriptionSection from "./components/DescriptionSection.astro"
+import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
+import MoreDetailsSection from "./components/MoreDetailsSection.astro"
+import VideoDetailsSection from "./components/VideoDetailsSection.astro"
+
+export type Props = {
+  mediaId: string
+}
+
+const { mediaId } = Astro.props
+---
+
+<VideoDetailsSection mediaId={mediaId} />
+<DescriptionSection mediaId={mediaId} />
+<ContentSection mediaId={mediaId} />
+<MediaCollectionsSection mediaId={mediaId} />
+<MoreDetailsSection mediaId={mediaId} />

package/src/pages/details-page/components/{Content.astro → ContentSection.astro}

@@ -7,10 +7,10 @@ import {
 } from "../utils/create-content-metadata"
 
 interface Props {
-  slug: string
+  mediaId: string
 }
 
-const item = await getMediaItem(Astro.props.slug)
+const item = await getMediaItem(Astro.props.mediaId)
 
 if (item.data.content.length < 2) {
   return
@@ -31,7 +31,7 @@ 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"
+  class="mx-auto mt-16 max-w-screen-md overflow-hidden bg-gray-200 md:mt-20 md:rounded-xl"
 >
   {
     content.map(

package/src/pages/details-page/components/{Description.astro → DescriptionSection.astro}

@@ -4,9 +4,9 @@ import { resolveLanguage } from "../../../i18n/resolve-language"
 import { markdownToHtml } from "../../../utils/markdown"
 
 interface Props {
-  slug: string
+  mediaId: string
 }
-const item = await getMediaItem(Astro.props.slug)
+const item = await getMediaItem(Astro.props.mediaId)
 
 const { description, language } = item.data
 
@@ -17,7 +17,7 @@ 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"
+      class="prose prose-gray mx-auto mt-16 max-w-screen-md px-4 md:mt-20 md:px-8"
       set:html={await markdownToHtml(description)}
       lang={lang}
       id="description"

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

@@ -0,0 +1,26 @@
+---
+import Authors from "./main-details/Authors.astro"
+import Cover from "./main-details/Cover.astro"
+import Title from "./main-details/Title.astro"
+
+export type Props = {
+  mediaId: string
+  coverStyle?: "default" | "book"
+}
+
+const { mediaId, coverStyle = "default" } = 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 mediaId={mediaId} style={coverStyle} />
+  <div class="flex flex-col items-center sm:items-start">
+    <Title className="text-center sm:text-start" mediaId={mediaId} />
+    <Authors className="text-center sm:text-start" mediaId={mediaId} />
+
+    <div class="mt-10 flex flex-col justify-center gap-4 sm:justify-start">
+      <slot />
+    </div>
+  </div>
+</div>

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

@@ -2,7 +2,7 @@
 import { AstroError } from "astro/errors"
 import { getEntry } from "astro:content"
 
-import MediaItemList from "../../../components/MediaItemList.astro"
+import MediaList from "../../../components/MediaList.astro"
 import { getMediaItems } from "../../../content/get-media-items"
 import { queryMediaItems } from "../../../content/query-media-items"
 
@@ -29,11 +29,11 @@ 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">
+  <h2 class="mb-1 text-xs font-bold uppercase text-gray-600 md:mb-2">
     {t("ln.details.part-of-collection")}
   </h2>
-  <h3 class="mb-2 text-lg font-bold text-gray-700">
+  <h3 class="text-lg font-bold text-gray-700">
     {t(collection.data.label)}
   </h3>
-  <MediaItemList items={items} />
+  <MediaList items={items} />
 </section>

package/src/pages/details-page/components/{MediaCollections.astro → MediaCollectionsSection.astro}

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

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

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

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

@@ -0,0 +1,30 @@
+---
+import VideoPlayer from "../../../components/VideoPlayer.astro"
+import { getMediaItem } from "../../../content/get-media-items"
+import Authors from "./main-details/Authors.astro"
+import ShareButton from "./main-details/ShareButton.astro"
+import Title from "./main-details/Title.astro"
+
+export type Props = {
+  mediaId: string
+}
+
+const { mediaId } = Astro.props
+
+const item = await getMediaItem(mediaId)
+---
+
+<div class="mx-auto max-w-screen-md md:mt-8 md:px-8">
+  <VideoPlayer
+    url={item.data.content[0].url!}
+    title={item.data.title}
+    image={item.data.image}
+  />
+</div>
+<div
+  class="mx-auto mt-6 flex max-w-screen-md flex-col items-start px-4 md:mt-10 md:px-8"
+>
+  <Title mediaId={mediaId} />
+  <Authors mediaId={mediaId} />
+  <ShareButton className="mt-6 md:mt-10" />
+</div>

package/src/pages/details-page/components/{Authors.astro → main-details/Authors.astro}

@@ -1,12 +1,12 @@
 ---
-import { getMediaItem } from "../../../content/get-media-items"
+import { getMediaItem } from "../../../../content/get-media-items"
 
 interface Props {
-  slug: string
+  mediaId: string
   className?: string
 }
 
-const item = await getMediaItem(Astro.props.slug)
+const item = await getMediaItem(Astro.props.mediaId)
 const authors = item.data.authors?.join(", ")
 ---
 

package/src/pages/details-page/components/{Cover.astro → main-details/Cover.astro}

@@ -1,15 +1,15 @@
 ---
 import { Image } from "astro:assets"
 
-import { getMediaItem } from "../../../content/get-media-items"
+import { getMediaItem } from "../../../../content/get-media-items"
 
 interface Props {
-  slug: string
+  mediaId: string
   style?: "default" | "book"
 }
-const { slug, style = "default" } = Astro.props
+const { mediaId, style = "default" } = Astro.props
 
-const item = await getMediaItem(slug)
+const item = await getMediaItem(mediaId)
 const image = item.data.image
 const isPortraitImage = image.height > image.width
 ---

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

@@ -1,14 +1,14 @@
 ---
-import Icon from "../../../components/Icon"
-import { getMediaItem } from "../../../content/get-media-items"
-import { createContentMetadata } from "../utils/create-content-metadata"
+import Icon from "../../../../components/Icon"
+import { getMediaItem } from "../../../../content/get-media-items"
+import { createContentMetadata } from "../../utils/create-content-metadata"
 
 interface Props {
-  slug: string
+  mediaId: string
   openActionLabel: string
 }
-const { slug, openActionLabel } = Astro.props
-const item = await getMediaItem(slug)
+const { mediaId, openActionLabel } = Astro.props
+const item = await getMediaItem(mediaId)
 const content = createContentMetadata(item.data.content[0])
 ---
 

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

@@ -1,5 +1,5 @@
 ---
-import Icon from "../../../components/Icon"
+import Icon from "../../../../components/Icon"
 
 interface Props {
   className?: string

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

@@ -0,0 +1,28 @@
+---
+import { getMediaItem } from "../../../../content/get-media-items"
+
+interface Props {
+  mediaId: string
+  className?: string
+}
+
+const {
+  data: { title, language },
+} = await getMediaItem(Astro.props.mediaId)
+
+const titleSize = {
+  md: "text-3xl sm:text-4xl",
+  xl: "text-4xl sm:text-5xl",
+}
+---
+
+<h1
+  class="font-bold"
+  lang={language}
+  class:list={[
+    titleSize[title.length > 20 ? "md" : "xl"],
+    Astro.props.className,
+  ]}
+>
+  {title}
+</h1>

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

@@ -5,10 +5,10 @@ import { searchPagePath } from "../../../../utils/paths"
 import Label from "./Label.astro"
 
 interface Props {
-  slug: string
+  mediaId: string
 }
 
-const item = await getMediaItem(Astro.props.slug)
+const item = await getMediaItem(Astro.props.mediaId)
 
 const categories = item.data.categories?.map(({ id }) => id)
 const { t } = Astro.locals.i18n

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

@@ -8,15 +8,16 @@ import { detailsPagePath } from "../../../../utils/paths"
 import Label from "./Label.astro"
 
 interface Props {
-  slug: string
+  mediaId: string
 }
 
-const item = await getMediaItem(Astro.props.slug)
+const item = await getMediaItem(Astro.props.mediaId)
 
-const { slug } = Astro.props
+const { mediaId } = Astro.props
 const translations = (await getMediaItems())
   .filter(
-    (entry) => entry.data.commonId === item.data.commonId && entry.id !== slug,
+    (entry) =>
+      entry.data.commonId === item.data.commonId && entry.id !== mediaId,
   )
   .sort((a, b) => a.data.language.localeCompare(b.data.language))
 

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

@@ -1,44 +0,0 @@
----
-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/VideoDetails.astro

@@ -1,43 +0,0 @@
----
-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/SectionTitle.astro

@@ -1,8 +0,0 @@
----
-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/Title.astro

@@ -1,18 +0,0 @@
----
-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/details/Details.astro

@@ -1,17 +0,0 @@
----
-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>