lightnet 3.10.0 → 3.10.1

package/src/admin/types/media-item.ts

@@ -0,0 +1,8 @@
+import { z } from "astro/zod"
+
+export const mediaItemSchema = z.object({
+  commonId: z.string().nonempty(),
+  title: z.string().nonempty(),
+})
+
+export type MediaItem = z.infer<typeof mediaItemSchema>

package/src/api/media/[mediaId].ts

@@ -0,0 +1,16 @@
+import type { APIRoute, GetStaticPaths } from "astro"
+import { getCollection } from "astro:content"
+
+import { getRawMediaItem } from "../../content/get-media-items"
+
+export const getStaticPaths = (async () => {
+  const mediaItems = await getCollection("media")
+  return mediaItems.map(({ id: mediaId }) => ({ params: { mediaId } }))
+}) satisfies GetStaticPaths
+
+export const GET: APIRoute = async ({ params: { mediaId } }) => {
+  const entry = await getRawMediaItem(mediaId!)
+  return new Response(
+    JSON.stringify({ id: entry.id, content: entry.data }, null, 2),
+  )
+}

package/src/{pages/api → api}/versions.ts

@@ -1,6 +1,6 @@
 import type { APIRoute } from "astro"
 
-import pkg from "../../../package.json" assert { type: "json" }
+import pkg from "../../package.json" assert { type: "json" }
 
 export const GET: APIRoute = () => {
   return new Response(JSON.stringify({ lightnet: pkg.version }))

package/src/astro-integration/config.ts

@@ -217,6 +217,21 @@ export const configSchema = z.object({
       hideHeaderSearchIcon: z.boolean().default(false),
     })
     .optional(),
+  /**
+   * Experimental features. Subject to change with any release.
+   */
+  experimental: z
+    .object({
+      /**
+       * Configure administration interface.
+       */
+      admin: z
+        .object({
+          enabled: z.boolean().default(false),
+        })
+        .optional(),
+    })
+    .optional(),
 })
 
 export type Language = z.input<typeof languageSchema>

package/src/astro-integration/integration.ts

@@ -19,6 +19,7 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         updateConfig,
         logger,
         addMiddleware,
+        command,
       }) => {
         const config = verifySchema(
           configSchema,
@@ -46,23 +47,60 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         })
 
         injectRoute({
-          pattern: "/api/search.json",
-          entrypoint: "lightnet/pages/api/search.ts",
+          pattern: "/[locale]/media/[mediaId]",
+          entrypoint: "lightnet/pages/DetailsPageRoute.astro",
           prerender: true,
         })
 
         injectRoute({
-          pattern: "/api/versions.json",
-          entrypoint: "lightnet/pages/api/versions.ts",
+          pattern: "/api/internal/search.json",
+          entrypoint: "lightnet/api/internal/search.ts",
           prerender: true,
         })
 
         injectRoute({
-          pattern: "/[locale]/media/[mediaId]",
-          entrypoint: "lightnet/pages/DetailsPageRoute.astro",
+          pattern: "/api/versions.json",
+          entrypoint: "lightnet/api/versions.ts",
           prerender: true,
         })
 
+        if (config.experimental?.admin?.enabled) {
+          injectRoute({
+            pattern: "/api/media/[mediaId].json",
+            entrypoint: "lightnet/api/media/[mediaId].ts",
+            prerender: true,
+          })
+
+          injectRoute({
+            pattern: "/[locale]/admin",
+            entrypoint: "lightnet/admin/pages/AdminRoute.astro",
+            prerender: true,
+          })
+          injectRoute({
+            pattern: "/[locale]/admin/media/[mediaId]",
+            entrypoint: "lightnet/admin/pages/media/EditRoute.astro",
+            prerender: true,
+          })
+        }
+
+        // During local development admin ui can use
+        // this endpoints to write files.
+        if (config.experimental?.admin?.enabled && command === "dev") {
+          injectRoute({
+            pattern: "/api/internal/fs/writeText",
+            entrypoint: "lightnet/api/internal/fs/writeText.ts",
+            prerender: false,
+          })
+          // Add empty adapter to avoid warning
+          // about missing adapter.
+          // This hack might break in the future :(
+          // We could also set the "node" adapter if no
+          // adapter has been set by user.
+          if (!astroConfig.adapter) {
+            updateConfig({ adapter: {} })
+          }
+        }
+
         addMiddleware({ entrypoint: "lightnet/locals", order: "pre" })
 
         astroConfig.integrations.push(tailwind(), react())

