@lightnet/sveltia-admin 4.0.0

package/CHANGELOG.md

@@ -0,0 +1,27 @@
+# @lightnet/sveltia-admin
+
+## 4.0.0
+
+### Major Changes
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - The `imagesFolder` option was removed from `@lightnet/sveltia-admin`, and image fields now always use the content-adjacent `images` directory.
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - The experimental Decap-based admin integration was replaced by `@lightnet/sveltia-admin`, which no longer accepts a `languages` option.
+
+### Minor Changes
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - Add an experimental `useLanguagesCollection` option to `sveltiaAdmin(...)` so sites can edit LightNet languages through a root-level `languages.json` file.
+  To use it, move the `languages` array out of `lightnet(...)` into `languages.json`, import that file back into `astro.config.*`, and enable `experimental.useLanguagesCollection`.
+
+### Patch Changes
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - `commonId` is now optional for media items in both `lightnet` schema validation and `@lightnet/sveltia-admin`.
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - Export `pathWithBase` from `lightnet/utils` and use that public entrypoint inside `@lightnet/sveltia-admin` so published installs resolve the media edit button controller correctly.
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - Normalize `sveltiaAdmin({ path })` values before composing admin routes and config URLs so documented paths like `/admin` resolve correctly.
+
+- [#361](https://github.com/LightNetDev/LightNet/pull/361) [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce) Thanks [@smn-cds](https://github.com/smn-cds)! - Respect Astro `base` paths for Sveltia Admin URLs so the CMS config request and media edit-button links work correctly when a site is deployed under a subpath such as `/docs`.
+
+- Updated dependencies [[`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce), [`65b3eec`](https://github.com/LightNetDev/LightNet/commit/65b3eec5b68565237b46c6423d21257ad4747dce)]:
+  - lightnet@4.0.0

package/README.md

@@ -0,0 +1,13 @@
+# @lightnet/sveltia-admin
+
+**Experimental** Administration UI for LightNet sites. This is built as an [Astro Integration](https://docs.astro.build/en/guides/integrations-guide/) that uses [Sveltia CMS](https://sveltiacms.app/) to administrate LightNet´s content folders.
+
+## Documentation
+
+[Read the LightNet Administration UI docs](https://docs.lightnet.community/content/administration-ui/) on how to use this.
+
+## License
+
+MIT
+
+Copyright (c) 2024–present [LightNet contributors](https://github.com/LightNetDev/LightNet/graphs/contributors)

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@lightnet/sveltia-admin",
+  "description": "Admin UI for LightNet based on Sveltia CMS.",
+  "type": "module",
+  "license": "MIT",
+  "version": "4.0.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LightNetDev/lightnet",
+    "directory": "packages/sveltia-admin"
+  },
+  "bugs": {
+    "url": "https://github.com/LightNetDev/lightnet/issues"
+  },
+  "homepage": "https://lightnet.community",
+  "keywords": [
+    "astro-integration"
+  ],
+  "files": [
+    "src",
+    "README.md",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "test": "vitest",
+    "e2e": "playwright test"
+  },
+  "exports": {
+    ".": "./src/astro-integration/integration.ts",
+    "./Admin.astro": "./src/Admin.astro",
+    "./config.json.ts": "./src/config.json.ts"
+  },
+  "peerDependencies": {
+    "astro": "^6.0.0"
+  },
+  "dependencies": {
+    "@sveltia/cms": "0.151.4",
+    "lightnet": "^4.0.0"
+  },
+  "devDependencies": {
+    "@internal/e2e-test-utils": "workspace:^0.0.1",
+    "@playwright/test": "^1.58.2",
+    "astro": "^6.1.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.2"
+  },
+  "engines": {
+    "node": ">=22"
+  }
+}

package/src/Admin.astro

@@ -0,0 +1,25 @@
+---
+import config from "virtual:lightnet/sveltiaAdminConfig"
+
+import { pathWithBase } from "./utils/paths"
+---
+
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="robots" content="noindex" />
+    <title>LightNet Administration</title>
+    <link
+      href={pathWithBase(`/${config.path}/config.json`)}
+      type="application/json"
+      rel="cms-config-url"
+    />
+  </head>
+  <body>
+    <script>
+      import { init } from "@sveltia/cms"
+      init({})
+    </script>
+  </body>
+</html>

package/src/assets/lightnet-logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" fill="none"><path fill="url(#a)" d="M127.177 237.945c-31.458-8.449-57.358-27.9-58.64-61.948-1.282-34.047 25.656-62.629 65.654-59.025v-11.337c.016-5.824 7.193-7.94 11.592-4.231l42.11 34.295c3.114 2.632 3.107 7.457-.028 10.232l-42.082 34.907c-4.421 3.931-11.607.984-11.592-4.841v-11.569c-4.214-.655-7.424-.837-9.694-.655-36.43 2.914-33.36 64.459 29.562 61.263 27.034-1.375 71.032-31.406 72.833-78.024 0-70.268-87.295-93.122-65.334-141.292 2.21-4.848-6.687-7.035-12.286-4.905-22.507 6.2-47.336 19.82-61.462 60.259-1.808 5.175-4.081 17.397-6.023 22.485C79.99 88.665 77.4 100.1 70.23 99.493c-9.396-.794-6.122-16.14-4.069-22.75 1.73-5.568-5.982-10.273-13.048-2.995-11.996 12.356-23.989 28.879-28.621 54.665-1.82 10.118-1.92 24.43.146 36.433 8.965 52.294 54.493 85.67 98.792 85.148 10.956-.13 11.254-10.033 3.747-12.049"/><defs><linearGradient id="a" x1="125" x2="125" y1="-3.432" y2="252.061" gradientUnits="userSpaceOnUse"><stop stop-color="#d64fc0"/><stop offset=".466" stop-color="#ff1878"/><stop offset=".611" stop-color="#ff1878"/><stop offset=".981" stop-color="#ff6c0b"/></linearGradient></defs></svg>

package/src/astro-integration/config.ts

@@ -0,0 +1,109 @@
+import { z } from "astro/zod"
+
+const normalizeAdminPath = (path: string) => path.replace(/^\/+|\/+$/g, "")
+
+/**
+ * @see https://sveltiacms.app/en/docs/backends/gitlab
+ */
+const gitlabSchema = z
+  .object({
+    name: z.literal("gitlab"),
+    repo: z.string(),
+    appId: z.string().optional(),
+    branch: z.string().default("main"),
+    authType: z.literal("pkce").default("pkce"),
+  })
+  .transform((gitlabConfig) => ({
+    ...gitlabConfig,
+    app_id: gitlabConfig.appId,
+    auth_type: gitlabConfig.authType,
+  }))
+
+/**
+ * @see https://sveltiacms.app/en/docs/backends/github
+ */
+const githubSchema = z
+  .object({
+    name: z.literal("github"),
+    repo: z.string(),
+    baseUrl: z.string().optional(),
+    branch: z.string().default("main"),
+  })
+  .transform((githubConfig) => ({
+    ...githubConfig,
+    base_url: githubConfig.baseUrl,
+  }))
+
+// Internal testing backend used by the Playwright harness.
+const testRepoSchema = z.object({
+  name: z.literal("test-repo"),
+})
+
+export const adminConfigSchema = z.object({
+  /**
+   * Path for the admin page.
+   *
+   * Default is /admin
+   */
+  path: z.string().default("admin").transform(normalizeAdminPath),
+  /**
+   * Maximum upload file size in megabytes.
+   *
+   * Default is 25 (this aligns with Cloudflare's max file size).
+   */
+  maxFileSize: z.number().default(25),
+  /**
+   * Connected Git Host.
+   */
+  backend: gitlabSchema.or(githubSchema).or(testRepoSchema).optional(),
+
+  /**
+   * Path from the repository root to the LightNet site root.
+   * Set this when the site lives in a subdirectory (for example, in a monorepo).
+   * Leave empty when the site is at the repository root.
+   */
+  siteRootInRepo: z.string().default(""),
+
+  /**
+   * Experimental config options are opt-in and might change with any release.
+   */
+  experimental: z
+    .object({
+      /**
+       * Enable editing LightNet languages through the admin UI.
+       *
+       * This expects a `languages.json` file at the LightNet site root
+       * (for example `/languages.json` inside your Astro site directory,
+       * not inside this package). That file should contain the full
+       * LightNet `languages` array, including each language's `code`,
+       * translated `label`, and any site-language flags like
+       * `isDefaultSiteLanguage` or `isSiteLanguage`.
+       *
+       * Your site's `astro.config.*` should import that file and pass it to
+       * `lightnet({ languages })`.
+       *
+       * @example
+       * import languages from "./languages.json" assert { type: "json" }
+       *
+       * export default defineConfig({
+       *   integrations: [
+       *     lightnet({ languages }),
+       *     lightnetSveltiaAdmin({
+       *       experimental: {
+       *         useLanguagesCollection: true,
+       *       },
+       *     }),
+       *   ],
+       * })
+       *
+       * This option is experimental and may change without a stable
+       * migration path.
+       */
+      useLanguagesCollection: z.boolean().default(false),
+    })
+    .optional(),
+})
+
+export type SveltiaAdminConfig = z.input<typeof adminConfigSchema>
+
+export type ExtendedSveltiaAdminConfig = z.output<typeof adminConfigSchema>

package/src/astro-integration/integration.ts

@@ -0,0 +1,90 @@
+import { fileURLToPath } from "node:url"
+
+import type { AstroIntegration, ViteUserConfig } from "astro"
+import { AstroError } from "astro/errors"
+
+import {
+  adminConfigSchema,
+  type ExtendedSveltiaAdminConfig,
+  type SveltiaAdminConfig,
+} from "./config"
+import { verifySchema } from "./verify-schema"
+
+export default function lightnetSveltiaAdmin(
+  config: SveltiaAdminConfig,
+): AstroIntegration {
+  return {
+    name: "@lightnet/sveltia-admin",
+    hooks: {
+      "astro:config:setup": ({ injectRoute, updateConfig }) => {
+        if (Object.hasOwn(config, "imagesFolder")) {
+          throw new AstroError(
+            "Invalid LightNet Administration UI configuration",
+            "Fix these errors on the sveltiaAdmin configuration inside astro.config.mjs:\n\n- imagesFolder: `imagesFolder` was removed. Remove this option from `sveltiaAdmin(...)`. Image paths now always resolve from the content-adjacent `images` folder.",
+          )
+        }
+
+        const preparedConfig = verifySchema(
+          adminConfigSchema,
+          config,
+          "Invalid LightNet Administration UI configuration",
+          "Fix these errors on the sveltiaAdmin configuration inside astro.config.mjs:",
+        )
+
+        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",
+          prerender: true,
+        })
+
+        updateConfig({
+          vite: {
+            plugins: [vitePluginSveltiaAdminConfig(preparedConfig)],
+          },
+        })
+      },
+      "astro:server:start": ({ address }) => {
+        process.env.LIGHTNET_DEV_SITE_URL = `http://localhost:${address.port}`
+      },
+    },
+  }
+}
+
+const CONFIG = "virtual:lightnet/sveltiaAdminConfig"
+const MEDIA_ITEM_EDIT_BUTTON_CONTROLLER =
+  "virtual:lightnet/components/media-item-edit-button-controller"
+const MEDIA_ITEM_EDIT_BUTTON_CONTROLLER_PATH = JSON.stringify(
+  fileURLToPath(
+    new URL("./media-item-edit-button-controller.ts", import.meta.url),
+  ),
+)
+const VIRTUAL_MODULES = [CONFIG, MEDIA_ITEM_EDIT_BUTTON_CONTROLLER] as const
+
+function vitePluginSveltiaAdminConfig(
+  userConfig: ExtendedSveltiaAdminConfig,
+): NonNullable<ViteUserConfig["plugins"]>[number] {
+  return {
+    name: "vite-plugin-lightnet-sveltia-admin-config",
+    enforce: "pre",
+    resolveId(id): string | undefined {
+      const module = VIRTUAL_MODULES.find((m) => m === id)
+      if (module) return `\0${module}`
+    },
+    load(id): string | undefined {
+      const module = VIRTUAL_MODULES.find((m) => id === `\0${m}`)
+      switch (module) {
+        case CONFIG:
+          return `export default ${JSON.stringify(userConfig)};`
+        case MEDIA_ITEM_EDIT_BUTTON_CONTROLLER:
+          return userConfig.path === "admin"
+            ? `export { default } from ${MEDIA_ITEM_EDIT_BUTTON_CONTROLLER_PATH};`
+            : "export default undefined;"
+      }
+    },
+  }
+}

