lightnet 3.2.0 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # lightnet
 
+## 3.4.0
+
+### Minor Changes
+
+- [#252](https://github.com/LightNetDev/LightNet/pull/252) [`9573e88`](https://github.com/LightNetDev/LightNet/commit/9573e88515f66ade87cb187b59abba498527c693) Thanks [@smn-cds](https://github.com/smn-cds)! - Add config logo option `replacesTitle`. This will hide the title from the header bar.
+
+## 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.4.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.4.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/config.ts

@@ -153,7 +153,7 @@ export const configSchema = z.object({
        * Alt attribute to add for screen reader etc.
        * This can be a fixed string or a translation key.
        */
-      alt: z.string().default(""),
+      alt: z.string().optional(),
       /**
        * Size in px to use for the logo on the header bar.
        * The size will be applied to the shorter side of your logo image.
@@ -161,6 +161,11 @@ export const configSchema = z.object({
        * Default is 28 px.
        */
       size: z.number().default(28),
+      /**
+       * Do not show the site title next to the logo.
+       * Set this to `true` if your logo already contains the title.
+       */
+      replacesTitle: z.boolean().default(false),
     })
     .optional(),
   /**

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/layouts/Page.astro

@@ -6,8 +6,7 @@ import config from "virtual:lightnet/config"
 
 import { resolveLanguage } from "../i18n/resolve-language"
 import Favicon from "./components/Favicon.astro"
-import PageNavigation from "./components/PageNavigation.astro"
-import PageTitle from "./components/PageTitle.astro"
+import Header from "./components/Header.astro"
 import PreloadReact from "./components/PreloadReact"
 
 interface Props {
@@ -38,17 +37,7 @@ const language = resolveLanguage(currentLocale)
   <body
     class="flex min-h-screen flex-col overflow-y-scroll bg-gray-50 text-gray-900"
   >
-    <header
-      class="fixed top-0 z-50 h-14 w-full bg-white shadow-lg sm:h-20"
-      transition:animate="none"
-    >
-      <div
-        class="mx-auto flex h-full max-w-screen-xl justify-between px-4 md:px-8"
-      >
-        <PageTitle />
-        <PageNavigation />
-      </div>
-    </header>
+    <Header />
     <main class="grow pb-8 pt-14 sm:py-20">
       <slot />
     </main>

package/src/layouts/components/Header.astro

@@ -0,0 +1,14 @@
+---
+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"
+>
+  <div class="mx-auto flex h-full max-w-screen-xl justify-between px-4 md:px-8">
+    <PageTitle />
+    <PageNavigation />
+  </div>
+</header>

package/src/layouts/components/PageTitle.astro

@@ -14,8 +14,10 @@ function getWidth(logo: ImageMetadata) {
   return Math.floor(size * Math.max(1, logo.width / logo.height))
 }
 
-const logoAlt = config.logo?.alt ?? ""
-const t = Astro.locals.i18n.t
+const logoAlt =
+  config.logo?.alt ?? (config.logo?.replacesTitle ? config.title : "")
+
+const { t } = Astro.locals.i18n
 ---
 
 <a
@@ -40,5 +42,5 @@ const t = Astro.locals.i18n.t
           loading="eager"
         />
       ))
-  }{t(config.title)}</a
+  }{!config.logo?.replacesTitle && t(config.title)}</a
 >

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>