lightnet 3.10.2 → 3.10.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # lightnet
 
+## 3.10.3
+
+### Patch Changes
+
+- [#327](https://github.com/LightNetDev/LightNet/pull/327) [`9f1e468`](https://github.com/LightNetDev/LightNet/commit/9f1e468cc296e62788586a3f3c6f245c8bc0cec9) Thanks [@smn-cds](https://github.com/smn-cds)! - Gracefully handle missing translations in React components to avoid runtime crashes.
+
 ## 3.10.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": "3.10.2",
+  "version": "3.10.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -34,7 +34,7 @@
     "./api/internal/search.ts": "./src/pages/search-page/api/search.ts",
     "./api/versions.ts": "./src/api/versions.ts",
     "./api/media/[mediaId].ts": "./src/api/media/[mediaId].ts",
-    "./api/internal/fs/writeText.ts": "./src/admin/api/fs/writeText.ts",
+    "./api/internal/fs/write-file.ts": "./src/admin/api/fs/write-file.ts",
     "./admin/pages/AdminRoute.astro": "./src/admin/pages/AdminRoute.astro",
     "./admin/pages/media/EditRoute.astro": "./src/admin/pages/media/EditRoute.astro"
   },

package/src/admin/api/fs/{writeText.ts → write-file.ts}

@@ -1,5 +1,7 @@
-import { mkdir, rename, rm, writeFile } from "node:fs/promises"
+import { createWriteStream } from "node:fs"
+import { mkdir, rename, rm } from "node:fs/promises"
 import { dirname, isAbsolute, relative, resolve } from "node:path"
+import { Writable } from "node:stream"
 import { fileURLToPath } from "node:url"
 
 import type { APIRoute } from "astro"
@@ -26,16 +28,17 @@ export const POST: APIRoute = async ({ request }) => {
   ) {
     throw new Error("Path escapes project root.")
   }
+  const { body } = request
+  if (!body) {
+    throw new Error("Request body missing.")
+  }
 
   const targetDir = dirname(targetPath)
   await mkdir(targetDir, { recursive: true })
 
-  const body = await request.text()
-  const timestamp = Date.now()
-  const tmpPath = `${targetPath}.tmp-${timestamp}`
+  const tmpPath = `${targetPath}.tmp-${Date.now()}`
   try {
-    const tmpPath = `${targetPath}.tmp-${Date.now()}`
-    await writeFile(tmpPath, body, "utf-8")
+    await body.pipeTo(Writable.toWeb(createWriteStream(tmpPath)))
     await rename(tmpPath, targetPath)
   } finally {
     await rm(tmpPath, { force: true }).catch(() => {})

package/src/admin/components/form/Select.tsx

@@ -0,0 +1,39 @@
+import { useI18n } from "../../../i18n/react/useI18n"
+import { FieldErrors } from "./atoms/FieldErrors"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldContext } from "./form-context"
+
+export default function Select({
+  label,
+  hint,
+  options,
+}: {
+  label: string
+  hint?: string
+  options: { id: string; label?: string }[]
+}) {
+  const field = useFieldContext<string>()
+  const { t } = useI18n()
+  return (
+    <label className="dy-form-control w-full">
+      <Label label={label} />
+      <select
+        id={field.name}
+        name={field.name}
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
+        onBlur={field.handleBlur}
+        className={`dy-select dy-select-bordered ${field.state.meta.errors.length ? "dy-select-error" : ""}"`}
+      >
+        {options.map(({ id, label }) => (
+          <option key={id} value={id}>
+            {label ? t(label) : id}
+          </option>
+        ))}
+      </select>
+      <FieldErrors meta={field.state.meta} />
+      <Hint hint={hint} />
+    </label>
+  )
+}

package/src/admin/components/form/TextInput.tsx