package/src/astro-integration/media-item-edit-button-controller.ts

@@ -0,0 +1,27 @@
+import { pathWithBase } from "../utils/paths"
+
+const parseCachedUser = () => {
+  try {
+    const cachedUser = localStorage.getItem("sveltia-cms.user")
+    return cachedUser ? JSON.parse(cachedUser) : undefined
+  } catch {
+    return undefined
+  }
+}
+
+export default {
+  shouldShow: () => {
+    if (import.meta.env.DEV) {
+      return true
+    }
+
+    const cachedUser = parseCachedUser()
+    return (
+      typeof cachedUser === "object" &&
+      cachedUser !== null &&
+      typeof cachedUser.backendName === "string"
+    )
+  },
+  createHref: (mediaId: string) =>
+    `${pathWithBase("/admin")}#/collections/media/entries/${encodeURIComponent(mediaId)}`,
+}

package/src/astro-integration/verify-schema.ts

@@ -0,0 +1,32 @@
+import { AstroError } from "astro/errors"
+import { z } from "astro/zod"
+
+export function verifySchema<T extends z.Schema>(
+  schema: T,
+  toVerify: unknown,
+  errorMessage: string | ((id: string | undefined) => string),
+  hint: string | ((id: string | undefined) => string),
+): z.output<T> {
+  const parsed = schema.safeParse(toVerify, {})
+  if (parsed.success) {
+    return parsed.data
+  }
+
+  throwParseError(toVerify, errorMessage, hint, parsed)
+}
+
+function throwParseError(
+  toVerify: unknown,
+  errorMessage: string | ((id: string | undefined) => string),
+  hint: string | ((id: string | undefined) => string),
+  parsed: z.ZodSafeParseError<unknown>,
+): never {
+  const id = z.object({ id: z.string() }).safeParse(toVerify).data?.id
+  const message =
+    typeof errorMessage === "string" ? errorMessage : errorMessage(id)
+  const hintFinal = typeof hint === "string" ? hint : hint(id)
+  const issues = parsed.error.issues
+    .map((issue) => `- ${issue.path.join(".")}: ${issue.message}`)
+    .join("\n")
+  throw new AstroError(message, `${hintFinal}\n\n${issues}`)
+}

