@lightnet/sveltia-admin 4.2.2 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @lightnet/sveltia-admin
 
+## 4.2.3
+
+### Patch Changes
+
+- [#456](https://github.com/LightNetDev/LightNet/pull/456) [`2c49737`](https://github.com/LightNetDev/LightNet/commit/2c4973792aa695a2b19acc04744aca39bb7f868d) - Serve the development admin as plain HTML loading Sveltia from the CDN, pinned to the installed npm package version, to prevent reloads from interrupting local saves. Keep normal Astro bundling in production and preserve custom admin paths and Astro base paths without requiring files in the site's public directory.
+
+- [#456](https://github.com/LightNetDev/LightNet/pull/456) [`2c49737`](https://github.com/LightNetDev/LightNet/commit/2c4973792aa695a2b19acc04744aca39bb7f868d) - Update dependencies.
+- Updated dependencies [[`2c49737`](https://github.com/LightNetDev/LightNet/commit/2c4973792aa695a2b19acc04744aca39bb7f868d), [`2c49737`](https://github.com/LightNetDev/LightNet/commit/2c4973792aa695a2b19acc04744aca39bb7f868d)]:
+  - lightnet@4.6.2
+
 ## 4.2.2
 
 ### Patch Changes

package/package.json

@@ -3,7 +3,7 @@
   "description": "Admin UI for LightNet based on Sveltia CMS.",
   "type": "module",
   "license": "MIT",
-  "version": "4.2.2",
+  "version": "4.2.3",
   "publishConfig": {
     "access": "public"
   },
@@ -26,29 +26,30 @@
   ],
   "exports": {
     ".": "./src/astro-integration/integration.ts",
+    "./admin.html.ts": "./src/admin.html.ts",
     "./Admin.astro": "./src/Admin.astro",
     "./config.json.ts": "./src/config.json.ts"
   },
   "peerDependencies": {
     "astro": "^6.0.0",
-    "lightnet": "^4.6.0"
+    "lightnet": "^4.6.2"
   },
   "dependencies": {
-    "@sveltia/cms": "0.208.2"
+    "@sveltia/cms": "0.248.0"
   },
   "devDependencies": {
     "@internal/e2e-test-utils": "^0.0.1",
-    "@playwright/test": "^1.63.0",
+    "@playwright/test": "^1.64.1",
     "astro": "^6.4.8",
-    "lightnet": "^4.6.0",
+    "lightnet": "^4.6.2",
     "typescript": "^6.0.3",
-    "vitest": "^5.0.0"
+    "vitest": "^5.0.5"
   },
   "engines": {
     "node": ">=22"
   },
   "scripts": {
-    "test": "vitest",
+    "test": "vitest run",
     "e2e": "playwright test"
   }
 }

package/src/Admin.astro

@@ -8,6 +8,7 @@ import { pathWithBase } from "./utils/path-with-base"
 <html>
   <head>
     <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="robots" content="noindex" />
     <title>LightNet Administration</title>
     <link
@@ -19,6 +20,7 @@ import { pathWithBase } from "./utils/path-with-base"
   <body>
     <script>
       import { init } from "@sveltia/cms"
+
       init({})
       window.localStorage.setItem(
         "ln.adminPaths",

package/src/admin.html.ts

@@ -0,0 +1,50 @@
+import { readFile } from "node:fs/promises"
+
+import type { APIRoute } from "astro"
+import config from "virtual:lightnet/sveltiaAdminConfig"
+
+import { pathWithBase } from "./utils/path-with-base"
+
+let sveltiaScriptUrl = ""
+const getSveltiaScriptUrl = async () => {
+  // The package does not export package.json. Resolve its entry first so this
+  // follows the installed version, including pnpm overrides and workspace links.
+  if (sveltiaScriptUrl) {
+    return sveltiaScriptUrl
+  }
+  const cmsEntry = import.meta.resolve("@sveltia/cms")
+  const { version } = JSON.parse(
+    await readFile(new URL("../package.json", cmsEntry), "utf8"),
+  ) as { version: string }
+  sveltiaScriptUrl = `https://unpkg.com/@sveltia/cms@${version}/dist/sveltia-cms.mjs`
+  return sveltiaScriptUrl
+}
+
+export const GET: APIRoute = async () => {
+  const configUrl = pathWithBase(`/${config.path}/config.json`)
+  const scriptUrl = await getSveltiaScriptUrl()
+
+  return new Response(
+    `<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="robots" content="noindex">
+    <title>LightNet Administration</title>
+    <link href="${configUrl}" type="application/json" rel="cms-config-url">
+  </head>
+  <body>
+    <script type="module">
+      import CMS from ${JSON.stringify(scriptUrl)};
+      CMS.init({});
+      window.localStorage.setItem("ln.adminPaths", JSON.stringify({
+        rootPath: window.location.pathname,
+        mediaItemPath: window.location.pathname + "#/collections/media/entries/{{mediaId}}"
+      }));
+    </script>
+  </body>
+</html>`,
+    { headers: { "Content-Type": "text/html; charset=utf-8" } },
+  )
+}

package/src/astro-integration/config.ts

@@ -54,11 +54,17 @@ const r2Storage = z.object({
 
 export const adminConfigSchema = z.object({
   /**
-   * Path for the admin page.
+   * Nonempty path for the admin page. The site root is not supported.
+   * Provide a valid URL path with any special characters percent-encoded.
    *
-   * Default is /admin
+   * Default is "admin"
    */
-  path: z.string().default("admin").transform(normalizeAdminPath),
+  path: z
+    .string()
+    .trim()
+    .default("admin")
+    .transform(normalizeAdminPath)
+    .pipe(z.string().trim().min(1, "Admin path must not be empty")),
   /**
    * Maximum upload file size in megabytes.
    *
@@ -156,7 +162,7 @@ export const adminConfigSchema = z.object({
        */
       showDateCreatedField: z.boolean().default(true),
       /**
-       * Show `commonI`d field in the media item editor.
+       * Show `commonId` field in the media item editor.
        *
        * @default true
        */

package/src/astro-integration/integration.ts

@@ -14,7 +14,7 @@ export default function lightnetSveltiaAdmin(
   return {
     name: "@lightnet/sveltia-admin",
     hooks: {
-      "astro:config:setup": ({ injectRoute, updateConfig }) => {
+      "astro:config:setup": ({ command, injectRoute, updateConfig }) => {
         if (Object.hasOwn(config, "imagesFolder")) {
           throw new AstroError(
             "Invalid LightNet Administration UI configuration",
@@ -29,11 +29,23 @@ export default function lightnetSveltiaAdmin(
           "Fix these errors on the sveltiaAdmin configuration inside astro.config.mjs:",
         )
 
-        injectRoute({
-          pattern: preparedConfig.path,
-          entrypoint: "@lightnet/sveltia-admin/Admin.astro",
-          prerender: true,
-        })
+        // During development, serve plain HTML to prevent Vite reloads from
+        // interrupting CMS saves. In production, use the Astro page to bundle assets.
+        // See: https://sveltiacms.app/en/docs/workflows/local#troubleshooting
+        if (command === "dev") {
+          injectRoute({
+            pattern: preparedConfig.path,
+            entrypoint: "@lightnet/sveltia-admin/admin.html.ts",
+            prerender: true,
+          })
+        } else {
+          injectRoute({
+            pattern: preparedConfig.path,
+            entrypoint: "@lightnet/sveltia-admin/Admin.astro",
+            prerender: true,
+          })
+        }
+
         injectRoute({
           pattern: `${preparedConfig.path}/config.json`,
           entrypoint: "@lightnet/sveltia-admin/config.json.ts",

package/src/collections/categories.ts

@@ -1,7 +1,6 @@
 import type { Collection } from "@sveltia/cms"
 import adminConfig from "virtual:lightnet/sveltiaAdminConfig"
 
-import { projectPath } from "../utils/paths"
 import { inlineTranslation, translatedLabel } from "./fields/inline-translation"
 
 export const categoriesCollection: Collection = {
@@ -10,8 +9,8 @@ export const categoriesCollection: Collection = {
   description:
     "Use categories to group related media items by topic. Examples: discipleship, youth, prayer. [Read documentation](https://docs.lightnet.community/content/categories/)",
   label_singular: "Category",
-  folder: projectPath("src/content/categories"),
-  create: true,
+  folder: "src/content/categories",
+  create: !adminConfig.experimental.hideCategoriesCollection,
   hide: adminConfig.experimental.hideCategoriesCollection,
   format: "json",
   slug: adminConfig.experimental.showSlugField

package/src/collections/languages.ts

@@ -2,7 +2,6 @@ import type { CollectionFile } from "@sveltia/cms"
 import config from "virtual:lightnet/config"
 import adminConfig from "virtual:lightnet/sveltiaAdminConfig"
 
-import { projectPath } from "../utils/paths"
 import { inlineTranslation } from "./fields/inline-translation"
 
 const { summaryLocale } = adminConfig.experimental
@@ -49,7 +48,7 @@ export const defineLanguagesCollection = () => {
 const languagesCollection: CollectionFile = {
   name: "languages",
   label: "Languages",
-  file: projectPath("languages.json"),
+  file: "languages.json",
   format: "json",
   icon: "language",
   fields: [

package/src/collections/media-collections.ts

@@ -1,7 +1,6 @@
 import type { Collection } from "@sveltia/cms"
 import adminConfig from "virtual:lightnet/sveltiaAdminConfig"
 
-import { projectPath } from "../utils/paths"
 import { inlineTranslation, translatedLabel } from "./fields/inline-translation"
 
 export const mediaCollectionCollection: Collection = {
@@ -10,9 +9,9 @@ export const mediaCollectionCollection: Collection = {
   description:
     "Use media collections to group related media items in order. Examples: a course, a series, a study path. [Read documentation](https://docs.lightnet.community/content/media-collections/)",
   label_singular: "Media Collection",
-  create: true,
+  create: !adminConfig.experimental.hideMediaCollectionsCollection,
   hide: adminConfig.experimental.hideMediaCollectionsCollection,
-  folder: projectPath("src/content/media-collections"),
+  folder: "src/content/media-collections",
   format: "json",
   slug: adminConfig.experimental.showSlugField
     ? "{{fields._slug}}"

package/src/collections/media-items.ts

@@ -3,7 +3,6 @@ import config from "virtual:lightnet/config"
 import adminConfig from "virtual:lightnet/sveltiaAdminConfig"
 
 import { isDefined } from "../utils/is-defined"
-import { projectPath } from "../utils/paths"
 import { inlineTranslation, translatedLabel } from "./fields/inline-translation"
 import { languagesSelect } from "./languages"
 
@@ -13,7 +12,7 @@ export const mediaItemCollection: Collection = {
   description:
     "Use media items to add resources people can open or download. Examples: a book PDF, a YouTube link. [Read documentation](https://docs.lightnet.community/content/media-items/)",
   label_singular: "Media Item",
-  folder: projectPath("src/content/media"),
+  folder: "src/content/media",
   create: true,
   preview_path: `${config.defaultLocale}/media/{{filename}}`,
   format: "json",
@@ -175,7 +174,7 @@ function getFileStorage() {
   const externalFileStorage = adminConfig.experimental.fileStorage
   if (!externalFileStorage) {
     return {
-      media_folder: projectPath("public/files"),
+      media_folder: "/public/files",
       public_folder: "/files",
       hint: `Upload a file up to ${adminConfig.maxFileSize} MB.`,
       media_libraries: {

package/src/collections/media-types.ts

@@ -1,7 +1,6 @@
 import type { Collection } from "@sveltia/cms"
 import adminConfig from "virtual:lightnet/sveltiaAdminConfig"
 
-import { projectPath } from "../utils/paths"
 import { inlineTranslation, translatedLabel } from "./fields/inline-translation"
 
 export const mediaTypeCollection: Collection = {
@@ -10,8 +9,9 @@ export const mediaTypeCollection: Collection = {
   description:
     "Use media types to organize media items by format. Examples: books, videos, audio. [Read documentation](https://docs.lightnet.community/content/media-types/)",
   label_singular: "Media Type",
-  folder: projectPath("src/content/media-types"),
+  folder: "src/content/media-types",
   format: "json",
+  create: !adminConfig.experimental.hideMediaTypesCollection,
   hide: adminConfig.experimental.hideMediaTypesCollection,
   slug: adminConfig.experimental.showSlugField
     ? "{{fields._slug}}"
@@ -41,7 +41,7 @@ export const mediaTypeCollection: Collection = {
       required: false,
       typeKey: "layout",
       label: "Details Page Configuration",
-      default: {},
+      default: { layout: "default" },
       widget: "object",
       types: [
         {

package/src/sveltia.config.ts

@@ -9,14 +9,13 @@ import { mediaCollectionCollection } from "./collections/media-collections"
 import { mediaItemCollection } from "./collections/media-items"
 import { mediaTypeCollection } from "./collections/media-types"
 import { isDefined } from "./utils/is-defined"
-import { projectPath } from "./utils/paths"
 
 export function createConfig(
   siteUrl = process.env.LIGHTNET_DEV_SITE_URL ?? site,
 ): CmsConfig {
   return {
     backend: getBackend(),
-    media_folder: projectPath("src/assets"),
+    media_folder: "src/assets",
     public_folder: "/src/assets",
     app_title: "LightNet Admin",
     logo: {
@@ -73,9 +72,13 @@ const optimizedImage = {
 
 function getBackend(): Backend {
   const { backend } = adminConfig
+  const commonConfig = {
+    root_dir: adminConfig.siteRootInRepo || undefined,
+  }
 
   if (!backend) {
     return {
+      ...commonConfig,
       name: "github",
       repo: createLocalRepoPath(),
     }
@@ -83,6 +86,7 @@ function getBackend(): Backend {
 
   if (backend.name === "github") {
     return {
+      ...commonConfig,
       ...backend,
       base_url: backend.baseUrl,
     }
@@ -90,12 +94,13 @@ function getBackend(): Backend {
 
   if (backend.name === "gitlab") {
     return {
+      ...commonConfig,
       ...backend,
       app_id: backend.appId,
       auth_type: backend.authType,
     }
   }
-  return backend
+  return { ...commonConfig, ...backend }
 }
 
 // Sveltia CMS uses repo as unique site identifier for IndexedDB

package/src/utils/paths.ts

@@ -1,6 +0,0 @@
-import sveltiaAdminConfig from "virtual:lightnet/sveltiaAdminConfig"
-
-const basePath: string = sveltiaAdminConfig.siteRootInRepo
-
-export const projectPath = (path: string) =>
-  `${basePath}${basePath.endsWith("/") || path.startsWith("/") ? "" : "/"}${path}`