package/src/components/CategoriesSection.astro

@@ -7,7 +7,7 @@ import { searchPagePath } from "../utils/paths"
 import CarouselSection from "./CarouselSection.astro"
 import Section, { type Props as SectionProps } from "./Section.astro"
 
-type Props = SectionProps & {
+type Props = Omit<SectionProps, "maxWidth"> & {
   layout?: "grid" | "carousel"
 }
 

package/src/components/MediaGallerySection.astro

@@ -20,7 +20,7 @@ type MediaItem = {
   }
 }
 
-type Props = SectionProps & {
+type Props = Omit<SectionProps, "maxWidth"> & {
   items: (MediaItem | undefined)[]
   layout: ItemStyle
   viewLayout?: "grid" | "carousel"

package/src/components/Toast.tsx

@@ -0,0 +1,55 @@
+import type { ReactNode } from "react"
+
+export type ToastVariant = "info" | "success" | "warning" | "error"
+
+export type ToastProps = {
+  id?: string
+  children: ReactNode
+  className?: string
+  variant?: ToastVariant
+}
+
+const variantClassName: Record<ToastVariant, string> = {
+  info: "border-slate-400 bg-white/95",
+  success: "border-emerald-500 bg-emerald-100",
+  warning: "border-amber-500 bg-amber-100",
+  error: "border-rose-500 bg-rose-100",
+}
+
+export default function Toast({
+  id,
+  children,
+  className = "",
+  variant = "info",
+}: ToastProps) {
+  const alertClasses = variantClassName[variant] ?? variantClassName.info
+  const ariaLive = variant === "error" ? "assertive" : "polite"
+  const hiddenTransform = "translateY(1.5rem)"
+  const overshootTransform = "translateY(-0.25rem)"
+  const visibleTransform = "translateY(0)"
+
+  return (
+    <div
+      id={id}
+      className={`pointer-events-none fixed bottom-4 end-0 flex justify-end px-4 opacity-0 transition duration-300 will-change-transform ${className}`}
+      data-toast="true"
+      data-variant={variant}
+      data-toast-hidden-transform={hiddenTransform}
+      data-toast-overshoot-transform={overshootTransform}
+      data-toast-visible-transform={visibleTransform}
+      role="status"
+      aria-live={ariaLive}
+      style={{
+        transform: hiddenTransform,
+        transitionProperty: "opacity, transform",
+        transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+      }}
+    >
+      <div
+        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-2xl border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}

package/src/components/showToast.ts

@@ -0,0 +1,61 @@
+const DEFAULT_DURATION_MS = 3000
+const TIMEOUT_DATA_KEY = "toastHideTimeoutId"
+const DEFAULT_HIDDEN_TRANSFORM = "translateY(1.5rem)"
+const DEFAULT_VISIBLE_TRANSFORM = "translateY(0)"
+const DEFAULT_OVERSHOOT_TRANSFORM = "translateY(-0.25rem)"
+
+type ShowToastOptions = {
+  duration?: number
+}
+
+/**
+ * Shows a toast element by toggling its opacity and schedules it to hide again.
+ * Works with markup rendered by the Toast component but can target any element.
+ */
+export function showToast(
+  element: HTMLElement,
+  options: ShowToastOptions = {},
+) {
+  const duration = options.duration ?? DEFAULT_DURATION_MS
+  const existingTimeoutId = element.dataset[TIMEOUT_DATA_KEY]
+  const hiddenTransform =
+    element.dataset.toastHiddenTransform ?? DEFAULT_HIDDEN_TRANSFORM
+  const overshootTransform =
+    element.dataset.toastOvershootTransform ?? DEFAULT_OVERSHOOT_TRANSFORM
+  const visibleTransform =
+    element.dataset.toastVisibleTransform ?? DEFAULT_VISIBLE_TRANSFORM
+
+  if (existingTimeoutId) {
+    window.clearTimeout(Number(existingTimeoutId))
+  }
+
+  element.style.opacity = "100%"
+  element.style.transform = overshootTransform
+  element.dataset.toastVisible = "true"
+
+  const settleIntoPlace = () => {
+    element.style.transform = visibleTransform
+  }
+
+  window.requestAnimationFrame(() => {
+    window.requestAnimationFrame(settleIntoPlace)
+  })
+
+  const timeoutId = window.setTimeout(() => {
+    element.style.opacity = "0%"
+    element.style.transform = hiddenTransform
+    element.dataset.toastVisible = "false"
+    delete element.dataset[TIMEOUT_DATA_KEY]
+  }, duration)
+
+  element.dataset[TIMEOUT_DATA_KEY] = String(timeoutId)
+}
+
+export function showToastById(id: string, options?: ShowToastOptions) {
+  const element = document.getElementById(id)
+  if (!element) {
+    return
+  }
+
+  showToast(element as HTMLElement, options)
+}

package/src/content/astro-image.ts

@@ -1,17 +1,4 @@
-import { type ImageFunction, z } from "astro:content"
-
-/**
- * We use this function to make sure decap's relative paths will resolve correctly
- * with astro content.
- *
- * @param image astro content image function
- * @returns image property
- */
-export const astroImage = (image: ImageFunction) =>
-  z
-    .string()
-    .transform((path) => (path.startsWith("./") ? path : `./${path}`))
-    .pipe(image())
+import { z } from "astro/zod"
 
 /**
  * The Astro image function resolves to this schema.

package/src/content/content-schema.ts

@@ -3,7 +3,7 @@ import { z } from "astro/zod"
 import type { SchemaContext } from "astro:content"
 import { defineCollection, reference } from "astro:content"
 
-import { astroImage, imageSchema } from "./astro-image"
+import { imageSchema } from "./astro-image"
 
 /**
  * Category Schema
@@ -172,12 +172,12 @@ export const mediaItemSchema = z.object({
  */
 export const createMediaItemSchema = ({ image }: SchemaContext) =>
   mediaItemSchema.extend({
-    image: astroImage(image),
+    image: image(),
   })
 
 export const createCategorySchema = ({ image }: SchemaContext) =>
   categorySchema.extend({
-    image: astroImage(image).optional(),
+    image: image().optional(),
   })
 
 /**
@@ -315,6 +315,13 @@ export const LIGHTNET_COLLECTIONS = {
     }),
     schema: mediaTypeSchema,
   }),
+  "internal-media-image-path": defineCollection({
+    loader: glob({
+      pattern: "*.json",
+      base: "./src/content/media",
+    }),
+    schema: z.object({ image: z.string() }),
+  }),
 }
 
 export const mediaItemEntrySchema = z.object({

package/src/content/get-media-items.ts

@@ -1,7 +1,7 @@
 import { getCollection, getEntry } from "astro:content"
 
 import { verifySchemaAsync } from "../utils/verify-schema"
-import { mediaItemEntrySchema } from "./content-schema"
+import { type MediaItemEntry, mediaItemEntrySchema } from "./content-schema"
 
 /**
  * Internal API to get media items. Since this package is a Astro integration
@@ -26,3 +26,48 @@ const prepareItem = async (item: unknown) => {
     (id) => `Fix these issues inside "src/content/media/${id}.json":`,
   )
 }
+
+/**
+ * Revert media items like they it is stored in the
+ * content collection folder.
+ */
+export const getRawMediaItem = async (id: string) => {
+  const item = await getMediaItem(id)
+  return revertMediaItemEntry(item)
+}
+
+/**
+ * Revert media items like they are stored in the
+ * content collection folder.
+ */
+export const getRawMediaItems = async () => {
+  const mediaItems = await getMediaItems()
+  return Promise.all(mediaItems.map(revertMediaItemEntry))
+}
+
+/**
+ * Returns the media item like it is stored in the content collection json.
+ * We need to revert Astro's modifications to references and images.
+ *
+ * @param mediaItem media item parsed by Astro
+ * @returns media item like before parsing
+ */
+async function revertMediaItemEntry({ id, data: mediaItem }: MediaItemEntry) {
+  const type = mediaItem.type.id
+  const categories = mediaItem.categories?.map((category) => category.id)
+  const collections = mediaItem.collections?.map((collection) => ({
+    ...collection,
+    collection: collection.collection.id,
+  }))
+  const image = (await getEntry("internal-media-image-path", id))?.data.image
+  return {
+    id,
+    data: {
+      ...mediaItem,
+      type,
+      categories,
+      collections,
+      image,
+    },
+  }
+}

package/src/i18n/translations.ts

@@ -1,5 +1,10 @@
 import YAML from "yaml"
 
+import {
+  type AdminTranslationKey,
+  builtInAdminTranslations,
+} from "../admin/i18n/translations"
+
 const builtInTranslations = {
   ar: () => import("./translations/ar.yml?raw"),
   bn: () => import("./translations/bn.yml?raw"),
@@ -32,23 +37,30 @@ const userTranslations = Object.fromEntries(
 )
 
 export const loadTranslations = async (bcp47: string) => ({
-  ...(await loadBuiltInTranslations(bcp47)),
+  ...(await loadBuiltInTranslations(builtInTranslations, bcp47)),
+  ...(await loadBuiltInTranslations(builtInAdminTranslations, bcp47)),
   ...(await loadUserTranslations(bcp47)),
 })
 
-function isBuiltInLanguage(bcp47: string): bcp47 is BuiltInLanguage {
-  return Object.hasOwn(builtInTranslations, bcp47)
+function hasTranslations(
+  translationMap: Record<string, unknown>,
+  bcp47: string,
+): bcp47 is BuiltInLanguage {
+  return Object.hasOwn(translationMap, bcp47)
 }
 
-export const loadBuiltInTranslations = async (bcp47: string) => {
-  if (!isBuiltInLanguage(bcp47)) {
+const loadBuiltInTranslations = async (
+  translationMap: Record<string, () => Promise<typeof import("*?raw")>>,
+  bcp47: string,
+) => {
+  if (!hasTranslations(translationMap, bcp47)) {
     return {}
   }
-  const yml = (await builtInTranslations[bcp47]()).default
+  const yml = (await translationMap[bcp47]()).default
   return YAML.parse(yml)
 }
 
-export const loadUserTranslations = async (bcp47: string) => {
+const loadUserTranslations = async (bcp47: string) => {
   if (!userTranslations[bcp47]) {
     return {}
   }
@@ -82,3 +94,4 @@ export type LightNetTranslationKey =
   | "ln.search.title"
   | "ln.share.url-copied-to-clipboard"
   | "ln.footer.powered-by-lightnet"
+  | AdminTranslationKey

package/src/layouts/Page.astro

@@ -31,7 +31,7 @@ const language = resolveLanguage(currentLocale)
     <title>{title ? `${title} | ${configTitle}` : configTitle}</title>
     {description && <meta name="description" content={description} />}
     {config.manifest && <link rel="manifest" href={config.manifest} />}
-    <link rel="prefetch" href="/api/search.json" />
+    <link rel="prefetch" href="/api/internal/search.json" />
     <Favicon />
     <ViewTransition />
   </head>

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

@@ -1,6 +1,7 @@
 ---
 import Authors from "./main-details/Authors.astro"
 import CoverImage from "./main-details/CoverImage.astro"
+import EditButton from "./main-details/EditButton.astro"
 import ShareButton from "./main-details/ShareButton.astro"
 import Title from "./main-details/Title.astro"
 
@@ -19,7 +20,10 @@ const { mediaId, imageSize } = Astro.props
   <div class="flex w-full grow flex-col items-center sm:items-start">
     <Title className="text-center sm:text-start" mediaId={mediaId} />
     <Authors className="mt-2" mediaId={mediaId} />
-    <ShareButton className="mt-3" />
+    <div class="mt-4 flex gap-6">
+      <ShareButton />
+      <EditButton mediaId={mediaId} />
+    </div>
     <slot />
   </div>
 </div>

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

@@ -2,6 +2,7 @@
 import VideoPlayer from "../../../components/VideoPlayer.astro"
 import { getMediaItem } from "../../../content/get-media-items"
 import Authors from "./main-details/Authors.astro"
+import EditButton from "./main-details/EditButton.astro"
 import ShareButton from "./main-details/ShareButton.astro"
 import Title from "./main-details/Title.astro"
 
@@ -26,5 +27,8 @@ const item = await getMediaItem(mediaId)
 >
   <Title mediaId={mediaId} />
   <Authors mediaId={mediaId} />
-  <ShareButton className="mt-3" />
+  <div class="mt-4 flex gap-6">
+    <ShareButton />
+    <EditButton mediaId={mediaId} />
+  </div>
 </div>

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

@@ -0,0 +1,30 @@
+---
+import config from "virtual:lightnet/config"
+
+import Icon from "../../../../components/Icon"
+
+interface Props {
+  mediaId: string
+}
+
+const { mediaId } = Astro.props
+---
+
+<a
+  class="hidden cursor-pointer items-center gap-2 font-bold text-gray-700 underline"
+  id="edit-btn"
+  data-admin-enabled={config.experimental?.admin?.enabled}
+  href={`/${Astro.currentLocale}/admin/media/${mediaId}`}
+  ><Icon className="mdi--square-edit-outline" ariaLabel="" />
+  {Astro.locals.i18n.t("ln.admin.edit")}</a
+>
+<script>
+  const btn: HTMLAnchorElement | null = document.querySelector("#edit-btn")
+  const showEditButton =
+    btn?.dataset.adminEnabled === "true" &&
+    (import.meta.env.DEV || localStorage.getItem("ln-admin-enabled") === "true")
+  if (showEditButton) {
+    btn?.classList.remove("hidden")
+    btn?.classList.add("flex")
+  }
+</script>

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

@@ -1,5 +1,6 @@
 ---
 import Icon from "../../../../components/Icon"
+import Toast from "../../../../components/Toast"
 
 interface Props {
   className?: string
@@ -13,16 +14,15 @@ interface Props {
   ><Icon className="mdi--share" ariaLabel="" />
   {Astro.locals.i18n.t("ln.details.share")}</button
 >
-<div
-  id="share-success"
-  class="dy-toast pointer-events-none opacity-0 transition-opacity duration-300"
->
-  <div class="dy-alert dy-alert-success">
-    <span>{Astro.locals.i18n.t("ln.share.url-copied-to-clipboard")}</span>
-  </div>
-</div>
+<Toast id="share-success" variant="success">
+  {Astro.locals.i18n.t("ln.share.url-copied-to-clipboard")}
+</Toast>
 <script>
+  import { showToastById } from "../../../../components/showToast"
+
   const btn = document.querySelector("#share-btn")
+  const toastId = "share-success"
+
   btn?.addEventListener("click", () => {
     if (navigator.share) {
       navigator
@@ -34,11 +34,7 @@ interface Props {
       navigator.clipboard
         .writeText(window.location.href)
         .then(() => {
-          const toast = document.querySelector<HTMLElement>("#share-success")!
-          toast.style.opacity = "100%"
-          setTimeout(() => {
-            toast.style.opacity = "0%"
-          }, 3000)
+          showToastById(toastId)
         })
         .catch((error) => console.log("Error copying URL to clipboard:", error))
     }

package/src/pages/{api → search-page/api}/search.ts

@@ -1,9 +1,9 @@
 import type { APIRoute } from "astro"
 import { getImage } from "astro:assets"
 
-import type { MediaItemEntry } from "../../content/content-schema"
-import { getMediaItems } from "../../content/get-media-items"
-import { markdownToText } from "../../utils/markdown"
+import type { MediaItemEntry } from "../../../content/content-schema"
+import { getMediaItems } from "../../../content/get-media-items"
+import { markdownToText } from "../../../utils/markdown"
 import type { SearchItem } from "./search-response"
 
 export const GET: APIRoute = async () => {

package/src/pages/search-page/components/SearchListItem.tsx

@@ -1,7 +1,7 @@
 import CoverImageDecorator from "../../../components/CoverImageDecorator"
 import Icon from "../../../components/Icon"
 import { detailsPagePath } from "../../../utils/paths"
-import type { SearchItem } from "../../api/search-response"
+import type { SearchItem } from "../api/search-response"
 
 export type MediaType = {
   name: string

package/src/pages/search-page/hooks/use-search.ts

@@ -1,7 +1,7 @@
 import Fuse from "fuse.js"
 import { useEffect, useMemo, useRef, useState } from "react"
 
-import type { SearchItem, SearchResponse } from "../../api/search-response"
+import type { SearchItem, SearchResponse } from "../api/search-response"
 import { observeSearchQuery, type SearchQuery } from "../utils/search-query"
 
 interface Context {
@@ -28,10 +28,10 @@ export function useSearch({ categories, mediaTypes, languages }: Context) {
     })
     const fetchData = async () => {
       try {
-        const response = await fetch("/api/search.json")
+        const response = await fetch("/api/internal/search.json")
         if (!response.ok) {
           throw new Error(
-            "Was not able to load search results from /api/search.json.",
+            "Was not able to load search results from /api/internal/search.json.",
           )
         }
         const { items }: SearchResponse = await response.json()

package/tailwind.config.ts

@@ -35,6 +35,7 @@ export function lightnetStyles({
             secondary: primary,
             accent: primary,
             neutral: "#030712",
+            error: "#9f1239",
             "base-100": "#f9fafb",
 
             "--rounded-box": "0.375rem", // border radius rounded-box utility class, used in card and other large boxes