package/src/astro-integration/virtual.d.ts

@@ -0,0 +1,4 @@
+declare module "virtual:lightnet/sveltiaAdminConfig" {
+  const config: import("./config").ExtendedSveltiaAdminConfig
+  export default config
+}

package/src/config.json.ts

@@ -0,0 +1,7 @@
+import type { APIRoute } from "astro"
+
+import { getConfig } from "./sveltia/sveltia.config"
+
+export const GET: APIRoute = () => {
+  return new Response(JSON.stringify(getConfig()))
+}

package/src/sveltia/collections/content/categories.ts

@@ -0,0 +1,31 @@
+import type { Collection } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+
+import { inlineTranslation } from "../../utils/inline-translation"
+import { projectPath } from "../../utils/path"
+
+export const categoriesCollection: Collection = {
+  name: "categories",
+  label: "Categories",
+  description:
+    "Organize and filter 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,
+  format: "json",
+  slug: "{{fields._slug}}",
+  summary: `{{label.${config.defaultLocale}}}  ({{slug}})`,
+  fields: [
+    inlineTranslation({ name: "label", label: "Name" }),
+    {
+      name: "image",
+      label: "Image",
+      required: false,
+      choose_url: false,
+      widget: "image",
+      media_folder: "./images",
+      accept: "image/png, image/jpeg, image/webp",
+      hint: "When you upload an image, it is automatically resized (up to 2048 pixels) and saved in a web-friendly format.",
+    },
+  ],
+}

