build: Package Sveltia CMS using Vite

.github/workflows/deploy.yaml

@@ -50,6 +50,8 @@ jobs:
         uses: actions/configure-pages@v5
       - name: Install Node.js dependencies
         run: "npm ci"
+      - name: Build admin CMS
+        run: "npm run build:admin"
       - name: Cache Hugo Resources
         uses: actions/cache@v4
         with:

.github/workflows/pullrequest.yaml

@@ -44,6 +44,8 @@ jobs:
         uses: actions/configure-pages@v5
       - name: Install Node.js dependencies
         run: "npm ci"
+      - name: Build admin CMS
+        run: "npm run build:admin"
       - name: Cache Hugo Resources
         uses: actions/cache@v4
         with:

.gitignore

@@ -2,6 +2,7 @@
 node_modules/
 public/
 resources/
+static/admin/
 hugo.exe
 .hugo_build.lock
 .DS_Store

CONTRIBUTING.md

@@ -33,6 +33,12 @@ First of all, we have to the install the node packages by running:
 npm i
 ```
 
+The CMS admin interface (`/admin`) is bundled separately with Vite and is not rebuilt automatically by Hugo. Run the following command whenever you change files in `assets/admin/` (or after installing/updating packages) to (re)generate it:
+
+```zsh
+npm run build:admin
+```
+
 Then, we can start the integrated hugo server with:
 
 ```zsh

assets/admin/fields.js

@@ -0,0 +1,113 @@
+import { createElement as h } from "react";
+import { getFieldType, registerFieldType } from "@sveltia/cms";
+
+var SelectControl = getFieldType("select").control;
+
+function FipValiditySelectControl(props) {
+  var groups = props.entry ? props.entry.getIn(["data", "groups"]) : null;
+  groups = groups && typeof groups.toJS === "function" ? groups.toJS() : [];
+  var groupType = props.field ? props.field.get("group_type") : null;
+  if (groupType) {
+    groups = groups.filter(function (group) {
+      return !group.type || group.type === groupType;
+    });
+  }
+  var options = groups
+    .filter(function (group) {
+      return !!group.name;
+    })
+    .map(function (group) {
+      return { label: group.name, value: group.name };
+    });
+
+  return h(SelectControl, {
+    field: { name: props.field.get("name"), options },
+    value: props.value,
+    forID: props.forID,
+    onChange: props.onChange,
+  });
+}
+
+registerFieldType(
+  "fip-validity-select",
+  FipValiditySelectControl,
+  FipValiditySelectControl,
+);
+
+function CmsEditLinkControl(props) {
+  var field = props.field;
+  var getValue = field.get("get_value");
+  var hrefTemplate = field.get("href");
+  var labelTemplate = field.get("label_template");
+  var emptyHint = field.get("empty_hint");
+  var isStatic = field.get("static");
+
+  var value = isStatic ? "" : String(getValue(props) || "");
+
+  if (!isStatic && !value) {
+    return h("p", { className: "o-cms-edit-link__info" }, emptyHint);
+  }
+
+  var href = hrefTemplate.replace(/\{value\}/g, value);
+  var label = labelTemplate.replace(/\{value\}/g, value);
+  return h(
+    "p",
+    { className: "o-cms-edit-link__info" },
+    h(
+      "a",
+      {
+        href: href,
+        onClick: function (event) {
+          event.preventDefault();
+          if (
+            event.metaKey ||
+            event.ctrlKey ||
+            event.shiftKey ||
+            event.button === 1
+          ) {
+            window.open(href, "_blank");
+            return;
+          }
+          window.location.hash = href;
+        },
+        onAuxClick: function (event) {
+          event.preventDefault();
+          if (event.button === 1) {
+            window.open(href, "_blank");
+          }
+        },
+      },
+      label,
+    ),
+  );
+}
+
+registerFieldType("cms-edit-link", CmsEditLinkControl, CmsEditLinkControl);
+
+var NumberControl = getFieldType("number").control;
+
+function CmsNumberWithUsageControl(props) {
+  var field = props.field;
+  var template = field.get("template");
+  var value = props.value;
+
+  var text = template.replace(/\{value\}/g, String(value ?? ""));
+
+  return h(
+    "div",
+    {},
+    h(NumberControl, {
+      field: { name: field.get("name") },
+      value: value,
+      forID: props.forID,
+      onChange: props.onChange,
+    }),
+    h("p", { className: "o-cms-display__info" }, text),
+  );
+}
+
+registerFieldType(
+  "cms-number-with-usage",
+  CmsNumberWithUsageControl,
+  CmsNumberWithUsageControl,
+);

assets/admin/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>FIP Guide Content Manager</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <script type="module" src="main.js"></script>
+  </body>
+</html>

assets/admin/main.js

@@ -0,0 +1,6 @@
+import CMS from "@sveltia/cms";
+
+import "./fields.js";
+import "./shortcodes.js";
+
+CMS.init();