@@ -0,0 +1,34 @@
+import { FieldErrors } from "./atoms/FieldErrors"
+import Hint from "./atoms/Hint"
+import Label from "./atoms/Label"
+import { useFieldContext } from "./form-context"
+
+export default function TextInput({
+  label,
+  hint,
+  type = "text",
+}: {
+  label: string
+  hint?: string
+  type?: "text" | "date"
+}) {
+  const field = useFieldContext<string>()
+  return (
+    <>
+      <label className="dy-form-control w-full">
+        <Label label={label} />
+        <input
+          id={field.name}
+          name={field.name}
+          type={type}
+          value={field.state.value}
+          onChange={(e) => field.handleChange(e.target.value)}
+          onBlur={field.handleBlur}
+          className={`dy-input dy-input-bordered ${field.state.meta.errors.length ? "dy-input-error" : ""}`}
+        />
+        <FieldErrors meta={field.state.meta} />
+        <Hint hint={hint} />
+      </label>
+    </>
+  )
+}

package/src/admin/components/form/{FieldErrors.tsx → atoms/FieldErrors.tsx}

@@ -1,6 +1,6 @@
 import type { AnyFieldMeta } from "@tanstack/react-form"
 
-import { useI18n } from "../../../i18n/react/useI18n"
+import { useI18n } from "../../../../i18n/react/useI18n"
 
 type FieldErrorsProps = {
   meta: AnyFieldMeta

package/src/admin/components/form/atoms/Hint.tsx

@@ -0,0 +1,10 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Hint({ hint }: { hint?: string }) {
+  const { t } = useI18n()
+  return (
+    <div className="flex h-8 w-full items-center justify-end">
+      {hint && <span className="dy-label-text-alt">{t(hint)}</span>}
+    </div>
+  )
+}

package/src/admin/components/form/atoms/Label.tsx

@@ -0,0 +1,12 @@
+import { useI18n } from "../../../../i18n/react/useI18n"
+
+export default function Label({ label }: { label: string }) {
+  const { t } = useI18n()
+  return (
+    <div className="dy-label">
+      <span className="text-sm font-bold uppercase text-gray-600">
+        {t(label)}
+      </span>
+    </div>
+  )
+}

package/src/admin/components/form/index.ts

@@ -1,12 +1,14 @@
 import { createFormHook } from "@tanstack/react-form"
 
 import { fieldContext, formContext } from "./form-context"
+import Select from "./Select"
 import SubmitButton from "./SubmitButton"
-import TextField from "./TextField"
+import TextInput from "./TextInput"
 
 export const { useAppForm, withForm } = createFormHook({
   fieldComponents: {
-    TextField,
+    TextInput,
+    Select,
   },
   formComponents: {
     SubmitButton,

package/src/admin/i18n/translations/en.yml

@@ -6,6 +6,11 @@ ln.admin.edit-media-item: Edit media item
 ln.admin.back-to-details-page: Back to details page
 ln.admin.title: Title
 ln.admin.common-id: Common ID
+ln.admin.created-on: Created on
+ln.admin.created-on-hint: When has this item been created on this library?
+ln.admin.common-id-hint: The english title, all lowercase, words separated with hyphens.
 ln.admin.toast.invalid-data.title: Invalid form data
 ln.admin.toast.invalid-data.hint: Check the fields and try again.
 ln.admin.errors.non-empty-string: String must contain at least 1 character(s)
+ln.admin.errors.invalid-date: Invalid date
+ln.admin.errors.required: Required field

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

@@ -15,13 +15,17 @@ export default function EditForm({
   mediaId,
   mediaItem,
   i18nConfig,
+  mediaTypes,
+  languages,
 }: {
   mediaId: string
   mediaItem: MediaItem
   i18nConfig: I18nConfig
+  mediaTypes: { id: string; label: string }[]
+  languages: { id: string; label: string }[]
 }) {
   const form = useAppForm({
-    defaultValues: mediaItem,
+    defaultValues: { ...mediaItem },
     validators: {
       onDynamic: mediaItemSchema,
     },
@@ -46,27 +50,55 @@ export default function EditForm({
           e.preventDefault()
           form.handleSubmit()
         }}
-        className="flex flex-col items-start gap-4"
+        className="flex flex-col items-start"
       >
+        <form.AppField
+          name="title"
+          children={(field) => <field.TextInput label="ln.admin.title" />}
+        />
         <form.AppField
           name="commonId"
           children={(field) => (
-            <field.TextField label={t("ln.admin.common-id")} />
+            <field.TextInput
+              label="ln.admin.common-id"
+              hint="ln.admin.common-id-hint"
+            />
           )}
         />
         <form.AppField
-          name="title"
-          children={(field) => <field.TextField label={t("ln.admin.title")} />}
+          name="type"
+          children={(field) => (
+            <field.Select label="ln.type" options={mediaTypes} />
+          )}
         />
-        <form.AppForm>
-          <form.SubmitButton />
-          <Toast id="invalid-form-data-toast" variant="error">
-            <div className="font-bold text-gray-700">
-              {t("ln.admin.toast.invalid-data.title")}
-            </div>
-            {t("ln.admin.toast.invalid-data.hint")}
-          </Toast>
-        </form.AppForm>
+        <form.AppField
+          name="language"
+          children={(field) => (
+            <field.Select label="ln.language" options={languages} />
+          )}
+        />
+        <form.AppField
+          name="dateCreated"
+          children={(field) => (
+            <field.TextInput
+              type="date"
+              label="ln.admin.created-on"
+              hint="ln.admin.created-on-hint"
+            />
+          )}
+        />
+
+        <div className="mt-8">
+          <form.AppForm>
+            <form.SubmitButton />
+            <Toast id="invalid-form-data-toast" variant="error">
+              <div className="font-bold text-gray-700">
+                {t("ln.admin.toast.invalid-data.title")}
+              </div>
+              {t("ln.admin.toast.invalid-data.hint")}
+            </Toast>
+          </form.AppForm>
+        </div>
       </form>
     </I18nContext.Provider>
   )

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

@@ -4,6 +4,7 @@ import { getCollection } from "astro:content"
 import config from "virtual:lightnet/config"
 
 import { getRawMediaItem } from "../../../content/get-media-items"
+import { getMediaTypes } from "../../../content/get-media-types"
 import { prepareI18nConfig } from "../../../i18n/react/prepare-i18n-config"
 import { resolveLocales } from "../../../i18n/resolve-locales"
 import Page from "../../../layouts/Page.astro"
@@ -19,23 +20,40 @@ export const getStaticPaths = (async () => {
 const { mediaId } = Astro.params
 const mediaItemEntry = await getRawMediaItem(mediaId)
 
-const i18nConfig = prepareI18nConfig(Astro.locals.i18n, ["ln.admin.*"])
+const i18nConfig = prepareI18nConfig(Astro.locals.i18n, [
+  "ln.admin.*",
+  "ln.type",
+  "ln.language",
+])
 const { t } = Astro.locals.i18n
+
+const mediaTypes = (await getMediaTypes()).map(({ id, data: { label } }) => ({
+  id,
+  label: t(label),
+}))
+const languages = config.languages.map(({ code, label }) => ({
+  id: code,
+  label: t(label),
+}))
 ---
 
 <Page>
-  <div class="mx-auto max-w-screen-lg px-4 pt-12 md:px-8">
+  <div class="mx-auto max-w-screen-md px-4 pt-12 md:px-8">
     <a
       class="underline"
       href=`/${Astro.currentLocale}/media/faithful-freestyle--en`
       >{t("ln.admin.back-to-details-page")}</a
     >
-    <h1 class="mb-4 mt-8 text-lg">{t("ln.admin.edit-media-item")}</h1>
+    <h1 class="mb-10 mt-10 text-2xl">
+      {t("ln.admin.edit-media-item")}
+    </h1>
 
     <EditForm
       mediaId={mediaId}
       mediaItem={mediaItemEntry.data}
       i18nConfig={i18nConfig}
+      mediaTypes={mediaTypes}
+      languages={languages}
       client:load
     />
   </div>

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

@@ -1,6 +1,6 @@
-export const writeText = (path: string, body: string) => {
+export const writeFile = (path: string, body: string) => {
   return fetch(
-    `/api/internal/fs/writeText?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
+    `/api/internal/fs/write-file?path=${encodeURIComponent(path.replace(/^\//, ""))}`,
     {
       method: "POST",
       headers: { "Content-Type": resolveContentType(path) },
@@ -10,7 +10,7 @@ export const writeText = (path: string, body: string) => {
 }
 
 export const writeJson = async (path: string, object: unknown) => {
-  return writeText(path, JSON.stringify(sortObject(object), null, 2))
+  return writeFile(path, JSON.stringify(sortObject(object), null, 2))
 }
 
 const resolveContentType = (path: string) => {

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

@@ -1,10 +1,15 @@
 import { z } from "astro/zod"
 
 const NON_EMPTY_STRING = "ln.admin.errors.non-empty-string"
+const INVALID_DATE = "ln.admin.errors.invalid-date"
+const REQUIRED = "ln.admin.errors.required"
 
 export const mediaItemSchema = z.object({
   commonId: z.string().nonempty(NON_EMPTY_STRING),
   title: z.string().nonempty(NON_EMPTY_STRING),
+  type: z.string().nonempty(REQUIRED),
+  language: z.string().nonempty(REQUIRED),
+  dateCreated: z.string().date(INVALID_DATE),
 })
 
 export type MediaItem = z.infer<typeof mediaItemSchema>

package/src/astro-integration/integration.ts

@@ -87,8 +87,8 @@ export function lightnet(lightnetConfig: LightnetConfig): AstroIntegration {
         // 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",
+            pattern: "/api/internal/fs/write-file",
+            entrypoint: "lightnet/api/internal/fs/write-file.ts",
             prerender: false,
           })
           // Add empty adapter to avoid warning

package/src/components/Toast.tsx

@@ -46,7 +46,7 @@ export default function Toast({
       }}
     >
       <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}`}
+        className={`pointer-events-auto flex max-w-sm flex-col items-start gap-1 rounded-md border p-4 text-base shadow-md backdrop-blur-sm ${alertClasses}`}
       >
         {children}
       </div>

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

@@ -22,11 +22,15 @@ export const createI18n = ({
   direction,
 }: I18nConfig) => {
   const t = (key: string) => {
-    const translated = translations[key]
-    if (!translated) {
-      throw new Error(`Missing translation for key ${key}`)
+    const value = translations[key]
+    if (value) {
+      return value
     }
-    return translated
+    if (key.match(/^(?:ln|x)\../i)) {
+      console.error(`Missing translation for key ${key}`)
+      return ""
+    }
+    return key
   }
   return { t, currentLocale, direction }
 }

package/src/admin/components/form/TextField.tsx

@@ -1,24 +0,0 @@
-import { FieldErrors } from "./FieldErrors"
-import { useFieldContext } from "./form-context"
-
-export default function TextField({ label }: { label: string }) {
-  const field = useFieldContext<string>()
-  return (
-    <>
-      <label className="dy-form-control w-full max-w-sm">
-        <div className="dy-label">
-          <span className="dy-label-text">{label}</span>
-        </div>
-        <input
-          id={field.name}
-          name={field.name}
-          value={field.state.value}
-          onChange={(e) => field.handleChange(e.target.value)}
-          onBlur={field.handleBlur}
-          className={`dy-input dy-input-bordered dy-input-sm w-full max-w-sm ${field.state.meta.errors.length ? "dy-input-error" : ""}`}
-        />
-        <FieldErrors meta={field.state.meta} />
-      </label>
-    </>
-  )
-}