package/src/sveltia/collections/content/index.ts

@@ -0,0 +1,12 @@
+import { categoriesCollection } from "./categories"
+import { mediaCollectionCollection } from "./media-collections"
+import { mediaItemCollection } from "./media-items"
+import { mediaTypeCollection } from "./media-types"
+
+export const contentCollections = [
+  mediaItemCollection,
+  { divider: true },
+  categoriesCollection,
+  mediaCollectionCollection,
+  mediaTypeCollection,
+]

package/src/sveltia/collections/content/languages.ts

@@ -0,0 +1,73 @@
+import type { CollectionFile } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+import sveltiaAdminConfig from "virtual:lightnet/sveltiaAdminConfig"
+
+import { inlineTranslation } from "../../utils/inline-translation"
+import { projectPath } from "../../utils/path"
+
+export const languagesSelect = () => {
+  if (sveltiaAdminConfig.experimental?.useLanguagesCollection) {
+    return {
+      name: "language",
+      label: "Language",
+      widget: "relation",
+      collection: "_singletons",
+      file: "languages",
+      value_field: "{{languages.*.code}}",
+      display_fields: [
+        `{{languages.*.label.${config.defaultLocale}}} ({{languages.*.code}})`,
+      ],
+    }
+  } else {
+    return {
+      name: "language",
+      label: "Language",
+      widget: "select",
+      options: config.languages.map(({ code, label }) => {
+        return {
+          label: `${label[config.defaultLocale]} (${code})`,
+          value: code,
+        }
+      }),
+    }
+  }
+}
+
+export const defineLanguagesCollection = () => {
+  if (!sveltiaAdminConfig.experimental?.useLanguagesCollection) {
+    return
+  }
+  return languagesCollection
+}
+
+const languagesCollection: CollectionFile = {
+  name: "languages",
+  label: "Languages",
+  file: projectPath("languages.json"),
+  format: "json",
+  icon: "language",
+  fields: [
+    {
+      widget: "list",
+      name: "languages",
+      label: "Languages",
+      label_singular: "Language",
+      allow_duplicate: false,
+      root: true,
+      collapsed: "auto",
+      summary: `{{label.${config.defaultLocale}}}  ({{code}})`,
+      fields: [
+        {
+          name: "code",
+          label: "Language Code",
+          hint: "Enter a valid IETF BCP 47 language tag (for example, en, en-US, ar). Use this [tool](https://r12a.github.io/app-subtags/) to find the right code.",
+          pattern: [
+            "^(?:(?:[A-Za-z]{2,3}(?:-[A-Za-z]{3}){0,3}|[A-Za-z]{4}|[A-Za-z]{5,8})(?:-[A-Za-z]{4})?(?:-(?:[A-Za-z]{2}|\\d{3}))?(?:-(?:[A-Za-z0-9]{5,8}|\\d[A-Za-z0-9]{3}))*(?:-[0-9A-WY-Za-wy-z](?:-[A-Za-z0-9]{2,8})+)*(?:-x(?:-[A-Za-z0-9]{1,8})+)?|x(?:-[A-Za-z0-9]{1,8})+)$",
+            "Enter a valid BCP 47 language tag (e.g. en, en-US, zh-Hans-CN).",
+          ],
+        },
+        inlineTranslation({ name: "label", label: "Name" }),
+      ],
+    },
+  ],
+}

