add CMS

2023-05-29 19:03:29 +02:00
parent 299051da24
commit ad6e7f7299
15 changed files with 488 additions and 1507 deletions
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@ -57,6 +57,10 @@
          &nbsp;&bull;&nbsp;{{ i18n "translationsLabel" }}&nbsp;{{ $linksOutput }}
        {{- end }}
      {{ end }}
+      {{ with .Params.author }}
+      &nbsp;&bull;&nbsp;
+      {{ . }}
+      {{ end }}
    </h5>
    {{ end }}

--- a/layouts/admin/list.html
+++ b/layouts/admin/list.html
@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link
+      rel="stylesheet"
+      href="https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/@staticcms/app@^2.4.3/dist/main.css"
+    />
+
+    <title>Static CMS</title>
+  </head>
+  <body>
+    <script src="https://cdn.jsdelivr.net/npm/@staticcms/app@^2.4.3/dist/static-cms-app.js"></script>
+    <script type="module">
+      import Icons from "https://cantorgymnasium.de/admin/icons.js";
+      import config from "./config.js";
+
+      CMS.init({ config });
+
+      Icons.forEach((i) => CMS.registerIcon(i.name, i.icon));
+
+      CMS.registerFieldPreview("posts", "draft", ({ value }) =>
+        h(
+          "div",
+          {
+            style: {
+              backgroundColor:
+                value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
+              color: "white",
+              border: "none",
+              padding: "2px 6px",
+              textAlign: "center",
+              textDecoration: "none",
+              display: "inline-block",
+              cursor: "pointer",
+              borderRadius: "4px",
+              fontSize: "14px",
+            },
+          },
+          value ? "Entwurf" : "Veröffentlicht"
+        )
+      );
+
+      CMS.registerFieldPreview("pages", "draft", ({ value }) =>
+        h(
+          "div",
+          {
+            style: {
+              backgroundColor:
+                value === true ? "rgb(37 99 235)" : "rgb(22 163 74)",
+              color: "white",
+              border: "none",
+              padding: "2px 6px",
+              textAlign: "center",
+              textDecoration: "none",
+              display: "inline-block",
+              cursor: "pointer",
+              borderRadius: "4px",
+              fontSize: "14px",
+            },
+          },
+          value ? "Entwurf" : "Veröffentlicht"
+        )
+      );
+
+      CMS.registerPreviewTemplate(
+        "posts",
+        ({ widgetFor, entry, fields, collection }) => {
+          const imageField = useMemo(() => {
+            return fields.find((field) => field.name === "thumbnail");
+          }, [fields]);
+
+          const imageUrl = useMediaAsset(
+            entry.data.thumbnail,
+            collection,
+            imageField,
+            entry
+          );
+
+          return h(
+            "div",
+            {},
+            h(
+              "div",
+              { className: "relative max-w-5xl mx-auto px-4 pt-8" },
+              h("img", {
+                className: "rounded-lg shadow-sm w-full object-contain",
+                src: imageUrl,
+              })
+            ),
+            h("article", {
+              className: "prose lg:prose-lg mx-auto my-8 dark:prose-dark px-4",
+            },
+            h("h1", { className: "text-2xl font-bold mb-2" }, entry.data.title),
+            h("h5", { className: "text-sm flex items-center flex-wrap"},
+                "Gepostet am " + (entry.data.date != "" ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""),
+                " • " + entry.data.author
+            ),
+            widgetFor('body')
+            )
+          );
+        }
+      );
+
+      CMS.registerPreviewTemplate(
+        "pages",
+        ({ widgetFor, entry, fields, collection }) => {
+          const imageField = useMemo(() => {
+            return fields.find((field) => field.name === "thumbnail");
+          }, [fields]);
+
+          const imageUrl = useMediaAsset(
+            entry.data.thumbnail,
+            collection,
+            imageField,
+            entry
+          );
+
+          return h(
+            "div",
+            {},
+            h(
+              "div",
+              { className: "relative max-w-5xl mx-auto px-4 pt-8" },
+              h("img", {
+                className: "rounded-lg shadow-sm w-full object-contain",
+                src: imageUrl,
+              })
+            ),
+            h("article", {
+              className: "prose lg:prose-lg mx-auto my-8 dark:prose-dark px-4",
+            },
+            h("h1", { className: "text-2xl font-bold mb-2" }, entry.data.title),
+            h("h5", { className: "text-sm flex items-center flex-wrap"},
+                "Gepostet am " + (entry.data.date != "" ? new Intl.DateTimeFormat("de-DE", {dateStyle: "long"}).format(new Date(entry.data.date)) : ""),
+                " • " + entry.data.author
+            ),
+            widgetFor('body')
+            )
+          );
+        }
+      );
+    </script>
+    {{- $styles := resources.Get "css/styles.css" | postCSS (dict "config"
+    "./assets/css/postcss.config.js") -}} {{- if .Site.IsServer }}
+    <script>
+      CMS.registerPreviewStyle("{{ $styles.RelPermalink }}");
+    </script>
+    {{ else }} {{- $styles := $styles| minify | fingerprint |
+    resources.PostProcess -}}
+    <script>
+      CMS.registerPreviewStyle("{{ $styles.Permalink }}");
+    </script>
+    {{ end -}}
+  </body>
+</html>