lightnet 3.2.0 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # lightnet
 
+## 3.3.0
+
+### Minor Changes
+
+- [#250](https://github.com/LightNetDev/LightNet/pull/250) [`bc728aa`](https://github.com/LightNetDev/LightNet/commit/bc728aae93cdba4383167488536e5c6ab3654523) Thanks [@smn-cds](https://github.com/smn-cds)! - Introduce DetailsPage wrapper component
+
+  ‼️ BREAKING CHANGE on experimental custom details page API.
+
+  With this change all custom details pages need to be wrapped by
+  a `DetailsPage` component. This component is exported by `@lightnet/experimental-details-page`.
+  Previously custom details pages were automatically wrapped by LightNet.
+
+  This is how to create a custom details page:
+
+  ```astro
+  ---
+  import { DetailsPage } from "@lightNet/experimental-details-page"
+  type Props = {
+    mediaId
+  }
+  ---
+
+  <DetailsPage mediaId={Astro.props.mediaId}>
+    {/* Your custom details page components go here */}
+  </DetailsPage>
+  ```
+
 ## 3.2.0
 
 ### Minor Changes

package/__e2e__/fixtures/basics/package.json

@@ -8,7 +8,7 @@
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.0",
     "astro": "^5.6.1",
-    "lightnet": "^3.2.0",
+    "lightnet": "^3.3.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.33.5",

package/exports/details-page.ts

@@ -4,6 +4,7 @@
  */
 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 DetailsPage } from "../src/pages/details-page/components/DetailsPage.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"

package/package.json

@@ -2,7 +2,7 @@
   "name": "lightnet",
   "type": "module",
   "license": "MIT",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -25,10 +25,10 @@
     "./locals": "./src/i18n/locals.ts",
     "./tailwind.config.ts": "./tailwind.config.ts",
     "./layouts/MarkdownPage.astro": "./src/layouts/MarkdownPage.astro",