package/src/sveltia/collections/content/media-collections.ts

@@ -0,0 +1,43 @@
+import type { Collection } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+
+import { inlineTranslation } from "../../utils/inline-translation"
+import { projectPath } from "../../utils/path"
+
+export const mediaCollectionCollection: Collection = {
+  name: "media-collections",
+  label: "Media Collections",
+  description:
+    "Group related media items in a specific order. Examples: a course, a series, a study path. [Read documentation](https://docs.lightnet.community/content/media-collections/)",
+  label_singular: "Media Collection",
+  create: true,
+  folder: projectPath("src/content/media-collections"),
+  format: "json",
+  slug: "{{fields._slug}}",
+  summary: `{{label.${config.defaultLocale}}}  ({{slug}})`,
+  fields: [
+    inlineTranslation({
+      name: "label",
+      label: "Name",
+    }),
+    {
+      name: "mediaItems",
+      label: "Media Items",
+      label_singular: "Media Item",
+      widget: "list",
+      hint: "The list order defines the item order in this collection.",
+      summary: "{{fields.mediaItem}}",
+      collapsed: true,
+      field: {
+        name: "mediaItem",
+        label: "Media Item",
+        widget: "relation",
+        collection: "media",
+        value_field: "{{slug}}",
+        display_fields: ["{{title}} ({{slug}})"],
+        search_fields: ["{{title}}", "{{slug}}"],
+        dropdown_threshold: 1,
+      },
+    },
+  ],
+}

