lightnet 3.12.0 → 3.12.2

package/src/i18n/translations/TRANSLATION-STATUS.md

@@ -4,15 +4,21 @@ This autogenerated report shows all built-in languages and the current status of
 
 ## **AR** ([ar.yml](./ar.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **BN** ([bn.yml](./bn.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **DE** ([de.yml](./de.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **EN** ([en.yml](./en.yml))
 
@@ -20,19 +26,27 @@ All keys have been translated. ✅
 
 ## **ES** ([es.yml](./es.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **FI** ([fi.yml](./fi.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **FR** ([fr.yml](./fr.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **HI** ([hi.yml](./hi.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **KK** ([kk.yml](./kk.yml))
 
@@ -40,23 +54,34 @@ Missing keys:
 
 - ln.previous
 - ln.next
+- ln.details.edit
 
 ## **PT** ([pt.yml](./pt.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **RU** ([ru.yml](./ru.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **UK** ([uk.yml](./uk.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **UR** ([ur.yml](./ur.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit
 
 ## **ZH** ([zh.yml](./zh.yml))
 
-All keys have been translated. ✅
+Missing keys:
+
+- ln.details.edit

package/src/i18n/translations/en.yml

@@ -113,6 +113,11 @@ ln.details.open: Open
 # Used on: https://sk8-ministries.pages.dev/en/media/ollie-with-integrity--en/
 ln.details.share: Share
 
+# Button label to start editing an item
+#
+# English: Edit
+ln.details.edit: Edit
+
 # Label for indicating that the media item belongs to a collection.
 #
 # English: Part of collection

package/src/i18n/translations.ts

@@ -1,10 +1,5 @@
 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"),
