mktcms 0.1.14 → 0.1.16

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "mktcms",
   "configKey": "mktcms",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/module.mjs

@@ -41,6 +41,11 @@ const module$1 = defineNuxtModule({
       route: "/api/admin/logout",
       handler: resolver.resolve("./runtime/server/api/admin/logout")
     });
+    addServerHandler({
+      route: "/api/admin/content/:path",
+      method: "get",
+      handler: resolver.resolve("./runtime/server/api/admin/content/[path]")
+    });
     addServerHandler({
       route: "/api/admin/content/:path",
       method: "post",

package/dist/runtime/app/components/content/editor/csv.d.vue.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'content'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:content": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:content"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,235 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+const content = defineModel("content", { type: String, ...{ default: "" } });
+function parseSemicolonCsv(text) {
+  const normalized = (text ?? "").replace(/\r\n/g, "\n").replace(/\r/g, "\n");
+  if (!normalized.trim()) {
+    return { headers: [], rows: [] };
+  }
+  const rows2 = [];
+  let row = [];
+  let field = "";
+  let inQuotes = false;
+  for (let i = 0; i < normalized.length; i++) {
+    const ch = normalized[i];
+    if (inQuotes) {
+      if (ch === '"') {
+        const next = normalized[i + 1];
+        if (next === '"') {
+          field += '"';
+          i++;
+        } else {
+          inQuotes = false;
+        }
+      } else {
+        field += ch;
+      }
+      continue;
+    }
+    if (ch === '"') {
+      inQuotes = true;
+      continue;
+    }
+    if (ch === ";") {
+      row.push(field);
+      field = "";
+      continue;
+    }
+    if (ch === "\n") {
+      row.push(field);
+      field = "";
+      if (!(row.length === 1 && row[0] === "" && i === normalized.length - 1)) {
+        rows2.push(row);
+      }
+      row = [];
+      continue;
+    }
+    field += ch;
+  }
+  row.push(field);
+  rows2.push(row);
+  const headers2 = rows2[0] ?? [];
+  const dataRows = rows2.slice(1);
+  const columnCount2 = Math.max(headers2.length, ...dataRows.map((r) => r.length), 0);
+  const paddedHeaders = Array.from({ length: columnCount2 }, (_, i) => headers2[i] ?? "");
+  const paddedRows = dataRows.map((r) => Array.from({ length: columnCount2 }, (_, i) => r[i] ?? ""));
+  return { headers: paddedHeaders, rows: paddedRows };
+}
+function escapeSemicolonCsvField(value) {
+  const v = value ?? "";
+  if (/[";\n]/.test(v)) {
+    return `"${v.replace(/"/g, '""')}"`;
+  }
+  return v;
+}
+function serializeSemicolonCsv(grid) {
+  const allRows = [grid.headers, ...grid.rows];
+  return allRows.map((r) => r.map(escapeSemicolonCsvField).join(";")).join("\n");
+}
+const headers = ref([]);
+const rows = ref([]);
+const columnCount = computed(() => headers.value.length);
+const tableColspan = computed(() => Math.max(headers.value.length, 1) + 1);
+let isApplyingFromContent = false;
+let isApplyingToContent = false;
+function applyFromContent() {
+  isApplyingFromContent = true;
+  try {
+    const grid = parseSemicolonCsv(content.value);
+    headers.value = grid.headers;
+    rows.value = grid.rows;
+  } finally {
+    isApplyingFromContent = false;
+  }
+}
+function applyToContent() {
+  if (isApplyingFromContent) return;
+  isApplyingToContent = true;
+  try {
+    content.value = serializeSemicolonCsv({ headers: headers.value, rows: rows.value });
+  } finally {
+    isApplyingToContent = false;
+  }
+}
+watch(
+  () => content.value,
+  () => {
+    if (isApplyingToContent) return;
+    applyFromContent();
+  },
+  { immediate: true }
+);
+watch(
+  () => [headers.value, rows.value],
+  () => applyToContent(),
+  { deep: true }
+);
+function insertRow(atIndex) {
+  if (columnCount.value === 0) return;
+  const clamped = Math.max(0, Math.min(atIndex, rows.value.length));
+  rows.value.splice(clamped, 0, Array.from({ length: columnCount.value }, () => ""));
+}
+function moveRowUp(index) {
+  if (index <= 0) return;
+  const tmp = rows.value[index - 1];
+  rows.value[index - 1] = rows.value[index];
+  rows.value[index] = tmp;
+}
+function moveRowDown(index) {
+  if (index < 0 || index >= rows.value.length - 1) return;
+  const tmp = rows.value[index + 1];
+  rows.value[index + 1] = rows.value[index];
+  rows.value[index] = tmp;
+}
+function removeRow(index) {
+  rows.value.splice(index, 1);
+}
+function onCellInput(rowIndex, colIndex, value) {
+  const row = rows.value[rowIndex];
+  if (!row) return;
+  row[colIndex] = value;
+}
+</script>
+
+<template>
+  <div style="width: 100%;">
+    <div style="display: flex; gap: 8px; margin-bottom: 10px; align-items: center;">
+      <button
+        type="button"
+        :disabled="headers.length === 0"
+        @click="insertRow(0)"
+      >
+        + Zeile (oben)
+      </button>
+      <button
+        type="button"
+        :disabled="headers.length === 0"
+        @click="insertRow(rows.length)"
+      >
+        + Zeile (unten)
+      </button>
+      <span
+        v-if="headers.length === 0"
+        style="opacity: 0.7;"
+      >
+        Keine Kopfzeile gefunden. Bitte eine CSV mit Kopfzeile bereitstellen, um Zeilen zu bearbeiten.
+      </span>
+    </div>
+
+    <div style="overflow: auto; border: 1px solid #d0d0d0;">
+      <table style="width: 100%; border-collapse: collapse; min-width: 520px;">
+        <thead>
+          <tr>
+            <th
+              v-for="(h, colIndex) in headers"
+              :key="colIndex"
+              style="text-align: left; padding: 8px; border-bottom: 1px solid #d0d0d0; background: #f6f6f6; position: sticky; top: 0;"
+              title="Kopfzeile (nicht editierbar)"
+            >
+              <span>{{ h }}</span>
+            </th>
+            <th style="width: 1%; white-space: nowrap; border-bottom: 1px solid #d0d0d0; background: #f6f6f6; position: sticky; top: 0;" />
+          </tr>
+        </thead>
+
+        <tbody>
+          <template
+            v-for="(r, rowIndex) in rows"
+            :key="rowIndex"
+          >
+            <tr>
+              <td
+                v-for="(cell, colIndex) in r"
+                :key="colIndex"
+                style="padding: 6px; border-bottom: 1px solid #eee;"
+              >
+                <input
+                  :value="cell"
+                  type="text"
+                  style="width: 100%; box-sizing: border-box; padding: 6px; border: 1px solid #cfcfcf;"
+                  @input="onCellInput(rowIndex, colIndex, $event.target.value)"
+                >
+              </td>
+              <td style="padding: 6px; border-bottom: 1px solid #eee; white-space: nowrap;">
+                <button
+                  type="button"
+                  :disabled="rowIndex === 0"
+                  @click="moveRowUp(rowIndex)"
+                >
+                  ↑
+                </button>
+                <button
+                  type="button"
+                  :disabled="rowIndex === rows.length - 1"
+                  @click="moveRowDown(rowIndex)"
+                >
+                  ↓
+                </button>
+                <button
+                  type="button"
+                  @click="removeRow(rowIndex)"
+                >
+                  Löschen
+                </button>
+              </td>
+            </tr>
+
+            <tr>
+              <td
+                :colspan="tableColspan"
+                style="padding: 6px; border-bottom: 1px solid #eee; background: #fafafa;"
+              >
+                <button
+                  type="button"
+                  @click="insertRow(rowIndex + 1)"
+                >
+                  + Zeile hier einfügen
+                </button>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/editor/csv.vue.d.ts

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'content'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:content": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:content"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/app/components/content/{editor.vue → editor/index.vue}

@@ -1,8 +1,10 @@
 <script setup>
 import { useFetch, useRoute } from "#app";
+import Csv from "./csv.vue";
+import Markdown from "./markdown.vue";
 const path = useRoute().params.path || "";
 const pathParts = path.split(":");
-const { data: content } = await useFetch(`/api/content/${path}`);
+const { data: content } = await useFetch(`/api/admin/content/${path}`);
 async function saveContent() {
   await $fetch(`/api/admin/content/${path}`, {
     method: "POST",
@@ -27,9 +29,13 @@ async function saveContent() {
     </div>
 
     <div v-if="content !== void 0">
-      <textarea
-        v-model="content"
-        style="width: 100%; resize: vertical;"
+      <Markdown
+        v-if="path.endsWith('.md')"
+        v-model:content="content"
+      />
+      <Csv
+        v-else-if="path.endsWith('.csv')"
+        v-model:content="content"
       />
       <button
         style="margin-top: 10px;"

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'content'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:content": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:content"?: ((value: string) => 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

@@ -0,0 +1,69 @@
+<script setup>
+import { computed, ref } from "vue";
+import { marked } from "marked";
+const content = defineModel("content", { type: String, ...{ default: "" } });
+const mode = ref("edit");
+function escapeHtml(value) {
+  return (value ?? "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function isSafeHref(href) {
+  const h = (href ?? "").trim();
+  if (!h) return false;
+  if (h.startsWith("#") || h.startsWith("/") || h.startsWith("./") || h.startsWith("../")) return true;
+  try {
+    const url = new URL(h);
+    return ["http:", "https:", "mailto:", "tel:"].includes(url.protocol);
+  } catch {
+    return false;
+  }
+}
+const renderedHtml = computed(() => {
+  const renderer = new marked.Renderer();
+  renderer.html = (token) => escapeHtml(token.text);
+  renderer.link = function(token) {
+    const safe = token.href && isSafeHref(token.href) ? token.href : "";
+    const text = this.parser.parseInline(token.tokens);
+    if (!safe) return text;
+    const t = token.title ? ` title="${escapeHtml(token.title)}"` : "";
+    const target = safe.startsWith("http") ? ' target="_blank" rel="noopener noreferrer"' : "";
+    return `<a href="${escapeHtml(safe)}"${t}${target}>${text}</a>`;
+  };
+  renderer.image = function(token) {
+    const safe = token.href && isSafeHref(token.href) ? token.href : "";
+    if (!safe) return escapeHtml(token.text);
+    const alt = escapeHtml(token.text);
+    const t = token.title ? ` title="${escapeHtml(token.title)}"` : "";
+    return `<img src="${escapeHtml(safe)}" alt="${alt}"${t} />`;
+  };
+  return marked.parse(content.value ?? "", {
+    renderer,
+    gfm: true,
+    breaks: true
+  });
+});
+</script>
+
+<template>
+  <div style="width: 100%;">
+    <div style="display: flex; gap: 8px; margin-bottom: 10px; align-items: center;">
+      <button
+        type="button"
+        @click="mode = mode === 'edit' ? 'preview' : 'edit'"
+      >
+        {{ mode === "edit" ? "Vorschau" : "Bearbeiten" }}
+      </button>
+    </div>
+
+    <textarea
+      v-if="mode === 'edit'"
+      v-model="content"
+      style="width: 100%; height: 400px; resize: vertical; border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box;"
+    />
+
+    <div
+      v-else
+      style="width: 100%; min-height: 400px; border: 1px solid #d0d0d0; padding: 10px; box-sizing: border-box; overflow: auto;"
+      v-html="renderedHtml"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,10 @@
+type __VLS_ModelProps = {
+    'content'?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:content": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
+    "onUpdate:content"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,7 +1,7 @@
 <script setup>
 import Admin from "../../../components/admin.vue";
 import Header from "../../../components/header.vue";
-import Editor from "../../../components/content/editor.vue";
+import Editor from "../../../components/content/editor/index.vue";
 </script>
 
 <template>

package/dist/runtime/server/api/admin/content/[path].d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<string | number | true | object>>;
+export default _default;

package/dist/runtime/server/api/admin/content/[path].js

@@ -0,0 +1,25 @@
+import { z } from "zod";
+import { createError, defineEventHandler, getValidatedRouterParams } from "h3";
+import { useRuntimeConfig, useStorage } from "nitropack/runtime";
+const paramsSchema = z.object({
+  path: z.string().min(1)
+});
+export default defineEventHandler(async (event) => {
+  const { path } = await getValidatedRouterParams(event, (params) => paramsSchema.parse(params));
+  const { mktcms: { s3Prefix } } = useRuntimeConfig();
+  const fullPath = s3Prefix + ":" + path;
+  const storage = useStorage("content");
+  const file = await storage.getItem(fullPath);
+  if (!file) {
+    const fallbackStorage = useStorage("fallback");
+    const fallbackFile = await fallbackStorage.getItem(fullPath);
+    if (fallbackFile) {
+      return fallbackFile;
+    }
+    throw createError({
+      statusCode: 404,
+      statusMessage: "File not found"
+    });
+  }
+  return file;
+});

package/dist/runtime/server/api/content/[path].d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<string | number | true | object>>;
+declare const _default: import("h3").EventHandler<import("h3").EventHandlerRequest, Promise<any>>;
 export default _default;

package/dist/runtime/server/api/content/[path].js

@@ -1,6 +1,46 @@
 import { z } from "zod";
 import { createError, defineEventHandler, getValidatedRouterParams } from "h3";
 import { useRuntimeConfig, useStorage } from "nitropack/runtime";
+import { parse } from "csv-parse/sync";
+import { marked } from "marked";
+function parsedFile(fullPath, file) {
+  if (fullPath.endsWith(".json") && typeof file === "string") {
+    try {
+      return JSON.parse(file);
+    } catch {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Invalid JSON file"
+      });
+    }
+  }
+  if (fullPath.endsWith(".csv") && typeof file === "string") {
+    try {
+      return parse(file, {
+        columns: true,
+        skip_empty_lines: true,
+        delimiter: ";"
+      });
+    } catch {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Invalid CSV file"
+      });
+    }
+  }
+  if (fullPath.endsWith(".md") && typeof file === "string") {
+    try {
+      const html = marked.parse(file);
+      return html;
+    } catch {
+      throw createError({
+        statusCode: 500,
+        statusMessage: "Invalid Markdown file"
+      });
+    }
+  }
+  return file;
+}
 const paramsSchema = z.object({
   path: z.string().min(1)
 });
@@ -14,12 +54,12 @@ export default defineEventHandler(async (event) => {
     const fallbackStorage = useStorage("fallback");
     const fallbackFile = await fallbackStorage.getItem(fullPath);
     if (fallbackFile) {
-      return fallbackFile;
+      return parsedFile(fullPath, fallbackFile);
     }
     throw createError({
       statusCode: 404,
       statusMessage: "File not found"
     });
   }
-  return file;
+  return parsedFile(fullPath, file);
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",
@@ -37,7 +37,9 @@
   "dependencies": {
     "@nuxt/kit": "^4.2.2",
     "aws4fetch": "^1.0.20",
+    "csv-parse": "^6.1.0",
     "defu": "^6.1.4",
+    "marked": "^17.0.1",
     "nodemailer": "^7.0.12",
     "zod": "^4.3.5"
   },