package/src/sveltia/collections/content/media-items.ts

@@ -0,0 +1,164 @@
+import type { Collection } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+import sveltiaAdminConfig from "virtual:lightnet/sveltiaAdminConfig"
+
+import { inlineTranslation } from "../../utils/inline-translation"
+import { projectPath } from "../../utils/path"
+import { languagesSelect } from "./languages"
+
+export const mediaItemCollection: Collection = {
+  name: "media",
+  label: "Media Items",
+  description:
+    "Add content entries to the media library. 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"),
+  create: true,
+  preview_path: `${config.defaultLocale}/media/{{filename}}`,
+  format: "json",
+  slug: "{{fields._slug}}",
+  sortable_fields: ["slug", "dateCreated", "language"],
+  summary: "{{title}} ({{slug}})",
+  view_groups: [
+    { label: "Language", field: "language", pattern: ".*" },
+    { label: "Type", field: "type", pattern: ".*" },
+  ],
+  fields: [
+    { name: "title", label: "Title", widget: "string" },
+    {
+      name: "type",
+      label: "Type",
+      widget: "relation",
+      collection: "media-types",
+      value_field: "{{slug}}",
+      display_fields: [`{{label.${config.defaultLocale}}} ({{slug}})`],
+    },
+    languagesSelect(),
+    {
+      name: "image",
+      label: "Image",
+      widget: "image",
+      choose_url: false,
+      media_folder: "./images",
+      accept: "image/png, image/jpeg, image/webp",
+      hint: "When you upload an image, it is automatically resized (up to 2048 pixels) and saved in a web-friendly format.",
+    },
+    {
+      name: "content",
+      label: "Content",
+      widget: "list",
+      hint: "Add files or weblinks. First item in the list is the main content.",
+      min: 1,
+      summary: "{{types.url}}",
+      types: [
+        {
+          name: "upload",
+          label: "File Upload",
+          fields: [
+            {
+              name: "url",
+              label: "File",
+              widget: "file",
+              choose_url: false,
+              media_folder: projectPath("public/files"),
+              public_folder: "/files",
+              hint: `Maximum file size is ${sveltiaAdminConfig.maxFileSize} MB.`,
+              media_library: {
+                config: {
+                  max_file_size: sveltiaAdminConfig.maxFileSize * 1000000,
+                },
+              },
+            },
+            inlineTranslation({
+              name: "label",
+              label: "Label",
+              hint: "Optional. Defaults to the file name, for example 'bible' from 'bible.pdf'.",
+              required: false,
+              collapsed: "auto",
+            }),
+          ],
+        },
+        {
+          name: "link",
+          label: "Link",
+          summary: "{{url}}",
+          fields: [
+            {
+              name: "url",
+              label: "Url",
+              widget: "string",
+              type: "url",
+              pattern: ["^https?://", "Link must start with http(s)://"],
+            },
+            inlineTranslation({
+              name: "label",
+              label: "Label",
+              required: false,
+              hint: "Optional. Defaults to the file name or link domain, for example 'youtube.com'.",
+              collapsed: "auto",
+            }),
+          ],
+        },
+      ],
+    },
+    {
+      name: "dateCreated",
+      label: "Date Created",
+      widget: "datetime",
+      time_format: false,
+      required: true,
+      default: "{{now}}",
+      picker_utc: true,
+      hint: "The date this item was added to this media library.",
+    },
+    {
+      name: "authors",
+      label: "Authors",
+      label_singular: "Author",
+      required: false,
+      collapsed: true,
+      default: [],
+      widget: "list",
+      summary: "{{fields.name}}",
+      field: { label: "Name", name: "name", widget: "string" },
+    },
+    {
+      name: "commonId",
+      label: "Common ID",
+      widget: "string",
+      required: false,
+      hint: "Optional: Use a shared Common ID to link translated versions of a media item.",
+    },
+    {
+      name: "categories",
+      label: "Categories",
+      required: false,
+      widget: "relation",
+      multiple: true,
+      collection: "categories",
+      display_fields: ["{{slug}}"],
+      search_fields: ["{{slug}}"],
+    },
+    {
+      name: "description",
+      label: "Description",
+      widget: "markdown",
+      required: false,
+      editor_components: [],
+      buttons: [
+        "heading-one",
+        "heading-two",
+        "heading-three",
+        "heading-four",
+        "heading-five",
+        "heading-six",
+        "bold",
+        "italic",
+        "bulleted-list",
+        "numbered-list",
+        "quote",
+        "link",
+      ],
+    },
+  ],
+}

