lightnet 3.9.1 → 3.10.1

package/src/admin/pages/media/EditForm.tsx

@@ -0,0 +1,58 @@
+import { revalidateLogic } from "@tanstack/react-form"
+
+import { showToastById } from "../../../components/showToast"
+import Toast from "../../../components/Toast"
+import { useAppForm } from "../../components/form"
+import { type MediaItem, mediaItemSchema } from "../../types/media-item"
+import { updateMediaItem } from "./media-item-store"
+
+export default function EditForm({
+  mediaId,
+  mediaItem,
+}: {
+  mediaId: string
+  mediaItem: MediaItem
+}) {
+  const form = useAppForm({
+    defaultValues: mediaItem,
+    validators: {
+      onDynamic: mediaItemSchema,
+    },
+    validationLogic: revalidateLogic({
+      mode: "blur",
+      modeAfterSubmission: "change",
+    }),
+    onSubmit: async ({ value }) => {
+      await updateMediaItem(mediaId, { ...mediaItem, ...value })
+    },
+    onSubmitInvalid: () => {
+      showToastById("invalid-form-data-toast")
+    },
+  })
+
+  return (
+    <form
+      onSubmit={(e) => {
+        e.preventDefault()
+        form.handleSubmit()
+      }}
+      className="flex flex-col items-start gap-4"
+    >
+      <form.AppField
+        name="commonId"
+        children={(field) => <field.TextField label="Common ID" />}
+      />
+      <form.AppField
+        name="title"
+        children={(field) => <field.TextField label="Title" />}
+      />
+      <form.AppForm>
+        <form.SubmitButton />
+        <Toast id="invalid-form-data-toast" variant="error">
+          <div className="font-bold text-gray-700">Invalid form data</div>
+          Check the fields and try again.
+        </Toast>
+      </form.AppForm>
+    </form>
+  )
+}

package/src/admin/pages/media/EditRoute.astro

@@ -0,0 +1,33 @@
+---
+import type { GetStaticPaths } from "astro"
+import { getCollection } from "astro:content"
+import config from "virtual:lightnet/config"
+
+import { getRawMediaItem } from "../../../content/get-media-items"
+import { resolveLocales } from "../../../i18n/resolve-locales"
+import Page from "../../../layouts/Page.astro"
+import EditForm from "./EditForm"
+
+export const getStaticPaths = (async () => {
+  const mediaItems = await getCollection("media")
+  return resolveLocales(config).flatMap((locale) =>
+    mediaItems.map(({ id: mediaId }) => ({ params: { mediaId, locale } })),
+  )
+}) satisfies GetStaticPaths
+
+const { mediaId } = Astro.params
+const mediaItemEntry = await getRawMediaItem(mediaId)
+---
+
+<Page>
+  <div class="mx-auto max-w-screen-lg px-4 pt-12 md:px-8">
+    <a
+      class="underline"
+      href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
+      >Back to details page</a
+    >
+    <h1 class="mb-4 mt-8 text-lg">Edit media item</h1>
+
+    <EditForm mediaId={mediaId} mediaItem={mediaItemEntry.data} client:load />
+  </div>
+</Page>

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,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

