mktcms 0.2.7 → 0.2.8

package/dist/runtime/app/components/content/editor/frontmatter/{toggle.vue.d.ts → modal.vue.d.ts}

@@ -1,14 +1,17 @@
 type __VLS_Props = {
-    label: string;
+    isOpen: boolean;
 };
 type __VLS_ModelProps = {
-    'value': boolean;
+    'frontmatter': any;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:value": (value: boolean) => any;
+    "update:frontmatter": (value: any) => any;
+} & {
+    close: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:value"?: ((value: boolean) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    "onUpdate:frontmatter"?: ((value: any) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/app/components/content/editor/markdown.vue

@@ -4,7 +4,7 @@ import { refDebounced } from "@vueuse/core";
 import Saved from "../saved.vue";
 import usePathParam from "../../../composables/usePathParam";
 import { useFetch } from "#imports";
-import FrontmatterForm from "./frontmatter/form.vue";
+import FrontmatterModal from "./frontmatter/modal.vue";
 import MonacoEditor from "./monacoEditor.vue";
 const { path } = usePathParam();
 const { data: content } = await useFetch(`/api/admin/md?path=${path}`);
@@ -14,6 +14,7 @@ const commitMessage = ref("Inhaltliche \xC4nderungen");
 const debouncedMarkdown = refDebounced(markdown, 250);
 const isSaving = ref(false);
 const savingSuccessful = ref(false);
+const showFrontmatterModal = ref(false);
 async function saveMarkdown() {
   if (!content.value) return;
   isSaving.value = true;
@@ -37,10 +38,20 @@ const mode = ref("preview");
     v-if="content"
     class="flex-1 min-h-0 flex flex-col"
   >
-    <FrontmatterForm
+    <button
+      type="button"
+      class="button secondary small mb-3 self-start"
+      @click="showFrontmatterModal = true"
+    >
+      Metadaten bearbeiten
+    </button>
+
+    <FrontmatterModal
       v-model:frontmatter="frontmatter"
-      class="mb-2"
+      :is-open="showFrontmatterModal"
+      @close="showFrontmatterModal = false"
     />
+
     <div class="flex gap-2 my-2 lg:hidden">
       <button
         type="button"

package/dist/runtime/app/components/content/versioning.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/content/versioning.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref } from "vue";
+import { useFetch } from "#app";
+const HISTORY_PER_PAGE = 25;
+const isHistoryModalOpen = ref(false);
+const isUpdateModalOpen = ref(false);
+const selectedUpdateBranch = ref("");
+const historyPage = ref(1);
+const isUpdating = ref(false);
+const updateError = ref("");
+const updateSuccess = ref("");
+const { data: branchData, pending: branchPending, error: branchError, refresh: refreshBranch } = await useFetch("/api/admin/git-branch", {
+  key: "mktcms-git-branch"
+});
+const { data: updateStatusData, pending: updateStatusPending, error: updateStatusError, refresh: refreshUpdateStatus } = await useFetch("/api/admin/git-update-status", {
+  key: "mktcms-git-update-status"
+});
+const { data: historyData, pending: historyPending, error: historyError, refresh: refreshHistory } = await useFetch("/api/admin/git-history", {
+  key: "mktcms-git-history",
+  query: computed(() => ({
+    page: historyPage.value,
+    perPage: HISTORY_PER_PAGE
+  })),
+  immediate: false
+});
+const currentBranch = computed(() => branchData.value?.currentBranch ?? "unbekannt");
+const isSupportedBranch = computed(() => branchData.value?.isSupported ?? false);
+const sourceBranch = computed(() => branchData.value?.sourceBranch ?? "");
+const sourceAheadCount = computed(() => updateStatusData.value?.sourceAheadCount ?? 0);
+const isIdentical = computed(() => updateStatusData.value?.isIdentical ?? false);
+const canUpdate = computed(() => updateStatusData.value?.canUpdate ?? false);
+const updateBlockedReason = computed(() => updateStatusData.value?.updateBlockedReason || branchData.value?.updateBlockedReason || "");
+const updateButtonText = computed(() => {
+  const count = sourceAheadCount.value;
+  return `Aktualisieren (${count})`;
+});
+const updateTitle = computed(() => currentBranch.value === "main" ? "\xC4nderungen aus Vorschau \xFCbernehmen" : currentBranch.value === "staging" ? "\xC4nderungen von Live in Vorschau \xFCbernehmen" : "Branch aktualisieren");
+const historyEntries = computed(() => historyData.value?.entries ?? []);
+const hasNextHistoryPage = computed(() => historyData.value?.hasNextPage ?? false);
+function formatRelativeDate(isoDate) {
+  const target = new Date(isoDate).getTime();
+  if (!Number.isFinite(target)) {
+    return isoDate;
+  }
+  const diffMs = target - Date.now();
+  const absMs = Math.abs(diffMs);
+  const minute = 6e4;
+  const hour = 60 * minute;
+  const day = 24 * hour;
+  const rtf = new Intl.RelativeTimeFormat("de-DE", { numeric: "auto" });
+  if (absMs < hour) {
+    return rtf.format(Math.round(diffMs / minute), "minute");
+  }
+  if (absMs < day) {
+    return rtf.format(Math.round(diffMs / hour), "hour");
+  }
+  return rtf.format(Math.round(diffMs / day), "day");
+}
+async function openHistoryModal() {
+  isHistoryModalOpen.value = true;
+  historyPage.value = 1;
+  await refreshHistory();
+}
+function openUpdateModal() {
+  selectedUpdateBranch.value = updateStatusData.value?.sourceBranch || sourceBranch.value;
+  updateError.value = "";
+  updateSuccess.value = "";
+  isUpdateModalOpen.value = true;
+}
+function closeHistoryModal() {
+  isHistoryModalOpen.value = false;
+}
+async function goToHistoryPage(nextPage) {
+  if (nextPage < 1 || historyPending.value) {
+    return;
+  }
+  historyPage.value = nextPage;
+  await refreshHistory();
+}
+function closeUpdateModal() {
+  isUpdateModalOpen.value = false;
+}
+async function runUpdate() {
+  if (!isSupportedBranch.value || isUpdating.value) {
+    return;
+  }
+  if (!canUpdate.value) {
+    updateError.value = updateBlockedReason.value || "Aktualisierung aktuell nicht m\xF6glich.";
+    return;
+  }
+  isUpdating.value = true;
+  updateError.value = "";
+  updateSuccess.value = "";
+  try {
+    await $fetch("/api/admin/git-update", {
+      method: "POST"
+    });
+    updateSuccess.value = `Merge erfolgreich: ${sourceBranch.value} \u2192 ${currentBranch.value}`;
+    await refreshBranch();
+    await refreshUpdateStatus();
+  } catch (error) {
+    updateError.value = error?.data?.statusMessage || error?.message || "Aktualisierung fehlgeschlagen.";
+  } finally {
+    isUpdating.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="text-sm text-gray-700">
+    <div class="flex items-center justify-end gap-3">
+      <span class="text-xs text-gray-500 mr-auto">
+        Version: <strong class="capitalize">{{ currentBranch }}</strong>
+      </span>
+      <button
+        type="button"
+        class="button small tertiary"
+        @click="openHistoryModal"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-gray-400"
+        ><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" /><path d="M3 3v5h5" /><path d="M12 7v5l4 2" /></svg>
+        Änderungshistorie
+      </button>
+      <button
+        type="button"
+        class="button small tertiary"
+        :disabled="branchPending || updateStatusPending || !!branchError || !!updateStatusError"
+        @click="openUpdateModal"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="text-gray-400"
+        ><path d="M12 2a10 10 0 0 1 7.38 16.75" /><path d="m16 12-4-4-4 4" /><path d="M12 16V8" /><path d="M2.5 8.875a10 10 0 0 0-.5 3" /><path d="M2.83 16a10 10 0 0 0 2.43 3.4" /><path d="M4.636 5.235a10 10 0 0 1 .891-.857" /><path d="M8.644 21.42a10 10 0 0 0 7.631-.38" /></svg>
+        {{ updateButtonText }}
+      </button>
+    </div>
+
+    <div
+      v-if="isHistoryModalOpen"
+      class="fixed inset-0 bg-black/45 flex items-start justify-center p-4 z-9999 overflow-y-auto"
+      role="presentation"
+      @click.self="closeHistoryModal"
+    >
+      <div
+        class="w-full max-w-140 bg-white rounded-[10px] border border-black/10 shadow-[0_10px_40px_rgba(0,0,0,0.28)] p-6 flex flex-col gap-4 max-h-[calc(100vh-2rem)] my-auto"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Änderungshistorie"
+      >
+        <div class="flex items-center justify-between gap-2">
+          <h2 class="font-bold text-xl">
+            Änderungshistorie
+          </h2>
+          <button
+            type="button"
+            class="button secondary small"
+            @click="closeHistoryModal"
+          >
+            Schließen
+          </button>
+        </div>
+
+        <div class="min-h-0 overflow-y-auto pr-1">
+          <div
+            v-if="historyError"
+            class="text-sm p-3 bg-red-100 text-red-700 rounded"
+          >
+            Konnte Änderungshistorie nicht laden.
+          </div>
+
+          <div
+            v-else-if="historyPending"
+            class="text-sm text-gray-500"
+          >
+            lädt…
+          </div>
+
+          <div
+            v-else-if="historyEntries.length === 0"
+            class="text-sm text-gray-500"
+          >
+            Keine Einträge vorhanden.
+          </div>
+
+          <div
+            v-else
+            class="flex flex-col gap-3"
+          >
+            <div
+              v-for="entry in historyEntries"
+              :key="entry.hash"
+              class="flex flex-col justify-between gap-3 p-3 bg-gray-50 border border-gray-200 rounded"
+            >
+              <div class="flex items-start justify-between gap-3 flex-1 w-full">
+                <div>
+                  <p class="font-bold">
+                    {{ entry.authorName }}
+                  </p>
+                  <p class="text-xs text-gray-500 break-all">
+                    {{ entry.authorEmail }}
+                  </p>
+                </div>
+                <p class="text-sm text-gray-500">
+                  {{ formatRelativeDate(entry.date) }}
+                </p>
+              </div>
+              <p>
+                Änderung: "{{ entry.subject }}"
+              </p>
+            </div>
+
+            <div class="flex items-center justify-between pt-1">
+              <button
+                type="button"
+                class="button secondary small"
+                :disabled="historyPage <= 1 || historyPending"
+                @click="goToHistoryPage(historyPage - 1)"
+              >
+                Zurück
+              </button>
+              <span class="text-xs text-gray-500">
+                Seite {{ historyPage }}
+              </span>
+              <button
+                type="button"
+                class="button secondary small"
+                :disabled="!hasNextHistoryPage || historyPending"
+                @click="goToHistoryPage(historyPage + 1)"
+              >
+                Weiter
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-if="isUpdateModalOpen"
+      class="fixed inset-0 bg-black/45 flex items-start justify-center p-4 z-9999 overflow-y-auto"
+      role="presentation"
+      @click.self="closeUpdateModal"
+    >
+      <div
+        class="w-full max-w-140 bg-white rounded-[10px] border border-black/10 shadow-[0_10px_40px_rgba(0,0,0,0.28)] p-6 flex flex-col gap-4 max-h-[calc(100vh-2rem)] my-auto overflow-y-auto"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Version aktualisieren"
+      >
+        <div class="flex items-center justify-between gap-2">
+          <h2 class="font-bold text-xl">
+            {{ updateTitle }}
+          </h2>
+          <button
+            type="button"
+            class="button secondary small"
+            @click="closeUpdateModal"
+          >
+            Schließen
+          </button>
+        </div>
+
+        <p class="text-sm p-3 bg-gray-50 border border-gray-200 rounded">
+          Achtung: Eine Aktualisierung ist sofort auf der Website sichtbar.
+        </p>
+
+        <p
+          v-if="branchError"
+          class="text-sm p-3 bg-red-100 text-red-700 rounded"
+        >
+          Konnte aktuellen Branch nicht laden.
+        </p>
+
+        <p
+          v-else-if="updateStatusError"
+          class="text-sm p-3 bg-red-100 text-red-700 rounded"
+        >
+          Konnte Branch-Status nicht laden.
+        </p>
+
+        <p
+          v-else-if="isIdentical"
+          class="text-sm p-3 bg-gray-50 border border-gray-200 rounded"
+        >
+          Die Branches sind identisch. Es sind keine neuen Änderungen verfügbar.
+        </p>
+
+        <p
+          v-else-if="!isSupportedBranch || !canUpdate"
+          class="text-sm p-3 bg-red-100 text-red-700 rounded"
+        >
+          {{ updateBlockedReason || `Unterst\xFCtzt sind nur main oder staging. Aktuell: ${currentBranch}` }}
+        </p>
+
+        <label class="text-sm font-medium text-gray-700">
+          Merge von Branch
+        </label>
+        <select
+          v-model="selectedUpdateBranch"
+          class="w-full border border-gray-200 rounded-sm px-3 py-2"
+          :disabled="true"
+        >
+          <option :value="selectedUpdateBranch || ''">
+            {{ selectedUpdateBranch || "unbekannt" }}
+          </option>
+        </select>
+
+        <p
+          v-if="updateError"
+          class="text-sm p-3 bg-red-100 text-red-700 rounded"
+        >
+          {{ updateError }}
+        </p>
+        <p
+          v-if="updateSuccess"
+          class="text-sm p-3 bg-emerald-100 text-emerald-800 rounded"
+        >
+          {{ updateSuccess }}
+        </p>
+
+        <div class="flex items-center justify-end gap-2">
+          <button
+            type="button"
+            class="button secondary small"
+            @click="closeUpdateModal"
+          >
+            Abbrechen
+          </button>
+          <button
+            type="button"
+            class="button small"
+            :disabled="!isSupportedBranch || !canUpdate || isUpdating || isIdentical"
+            @click="runUpdate"
+          >
+            {{ isUpdating ? "Aktualisiert\u2026" : "Aktualisieren" }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/versioning.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/composables/useFileType.js

@@ -1,9 +1,10 @@
 export default function useFileType(path) {
-  const isImage = path.match(/\.(png|jpg|jpeg|gif|webp)$/i) !== null;
-  const isPdf = path.endsWith(".pdf");
-  const isMarkdown = path.endsWith(".md");
-  const isCsv = path.endsWith(".csv");
-  const isText = path.match(/\.(txt|json)$/i) !== null;
+  const normalizedPath = path.toLowerCase();
+  const isImage = normalizedPath.match(/\.(png|jpg|jpeg|gif|webp)$/) !== null;
+  const isPdf = normalizedPath.endsWith(".pdf");
+  const isMarkdown = normalizedPath.endsWith(".md");
+  const isCsv = normalizedPath.endsWith(".csv");
+  const isText = normalizedPath.match(/\.(txt|json)$/) !== null;
   return {
     isImage,
     isPdf,

package/dist/runtime/app/pages/admin/delete/[path].vue

@@ -6,7 +6,9 @@ import Delete from "../../../components/content/delete.vue";
 
 <template>
   <Admin>
-    <Header />
-    <Delete />
+    <div class="boxed">
+      <Header />
+      <Delete />
+    </div>
   </Admin>
 </template>

package/dist/runtime/app/pages/admin/edit/file/[path].vue

@@ -11,13 +11,15 @@ const { isImage, isPdf, isCsv, isText } = usePathParam();
 
 <template>
   <Admin>
-    <Header />
-    <Image v-if="isImage" />
-    <Pdf v-else-if="isPdf" />
-    <Csv v-else-if="isCsv" />
-    <Txt v-else-if="isText" />
-    <div v-else>
-      Unbekannter Dateityp.
+    <div class="boxed">
+      <Header />
+      <Image v-if="isImage" />
+      <Pdf v-else-if="isPdf" />
+      <Csv v-else-if="isCsv" />
+      <Txt v-else-if="isText" />
+      <div v-else>
+        Unbekannter Dateityp.
+      </div>
     </div>
   </Admin>
 </template>

package/dist/runtime/app/pages/admin/edit/markdown/[path].vue

@@ -7,11 +7,13 @@ const { isMarkdown } = usePathParam();
 </script>
 
 <template>
-  <Admin class="fullscreen">
-    <Header />
-    <Markdown v-if="isMarkdown" />
-    <div v-else>
-      Unbekannter Dateityp.
+  <Admin>
+    <div class="fullscreen">
+      <Header />
+      <Markdown v-if="isMarkdown" />
+      <div v-else>
+        Unbekannter Dateityp.
+      </div>
     </div>
   </Admin>
 </template>

package/dist/runtime/app/pages/admin/index.vue

@@ -2,15 +2,24 @@
 import Admin from "../../components/admin.vue";
 import Header from "../../components/header.vue";
 import Content from "../../components/content/index.vue";
+import Versioning from "../../components/content/versioning.vue";
 import Usage from "../../components/content/usage.vue";
+import { useRuntimeConfig } from "#imports";
+const { public: { mktcms: { showVersioning } } } = useRuntimeConfig();
 </script>
 
 <template>
   <Admin>
-    <Header class="mb-4" />
-    <Content />
+    <div class="boxed">
+      <Header class="mb-4" />
+      <Content />
+      <Versioning
+        v-if="showVersioning"
+        class="mt-6"
+      />
+    </div>
+    <div class="mt-6 max-w-3xl mx-auto p-4 border border-gray-200 rounded-2xl">
+      <Usage />
+    </div>
   </Admin>
-  <div class="mt-6 max-w-3xl mx-auto">
-    <Usage />
-  </div>
 </template>

package/dist/runtime/app/pages/admin/new.vue

@@ -6,7 +6,9 @@ import ContentUpload from "../../components/content/upload.vue";
 
 <template>
   <Admin>
-    <Header />
-    <ContentUpload />
+    <div class="boxed">
+      <Header />
+      <ContentUpload />
+    </div>
   </Admin>
 </template>

package/dist/runtime/app/styles/admin.css

@@ -1 +1 @@
-@import "tailwindcss";@plugin "@tailwindcss/typography";body:has(#mktcms-admin){@apply bg-gray-100}body:has(#mktcms-admin:not(.fullscreen)){@apply p-4 md:p-12}#mktcms-admin{@apply p-4 max-w-3xl mx-auto bg-white md:rounded-lg shadow-lg flex flex-col}#mktcms-admin.fullscreen{@apply max-w-none rounded-none max-h-screen h-screen overflow-hidden}#mktcms-admin h1{@apply text-gray-800 text-3xl font-semibold}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin select,#mktcms-admin textarea{@apply w-full bg-white p-2.5 text-base border border-gray-300 rounded}#mktcms-admin .button{@apply inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded hover:bg-emerald-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed}#mktcms-admin .button.secondary{@apply bg-gray-50 text-gray-700 border border-gray-300 hover:bg-gray-100}#mktcms-admin .button.directory{@apply bg-gray-700 text-white border border-gray-600 hover:bg-gray-600}#mktcms-admin .button.danger{@apply bg-red-600 hover:bg-red-700}#mktcms-admin .button.small{@apply px-2.5 py-1.5 text-sm}#mktcms-admin .button :disabled{@apply cursor-not-allowed opacity-50}
+@import "tailwindcss";@plugin "@tailwindcss/typography";body:has(#mktcms-admin){@apply bg-gray-100}#mktcms-admin .boxed{@apply p-4 max-w-3xl mx-auto md:my-6 bg-white md:rounded-lg shadow-lg flex flex-col}#mktcms-admin .fullscreen{@apply max-w-none rounded-none max-h-screen h-screen overflow-hidden bg-white p-3 md:p-6 flex flex-col}#mktcms-admin h1{@apply text-gray-800 text-3xl font-semibold}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin select,#mktcms-admin textarea{@apply w-full bg-white p-2.5 text-base border border-gray-300 rounded}#mktcms-admin .button{@apply inline-flex items-center gap-2 px-4 py-2.5 bg-emerald-600 text-white rounded hover:bg-emerald-700 cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed}#mktcms-admin .button.secondary{@apply bg-gray-50 text-gray-700 border border-gray-300 hover:bg-gray-100}#mktcms-admin .button.tertiary{@apply bg-transparent text-gray-500 border border-gray-100 hover:bg-gray-100 hover:text-gray-700}#mktcms-admin .button.directory{@apply bg-gray-700 text-white border border-gray-600 hover:bg-gray-600}#mktcms-admin .button.danger{@apply bg-red-600 hover:bg-red-700}#mktcms-admin .button.small{@apply px-2.5 py-1.5 text-sm}#mktcms-admin .button :disabled{@apply cursor-not-allowed opacity-50}