lightnet 3.10.6 → 3.10.7

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # lightnet
 
+## 3.10.7
+
+### Patch Changes
+
+- [#337](https://github.com/LightNetDev/LightNet/pull/337) [`ac32a7f`](https://github.com/LightNetDev/LightNet/commit/ac32a7f35b58d5aff39dd45531d77247ae24c61f) Thanks [@smn-cds](https://github.com/smn-cds)! - Do not use ALL CAPS casing for primary buttons.
+
+- [#337](https://github.com/LightNetDev/LightNet/pull/337) [`ac32a7f`](https://github.com/LightNetDev/LightNet/commit/ac32a7f35b58d5aff39dd45531d77247ae24c61f) Thanks [@smn-cds](https://github.com/smn-cds)! - Update dependencies
+
 ## 3.10.6
 
 ### Patch Changes

package/__e2e__/fixtures/basics/node_modules/.bin/astro

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.8_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.2_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules/astro/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/astro@5.15.9_@types+node@24.10.1_jiti@2.4.2_lightningcss@1.29.1_rollup@4.53.3_terser@5.39.0_typescript@5.9.3_yaml@2.8.1/node_modules:/home/runner/work/LightNet/LightNet/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../astro/astro.js" "$@"

package/__e2e__/fixtures/basics/package.json

@@ -7,8 +7,8 @@
     "@astrojs/react": "^4.4.2",
     "@astrojs/tailwind": "^6.0.2",
     "@lightnet/decap-admin": "^3.1.4",
-    "astro": "^5.15.8",
-    "lightnet": "^3.10.5",
+    "astro": "^5.15.9",
+    "lightnet": "^3.10.6",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "sharp": "^0.34.5",

package/__tests__/utils/markdown.spec.ts

@@ -27,12 +27,28 @@ test("Should remove headers", () => {
   expect(markdownToText("# H1\n## H2 words#")).toBe("H1\nH2 words#")
 })
 
+test("Should remove underline", () => {
+  expect(markdownToText("Some <u>underlined</u> Words /u >")).toBe(
+    "Some underlined Words /u >",
+  )
+})
+
+test("Should remove encoded space", () => {
+  expect(markdownToText("Text&#x20;with&#x20;space&#x20;")).toBe(
+    "Text with space ",
+  )
+})
+
 test("Should remove inline modifiers", async () => {
   expect(markdownToText("this is **some bold** and _italic_ text")).toBe(
     "this is some bold and italic text",
   )
 })
 
+test("Should remove code blocks", async () => {
+  expect(markdownToText("some\n```js \ncode\n```\n")).toBe("some\ncode\n")
+})
+
 test("Should remove list", () => {
   expect(markdownToText("- this is **bold**\n- this is normal")).toBe(
     "this is bold\nthis is normal",

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.6",
+  "version": "3.10.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/LightNetDev/lightnet",
@@ -50,24 +50,24 @@
     "@hookform/resolvers": "^5.2.2",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify/tailwind": "^1.2.0",
-    "@mdxeditor/editor": "^3.49.1",
+    "@mdxeditor/editor": "^3.49.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tanstack/react-virtual": "^3.13.12",
     "daisyui": "^4.12.24",
     "embla-carousel": "^8.6.0",
     "embla-carousel-wheel-gestures": "^8.1.0",
     "fuse.js": "^7.1.0",
-    "i18next": "^25.6.2",
+    "i18next": "^25.6.3",
     "marked": "^16.4.2",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.66.1",
     "yaml": "^2.8.1"
   },
   "devDependencies": {
     "@playwright/test": "^1.56.1",
     "@types/node": "^22.19.1",
-    "@types/react": "^19.2.5",
+    "@types/react": "^19.2.6",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.9"
+    "vitest": "^4.0.10"
   },
   "engines": {
     "node": ">=22"

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

@@ -11,7 +11,7 @@ import Icon from "../../../components/Icon"
 import { useI18n } from "../../../i18n/react/useI18n"
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
-import Legend from "./atoms/Legend"
+import Label from "./atoms/Label"
 import { useFieldError } from "./hooks/use-field-error"
 
 export default function DynamicArray<TFieldValues extends FieldValues>({
@@ -43,13 +43,16 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
   const errorMessage = useFieldError({ control, name })
   return (
     <fieldset key={name}>
-      <Legend label={label} />
-      <div className="flex w-full flex-col divide-y divide-gray-300 overflow-hidden rounded-lg border border-gray-300 bg-gray-100 shadow-sm">
+      <legend>
+        <Label label={label} />
+      </legend>
+
+      <div className="flex w-full flex-col divide-y divide-gray-300 rounded-lg rounded-ss-none border border-gray-300 bg-gray-100 shadow-sm">
         {fields.map((field, index) => (
           <div className="flex w-full items-center gap-2 p-2" key={field.id}>
             <div className="flex grow flex-col">{renderElement(index)}</div>
             <button
-              className="flex items-center p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800"
+              className="flex items-center rounded-md p-2 text-gray-600 transition-colors ease-in-out hover:text-rose-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
               type="button"
               onClick={() => remove(index)}
             >
@@ -59,7 +62,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
         ))}
         <button
           type="button"
-          className="p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200"
+          className="rounded-b-lg p-4 text-sm font-bold text-gray-500 transition-colors ease-in-out hover:bg-gray-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-700"
           onClick={() => {
             addButton.onClick(append, fields.length)
           }}
@@ -68,7 +71,7 @@ export default function DynamicArray<TFieldValues extends FieldValues>({
         </button>
       </div>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }

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

@@ -1,39 +1,54 @@
+import type { InputHTMLAttributes } 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"
 
+type Props<TFieldValues extends FieldValues> = {
+  name: Path<TFieldValues>
+  label?: string
+  labelSize?: "small" | "medium"
+  hint?: string
+  preserveHintSpace?: boolean
+  control: Control<TFieldValues>
+} & InputHTMLAttributes<HTMLInputElement>
+
 export default function Input<TFieldValues extends FieldValues>({
   name,
   label,
-  defaultValue,
+  labelSize,
   hint,
+  preserveHintSpace = true,
   control,
-  type = "text",
-}: {
-  name: Path<TFieldValues>
-  label: string
-  defaultValue?: string
-  hint?: string
-  control: Control<TFieldValues>
-  type?: "text" | "date"
-}) {
+  ...inputProps
+}: Props<TFieldValues>) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
   return (
-    <div key={name} className="flex w-full flex-col">
-      <Label for={name} label={label} />
+    <div key={name} className="group flex w-full flex-col">
+      {label && (
+        <label htmlFor={name}>
+          <Label
+            label={label}
+            size={labelSize}
+            isDirty={isDirty}
+            isInvalid={!!errorMessage}
+          />
+        </label>
+      )}
+
       <input
-        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
-        type={type}
+        className={`dy-input dy-input-bordered border-gray-300 shadow-inner focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
         id={name}
-        defaultValue={defaultValue}
         aria-invalid={!!errorMessage}
         {...control.register(name)}
+        {...inputProps}
       />
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>
   )
 }

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

@@ -3,18 +3,20 @@ 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,
@@ -31,12 +33,10 @@ export default function LazyLoadedMarkdownEditor<
   TFieldValues extends FieldValues,
 >({
   control,
-  defaultValue,
   name,
 }: {
   name: Path<TFieldValues>
   control: Control<TFieldValues>
-  defaultValue?: string
 }) {
   return (
     <Controller
@@ -49,26 +49,36 @@ export default function LazyLoadedMarkdownEditor<
           onChange={onChange}
           contentEditableClassName="prose bg-gray-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(),
-            linkDialogPlugin(),
-            diffSourcePlugin({
-              viewMode: "rich-text",
-              diffMarkdown: defaultValue,
+            codeBlockPlugin({
+              codeBlockEditorDescriptors: [
+                {
+                  match: () => true,
+                  priority: 0,
+                  Editor: TextAreaCodeEditor,
+                },
+              ],
             }),
+            linkDialogPlugin(),
             quotePlugin(),
+            markdownShortcutPlugin(),
             toolbarPlugin({
               toolbarContents: () => (
-                <DiffSourceToggleWrapper>
+                <>
                   <UndoRedo />
                   <BoldItalicUnderlineToggles />
                   <BlockTypeSelect />
                   <ListsToggle options={["bullet", "number"]} />
                   <CreateLink />
-                </DiffSourceToggleWrapper>
+                </>
               ),
+              toolbarClassName: "!rounded-none",
             }),
           ]}
         />
@@ -76,3 +86,17 @@ export default function LazyLoadedMarkdownEditor<
     />
   )
 }
+
+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

@@ -3,7 +3,8 @@ import { type Control, type FieldValues, type Path } from "react-hook-form"
 
 import ErrorMessage from "./atoms/ErrorMessage"
 import Hint from "./atoms/Hint"
-import Legend from "./atoms/Legend"
+import Label from "./atoms/Label"
+import { useFieldDirty } from "./hooks/use-field-dirty"
 import { useFieldError } from "./hooks/use-field-error"
 
 const LazyLoadedMarkdownEditor = lazy(
@@ -12,7 +13,6 @@ const LazyLoadedMarkdownEditor = lazy(
 
 export default function MarkdownEditor<TFieldValues extends FieldValues>({
   control,
-  defaultValue,
   name,
   label,
   hint,
@@ -21,15 +21,18 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
   label: string
   hint?: string
   control: Control<TFieldValues>
-  defaultValue?: string
 }) {
+  const isDirty = useFieldDirty({ control, name })
   const errorMessage = useFieldError({ control, name })
 
   return (
-    <fieldset key={name}>
-      <Legend label={label} />
+    <fieldset key={name} className="group">
+      <legend>
+        <Label label={label} isDirty={isDirty} isInvalid={!!errorMessage} />
+      </legend>
+
       <div
-        className={`overflow-hidden rounded-lg border border-gray-300 shadow-sm ${errorMessage ? "border-rose-800" : ""}`}
+        className={`overflow-hidden rounded-lg rounded-ss-none border border-gray-300 shadow-sm group-focus-within:border-blue-700 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""}`}
       >
         <Suspense
           fallback={
@@ -41,12 +44,11 @@ export default function MarkdownEditor<TFieldValues extends FieldValues>({
           <LazyLoadedMarkdownEditor
             control={control as Control<any>}
             name={name}
-            defaultValue={defaultValue}
           />
         </Suspense>
       </div>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={true} label={hint} />
     </fieldset>
   )
 }

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

@@ -1,35 +1,50 @@
-import type { Control, FieldValues, Path } from "react-hook-form"
+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"
 
 export default function Select<TFieldValues extends FieldValues>({
   name,
   label,
+  labelSize,
   control,
   defaultValue,
   hint,
+  preserveHintSpace = true,
   options,
 }: {
   name: Path<TFieldValues>
-  label: string
+  label?: string
+  labelSize?: "small" | "medium"
   hint?: string
+  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="flex w-full flex-col">
-      <Label for={name} label={label} />
+    <div key={name} className="group flex w-full flex-col">
+      {label && (
+        <label htmlFor={name}>
+          <Label
+            label={label}
+            size={labelSize}
+            isDirty={isDirty}
+            isInvalid={!!errorMessage}
+          />
+        </label>
+      )}
       <select
         {...control.register(name)}
         id={name}
         aria-invalid={!!errorMessage}
         defaultValue={defaultValue}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
+        className={`dy-select dy-select-bordered text-base shadow-sm focus:border-blue-700 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-blue-700 ${isDirty && !errorMessage ? "border-gray-700" : ""} ${errorMessage ? "border-rose-800" : ""} ${label ? "rounded-ss-none" : ""}`}
       >
         {options.map(({ id, labelText }) => (
           <option key={id} value={id}>
@@ -38,7 +53,7 @@ export default function Select<TFieldValues extends FieldValues>({
         ))}
       </select>
       <ErrorMessage message={errorMessage} />
-      <Hint label={hint} />
+      <Hint preserveSpace={preserveHintSpace} label={hint} />
     </div>
   )
 }

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

@@ -8,10 +8,10 @@ import type { MediaItem } from "../../types/media-item"
 const SUCCESS_DURATION_MS = 2000
 
 const baseButtonClass =
-  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold uppercase shadow-sm transition-colors easy-in-out focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900 disabled:cursor-not-allowed"
+  "flex min-w-52 items-center justify-center gap-2 rounded-2xl px-4 py-3 font-bold shadow-sm transition-colors easy-in-out focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-blue-700 focus-visible:ring-offset-1 disabled:cursor-not-allowed"
 
 const buttonStateClasses = {
-  idle: "bg-gray-800 text-gray-100 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-600 disabled:text-gray-200",
+  idle: "bg-gray-800 text-gray-50 hover:bg-gray-950 hover:text-gray-300 disabled:bg-gray-500 disabled:text-gray-300",
   error:
     "bg-rose-700 text-white hover:bg-rose-800 hover:text-white disabled:bg-rose-600",
   success:
@@ -40,9 +40,10 @@ export default function SubmitButton({
   className?: string
 }) {
   const { t } = useI18n()
-  const { isSubmitting, isSubmitSuccessful, submitCount } = useFormState({
-    control,
-  })
+  const { isSubmitting, isSubmitSuccessful, submitCount, isDirty } =
+    useFormState({
+      control,
+    })
 
   const buttonState = useButtonState(isSubmitSuccessful, submitCount)
   const buttonClass = `${baseButtonClass} ${buttonStateClasses[buttonState]} ${className}`
@@ -50,7 +51,11 @@ export default function SubmitButton({
   const icon = icons[buttonState]
 
   return (
-    <button className={buttonClass} type="submit" disabled={isSubmitting}>
+    <button
+      className={buttonClass}
+      type="submit"
+      disabled={isSubmitting || !isDirty}
+    >
       {icon && <Icon className={icon} ariaLabel="" />}
       {t(label)}
     </button>

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

@@ -1,9 +1,18 @@
 import { useI18n } from "../../../../i18n/react/useI18n"
 
-export default function Hint({ label }: { label?: string }) {
+export default function Hint({
+  label,
+  preserveSpace,
+}: {
+  label?: string
+  preserveSpace: boolean
+}) {
   const { t } = useI18n()
+  if (!preserveSpace && !label) {
+    return null
+  }
   return (
-    <div className="flex h-12 w-full items-start justify-end p-2">
+    <div className="flex h-8 w-full items-start justify-end p-2">
       {label && <span className="dy-label-text-alt">{t(label)}</span>}
     </div>
   )

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

@@ -2,22 +2,25 @@ import { useI18n } from "../../../../i18n/react/useI18n"
 
 export default function Label({
   label,
-  for: htmlFor,
-  size = "sm",
-  className,
+  size = "medium",
+  className = "",
+  isDirty,
+  isInvalid,
 }: {
   label: string
-  for: string
   className?: string
-  size?: "sm" | "xs"
+  size?: "small" | "medium"
+  isDirty?: boolean
+  isInvalid?: boolean
 }) {
   const { t } = useI18n()
   return (
-    <label
-      htmlFor={htmlFor}
-      className={`font-bold uppercase text-gray-600 ${size === "sm" ? "pb-2 text-sm" : "pb-1 text-xs"} ${className}`}
-    >
-      {t(label)}
-    </label>
+    <div className="flex">
+      <span
+        className={`rounded-t-md bg-gray-300 px-4 font-bold text-gray-700 shadow-sm transition-colors duration-150 group-focus-within:bg-blue-700 group-focus-within:text-gray-50 group-focus-within:ring-1 group-focus-within:ring-blue-700 ${size === "medium" ? "py-2 text-sm" : "py-1 text-xs"} ${isDirty ? "bg-gray-700 !text-white" : ""} ${isInvalid ? "bg-rose-800 !text-gray-50" : ""} ${className}`}
+      >
+        {t(label)}
+      </span>
+    </div>
   )
 }

package/src/admin/components/form/hooks/use-field-dirty.tsx

@@ -0,0 +1,12 @@
+import { type Control, get, useFormState } from "react-hook-form"
+
+export function useFieldDirty({
+  control,
+  name,
+}: {
+  control: Control<any>
+  name: string
+}) {
+  const { dirtyFields } = useFormState({ control, name, exact: true })
+  return get(dirtyFields, name) as boolean | undefined
+}

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

@@ -1,24 +1,24 @@
 ln.admin.edit: Edit
-ln.admin.publish-changes: Publish Changes
+ln.admin.publish-changes: Publish changes
 ln.admin.published: Published
-ln.admin.save-changes: Save Changes
+ln.admin.save-changes: Save changes
 ln.admin.saved: Saved
 ln.admin.failed: Failed
 ln.admin.remove: Remove
 ln.admin.name: Name
-ln.admin.add-author: Add Author
-ln.admin.add-category: Add Category
+ln.admin.add-author: Add author
+ln.admin.add-category: Add category
 ln.admin.collections: Collections
-ln.admin.add-collection: Add Collection
-ln.admin.edit-media-item: Edit media item
+ln.admin.add-collection: Add collection
+ln.admin.edit-media-item: Edit Media Item
 ln.admin.position-in-collection: Position in Collection
 ln.admin.back-to-details-page: Back to details page
 ln.admin.title: Title
 ln.admin.common-id: Common ID
 ln.admin.authors: Authors
 ln.admin.description: Description
-ln.admin.created-on: Created on
-ln.admin.created-on-hint: When has this item been created on this library?
+ln.admin.date-created: Date Created
+ln.admin.date-created-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.errors.non-empty-string: Please enter at least one character.
 ln.admin.errors.invalid-date: That date doesn't look right.

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

@@ -36,8 +36,6 @@ export default function EditForm({
   collections: SelectOption[]
 }) {
   const { handleSubmit, control } = useForm({
-    // Provide per-input defaults so SSG prerender matches, but keep a full
-    // defaultValues object here because useFieldArray does not accept default values.
     defaultValues: mediaItem,
     mode: "onTouched",
     shouldFocusError: true,
@@ -85,8 +83,8 @@ export default function EditForm({
         <Authors control={control} defaultValue={mediaItem.authors} />
         <Input
           name="dateCreated"
-          label="ln.admin.created-on"
-          hint="ln.admin.created-on-hint"
+          label="ln.admin.date-created"
+          hint="ln.admin.date-created-hint"
           type="date"
           defaultValue={mediaItem.dateCreated}
           control={control}
@@ -105,7 +103,6 @@ export default function EditForm({
           control={control}
           name="description"
           label="ln.admin.description"
-          defaultValue={mediaItem.description}
         />
 
         <SubmitButton className="self-end" control={control} />

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

@@ -58,7 +58,7 @@ const languages = config.languages.map(({ code, label }) => ({
 }))
 ---
 
-<Page mainClass="bg-slate-500">
+<Page mainClass="bg-gray-700">
   <div class="mx-auto block max-w-screen-md px-4 md:px-8">
     <a
       class="block pb-4 pt-8 text-gray-200 underline"

package/src/admin/pages/media/fields/Authors.tsx

@@ -1,8 +1,7 @@
 import { type Control } from "react-hook-form"
 
-import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
 import DynamicArray from "../../../components/form/DynamicArray"
-import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import Input from "../../../components/form/Input"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Authors({
@@ -18,8 +17,9 @@ export default function Authors({
       name="authors"
       label="ln.admin.authors"
       renderElement={(index) => (
-        <AuthorInput
-          index={index}
+        <Input
+          name={`authors.${index}.value`}
+          preserveHintSpace={false}
           control={control}
           defaultValue={defaultValue[index]?.value}
         />
@@ -32,27 +32,3 @@ export default function Authors({
     />
   )
 }
-
-function AuthorInput({
-  index,
-  control,
-  defaultValue,
-}: {
-  index: number
-  control: Control<MediaItem>
-  defaultValue?: string
-}) {
-  const name = `authors.${index}.value` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <input
-        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
-        aria-invalid={!!errorMessage}
-        defaultValue={defaultValue}
-        {...control.register(name)}
-      />
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

package/src/admin/pages/media/fields/Categories.tsx

@@ -1,8 +1,7 @@
 import { type Control } from "react-hook-form"
 
-import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
 import DynamicArray from "../../../components/form/DynamicArray"
-import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Categories({
@@ -20,11 +19,12 @@ export default function Categories({
       name="categories"
       label="ln.categories"
       renderElement={(index) => (
-        <CategorySelect
-          categories={categories}
+        <Select
+          options={categories}
           control={control}
-          index={index}
+          name={`categories.${index}.value`}
           defaultValue={defaultValue[index]?.value}
+          preserveHintSpace={false}
         />
       )}
       addButton={{
@@ -35,36 +35,3 @@ export default function Categories({
     />
   )
 }
-
-function CategorySelect({
-  control,
-  categories,
-  defaultValue,
-  index,
-}: {
-  control: Control<MediaItem>
-  categories: { id: string; labelText: string }[]
-  defaultValue?: string
-  index: number
-}) {
-  const name = `categories.${index}.value` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <select
-        {...control.register(name)}
-        id={name}
-        defaultValue={defaultValue}
-        aria-invalid={!!errorMessage}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
-      >
-        {categories.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText}
-          </option>
-        ))}
-      </select>
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

package/src/admin/pages/media/fields/Collections.tsx

@@ -1,9 +1,8 @@
 import { type Control } from "react-hook-form"
 
-import ErrorMessage from "../../../components/form/atoms/ErrorMessage"
-import Label from "../../../components/form/atoms/Label"
 import DynamicArray from "../../../components/form/DynamicArray"
-import { useFieldError } from "../../../components/form/hooks/use-field-error"
+import Input from "../../../components/form/Input"
+import Select from "../../../components/form/Select"
 import type { MediaItem } from "../../../types/media-item"
 
 export default function Collections({
@@ -21,17 +20,28 @@ export default function Collections({
       name="collections"
       label="ln.admin.collections"
       renderElement={(index) => (
-        <div className="flex w-full flex-col py-2">
-          <CollectionSelect
-            collections={collections}
+        <div className="flex w-full flex-col gap-4 py-2">
+          <Select
+            options={collections}
+            label="ln.admin.name"
+            labelSize="small"
+            preserveHintSpace={false}
+            name={`collections.${index}.collection`}
             control={control}
-            index={index}
             defaultValue={defaultValue[index]?.collection}
           />
-          <CollectionIndex
+          <Input
+            type="number"
             control={control}
-            index={index}
+            label="ln.admin.position-in-collection"
+            labelSize="small"
+            step={1}
+            min={0}
+            preserveHintSpace={false}
             defaultValue={defaultValue[index]?.index}
+            {...control.register(`collections.${index}.index`, {
+              setValueAs: (value) => (value === "" ? undefined : Number(value)),
+            })}
           />
         </div>
       )}
@@ -46,72 +56,3 @@ export default function Collections({
     />
   )
 }
-
-function CollectionSelect({
-  control,
-  collections,
-  index,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  collections: { id: string; labelText: string }[]
-  defaultValue?: string
-  index: number
-}) {
-  const name = `collections.${index}.collection` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <Label for={name} label="ln.admin.name" size="xs" />
-      <select
-        {...control.register(name)}
-        id={name}
-        defaultValue={defaultValue}
-        aria-invalid={!!errorMessage}
-        className={`dy-select dy-select-bordered text-base shadow-sm ${errorMessage ? "dy-select-error" : ""}`}
-      >
-        {collections.map(({ id, labelText }) => (
-          <option key={id} value={id}>
-            {labelText}
-          </option>
-        ))}
-      </select>
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}
-
-function CollectionIndex({
-  control,
-  index,
-  defaultValue,
-}: {
-  control: Control<MediaItem>
-  index: number
-  defaultValue?: number
-}) {
-  const name = `collections.${index}.index` as const
-  const errorMessage = useFieldError({ name, control })
-  return (
-    <>
-      <Label
-        for={name}
-        label="ln.admin.position-in-collection"
-        size="xs"
-        className="mt-3"
-      />
-      <input
-        className={`dy-input dy-input-bordered shadow-inner ${errorMessage ? "dy-input-error" : ""}`}
-        aria-invalid={!!errorMessage}
-        type="number"
-        id={name}
-        defaultValue={defaultValue}
-        step={1}
-        {...control.register(name, {
-          setValueAs: (value) => (value === "" ? undefined : Number(value)),
-        })}
-      />
-      <ErrorMessage message={errorMessage} />
-    </>
-  )
-}

package/src/components/HighlightSection.astro

@@ -53,7 +53,7 @@ const { image, id, title, text, link, className, titleClass, textClass } =
       {
         link && (
           <a
-            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold uppercase text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
+            class="inline-flex items-center justify-center gap-2 rounded-2xl bg-primary px-6 py-3 text-sm font-bold text-gray-50 shadow-sm hover:bg-primary/85 hover:text-gray-100"
             href={link.href}
           >
             {link.text}

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

@@ -14,7 +14,7 @@ const content = createContentMetadata(item.data.content[0])
 ---
 
 <a
-  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold uppercase text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
+  class="flex min-w-52 items-center justify-center gap-2 rounded-2xl bg-gray-800 px-6 py-3 font-bold text-gray-100 shadow-sm hover:bg-gray-950 hover:text-gray-300"
   href={content.url}
   target={content.target}
   hreflang={item.data.language}

package/src/utils/markdown.ts

@@ -19,6 +19,12 @@ export function markdownToText(markdown?: string) {
       .replaceAll(/^#+ ?/gm, "")
       // lists
       .replaceAll(/^- /gm, "")
+      // escaped white space
+      .replaceAll(/ /g, " ")
+      // underlines
+      .replaceAll(/<\/?u>/g, "")
+      // code block
+      .replaceAll(/^```[a-zA-Z ]*\n/gm, "")
       // block quotes
       .replaceAll(/^>+ ?/gm, "")
       // bold and italics

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

@@ -1,20 +0,0 @@
-import { useI18n } from "../../../../i18n/react/useI18n"
-
-export default function Legend({
-  label,
-  size = "sm",
-  className,
-}: {
-  label: string
-  className?: string
-  size?: "sm" | "xs"
-}) {
-  const { t } = useI18n()
-  return (
-    <legend
-      className={`pb-2 font-bold uppercase text-gray-600 ${size === "sm" ? "text-sm" : "text-xs"} ${className}`}
-    >
-      {t(label)}
-    </legend>
-  )
-}