lightnet 3.10.0 → 3.10.2

package/src/admin/pages/media/file-system.ts

@@ -0,0 +1,37 @@
+export const writeText = (path: string, body: string) => {
+  return fetch(
+    `/api/internal/fs/writeText?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": resolveContentType(path) },
+      body,
+    },
+  )
+}
+
+export const writeJson = async (path: string, object: unknown) => {
+  return writeText(path, JSON.stringify(sortObject(object), null, 2))
+}
+
+const resolveContentType = (path: string) => {
+  const normalizedPath = path.trim().toLowerCase()
+  return normalizedPath.endsWith(".json")
+    ? "application/json"
+    : "text/plain; charset=utf-8"
+}
+
+const sortObject = (value: unknown): unknown => {
+  if (Array.isArray(value)) {
+    return value.map(sortObject)
+  }
+
+  if (value && typeof value === "object") {
+    const entries = Object.entries(value as Record<string, unknown>)
+      .sort(([a], [b]) => (a > b ? 1 : a < b ? -1 : 0))
+      .map(([key, nestedValue]) => [key, sortObject(nestedValue)])
+
+    return Object.fromEntries(entries)
+  }
+
+  return value
+}

package/src/admin/pages/media/media-item-store.ts

@@ -0,0 +1,11 @@
+import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { writeJson } from "./file-system"
+
+export const loadMediaItem = (id: string) =>
+  fetch(`/api/media/${id}.json`)
+    .then((response) => response.json())
+    .then((json) => mediaItemSchema.parse(json.content))
+
+export const updateMediaItem = async (id: string, item: MediaItem) => {
+  return writeJson(`/src/content/media/${id}.json`, item)
+}

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

@@ -0,0 +1,10 @@
+import { z } from "astro/zod"
+
+const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
+
+export const mediaItemSchema = z.object({
+  commonId: z.string().nonempty(NON_EMPTY_STRING),
+  title: z.string().nonempty(NON_EMPTY_STRING),
+})
+
+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/locals.d.ts

@@ -3,36 +3,43 @@ declare namespace App {
     /**
      * Provides internationalization helpers.
      */
-    i18n: {
-      /**
-       * Translate a key to the language of the current locale.
-       *
-       * @param TranslationKey to be translated.
-       */
-      t: import("./translate").TranslateFn
+    i18n: I18n
+  }
+}
 
-      /**
-       *  The current locale or the default locale if the current locale is not available.
-       *
-       *  In comparison to Astro.currentLocale this will always return a locale.
-       *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
-       */
-      currentLocale: string
+type I18n = {
+  /**
+   * Translate a key to the language of the current locale.
+   *
+   * @param TranslationKey to be translated.
+   */
+  t: import("./translate").TranslateFn
 
-      /**
-       * The current text direction. Left-to-right or right-to-left.
-       */
-      direction: "ltr" | "rtl"
+  /**
+   *  The current locale or the default locale if the current locale is not available.
+   *
+   *  In comparison to Astro.currentLocale this will always return a locale.
+   *  Use Astro.currentLocale if you want to know the locale that is included in the current path.
+   */
+  currentLocale: string
 
-      /**
-       * The default locale as defined in the project configuration.
-       */
-      defaultLocale: string
+  /**
+   * The current text direction. Left-to-right or right-to-left.
+   */
+  direction: "ltr" | "rtl"
 
-      /**
-       * The available locales as defined in the project configuration.
-       */
-      locales: string[]
-    }
-  }
+  /**
+   * The default locale as defined in the project configuration.
+   */
+  defaultLocale: string
+
+  /**
+   * The available locales as defined in the project configuration.
+   */
+  locales: string[]
+
+  /**
+   * All available translation keys.
+   */
+  translationKeys: string[]
 }

package/src/i18n/locals.ts

@@ -4,7 +4,7 @@ import config from "virtual:lightnet/config"
 import { resolveDefaultLocale } from "./resolve-default-locale"
 import { resolveLanguage } from "./resolve-language"
 import { resolveLocales } from "./resolve-locales"
-import { useTranslate } from "./translate"
+import { translationKeys, useTranslate } from "./translate"
 
 export const onRequest: MiddlewareHandler = (
   { locals, currentLocale: astroCurrentLocale },
@@ -22,6 +22,7 @@ export const onRequest: MiddlewareHandler = (
       defaultLocale,
       direction,
       locales,
+      translationKeys,
     }
   }
   return next()

package/src/i18n/react/i18n-context.ts

@@ -0,0 +1,32 @@
+import { createContext } from "react"
+
+export type I18n = {
+  t: (key: string) => string
+  currentLocale: string
+  direction: "rtl" | "ltr"
+}
+
+export type I18nConfig = Omit<I18n, "t"> & {
+  translations: Record<string, string>
+}
+
+export const I18nContext = createContext<I18n | undefined>(undefined)
+
+/**
+ * Creates the runtime i18n helpers given a prepared configuration.
+ * Wraps the raw translation dictionary with a lookup that throws on missing keys.
+ */
+export const createI18n = ({
+  translations,
+  currentLocale,
+  direction,
+}: I18nConfig) => {
+  const t = (key: string) => {
+    const translated = translations[key]
+    if (!translated) {
+      throw new Error(`Missing translation for key ${key}`)
+    }
+    return translated
+  }
+  return { t, currentLocale, direction }
+}

package/src/i18n/react/prepare-i18n-config.ts

@@ -0,0 +1,31 @@
+/**
+ * Prepares the configuration object passed from an Astro page to the React i18n context.
+ * Resolves every requested translation key (supporting wildcard suffixes like `ln.dashboard.*`)
+ * so the React island receives only the strings it needs.
+ *
+ * @param i18n i18n helpers sourced from `Astro.locals`.
+ * @param translationKeys Specific keys (or wildcard groups) required by the React component.
+ * @returns A configuration object containing the resolved config.
+ */
+export const prepareI18nConfig = (
+  { t, translationKeys: allKeys, currentLocale, direction }: I18n,
+  translationKeys: string[],
+) => {
+  const resolveTranslations = (key: string) => {
+    if (key.endsWith("*")) {
+      const keyPrefix = key.slice(0, -1)
+      return allKeys
+        .filter((k) => k.startsWith(keyPrefix))
+        .map((k) => [k, t(k)])
+    }
+    return [[key, t(key)]]
+  }
+
+  return {
+    translations: Object.fromEntries(
+      translationKeys.flatMap(resolveTranslations),
+    ) as Record<string, string>,
+    currentLocale,
+    direction,
+  }
+}

package/src/i18n/react/useI18n.ts

@@ -0,0 +1,15 @@
+import { useContext } from "react"
+
+import { I18nContext } from "./i18n-context"
+
+/**
+ * Retrieves the current i18n helpers from context.
+ * Must be called inside a React tree wrapped with `I18nContext.Provider`, otherwise throws.
+ */
+export const useI18n = () => {
+  const i18n = useContext(I18nContext)
+  if (!i18n) {
+    throw new Error("No i18n context has been provided")
+  }
+  return i18n
+}

package/src/i18n/translate.ts

@@ -22,18 +22,30 @@ const languageCodes = [
 ]
 const defaultLocale = resolveDefaultLocale(config)
 
-await i18next.init({
+const translations = await prepareI18nextTranslations()
+export const translationKeys = [
+  ...new Set(
+    Object.values(translations)
+      .map(({ translation }) => translation)
+      .flatMap((oneLanguageTranslations) =>
+        Object.keys(oneLanguageTranslations),
+      ),
+  ),
+]
+
+const i18n = i18next.createInstance()
+await i18n.init({
   lng: defaultLocale,
   // don't use name spacing
   nsSeparator: false,
   // only use flat keys
   keySeparator: false,
-  resources: await prepareI18nextTranslations(),
+  resources: translations,
 })
 
 export function useTranslate(bcp47: string | undefined): TranslateFn {
   const resolvedLocale = bcp47 ?? defaultLocale
-  const t = i18next.getFixedT<TranslationKey>(resolvedLocale)
+  const t = i18n.getFixedT<TranslationKey>(resolvedLocale)
   const fallbackLng = [
     ...resolveLanguage(resolvedLocale).fallbackLanguages,
     defaultLocale,