package/src/sveltia/collections/content/media-types.ts

@@ -0,0 +1,79 @@
+import type { Collection } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+
+import { inlineTranslation } from "../../utils/inline-translation"
+import { projectPath } from "../../utils/path"
+
+export const mediaTypeCollection: Collection = {
+  name: "media-types",
+  label: "Media Types",
+  description:
+    "Define different content formats. Examples: books, videos, audio. [Read documentation](https://docs.lightnet.community/content/media-types/)",
+  label_singular: "Media Type",
+  folder: projectPath("src/content/media-types"),
+  format: "json",
+  slug: "{{fields._slug}}",
+  summary: `{{label.${config.defaultLocale}}}  ({{slug}})`,
+  fields: [
+    inlineTranslation({ name: "label", label: "Name" }),
+    {
+      name: "icon",
+      label: "Icon",
+      pattern: [
+        "(?:mdi|lucide)--.+",
+        "Icon name must start with mdi-- or lucide--",
+      ],
+      widget: "string",
+      hint: "Browse Lucide icons at https://lucide.dev/icons/ and enter the icon name with the 'lucide--' prefix, for example 'lucide--book-open'.",
+    },
+    {
+      name: "coverImageStyle",
+      label: "Cover Image Style",
+      widget: "select",
+      default: "default",
+      options: ["default", "book", "video"],
+    },
+    {
+      name: "detailsPage",
+      required: false,
+      typeKey: "layout",
+      label: "Details Page Configuration",
+      default: {},
+      widget: "object",
+      types: [
+        {
+          name: "default",
+          label: "Default",
+          fields: [
+            inlineTranslation({
+              name: "openActionLabel",
+              label: "Open Action Label",
+              required: false,
+              collapsed: "auto",
+            }),
+          ],
+        },
+        {
+          name: "custom",
+          label: "Custom",
+          fields: [
+            {
+              name: "customComponent",
+              required: true,
+              label: "Custom Component",
+              widget: "string",
+            },
+          ],
+        },
+        {
+          name: "video",
+          label: "Video",
+        },
+        {
+          name: "audio",
+          label: "Audio",
+        },
+      ],
+    },
+  ],
+}