@@ -39,7 +34,6 @@ const userTranslations = Object.fromEntries(
 
 export const loadTranslations = async (bcp47: string) => ({
   ...(await loadBuiltInTranslations(builtInTranslations, bcp47)),
-  ...(await loadBuiltInTranslations(builtInAdminTranslations, bcp47)),
   ...(await loadUserTranslations(bcp47)),
 })
 
@@ -95,4 +89,3 @@ export type LightNetTranslationKey =
   | "ln.search.title"
   | "ln.share.url-copied-to-clipboard"
   | "ln.footer.powered-by-lightnet"
-  | AdminTranslationKey

package/src/layouts/Page.astro

@@ -1,4 +1,6 @@
 ---
+import "./global.css"
+
 import CustomFooter from "virtual:lightnet/components/CustomFooter"
 import CustomHead from "virtual:lightnet/components/CustomHead"
 import config from "virtual:lightnet/config"

package/src/layouts/global.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -1,6 +1,4 @@
 ---
-import config from "virtual:lightnet/config"
-
 import Icon from "../../../../components/Icon"
 
 interface Props {
@@ -13,10 +11,10 @@ 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}
+  data-admin-enabled={false}
   href={`/admin/media/${mediaId}`}
   ><Icon className="mdi--square-edit-outline" ariaLabel="" />
-  {Astro.locals.i18n.t("ln.admin.edit")}</a
+  {Astro.locals.i18n.t("ln.details.edit")}</a
 >
 <script>
   const btn: HTMLAnchorElement | null = document.querySelector("#edit-btn")

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

@@ -48,7 +48,7 @@ export default function SearchFilter({
       <label className="mb-2 flex items-center gap-2 rounded-2xl border border-gray-300 bg-white px-4 py-3 shadow-inner outline outline-2 outline-offset-2 outline-transparent transition-all ease-in-out focus-within:outline-gray-300">
         <input
           type="search"
-          className="grow placeholder-gray-500 focus:outline-none"
+          className="grow bg-white placeholder-gray-500 focus:outline-none"
           name="search"
           ref={searchInput}
           placeholder={t("ln.search.placeholder")}

package/src/admin/api/fs/write-file.ts

@@ -1,53 +0,0 @@
-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"
-import { root } from "astro:config/server"
-
-export const prerender = false
-
-export const POST: APIRoute = async ({ request }) => {
-  const rootDirPath = fileURLToPath(root)
-  const requestedPath = new URL(request.url).searchParams.get("path")
-  if (!requestedPath) {
-    throw new Error("'path' search param is undefined.")
-  }
-  if (isAbsolute(requestedPath)) {
-    throw new Error("Absolute paths are not allowed.")
-  }
-
-  const targetPath = resolve(rootDirPath, requestedPath)
-  const relativeToRoot = relative(rootDirPath, targetPath)
-  if (
-    relativeToRoot.startsWith("..") ||
-    relativeToRoot === "" ||
-    isAbsolute(relativeToRoot)
-  ) {
-    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 tmpPath = `${targetPath}.tmp-${Date.now()}`
-  try {
-    await body.pipeTo(Writable.toWeb(createWriteStream(tmpPath)))
-    await rename(tmpPath, targetPath)
-  } finally {
-    await rm(tmpPath, { force: true }).catch(() => {})
-  }
-
-  return new Response(JSON.stringify({ status: "ok" }), {
-    status: 200,
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-}

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

@@ -1,129 +0,0 @@
-import type { ReactNode } from "react"
-import {
-  type ArrayPath,
-  type Control,
-  type FieldValues,
-  useFieldArray,
-  type UseFieldArrayAppend,
-} from "react-hook-form"
-
-import Icon from "../../../components/Icon"
-import { useI18n } from "../../../i18n/react/use-i18n"
-import ErrorMessage from "./atoms/ErrorMessage"
-import Hint from "./atoms/Hint"
-import Label from "./atoms/Label"
-import { useFieldDirty } from "./hooks/use-field-dirty"
-import { useFieldError } from "./hooks/use-field-error"
-import { getBorderClass } from "./utils/get-border-class"
-
-export default function DynamicArray<TFieldValues extends FieldValues>({
-  control,
-  name,
-  label,
-  required = false,
-  hint,
-  renderElement,
-  renderElementMeta,
-  renderAddButton,
-}: {
-  name: ArrayPath<TFieldValues>
-  required?: boolean
-  label: string
-  hint?: string
-  control: Control<TFieldValues>
-  renderElement: (index: number) => ReactNode
-  renderElementMeta?: (index: number) => ReactNode
-  renderAddButton: (args: {
-    addElement: UseFieldArrayAppend<TFieldValues, ArrayPath<TFieldValues>>
-    index: number
-  }) => ReactNode
-}) {
-  const { fields, append, remove, swap } = useFieldArray({
-    name,
-    control,
-  })
-  const errorMessage = useFieldError({ control, name })
-  const isDirty = useFieldDirty({ control, name })
-  return (
-    <fieldset key={name}>
-      <legend>
-        <Label
-          required={required}
-          label={label}
-          isDirty={isDirty}
-          isInvalid={!!errorMessage}
-        />
-      </legend>
-
-      <div
-        className={`flex w-full flex-col gap-1 rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage })} bg-slate-200 p-1 shadow-inner`}
-      >
-        {fields.map((field, index) => (
-          <div
-            className="w-full gap-2 rounded-xl bg-slate-50 px-2 pb-4 shadow-sm"
-            key={field.id}
-          >
-            <div
-              className={`flex items-center ${renderElementMeta ? "justify-between" : "justify-end"}`}
-            >
-              {renderElementMeta && renderElementMeta(index)}
-              <div className="-me-2 flex">
-                <ItemActionButton
-                  icon="mdi--arrow-up"
-                  label="ln.admin.move-up"
-                  disabled={index === 0}
-                  onClick={() => swap(index, index - 1)}
-                />
-                <ItemActionButton
-                  icon="mdi--arrow-down"
-                  label="ln.admin.move-down"
-                  disabled={index === fields.length - 1}
-                  onClick={() => swap(index, index + 1)}
-                />
-                <ItemActionButton
-                  icon="mdi--remove"
-                  label="ln.admin.remove"
-                  onClick={() => remove(index)}
-                  className="hover:!text-rose-800"
-                />
-              </div>
-            </div>
-
-            {renderElement(index)}
-          </div>
-        ))}
-        <div className="flex flex-col items-center py-2">
-          {renderAddButton({ addElement: append, index: fields.length })}
-        </div>
-      </div>
-      <ErrorMessage message={errorMessage} />
-      <Hint preserveSpace={true} label={hint} />
-    </fieldset>
-  )
-}
-
-function ItemActionButton({
-  label,
-  icon,
-  onClick,
-  disabled = false,
-  className,
-}: {
-  label: string
-  icon: string
-  disabled?: boolean
-  onClick: () => void
-  className?: string
-}) {
-  const { t } = useI18n()
-  return (
-    <button
-      className={`flex items-center rounded-xl p-2 text-slate-600 transition-colors ease-in-out hover:text-sky-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-700 disabled:text-slate-300 ${className}`}
-      type="button"
-      disabled={disabled}
-      onClick={onClick}
-    >
-      <Icon className={icon} ariaLabel={t(label)} />
-    </button>
-  )
-}

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

@@ -1,68 +0,0 @@
-import type { InputHTMLAttributes } from "react"
-import {
-  type Control,
-  type FieldValues,
-  type Path,
-  type RegisterOptions,
-} from "react-hook-form"
-
-import ErrorMessage from "./atoms/ErrorMessage"
-import Hint from "./atoms/Hint"
-import Label from "./atoms/Label"
-import { useFieldDirty } from "./hooks/use-field-dirty"
-import { useFieldError } from "./hooks/use-field-error"
-import { getBorderClass } from "./utils/get-border-class"
-
-type Props<TFieldValues extends FieldValues> = {
-  name: Path<TFieldValues>
-  required?: boolean
-  label?: string
-  labelSize?: "small" | "medium"
-  hint?: string
-  preserveHintSpace?: boolean
-  control: Control<TFieldValues>
-  registerOptions?: RegisterOptions<TFieldValues>
-} & InputHTMLAttributes<HTMLInputElement>
-
-export default function Input<TFieldValues extends FieldValues>({
-  name,
-  label,
-  labelSize,
-  hint,
-  preserveHintSpace = true,
-  control,
-  className,
-  required = false,
-  registerOptions,
-  ...inputProps
-}: Props<TFieldValues>) {
-  const isDirty = useFieldDirty({ control, name })
-  const errorMessage = useFieldError({ control, name })
-
-  return (
-    <div key={name} className="group flex w-full flex-col">
-      {label && (
-        <label htmlFor={name}>
-          <Label
-            label={label}
-            size={labelSize}
-            isDirty={isDirty}
-            isInvalid={!!errorMessage}
-            required={required}
-          />
-        </label>
-      )}
-
-      <input
-        className={`rounded-xl ${getBorderClass({ isDirty, errorMessage })} px-4 py-3 shadow-inner disabled:text-slate-500 ${label ? "rounded-ss-none" : ""} ${className}`}
-        id={name}
-        aria-invalid={!!errorMessage}
-        aria-required={required}
-        {...control.register(name, registerOptions)}
-        {...inputProps}
-      />
-      <ErrorMessage message={errorMessage} />
-      <Hint preserveSpace={preserveHintSpace} label={hint} />
-    </div>
-  )
-}

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

@@ -1,109 +0,0 @@
-import "@mdxeditor/editor/style.css"
-
-import {
-  BlockTypeSelect,
-  BoldItalicUnderlineToggles,
-  type CodeBlockEditorProps,
-  codeBlockPlugin,
-  CreateLink,
-  diffSourcePlugin,
-  DiffSourceToggleWrapper,
-  headingsPlugin,
-  linkDialogPlugin,
-  linkPlugin,
-  listsPlugin,
-  ListsToggle,
-  markdownShortcutPlugin,
-  MDXEditor,
-  quotePlugin,
-  toolbarPlugin,
-  UndoRedo,
-  useCodeBlockEditorContext,
-} from "@mdxeditor/editor"
-import {
-  type Control,
-  Controller,
-  type FieldValues,
-  get,
-  type Path,
-} from "react-hook-form"
-
-/**
- * IMPORTANT: Do not import this component directly. It is
- * very big. Use it with React lazy loading.
- */
-export default function LazyLoadedMarkdownEditor<
-  TFieldValues extends FieldValues,
->({
-  control,
-  name,
-}: {
-  name: Path<TFieldValues>
-  control: Control<TFieldValues>
-}) {
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({
-        field: { onBlur, onChange, value, ref },
-        formState: { defaultValues },
-      }) => (
-        <MDXEditor
-          markdown={value ?? ""}
-          onBlur={onBlur}
-          onChange={onChange}
-          contentEditableClassName="prose bg-slate-50 h-80 w-full max-w-full overflow-y-auto"
-          ref={ref}
-          onError={(error) =>
-            console.error("Error while editing markdown", error)
-          }
-          plugins={[
-            headingsPlugin(),
-            listsPlugin(),
-            linkPlugin(),
-            codeBlockPlugin({
-              codeBlockEditorDescriptors: [
-                {
-                  match: () => true,
-                  priority: 0,
-                  Editor: TextAreaCodeEditor,
-                },
-              ],
-            }),
-            linkDialogPlugin(),
-            quotePlugin(),
-            markdownShortcutPlugin(),
-            diffSourcePlugin({ diffMarkdown: get(defaultValues, name) }),
-            toolbarPlugin({
-              toolbarContents: () => (
-                <DiffSourceToggleWrapper>
-                  <UndoRedo />
-                  <BoldItalicUnderlineToggles />
-                  <BlockTypeSelect />
-                  <ListsToggle options={["bullet", "number"]} />
-                  <CreateLink />
-                </DiffSourceToggleWrapper>
-              ),
-              toolbarClassName: "!rounded-none !bg-slate-200",
-            }),
-          ]}
-        />
-      )}
-    />
-  )
-}
-
-function TextAreaCodeEditor(props: CodeBlockEditorProps) {
-  const cb = useCodeBlockEditorContext()
-  return (
-    <div onKeyDown={(e) => e.nativeEvent.stopImmediatePropagation()}>
-      <textarea
-        rows={3}
-        cols={20}
-        defaultValue={props.code}
-        onChange={(e) => cb.setCode(e.target.value)}
-      />
-    </div>
-  )
-}

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

@@ -1,62 +0,0 @@
-import { lazy, Suspense } from "react"
-import { type Control, type FieldValues, type Path } from "react-hook-form"
-
-import ErrorMessage from "./atoms/ErrorMessage"
-import Hint from "./atoms/Hint"
-import Label from "./atoms/Label"
-import { useFieldDirty } from "./hooks/use-field-dirty"
-import { useFieldError } from "./hooks/use-field-error"
-import { getBorderClass } from "./utils/get-border-class"
-
-const LazyLoadedMarkdownEditor = lazy(
-  () => import("./LazyLoadedMarkdownEditor"),
-)
-
-export default function MarkdownEditor<TFieldValues extends FieldValues>({
-  control,
-  name,
-  required = false,
-  label,
-  hint,
-}: {
-  name: Path<TFieldValues>
-  label: string
-  required?: boolean
-  hint?: string
-  control: Control<TFieldValues>
-}) {
-  const isDirty = useFieldDirty({ control, name })
-  const errorMessage = useFieldError({ control, name })
-
-  return (
-    <fieldset key={name} className="group">
-      <legend>
-        <Label
-          required={required}
-          label={label}
-          isDirty={isDirty}
-          isInvalid={!!errorMessage}
-        />
-      </legend>
-
-      <div
-        className={`overflow-hidden rounded-xl rounded-ss-none ${getBorderClass({ isDirty, errorMessage, focusWithin: true })} shadow-sm`}
-      >
-        <Suspense
-          fallback={
-            <div className="h-[22.75rem] w-full bg-slate-50">
-              <div className="h-10 bg-slate-100"></div>
-            </div>
-          }
-        >
-          <LazyLoadedMarkdownEditor
-            control={control as Control<any>}
-            name={name}
-          />
-        </Suspense>
-      </div>
-      <ErrorMessage message={errorMessage} />
-      <Hint preserveSpace={true} label={hint} />
-    </fieldset>
-  )
-}

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

@@ -1,71 +0,0 @@
-import { type Control, type FieldValues, type Path } from "react-hook-form"
-
-import Icon from "../../../components/Icon"
-import ErrorMessage from "./atoms/ErrorMessage"
-import Hint from "./atoms/Hint"
-import Label from "./atoms/Label"
-import { useFieldDirty } from "./hooks/use-field-dirty"
-import { useFieldError } from "./hooks/use-field-error"
-import { getBorderClass } from "./utils/get-border-class"
-
-export default function Select<TFieldValues extends FieldValues>({
-  name,
-  label,
-  labelSize,
-  required = false,
-  control,
-  defaultValue,
-  hint,
-  preserveHintSpace = true,
-  options,
-}: {
-  name: Path<TFieldValues>
-  label?: string
-  labelSize?: "small" | "medium"
-  hint?: string
-  required?: boolean
-  preserveHintSpace?: boolean
-  defaultValue?: string
-  control: Control<TFieldValues>
-  options: { id: string; labelText?: string }[]
-}) {
-  const isDirty = useFieldDirty({ control, name })
-  const errorMessage = useFieldError({ control, name })
-  return (
-    <div key={name} className="group flex w-full flex-col">
-      {label && (
-        <label htmlFor={name}>
-          <Label
-            label={label}
-            size={labelSize}
-            isDirty={isDirty}
-            required={required}
-            isInvalid={!!errorMessage}
-          />
-        </label>
-      )}
-      <div className="relative">
-        <select
-          {...control.register(name)}
-          id={name}
-          aria-invalid={!!errorMessage}
-          aria-required={required}
-          defaultValue={defaultValue}
-          className={`w-full appearance-none rounded-xl ${getBorderClass({ isDirty, errorMessage })} bg-white px-4 py-3 pe-12 shadow-sm ${label ? "rounded-ss-none" : ""}`}
-        >
-          {options.map(({ id, labelText }) => (
-            <option key={id} value={id}>
-              {labelText ?? id}
-            </option>
-          ))}
-        </select>
-        <Icon
-          className="absolute end-3 top-1/2 -translate-y-1/2 text-lg text-slate-600 mdi--chevron-down"
-          ariaLabel=""
-        />
-      </div>
-      <ErrorMessage message={errorMessage} />
-      <Hint preserveSpace={preserveHintSpace} label={hint} />
-    </div>
-  )
-}