lightnet 4.5.2 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # lightnet
 
+## 4.6.0
+
+### Minor Changes
+
+- [#449](https://github.com/LightNetDev/LightNet/pull/449) [`b4b1ba9`](https://github.com/LightNetDev/LightNet/commit/b4b1ba9e591af8f6870f2b3eb04029820a008393) - Support passing Markdown frontmatter to Page props.
+
+### Patch Changes
+
+- [#449](https://github.com/LightNetDev/LightNet/pull/449) [`b4b1ba9`](https://github.com/LightNetDev/LightNet/commit/b4b1ba9e591af8f6870f2b3eb04029820a008393) - Make globe icon in footer language selection menu clickable.
+
+- [#449](https://github.com/LightNetDev/LightNet/pull/449) [`b4b1ba9`](https://github.com/LightNetDev/LightNet/commit/b4b1ba9e591af8f6870f2b3eb04029820a008393) - Update dependencies
+
 ## 4.5.2
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "LightNet makes it easy to run your own digital media library.",
   "type": "module",
   "license": "MIT",
-  "version": "4.5.2",
+  "version": "4.6.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -52,29 +52,29 @@
   },
   "dependencies": {
     "@astrojs/react": "^5.0.7",
-    "@iconify-json/lucide": "^1.2.116",
+    "@iconify-json/lucide": "^1.2.130",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
     "@tailwindcss/typography": "^0.5.20",
-    "@tanstack/react-virtual": "^3.14.5",
-    "autoprefixer": "^10.5.2",
+    "@tanstack/react-virtual": "^3.14.11",
+    "autoprefixer": "^10.5.5",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
-    "fuse.js": "^7.4.2",
-    "i18next": "^26.3.4",
-    "lucide-react": "^1.23.0",
-    "marked": "^18.0.5",
-    "postcss": "^8.5.16",
+    "fuse.js": "^7.5.0",
+    "i18next": "^26.4.2",
+    "lucide-react": "^1.43.0",
+    "marked": "^18.0.12",
+    "postcss": "^8.5.28",
     "postcss-load-config": "^6.0.1",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.61.1",
-    "@types/react": "^19.2.17",
+    "@internal/e2e-test-utils": "^0.0.1",
+    "@playwright/test": "^1.63.0",
+    "@types/react": "^19.2.18",
     "astro": "^6.4.8",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9",
-    "@internal/e2e-test-utils": "^0.0.1"
+    "vitest": "^5.0.0"
   },
   "engines": {
     "node": ">=22"

package/src/components/CategoriesSection.astro

@@ -29,96 +29,37 @@ function getImage({ image, id }: Category) {
 }
 ---
 
-{
-  !!categories.length && layout === "grid" && (
-    <Section {...props} title={resolvedTitle}>
-      <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
-        {categories.map((category) => (
-          <li class="h-full">
-            <a
-              href={searchPagePath(currentLocale, { category: category.id })}
-              class="group flex h-full flex-col gap-3"
-            >
-              <div
-                class="relative overflow-hidden rounded-2xl shadow-sm outline-2 outline-gray-400 transition-colors duration-75 ease-in-out sm:group-hover:outline"
-                class:list={[
-                  !category.image && "h-full min-h-28 w-full bg-gray-300",
-                ]}
-              >
-                {category.image && (
-                  <Image
-                    class="h-full w-full bg-gray-500 object-contain"
-                    src={getImage(category)}
-                    alt=""
-                    widths={[128, 256, 388, 512, 768]}
-                    sizes={
-                      "(max-width: 640px) calc(calc(100vw - 3rem ) / 2), " +
-                      "(max-width: 768px) calc(calc(100vw - 4rem ) / 3), " +
-                      "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
-                      "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
-                      "217px"
-                    }
-                  />
-                )}
-
-                <div
-                  class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
-                  class:list={[
-                    category.image
-                      ? "from-black/80 via-black/30 via-50% to-transparent"
-                      : "from-black/35 to-transparent",
-                  ]}
-                >
-                  <span class="line-clamp-3 select-none text-balance font-bold">
-                    {category.labelText}
-                  </span>
-                </div>
-              </div>
-            </a>
-          </li>
-        ))}
-      </ol>
-    </Section>
-  )
-}
-{
-  !!categories.length && layout === "carousel" && (
-    <CarouselSection {...props} title={resolvedTitle}>
+{!!categories.length && layout === "grid" && (
+  <Section {...props} title={resolvedTitle}>
+    <ol class="grid grid-cols-2 items-end justify-between gap-4 sm:grid-cols-3 md:grid-cols-4 md:gap-8 lg:grid-cols-5">
       {categories.map((category) => (
-        <li
-          class="carousel-item--narrow"
-          role="group"
-          aria-roledescription="slide"
-          class:list={[
-            /** Category cards without images should take the full height of other cards */
-            category.image ? "h-full" : "self-stretch",
-          ]}
-        >
+        <li class="h-full">
           <a
             href={searchPagePath(currentLocale, { category: category.id })}
             class="group flex h-full flex-col gap-3"
           >
             <div
-              class="relative overflow-hidden rounded-2xl shadow-sm outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+              class="relative overflow-hidden rounded-2xl shadow-sm outline-2 outline-gray-400 transition-colors duration-75 ease-in-out sm:group-hover:outline"
               class:list={[
-                !category.image && "min-h-28 w-full flex-1 bg-gray-300",
+                !category.image && "h-full min-h-28 w-full bg-gray-300",
               ]}
             >
               {category.image && (
                 <Image
-                  class="h-full w-full bg-gray-300 object-contain"
+                  class="h-full w-full bg-gray-500 object-contain"
                   src={getImage(category)}
                   alt=""
                   widths={[128, 256, 388, 512, 768]}
                   sizes={
-                    "(max-width: 640px) calc(calc(100vw - 3rem ) / 2.3), " +
-                    "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
+                    "(max-width: 640px) calc(calc(100vw - 3rem ) / 2), " +
+                    "(max-width: 768px) calc(calc(100vw - 4rem ) / 3), " +
                     "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
                     "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
                     "217px"
                   }
                 />
               )}
+
               <div
                 class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
                 class:list={[
@@ -135,6 +76,61 @@ function getImage({ image, id }: Category) {
           </a>
         </li>
       ))}
-    </CarouselSection>
-  )
-}
+    </ol>
+  </Section>
+)}
+{!!categories.length && layout === "carousel" && (
+  <CarouselSection {...props} title={resolvedTitle}>
+    {categories.map((category) => (
+      <li
+        class="carousel-item--narrow"
+        role="group"
+        aria-roledescription="slide"
+        class:list={[
+          /** Category cards without images should take the full height of other cards */
+          category.image ? "h-full" : "self-stretch",
+        ]}
+      >
+        <a
+          href={searchPagePath(currentLocale, { category: category.id })}
+          class="group flex h-full flex-col gap-3"
+        >
+          <div
+            class="relative overflow-hidden rounded-2xl shadow-sm outline-2 outline-gray-400 transition-all duration-75 ease-in-out sm:group-hover:outline"
+            class:list={[
+              !category.image && "min-h-28 w-full flex-1 bg-gray-300",
+            ]}
+          >
+            {category.image && (
+              <Image
+                class="h-full w-full bg-gray-300 object-contain"
+                src={getImage(category)}
+                alt=""
+                widths={[128, 256, 388, 512, 768]}
+                sizes={
+                  "(max-width: 640px) calc(calc(100vw - 3rem ) / 2.3), " +
+                  "(max-width: 768px) calc(calc(100vw - 5rem ) / 3), " +
+                  "(max-width: 1024px) calc(calc(100vw - 10rem ) / 4), " +
+                  "(max-width: 1280px) calc(calc(100vw - 12rem ) / 5), " +
+                  "217px"
+                }
+              />
+            )}
+            <div
+              class="absolute start-0 top-0 flex h-full w-full flex-col justify-end bg-gradient-to-t p-4 text-gray-50"
+              class:list={[
+                category.image
+                  ? "from-black/80 via-black/30 via-50% to-transparent"
+                  : "from-black/35 to-transparent",
+              ]}
+            >
+              <span class="line-clamp-3 select-none text-balance font-bold">
+                {category.labelText}
+              </span>
+            </div>
+          </div>
+        </a>
+      </li>
+    ))}
+  </CarouselSection>
+)}

package/src/components/HeroSection.astro

@@ -60,35 +60,29 @@ const subtitleSizes = {
         !disableOverlay && "bg-gradient-radial from-black/30 to-black/40",
       ]}
     >
-      {
-        title && (
-          <h1
-            class="max-w-screen-md text-balance font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
-            class:list={[titleSizes[titleSize], titleClass]}
-          >
-            {title}
-          </h1>
-        )
-      }
-      {
-        subtitle && (
-          <p
-            class="mt-1 max-w-screen-sm text-balance font-bold md:mt-2"
-            class:list={[
-              "sm:text-lg md:text-2xl",
-              subtitleSizes[subtitleSize],
-              subtitleClass,
-            ]}
-          >
-            {subtitle}
-          </p>
-        )
-      }
-      {
-        showSearch && (
-          <SearchInput className="mt-6 max-w-sm md:mt-10 md:max-w-md" />
-        )
-      }
+      {title && (
+        <h1
+          class="max-w-screen-md text-balance font-bold tracking-tight transition-transform duration-1000 group-hover:scale-[102%]"
+          class:list={[titleSizes[titleSize], titleClass]}
+        >
+          {title}
+        </h1>
+      )}
+      {subtitle && (
+        <p
+          class="mt-1 max-w-screen-sm text-balance font-bold md:mt-2"
+          class:list={[
+            "sm:text-lg md:text-2xl",
+            subtitleSizes[subtitleSize],
+            subtitleClass,
+          ]}
+        >
+          {subtitle}
+        </p>
+      )}
+      {showSearch && (
+        <SearchInput className="mt-6 max-w-sm md:mt-10 md:max-w-md" />
+      )}
       <slot />
     </div>
   </div>

package/src/components/HighlightSection.astro

@@ -34,34 +34,28 @@ const iconDirectionClass =
       class="aspect-[4/3] w-full shrink-0 object-cover md:w-1/2 xl:aspect-video"
     />
     <div class="my-16 max-w-screen-sm px-4 md:px-8 lg:my-24 xl:px-16">
-      {
-        title && (
-          <h2
-            class="mb-4 text-balance text-2xl font-bold sm:mb-8 sm:text-3xl"
-            class:list={titleClass}
-          >
-            {title}
-          </h2>
-        )
-      }
-      {
-        text && (
-          <p class="mb-10 text-lg sm:mb-12" class:list={textClass}>
-            {text}
-          </p>
-        )
-      }
-      {
-        link && (
-          <a
-            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
-            href={link.href}
-          >
-            {link.text}
-            <ArrowRightIcon className={iconDirectionClass} />
-          </a>
-        )
-      }
+      {title && (
+        <h2
+          class="mb-4 text-balance text-2xl font-bold sm:mb-8 sm:text-3xl"
+          class:list={titleClass}
+        >
+          {title}
+        </h2>
+      )}
+      {text && (
+        <p class="mb-10 text-lg sm:mb-12" class:list={textClass}>
+          {text}
+        </p>
+      )}
+      {link && (
+        <a
+          class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
+          href={link.href}
+        >
+          {link.text}
+          <ArrowRightIcon className={iconDirectionClass} />
+        </a>
+      )}
       <slot />
     </div>
   </div>

package/src/components/MediaGallerySection.astro

@@ -96,66 +96,19 @@ const gridLayouts = {
 } as const
 ---
 
-{
-  layout === "grid" && (
-    <Section {...sectionProps}>
-      <ol
-        class="grid items-end justify-between gap-4 md:gap-8"
-        class:list={gridLayouts[resolvedItemWidth]}
-      >
-        {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}>
+{layout === "grid" && (
+  <Section {...sectionProps}>
+    <ol
+      class="grid items-end justify-between gap-4 md:gap-8"
+      class:list={gridLayouts[resolvedItemWidth]}
+    >
       {items.map((item) => {
         const coverImageStyle = types[item.data.type.id].coverImageStyle
         return (
-          <li
-            class={`carousel-item--${resolvedItemWidth} h-full`}
-            role="group"
-            aria-roledescription="slide"
-          >
+          <li>
             <a
               href={detailsPagePath(currentLocale, item)}
-              class="group flex h-full flex-col justify-end gap-3"
+              class="group flex flex-col gap-3"
             >
               <CoverImageDecorator
                 style={coverImageStyle}
@@ -163,6 +116,7 @@ const gridLayouts = {
               >
                 <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]}
@@ -181,6 +135,46 @@ const gridLayouts = {
           </li>
         )
       })}
-    </CarouselSection>
-  )
-}
+    </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(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[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>
+      )
+    })}
+  </CarouselSection>
+)}

package/src/components/MediaList.astro

@@ -47,65 +47,63 @@ const iconDirectionClass = direction === "rtl" ? "scale-x-[-1]" : ""
 ---
 
 <ol class="divide-y divide-gray-200">
-  {
-    items.map((item) => (
-      <li lang={item.data.language}>
-        <a
-          href={
-            item.disabled
-              ? "javascript:void(0)"
-              : detailsPagePath(currentLocale, {
-                  id: item.id,
-                })
-          }
-          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" : ""
-          }
-          tabindex={item.disabled ? -1 : 0}
-        >
-          <div class="flex h-32 w-32 shrink-0 flex-col items-start justify-center">
-            <CoverImageDecorator
-              style={mediaTypes[item.data.type.id].coverImageStyle}
-            >
-              <Image
-                class="max-h-32 w-auto max-w-32 object-cover"
-                class:list={[
-                  mediaTypes[item.data.type.id].coverImageStyle === "video" &&
-                    "aspect-video",
-                ]}
-                src={item.data.image}
-                width={256}
-                alt=""
-              />
-            </CoverImageDecorator>
-          </div>
-
-          <div
-            class="ms-4 flex grow flex-col justify-center sm:ms-6"
-            lang={item.data.language}
+  {items.map((item) => (
+    <li lang={item.data.language}>
+      <a
+        href={
+          item.disabled
+            ? "javascript:void(0)"
+            : detailsPagePath(currentLocale, {
+                id: item.id,
+              })
+        }
+        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" : ""
+        }
+        tabindex={item.disabled ? -1 : 0}
+      >
+        <div class="flex h-32 w-32 shrink-0 flex-col items-start justify-center">
+          <CoverImageDecorator
+            style={mediaTypes[item.data.type.id].coverImageStyle}
           >
-            <p class="mb-1 line-clamp-3 text-balance font-bold text-gray-700 md:mb-3">
-              <Icon
-                className={`${mediaTypes[item.data.type.id].icon} me-2 align-bottom text-2xl text-gray-700`}
-                ariaLabel={mediaTypes[item.data.type.id].labelText}
-              />
-              <span>{item.data.title}</span>
-            </p>
-            <div class="mb-3 flex flex-col flex-wrap items-start gap-2 text-balance md:flex-row md:items-center md:gap-3">
-              {!!item.data.authors?.length && (
-                <p class="mb-1 md:mb-0 md:text-base">
-                  {item.data.authors.join(", ")}
-                </p>
-              )}
-            </div>
+            <Image
+              class="max-h-32 w-auto max-w-32 object-cover"
+              class:list={[
+                mediaTypes[item.data.type.id].coverImageStyle === "video" &&
+                  "aspect-video",
+              ]}
+              src={item.data.image}
+              width={256}
+              alt=""
+            />
+          </CoverImageDecorator>
+        </div>
+
+        <div
+          class="ms-4 flex grow flex-col justify-center sm:ms-6"
+          lang={item.data.language}
+        >
+          <p class="mb-1 line-clamp-3 text-balance font-bold text-gray-700 md:mb-3">
+            <Icon
+              className={`${mediaTypes[item.data.type.id].icon} me-2 align-bottom text-2xl text-gray-700`}
+              ariaLabel={mediaTypes[item.data.type.id].labelText}
+            />
+            <span>{item.data.title}</span>
+          </p>
+          <div class="mb-3 flex flex-col flex-wrap items-start gap-2 text-balance md:flex-row md:items-center md:gap-3">
+            {!!item.data.authors?.length && (
+              <p class="mb-1 md:mb-0 md:text-base">
+                {item.data.authors.join(", ")}
+              </p>
+            )}
           </div>
+        </div>
 
-          <ChevronRightIcon
-            className={`my-auto me-4 ms-2 hidden shrink-0 text-gray-300 sm:block md:group-hover:text-primary ${iconDirectionClass}`}
-          />
-        </a>
-      </li>
-    ))
-  }
+        <ChevronRightIcon
+          className={`my-auto me-4 ms-2 hidden shrink-0 text-gray-300 sm:block md:group-hover:text-primary ${iconDirectionClass}`}
+        />
+      </a>
+    </li>
+  ))}
 </ol>

package/src/components/Section.astro

@@ -74,26 +74,24 @@ const iconDirectionClass =
   id={id}
   aria-label={title}
 >
-  {
-    title && (
-      <h2
-        class="mb-10 text-balance text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
-        class:list={[titleClass]}
-      >
-        {titleHref ? (
-          <a href={titleHref} class="group flex items-center">
-            {title}
-            <ChevronRightIcon
-              size="2rem"
-              strokeWidth="3px"
-              className={`transition-colors duration-75 ease-in-out group-hover:text-primary ${iconDirectionClass}`}
-            />
-          </a>
-        ) : (
-          <>{title}</>
-        )}
-      </h2>
-    )
-  }
+  {title && (
+    <h2
+      class="mb-10 text-balance text-2xl font-bold text-gray-700 sm:mb-12 sm:text-3xl"
+      class:list={[titleClass]}
+    >
+      {titleHref ? (
+        <a href={titleHref} class="group flex items-center">
+          {title}
+          <ChevronRightIcon
+            size="2rem"
+            strokeWidth="3px"
+            className={`transition-colors duration-75 ease-in-out group-hover:text-primary ${iconDirectionClass}`}
+          />
+        </a>
+      ) : (
+        <>{title}</>
+      )}
+    </h2>
+  )}
   <slot />
 </section>