lightnet 3.12.2 → 4.0.1

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

@@ -3,25 +3,32 @@ import { fileURLToPath } from "node:url"
 
 import type { AstroConfig, AstroIntegrationLogger, ViteUserConfig } from "astro"
 
-import { type LightnetConfig } from "./config"
+import type { ExtendedLightnetConfig } from "./config"
 
 const CONFIG = "virtual:lightnet/config"
 const LOGO = "virtual:lightnet/logo"
-const PROJECT_CONTEXT = "virtual:lightnet/project-context"
 const CUSTOM_HEAD = "virtual:lightnet/components/CustomHead"
 const CUSTOM_FOOTER = "virtual:lightnet/components/CustomFooter"
+const MEDIA_ITEM_EDIT_BUTTON_CONTROLLER =
+  "virtual:lightnet/components/media-item-edit-button-controller"
+
+const TRANSLATION_RUNTIME_MODULES = [
+  fileURLToPath(new URL("../i18n/translations.ts", import.meta.url)),
+  fileURLToPath(new URL("../i18n/translate.ts", import.meta.url)),
+  fileURLToPath(new URL("../i18n/locals.ts", import.meta.url)),
+]
 
 const VIRTUAL_MODULES = [
   CONFIG,
   LOGO,
-  PROJECT_CONTEXT,
   CUSTOM_HEAD,
   CUSTOM_FOOTER,
+  MEDIA_ITEM_EDIT_BUTTON_CONTROLLER,
 ] as const
 
 export function vitePluginLightnetConfig(
-  config: LightnetConfig,
-  { root, srcDir, site }: Pick<AstroConfig, "root" | "srcDir" | "site">,
+  config: ExtendedLightnetConfig,
+  { root }: Pick<AstroConfig, "root">,
   logger: AstroIntegrationLogger,
 ): NonNullable<ViteUserConfig["plugins"]>[number] {
   const resolveFilePath = (id: string) =>
@@ -33,14 +40,27 @@ export function vitePluginLightnetConfig(
       const module = VIRTUAL_MODULES.find((m) => m === id)
       if (module) return `\0${module}`
     },
-    handleHotUpdate({ file, server }) {
+    handleHotUpdate({ file, modules, server }) {
       const srcPath = resolve(fileURLToPath(root), "src/translations/")
       if (
         (file.endsWith(".yml") || file.endsWith(".yaml")) &&
         file.startsWith(srcPath)
       ) {
+        const affectedModules = [
+          ...modules,
+          ...TRANSLATION_RUNTIME_MODULES.flatMap((id) => {
+            const module = server.moduleGraph.getModuleById(id)
+            return module ? [module] : []
+          }),
+        ]
+
+        for (const module of affectedModules) {
+          server.moduleGraph.invalidateModule(module)
+        }
+
         logger.info(`Update translations ${file.slice(srcPath.length)}`)
-        server.restart()
+        server.ws.send({ type: "full-reload" })
+        return []
       }
     },
     load(id): string | undefined {
@@ -52,8 +72,6 @@ export function vitePluginLightnetConfig(
           return config.logo
             ? `import logo from ${resolveFilePath(config.logo.src)}; export default logo;`
             : "export default undefined;"
-        case PROJECT_CONTEXT:
-          return `export default ${JSON.stringify({ root, srcDir, site })}`
         case CUSTOM_HEAD:
           return config.headComponent
             ? `export { default } from ${resolveFilePath(config.headComponent)};`
@@ -62,6 +80,8 @@ export function vitePluginLightnetConfig(
           return config.footerComponent
             ? `export { default } from ${resolveFilePath(config.footerComponent)};`
             : "export default undefined;"
+        case MEDIA_ITEM_EDIT_BUTTON_CONTROLLER:
+          return "export default undefined;"
       }
     },
   }

package/src/components/CarouselSection.astro

@@ -1,11 +1,13 @@
 ---
-import Icon from "./Icon"
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+
 import Section, { type Props as SectionProps } from "./Section.astro"
 
 type Props = SectionProps
 
 const { titleClass = "", ...props } = Astro.props
 const { t, direction } = Astro.locals.i18n
+const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <Section {...props} titleClass={"!mb-8 sm:!-mb-1 " + titleClass}>
@@ -15,22 +17,16 @@ const { t, direction } = Astro.locals.i18n
         data-button-prev
         aria-label={t("ln.previous")}
         class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-200 bg-gray-200 text-gray-600 transition-colors ease-in-out hover:border-gray-400 disabled:bg-transparent disabled:text-gray-300 disabled:hover:border-gray-200"
-        ><Icon
-          className="mdi--chevron-left"
-          ariaLabel=""
-          flipIcon={direction === "rtl"}
-        /></button
       >
+        <ChevronLeftIcon className={iconDirectionClass} />
+      </button>
       <button
         data-button-next
         aria-label={t("ln.next")}
         class="flex h-9 w-9 items-center justify-center rounded-full border-2 border-gray-200 bg-gray-200 text-gray-600 transition-colors ease-in-out hover:border-gray-400 disabled:bg-transparent disabled:text-gray-300 disabled:hover:border-gray-200"
-        ><Icon
-          className="mdi--chevron-right"
-          ariaLabel=""
-          flipIcon={direction === "rtl"}
-        /></button
       >
+        <ChevronRightIcon className={iconDirectionClass} />
+      </button>
     </div>
 
     <div data-carousel class="-m-4 overflow-hidden p-4">

package/src/components/CategoriesSection.astro

@@ -12,10 +12,10 @@ type Props = Omit<SectionProps, "maxWidth"> & {
 }
 
 const { title, layout = "carousel", ...props } = Astro.props
-const { t, currentLocale } = Astro.locals.i18n
+const { t, tMap, currentLocale } = Astro.locals.i18n
 const resolvedTitle = title ?? t("ln.categories")
 
-const categories = await getUsedCategories(currentLocale, t)
+const categories = await getUsedCategories(currentLocale, tMap)
 type Category = (typeof categories)[number]
 
 function getImage({ image, id }: Category) {

package/src/components/HighlightSection.astro

@@ -1,8 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
-
-import Icon from "./Icon"
+import { ArrowRightIcon } from "lucide-react"
 
 interface Props {
   image: ImageMetadata
@@ -17,6 +16,8 @@ interface Props {
 
 const { image, id, title, text, link, className, titleClass, textClass } =
   Astro.props
+const iconDirectionClass =
+  Astro.locals.i18n.direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <section
@@ -57,11 +58,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
             href={link.href}
           >
             {link.text}
-            <Icon
-              flipIcon={Astro.locals.i18n.direction === "rtl"}
-              className="mdi--arrow-right"
-              ariaLabel=""
-            />
+            <ArrowRightIcon className={iconDirectionClass} />
           </a>
         )
       }

package/src/components/Icon.tsx

@@ -1,10 +1,10 @@
 /**
  * Icon Component.
  *
- * @param className containing a material design icon name prefixed with 'mdi--'
+ * @param className containing a lucide icon name prefixed with 'lucide--'
  * @param ariaLabel accessibility label to be added e.g. for people using a screen reader. Empty string will hide the icon from a screen reader.
  * @param flipIcon if set to true this will mirror the icon along its x-axis. Useful for RTL layouts.
- * @see https://pictogrammers.com/library/mdi/ for available icons
+ * @see https://lucide.dev/icons/ for available icons
  * @returns icon
  */
 export default function Icon({

package/src/components/MediaGallerySection.astro

@@ -9,8 +9,6 @@ import CoverImageDecorator from "./CoverImageDecorator"
 import Icon from "./Icon"
 import Section, { type Props as SectionProps } from "./Section.astro"
 
-type ItemStyle = "book" | "video" | "portrait" | "landscape"
-
 type MediaItem = {
   id: string
   data: {
@@ -22,23 +20,28 @@ type MediaItem = {
 
 type Props = Omit<SectionProps, "maxWidth"> & {
   items: (MediaItem | undefined)[]
-  layout: ItemStyle
-  viewLayout?: "grid" | "carousel"
+  itemWidth?: "infer" | "narrow" | "wide"
+  layout?: "grid" | "carousel"
 }
 
 const {
   items: itemsInput,
-  layout: itemStyle,
-  viewLayout = "grid",
+  itemWidth = "infer",
+  layout = "carousel",
   ...sectionProps
 } = Astro.props
 
-const t = Astro.locals.i18n.t
+const { currentLocale, tMap } = Astro.locals.i18n
 
 const types = Object.fromEntries(
   (await getMediaTypes()).map((type) => [
     type.id,
-    { ...type.data, labelText: t(type.data.label) },
+    {
+      ...type.data,
+      labelText: tMap(type.data.label, {
+        path: ["media-types", type.id, "label"],
+      }),
+    },
   ]),
 )
 
@@ -46,14 +49,26 @@ const types = Object.fromEntries(
 // this is in the return type of getEntry
 const items = itemsInput.filter((item) => !!item)
 
-const itemWidth = (
-  {
-    book: "narrow",
-    portrait: "narrow",
-    video: "wide",
-    landscape: "wide",
-  } as const
-)[itemStyle]
+const { landscapeCount, portraitCount } = items.slice(0, 10).reduce(
+  (acc, item) => {
+    const { width, height } = item.data.image
+    if (width > height) {
+      acc.landscapeCount += 1
+    }
+    if (height > width) {
+      acc.portraitCount += 1
+    }
+    return acc
+  },
+  { landscapeCount: 0, portraitCount: 0 },
+)
+
+const resolvedItemWidth =
+  itemWidth === "infer"
+    ? landscapeCount > portraitCount
+      ? "wide"
+      : "narrow"
+    : itemWidth
 
 const imageSizes = {
   narrow:
@@ -84,23 +99,68 @@ const gridLayouts = {
   narrow: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
   wide: "grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4",
 } as const
-
-const coverImageStyle =
-  (["book", "video"] as const).find((style) => itemStyle === style) ?? "default"
 ---
 
 {
-  viewLayout === "grid" && (
+  layout === "grid" && (
     <Section {...sectionProps}>
       <ol
         class="grid items-end justify-between gap-4 md:gap-8"
-        class:list={gridLayouts[itemWidth]}
+        class:list={gridLayouts[resolvedItemWidth]}
       >
-        {items.map((item) => (
-          <li>
+        {items.map((item) => {
+          const coverImageStyle = types[item.data.type.id].coverImageStyle
+          return (
+            <li>
+              <a
+                href={detailsPagePath(currentLocale, item)}
+                class="group flex flex-col gap-3"
+              >
+                <CoverImageDecorator
+                  style={coverImageStyle}
+                  className="outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+                >
+                  <Image
+                    class="h-full w-full object-cover"
+                    class:list={[
+                      coverImageStyle === "video" && "absolute top-0",
+                    ]}
+                    src={item.data.image}
+                    alt=""
+                    widths={[128, 256, 512, 768]}
+                    sizes={imageSizes[resolvedItemWidth]}
+                  />
+                </CoverImageDecorator>
+
+                <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
+                  <Icon
+                    className={`${types[item.data.type.id].icon} me-2 align-bottom`}
+                    ariaLabel={types[item.data.type.id].labelText}
+                  />
+                  {item.data.title}
+                </span>
+              </a>
+            </li>
+          )
+        })}
+      </ol>
+    </Section>
+  )
+}
+{
+  layout === "carousel" && (
+    <CarouselSection {...sectionProps}>
+      {items.map((item) => {
+        const coverImageStyle = types[item.data.type.id].coverImageStyle
+        return (
+          <li
+            class={`carousel-item--${resolvedItemWidth} h-full`}
+            role="group"
+            aria-roledescription="slide"
+          >
             <a
-              href={detailsPagePath(Astro.currentLocale, item)}
-              class="group flex flex-col gap-3"
+              href={detailsPagePath(currentLocale, item)}
+              class="group flex h-full flex-col justify-end gap-3"
             >
               <CoverImageDecorator
                 style={coverImageStyle}
@@ -108,11 +168,10 @@ const coverImageStyle =
               >
                 <Image
                   class="h-full w-full object-cover"
-                  class:list={[itemStyle === "video" && "absolute top-0"]}
                   src={item.data.image}
                   alt=""
                   widths={[128, 256, 512, 768]}
-                  sizes={imageSizes[itemWidth]}
+                  sizes={imageSizes[resolvedItemWidth]}
                 />
               </CoverImageDecorator>
 
@@ -125,47 +184,8 @@ const coverImageStyle =
               </span>
             </a>
           </li>
-        ))}
-      </ol>
-    </Section>
-  )
-}
-{
-  viewLayout === "carousel" && (
-    <CarouselSection {...sectionProps}>
-      {items.map((item) => (
-        <li
-          class={`carousel-item--${itemWidth} h-full`}
-          role="group"
-          aria-roledescription="slide"
-        >
-          <a
-            href={detailsPagePath(Astro.currentLocale, item)}
-            class="group flex h-full flex-col justify-end gap-3"
-          >
-            <CoverImageDecorator
-              style={coverImageStyle}
-              className="outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
-            >
-              <Image
-                class="h-full w-full object-cover"
-                src={item.data.image}
-                alt=""
-                widths={[128, 256, 512, 768]}
-                sizes={imageSizes[itemWidth]}
-              />
-            </CoverImageDecorator>
-
-            <span class="line-clamp-2 h-12 text-balance text-sm font-bold text-gray-700">
-              <Icon
-                className={`${types[item.data.type.id].icon} me-2 align-bottom`}
-                ariaLabel={types[item.data.type.id].labelText}
-              />
-              {item.data.title}
-            </span>
-          </a>
-        </li>
-      ))}
+        )
+      })}
     </CarouselSection>
   )
 }

package/src/components/MediaList.astro

@@ -1,6 +1,7 @@
 ---
 import type { ImageMetadata } from "astro"
 import { Image } from "astro:assets"
+import { ChevronRightIcon } from "lucide-react"
 
 import { getMediaTypes } from "../content/get-media-types"
 import { detailsPagePath } from "../utils/paths"
@@ -27,19 +28,22 @@ interface Props {
 // this is in the return type of getEntry
 const items = Astro.props.items.filter((item) => !!item)
 
-const { t, direction } = Astro.locals.i18n
+const { direction, currentLocale, tMap } = Astro.locals.i18n
 
 const mediaTypes = Object.fromEntries(
   (await getMediaTypes()).map((type) => [
     type.id,
     {
       id: type.id,
-      labelText: t(type.data.label),
+      labelText: tMap(type.data.label, {
+        path: ["media-types", type.id, "label"],
+      }),
       icon: type.data.icon,
       coverImageStyle: type.data.coverImageStyle,
     },
   ]),
 )
+const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <ol class="divide-y divide-gray-200">
@@ -50,7 +54,7 @@ const mediaTypes = Object.fromEntries(
           href={
             item.disabled
               ? "javascript:void(0)"
-              : detailsPagePath(Astro.currentLocale, {
+              : detailsPagePath(currentLocale, {
                   id: item.id,
                 })
           }
@@ -97,10 +101,8 @@ const mediaTypes = Object.fromEntries(
             </div>
           </div>
 
-          <Icon
-            className="mdi--chevron-right hidden sm:block md:group-hover:text-primary my-auto ms-2 me-4 shrink-0 text-2xl text-gray-300"
-            flipIcon={direction === "rtl"}
-            ariaLabel=""
+          <ChevronRightIcon
+            className={`my-auto me-4 ms-2 hidden shrink-0 text-gray-300 sm:block md:group-hover:text-primary ${iconDirectionClass}`}
           />
         </a>
       </li>

package/src/components/SearchInput.astro

@@ -1,15 +1,17 @@
 ---
-import Icon from "./Icon"
+import { SearchIcon } from "lucide-react"
+
+import { searchPagePath } from "../utils/paths"
 
 type Props = {
   className?: string
 }
 
-const { t } = Astro.locals.i18n
+const { t, currentLocale } = Astro.locals.i18n
 ---
 
 <form
-  action={`/${Astro.currentLocale}/media`}
+  action={searchPagePath(currentLocale)}
   method="get"
   role="search"
   class="group flex w-full rounded-2xl shadow-sm outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out group-focus-within:outline-gray-400"
@@ -24,8 +26,9 @@ const { t } = Astro.locals.i18n
   />
   <button
     type="submit"
+    aria-label={t("ln.search.title")}
     class="flex items-center rounded-e-2xl border border-gray-100/95 bg-gray-800 px-4 py-3 text-gray-50 hover:bg-gray-950 hover:text-gray-300"
   >
-    <Icon className="mdi--magnify" ariaLabel={t("ln.search.title")} />
+    <SearchIcon />
   </button>
 </form>

package/src/components/Section.astro

@@ -1,5 +1,5 @@
 ---
-import Icon from "./Icon"
+import { ChevronRightIcon } from "lucide-react"
 
 export interface Props {
   /**
@@ -64,6 +64,8 @@ const marginTopValues = {
   sm: "mt-16 md:mt-20",
   lg: "mt-24 md:mt-28",
 }
+const iconDirectionClass =
+  Astro.locals.i18n.direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <section
@@ -81,10 +83,10 @@ const marginTopValues = {
         {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"}
+            <ChevronRightIcon
+              size="2rem"
+              strokeWidth="3px"
+              className={`transition-colors duration-75 ease-in-out group-hover:text-primary ${iconDirectionClass}`}
             />
           </a>
         ) : (

package/src/components/VideoPlayer.astro

@@ -2,8 +2,7 @@
 import type { ImageMetadata } from "astro"
 import { getImage } from "astro:assets"
 import { Image } from "astro:assets"
-
-import Icon from "./Icon"
+import { ExternalLinkIcon } from "lucide-react"
 
 interface Props {
   /**
@@ -146,7 +145,7 @@ async function parseUrl(
           </span>
         </div>
         <div class="absolute bottom-0 end-0 start-0 z-20 flex items-center gap-2 rounded bg-black/70 px-4 py-4 text-sm font-medium text-white backdrop-blur md:text-sm">
-          <Icon className="mdi--external-link" ariaLabel="" />
+          <ExternalLinkIcon className="shrink-0" />
           {t("ln.external-link")}
         </div>
       </a>