-    "./pages/404.astro": "./src/pages/404.astro",
-    "./pages/RedirectToDefaultLocale.astro": "./src/pages/RedirectToDefaultLocale.astro",
-    "./pages/SearchPage.astro": "./src/pages/search-page/SearchPage.astro",
-    "./pages/DetailsPage.astro": "./src/pages/details-page/DetailsPage.astro",
+    "./pages/404Route.astro": "./src/pages/404Route.astro",
+    "./pages/RootRoute.astro": "./src/pages/RootRoute.astro",
+    "./pages/SearchPageRoute.astro": "./src/pages/search-page/SearchPageRoute.astro",
+    "./pages/DetailsPageRoute.astro": "./src/pages/details-page/DetailsPageRoute.astro",
     "./pages/api/search.ts": "./src/pages/api/search.ts"
   },
   "peerDependencies": {

package/src/astro-integration/integration.ts

@@ -28,19 +28,19 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
 
         injectRoute({
           pattern: "404",
-          entrypoint: "lightnet/pages/404.astro",
+          entrypoint: "lightnet/pages/404Route.astro",
           prerender: true,
         })
 
         injectRoute({
           pattern: "",
-          entrypoint: "lightnet/pages/RedirectToDefaultLocale.astro",
+          entrypoint: "lightnet/pages/RootRoute.astro",
           prerender: true,
         })
 
         injectRoute({
           pattern: "/[locale]/media",
-          entrypoint: "lightnet/pages/SearchPage.astro",
+          entrypoint: "lightnet/pages/SearchPageRoute.astro",
           prerender: true,
         })
 
@@ -52,7 +52,7 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
 
         injectRoute({
           pattern: "/[locale]/media/[mediaId]",
-          entrypoint: "lightnet/pages/DetailsPage.astro",
+          entrypoint: "lightnet/pages/DetailsPageRoute.astro",
           prerender: true,
         })
 

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

@@ -2,6 +2,7 @@
 import { getMediaItem } from "../../content/get-media-items"
 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"
@@ -16,11 +17,13 @@ const { mediaId } = Astro.props
 const audioSrc = (await getMediaItem(mediaId)).data.content[0].url
 ---
 
-<MainDetailsSection mediaId={mediaId}>
-  <AudioPlayer src={audioSrc} className="mt-10 w-full" />
-  <ShareButton className="mt-4 min-w-40" />
-</MainDetailsSection>
-<DescriptionSection mediaId={mediaId} />
-<ContentSection mediaId={mediaId} />
-<MediaCollectionsSection mediaId={mediaId} />
-<MoreDetailsSection mediaId={mediaId} />
+<DetailsPage mediaId={mediaId}>
+  <MainDetailsSection mediaId={mediaId}>
+    <AudioPlayer src={audioSrc} className="mt-10 w-full" />
+    <ShareButton className="mt-4 min-w-40" />
+  </MainDetailsSection>
+  <DescriptionSection mediaId={mediaId} />
+  <ContentSection mediaId={mediaId} />
+  <MediaCollectionsSection mediaId={mediaId} />
+  <MoreDetailsSection mediaId={mediaId} />
+</DetailsPage>

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

@@ -1,6 +1,7 @@
 ---
 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"
@@ -16,13 +17,15 @@ export type Props = {
 const { mediaId, coverStyle, openActionLabel = "ln.details.open" } = Astro.props
 ---
 
-<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>
-<DescriptionSection mediaId={mediaId} />
-<ContentSection mediaId={mediaId} />
-<MediaCollectionsSection mediaId={mediaId} />
-<MoreDetailsSection mediaId={mediaId} />
+<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>
+  <DescriptionSection mediaId={mediaId} />
+  <ContentSection mediaId={mediaId} />
+  <MediaCollectionsSection mediaId={mediaId} />
+  <MoreDetailsSection mediaId={mediaId} />
+</DetailsPage>

package/src/pages/details-page/{DetailsPage.astro → DetailsPageRoute.astro}

@@ -6,8 +6,6 @@ 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 AudioDetailsPage from "./AudioDetailsPage.astro"
 import DefaultDetailsPage from "./DefaultDetailsPage.astro"
 import VideoDetailsPage from "./VideoDetailsPage.astro"
@@ -43,24 +41,11 @@ if (detailsPage?.layout === "custom") {
 }
 ---
 
-<Page
-  title={mediaItem.title}
-  description={markdownToText(mediaItem.description)}
->
-  {
-    layout === "default" && (
-      <DefaultDetailsPage mediaId={mediaId} {...detailsPage} />
-    )
-  }
-  {
-    layout === "video" && (
-      <VideoDetailsPage mediaId={mediaId} {...detailsPage} />
-    )
-  }
-  {
-    layout === "audio" && (
-      <AudioDetailsPage mediaId={mediaId} {...detailsPage} />
-    )
-  }
-  {CustomDetails && <CustomDetails mediaId={mediaId} {...detailsPage} />}
-</Page>
+{
+  layout === "default" && (
+    <DefaultDetailsPage mediaId={mediaId} {...detailsPage} />
+  )
+}
+{layout === "video" && <VideoDetailsPage mediaId={mediaId} {...detailsPage} />}
+{layout === "audio" && <AudioDetailsPage mediaId={mediaId} {...detailsPage} />}
+{CustomDetails && <CustomDetails mediaId={mediaId} {...detailsPage} />}

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

@@ -1,6 +1,7 @@
 ---
 import ContentSection from "./components/ContentSection.astro"
 import DescriptionSection from "./components/DescriptionSection.astro"
+import DetailsPage from "./components/DetailsPage.astro"
 import MediaCollectionsSection from "./components/MediaCollectionsSection.astro"
 import MoreDetailsSection from "./components/MoreDetailsSection.astro"
 import VideoDetailsSection from "./components/VideoDetailsSection.astro"
@@ -12,8 +13,10 @@ export type Props = {
 const { mediaId } = Astro.props
 ---
 
-<VideoDetailsSection mediaId={mediaId} />
-<DescriptionSection mediaId={mediaId} />
-<ContentSection mediaId={mediaId} />
-<MediaCollectionsSection mediaId={mediaId} />
-<MoreDetailsSection mediaId={mediaId} />
+<DetailsPage mediaId={mediaId}>
+  <VideoDetailsSection mediaId={mediaId} />
+  <DescriptionSection mediaId={mediaId} />
+  <ContentSection mediaId={mediaId} />
+  <MediaCollectionsSection mediaId={mediaId} />
+  <MoreDetailsSection mediaId={mediaId} />
+</DetailsPage>

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

@@ -0,0 +1,18 @@
+---
+import { getMediaItem } from "../../../content/get-media-items"
+import Page from "../../../layouts/Page.astro"
+import { markdownToText } from "../../../utils/markdown"
+
+type Props = {
+  mediaId: string
+}
+
+const mediaItem = (await getMediaItem(Astro.props.mediaId)).data
+---
+
+<Page
+  title={mediaItem.title}
+  description={markdownToText(mediaItem.description)}
+>
+  <slot />
+</Page>