package/src/sveltia/sveltia.config.ts

@@ -0,0 +1,74 @@
+import type { CmsConfig } from "@sveltia/cms"
+import { site } from "astro:config/server"
+import sveltiaAdminConfig from "virtual:lightnet/sveltiaAdminConfig"
+
+import lightnetLogo from "../assets/lightnet-logo.svg?url"
+import { contentCollections } from "./collections/content"
+import { defineLanguagesCollection } from "./collections/content/languages"
+import { projectPath } from "./utils/path"
+
+export function getConfig(
+  siteUrl = process.env.LIGHTNET_DEV_SITE_URL ?? site,
+): CmsConfig {
+  return {
+    backend: sveltiaAdminConfig.backend ?? {
+      name: "github",
+      repo: createLocalRepoPath(),
+    },
+    media_folder: projectPath("src/assets"),
+    public_folder: "/src/assets",
+    app_title: "LightNet Admin",
+    logo: {
+      src: lightnetLogo,
+    },
+    media_libraries: {
+      stock_assets: {
+        providers: [],
+      },
+      default: {
+        config: {
+          slugify_filename: true,
+          max_file_size: sveltiaAdminConfig.maxFileSize * 1024 * 1024,
+          transformations: {
+            raster_image: {
+              format: "webp",
+              quality: 85,
+              width: 2048,
+              height: 2048,
+            },
+            svg: {
+              optimize: true,
+            },
+          },
+        },
+      },
+    },
+    editor: { preview: false },
+    site_url: siteUrl,
+    output: {
+      omit_empty_optional_fields: true,
+    },
+    slug: {
+      clean_accents: true,
+      maxlength: 60,
+    },
+    collections: [...contentCollections],
+    singletons: [defineLanguagesCollection()].filter((c) => !!c),
+  }
+}
+
+// Sveltia CMS uses repo as unique site identifier for IndexedDB
+// https://github.com/sveltia/sveltia-cms/issues/630
+// Also it expects repo in format <org>/<repo>
+// We do not want to require setting a path for local only settings so we generate
+// our path from site url.
+function createLocalRepoPath() {
+  return (
+    (site ?? "")
+      .replace(/^https?:\/\//, "")
+      .replaceAll("/", "-")
+      .replaceAll(".", "-") + "/local-repository"
+  )
+}
+
+export const config = getConfig()

package/src/sveltia/utils/inline-translation.ts

@@ -0,0 +1,25 @@
+import type { Field, ObjectField } from "@sveltia/cms"
+import config from "virtual:lightnet/config"
+
+type Options = Partial<ObjectField> & {
+  name: string
+}
+
+const locales = [
+  config.defaultLocale,
+  ...config.locales.filter((l) => l !== config.defaultLocale),
+].map((locale) => ({
+  name: locale,
+  label: locale,
+}))
+
+export const inlineTranslation = (options: Options): Field => ({
+  summary: `{{${config.defaultLocale}}}`,
+  ...options,
+  widget: "object",
+  fields: locales.map((locale) => ({
+    ...locale,
+    widget: "string",
+    required: locale.name === config.defaultLocale,
+  })),
+})

package/src/sveltia/utils/path.ts

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

package/src/utils/paths.ts

@@ -0,0 +1,15 @@
+/**
+ * Prefix a site-internal path with Astro's configured base path.
+ *
+ * This helper trims any trailing slash from `BASE_URL`, ensures the input
+ * path starts with a leading slash, and concatenates the two values.
+ * Absolute URLs are out of scope for this helper.
+ *
+ * @param path internal path such as "/en/media", "/api/internal/search.json", or "/"
+ * @returns base-aware internal path
+ */
+export function pathWithBase(path: string) {
+  const normalizedBase = import.meta.env.BASE_URL.replace(/\/+$/, "")
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`
+  return `${normalizedBase}${normalizedPath}`
+}