@@ -132,6 +132,10 @@ export const configSchema = z.object({
    * Favicons for your site.
    */
   favicon: faviconSchema.array().optional(),
+  /**
+   * Enable displaying a “Powered by LightNet” link in your site’s footer.
+   */
+  credits: z.boolean().default(false),
   /**
    * Link to manifest file within public/ folder
    */
@@ -213,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/ar.yml

@@ -22,3 +22,4 @@ ln.details.download: تنزيل
 ln.share.url-copied-to-clipboard: تم نسخ الرابط إلى الحافظة
 ln.404.page-not-found: الصفحة غير موجودة
 ln.404.go-to-the-home-page: العودة إلى الصفحة الرئيسية
+ln.footer.powered-by-lightnet: مدعوم من LightNet

package/src/i18n/translations/bn.yml

@@ -22,3 +22,4 @@ ln.details.download: ডাউনলোড করুন
 ln.share.url-copied-to-clipboard: লিঙ্ক ক্লিপবোর্ডে কপি হয়েছে
 ln.404.page-not-found: পৃষ্ঠা পাওয়া যায়নি
 ln.404.go-to-the-home-page: হোম পৃষ্ঠায় যান
+ln.footer.powered-by-lightnet: LightNet দ্বারা পরিচালিত

package/src/i18n/translations/de.yml

@@ -22,3 +22,4 @@ ln.search.no-results: Keine Ergebnisse
 ln.search.placeholder: Suche Medien
 ln.search.title: Suche
 ln.share.url-copied-to-clipboard: Link in die Zwischenablage kopiert
+ln.footer.powered-by-lightnet: Ermöglicht durch LightNet

package/src/i18n/translations/en.yml

@@ -143,3 +143,6 @@ ln.404.page-not-found: Page not found
 # English: Go to Home page
 # Used on: https://sk8-ministries.pages.dev/unexisting-path
 ln.404.go-to-the-home-page: Go to Home page
+
+# Footer text to give credits to LightNet
+ln.footer.powered-by-lightnet: Powered by LightNet

package/src/i18n/translations/es.yml

@@ -22,3 +22,4 @@ ln.details.download: Descargar
 ln.share.url-copied-to-clipboard: Enlace copiado al portapapeles
 ln.404.page-not-found: Página no encontrada
 ln.404.go-to-the-home-page: Ir a la página de inicio
+ln.footer.powered-by-lightnet: Impulsado por LightNet

package/src/i18n/translations/fi.yml

@@ -22,3 +22,4 @@ ln.details.download: Lataa
 ln.share.url-copied-to-clipboard: Linkki kopioitu leikepöydälle
 ln.404.page-not-found: Sivua ei löytynyt
 ln.404.go-to-the-home-page: Palaa etusivulle
+ln.footer.powered-by-lightnet: Toimii LightNet-teknologialla

package/src/i18n/translations/fr.yml

@@ -22,3 +22,4 @@ ln.details.download: Télécharger
 ln.share.url-copied-to-clipboard: Lien copié dans le presse-papiers
 ln.404.page-not-found: Page non trouvée
 ln.404.go-to-the-home-page: Aller à la page d’accueil
+ln.footer.powered-by-lightnet: Propulsé par LightNet

package/src/i18n/translations/hi.yml

@@ -22,3 +22,4 @@ ln.details.download: डाउनलोड करें
 ln.share.url-copied-to-clipboard: लिंक क्लिपबोर्ड पर कॉपी हो गया है
 ln.404.page-not-found: पृष्ठ नहीं मिला
 ln.404.go-to-the-home-page: मुखपृष्ठ पर जाएँ
+ln.footer.powered-by-lightnet: LightNet द्वारा संचालित

package/src/i18n/translations/kk.yml

@@ -20,3 +20,4 @@ ln.details.download: Жүктеу
 ln.share.url-copied-to-clipboard: Жүктеме көшірілді
 ln.404.page-not-found: Ештеңе табылмады
 ln.404.go-to-the-home-page: Бастапқы бетке өту
+ln.footer.powered-by-lightnet: LightNet платформасында жұмыс істейді

package/src/i18n/translations/pt.yml

@@ -22,3 +22,4 @@ ln.details.download: Transferir
 ln.share.url-copied-to-clipboard: Ligação copiada para a área de transferência
 ln.404.page-not-found: Página não encontrada
 ln.404.go-to-the-home-page: Ir para a página inicial
+ln.footer.powered-by-lightnet: Com tecnologia LightNet

package/src/i18n/translations/ru.yml

@@ -22,3 +22,4 @@ ln.details.download: Скачать
 ln.share.url-copied-to-clipboard: Ссылка скопированa в буфер
 ln.404.page-not-found: Страница не найдена
 ln.404.go-to-the-home-page: Перейти на главную страницу
+ln.footer.powered-by-lightnet: Работает на платформе LightNet

package/src/i18n/translations/uk.yml

@@ -22,3 +22,4 @@ ln.details.download: Завантажити
 ln.share.url-copied-to-clipboard: Посилання скопійовано до буферу обміну
 ln.404.page-not-found: Сторінку не знайдено
 ln.404.go-to-the-home-page: Перейти на Головну сторінку
+ln.footer.powered-by-lightnet: Працює на платформі LightNet

package/src/i18n/translations/zh.yml

@@ -22,3 +22,4 @@ ln.details.download: 下载
 ln.share.url-copied-to-clipboard: 链接已复制到剪贴板
 ln.404.page-not-found: 页面未找到
 ln.404.go-to-the-home-page: 返回首页
+ln.footer.powered-by-lightnet: 由 LightNet 提供支持