mktcms 0.3.17 → 0.3.19

package/README.md

@@ -28,6 +28,35 @@ This is my personal, minimalist alternative to @nuxt/content and Studio, which a
 npx nuxi module add mktcms
 ```
 
+The module also applies a small set of app defaults that you can still override in your own `nuxt.config.ts`:
+
+- `router.options.scrollBehaviorType = 'smooth'`
+- default German `app.head` language, title, description, and favicon
+- `mdc.headings.anchorLinks = false`
+- includes and configures `@nuxtjs/robots` with admin route disallow rules
+- includes and configures `@nuxt/fonts` with default font weights
+- includes and configures `@nuxtjs/plausible` with `proxy = true` and `autoPageviews = false`
+- default frontmatter schema for `Seiten/Startseite.md` and `Seiten/**/*.md`
+
+Example override:
+
+```ts
+export default defineNuxtConfig({
+  app: {
+    head: {
+      title: 'Meine Website',
+    },
+  },
+  mktcms: {
+    frontmatter: {
+      'Seiten/**/*.md': {
+        seoTitle: { type: 'string', label: 'Eigener SEO-Titel' },
+      },
+    },
+  },
+})
+```
+
 ```bash
 NUXT_PUBLIC_MKTCMS_SITE_URL="http://localhost:3000"
 NUXT_PUBLIC_MKTCMS_SHOW_VERSIONING=false

package/dist/module.json

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

package/dist/module.mjs

@@ -1,6 +1,100 @@
 import { defineNuxtModule, createResolver, addComponent, addImports, addServerImports, addServerPlugin, addServerHandler, extendPages } from '@nuxt/kit';
 import defu from 'defu';
 
+const DEFAULT_HEAD_META = [
+  {
+    name: "description",
+    content: "Meine neue mktCMS Website"
+  }
+];
+const DEFAULT_HEAD_LINK = [
+  {
+    rel: "icon",
+    type: "image/png",
+    href: "/favicon.png"
+  }
+];
+const defaultFrontmatterSchema = {
+  seoTitle: {
+    type: "string",
+    label: "SEO-Titel"
+  }
+};
+const defaultFrontmatterSchemas = {
+  "Seiten/Startseite.md": defaultFrontmatterSchema,
+  "Seiten/**/*.md": defaultFrontmatterSchema
+};
+function mergeHeadMeta(meta) {
+  const nextMeta = Array.isArray(meta) ? [...meta] : [];
+  for (const defaultMeta of DEFAULT_HEAD_META) {
+    const hasMatch = nextMeta.some((item) => item?.name === defaultMeta.name);
+    if (!hasMatch) {
+      nextMeta.push(defaultMeta);
+    }
+  }
+  return nextMeta;
+}
+function mergeHeadLinks(links) {
+  const nextLinks = Array.isArray(links) ? [...links] : [];
+  for (const defaultLink of DEFAULT_HEAD_LINK) {
+    const hasMatch = nextLinks.some((item) => item?.rel === defaultLink.rel);
+    if (!hasMatch) {
+      nextLinks.push(defaultLink);
+    }
+  }
+  return nextLinks;
+}
+function applyMktcmsNuxtDefaults(nuxtOptions, moduleOptions = {}) {
+  nuxtOptions.router = defu(nuxtOptions.router, {
+    options: {
+      scrollBehaviorType: "smooth"
+    }
+  });
+  nuxtOptions.app = defu(nuxtOptions.app, {
+    head: {
+      htmlAttrs: {
+        lang: "de"
+      },
+      title: "Neue Website"
+    }
+  });
+  nuxtOptions.app.head = nuxtOptions.app.head || {};
+  nuxtOptions.app.head.meta = mergeHeadMeta(nuxtOptions.app.head.meta);
+  nuxtOptions.app.head.link = mergeHeadLinks(nuxtOptions.app.head.link);
+  nuxtOptions.runtimeConfig = defu(nuxtOptions.runtimeConfig, {
+    plausibleApiKey: ""
+  });
+  nuxtOptions.runtimeConfig.public = defu(nuxtOptions.runtimeConfig.public, {
+    plausibleApiHost: ""
+  });
+  nuxtOptions.runtimeConfig.mktcms = defu(nuxtOptions.runtimeConfig.mktcms, {
+    adminAuthKey: "",
+    authCookieMaxAgeSeconds: 7 * 24 * 60 * 60,
+    authCookiePath: "/",
+    authCookieSameSite: "lax",
+    authCookieSecure: process.env.NODE_ENV === "production",
+    loginRateLimitMaxAttempts: 5,
+    loginRateLimitWindowSeconds: 300,
+    loginRateLimitBlockSeconds: 600,
+    uploadMaxBytes: 50 * 1024 * 1024,
+    smtpHost: "",
+    smtpPort: 465,
+    smtpSecure: true,
+    smtpUser: "",
+    smtpPass: "",
+    mailerFrom: "",
+    mailerTo: "",
+    gitUser: "",
+    gitRepo: "",
+    gitToken: "",
+    frontmatter: defu(moduleOptions.frontmatter || {}, defaultFrontmatterSchemas)
+  });
+  nuxtOptions.runtimeConfig.public.mktcms = defu(nuxtOptions.runtimeConfig.public.mktcms, {
+    siteUrl: "",
+    showVersioning: false
+  });
+}
+
 const module$1 = defineNuxtModule({
   meta: {
     name: "mktcms",
@@ -8,43 +102,38 @@ const module$1 = defineNuxtModule({
   },
   moduleDependencies: {
     "@nuxtjs/mdc": {
-      version: "^0.20.0"
+      version: "^0.20.0",
+      defaults: {
+        headings: {
+          anchorLinks: false
+        }
+      }
+    },
+    "@nuxt/fonts": {
+      version: "^0.14.0",
+      defaults: {
+        defaults: {
+          weights: [300, 400, 700, 800]
+        }
+      }
+    },
+    "@nuxtjs/robots": {
+      version: "^6.0.6",
+      defaults: {
+        disallow: ["/api/admin/*", "/admin/*"]
+      }
+    },
+    "@nuxtjs/plausible": {
+      version: "^3.0.2",
+      defaults: {
+        proxy: true,
+        autoPageviews: false
+      }
     }
   },
   setup(_options, _nuxt) {
     const resolver = createResolver(import.meta.url);
-    _nuxt.options.runtimeConfig = defu(_nuxt.options.runtimeConfig, {
-      plausibleApiKey: ""
-    });
-    _nuxt.options.runtimeConfig.public = defu(_nuxt.options.runtimeConfig.public, {
-      plausibleApiHost: ""
-    });
-    _nuxt.options.runtimeConfig.mktcms = defu((_nuxt.options.runtimeConfig.mktcms, {
-      adminAuthKey: "",
-      authCookieMaxAgeSeconds: 7 * 24 * 60 * 60,
-      authCookiePath: "/",
-      authCookieSameSite: "lax",
-      authCookieSecure: process.env.NODE_ENV === "production",
-      loginRateLimitMaxAttempts: 5,
-      loginRateLimitWindowSeconds: 300,
-      loginRateLimitBlockSeconds: 600,
-      uploadMaxBytes: 50 * 1024 * 1024,
-      smtpHost: "",
-      smtpPort: 465,
-      smtpSecure: true,
-      smtpUser: "",
-      smtpPass: "",
-      mailerFrom: "",
-      mailerTo: "",
-      gitUser: "",
-      gitRepo: "",
-      gitToken: "",
-      frontmatter: _options.frontmatter || {}
-    }));
-    _nuxt.options.runtimeConfig.public.mktcms = defu((_nuxt.options.runtimeConfig.public.mktcms, {
-      siteUrl: "",
-      showVersioning: false
-    }));
+    applyMktcmsNuxtDefaults(_nuxt.options, _options);
     addComponent({
       name: "AdminWidget",
       filePath: resolver.resolve("runtime/app/components/frontend/widget.vue")

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/modal.d.vue.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     isOpen: boolean;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/modal.vue.d.ts

@@ -1,6 +1,6 @@
 type __VLS_Props = {
     isOpen: boolean;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/node.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     path: string;
     name: string;
     level: number;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

package/dist/runtime/app/components/content/editor/frontmatter/filePicker/node.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     path: string;
     name: string;
     level: number;
-    uiHint: 'image' | 'pdf' | 'file';
+    uiHint: 'image' | 'pdf' | 'file' | 'media';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (path: string) => any;

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

@@ -1,5 +1,8 @@
 <script setup>
 import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import TurndownService from "turndown";
+import FilePickerModal from "./frontmatter/filePicker/modal.vue";
+import { isImagePath } from "../../../../shared/contentFiles";
 import "monaco-editor/min/vs/editor/editor.main.css";
 import "monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
@@ -11,9 +14,238 @@ const props = defineProps({
 });
 const emit = defineEmits(["update:modelValue"]);
 const rootEl = ref(null);
+const isFilePickerOpen = ref(false);
+const isContextMenuOpen = ref(false);
+const contextMenuPosition = ref({ x: 0, y: 0 });
 let editor;
+let pendingFileInsertionSelection;
 let resizeObserver;
 let suppressModelEmit = false;
+const allowedPasteElementNames = /* @__PURE__ */ new Set([
+  "a",
+  "b",
+  "blockquote",
+  "br",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "i",
+  "li",
+  "ol",
+  "p",
+  "strong",
+  "ul"
+]);
+const removablePasteElementNames = /* @__PURE__ */ new Set([
+  "applet",
+  "area",
+  "audio",
+  "button",
+  "canvas",
+  "caption",
+  "col",
+  "colgroup",
+  "embed",
+  "figcaption",
+  "figure",
+  "form",
+  "hr",
+  "iframe",
+  "img",
+  "input",
+  "link",
+  "map",
+  "math",
+  "meta",
+  "noscript",
+  "object",
+  "option",
+  "picture",
+  "script",
+  "select",
+  "source",
+  "style",
+  "svg",
+  "table",
+  "tbody",
+  "td",
+  "textarea",
+  "tfoot",
+  "th",
+  "thead",
+  "title",
+  "tr",
+  "track",
+  "video"
+]);
+const turndownService = new TurndownService({
+  headingStyle: "atx",
+  codeBlockStyle: "fenced",
+  bulletListMarker: "-"
+});
+turndownService.addRule("removeUnsupportedPasteElements", {
+  filter: (node) => removablePasteElementNames.has(node.nodeName.toLowerCase()) || node.nodeName.includes(":"),
+  replacement: () => ""
+});
+function unwrapElement(element) {
+  const parent = element.parentNode;
+  if (!parent)
+    return;
+  while (element.firstChild)
+    parent.insertBefore(element.firstChild, element);
+  parent.removeChild(element);
+}
+function isSafeHref(href) {
+  if (!href.trim())
+    return false;
+  try {
+    const url = new URL(href, window.location.origin);
+    return ["http:", "https:", "mailto:", "tel:"].includes(url.protocol);
+  } catch {
+    return false;
+  }
+}
+function sanitizePastedHtml(html) {
+  const clipboardDocument = new DOMParser().parseFromString(html, "text/html");
+  const comments = clipboardDocument.createTreeWalker(clipboardDocument.body, NodeFilter.SHOW_COMMENT);
+  const commentsToRemove = [];
+  while (comments.nextNode())
+    commentsToRemove.push(comments.currentNode);
+  for (const comment of commentsToRemove)
+    comment.remove();
+  const elements = Array.from(clipboardDocument.body.querySelectorAll("*"));
+  for (const element of elements) {
+    if (!element.isConnected)
+      continue;
+    const tagName = element.tagName.toLowerCase();
+    const inlineStyle = element.getAttribute("style") ?? "";
+    if (/display\s*:\s*none/i.test(inlineStyle) || /mso-hide\s*:\s*all/i.test(inlineStyle)) {
+      element.remove();
+      continue;
+    }
+    if (tagName.includes(":") || removablePasteElementNames.has(tagName)) {
+      element.remove();
+      continue;
+    }
+    if (tagName === "a") {
+      const href = element.getAttribute("href") ?? "";
+      if (!isSafeHref(href)) {
+        unwrapElement(element);
+        continue;
+      }
+      for (const attribute of Array.from(element.attributes)) {
+        if (attribute.name !== "href")
+          element.removeAttribute(attribute.name);
+      }
+      continue;
+    }
+    if (!allowedPasteElementNames.has(tagName)) {
+      unwrapElement(element);
+      continue;
+    }
+    for (const attribute of Array.from(element.attributes))
+      element.removeAttribute(attribute.name);
+  }
+  return clipboardDocument.body;
+}
+function insertMarkdown(markdown, selections = editor?.getSelections()) {
+  if (!editor || !selections?.length)
+    return;
+  editor.pushUndoStop();
+  editor.executeEdits("insert-markdown", selections.map((selection) => ({
+    range: selection,
+    text: markdown,
+    forceMoveMarkers: true
+  })));
+  editor.pushUndoStop();
+  editor.focus();
+}
+function escapeMarkdownLabel(label) {
+  return label.replaceAll("\\", "\\\\").replaceAll("[", "\\[").replaceAll("]", "\\]");
+}
+function filenameWithoutExtension(path) {
+  const filename = path.split(":").at(-1) ?? path;
+  return filename.replace(/\.[^/.]+$/, "");
+}
+function toContentUrl(path) {
+  return `/api/content/${encodeURIComponent(path)}`;
+}
+function toMarkdownFileReference(path) {
+  const label = escapeMarkdownLabel(filenameWithoutExtension(path));
+  const url = toContentUrl(path);
+  if (isImagePath(path))
+    return `![${label}](${url})`;
+  return `[${label}](${url})`;
+}
+function closeContextMenu() {
+  isContextMenuOpen.value = false;
+}
+function openFilePicker() {
+  closeContextMenu();
+  isFilePickerOpen.value = true;
+}
+function insertSelectedFile(path) {
+  insertMarkdown(toMarkdownFileReference(path), pendingFileInsertionSelection ? [pendingFileInsertionSelection] : void 0);
+  pendingFileInsertionSelection = void 0;
+}
+function getMouseTargetPosition(event) {
+  const target = editor?.getTargetAtClientPoint(event.clientX, event.clientY);
+  if (target && "position" in target && target.position)
+    return target.position;
+  return void 0;
+}
+function handleContextMenu(event) {
+  if (!editor || !rootEl.value?.contains(event.target))
+    return;
+  event.preventDefault();
+  event.stopPropagation();
+  const position = getMouseTargetPosition(event);
+  if (position) {
+    pendingFileInsertionSelection = new monaco.Selection(
+      position.lineNumber,
+      position.column,
+      position.lineNumber,
+      position.column
+    );
+    editor.setPosition(position);
+  } else {
+    pendingFileInsertionSelection = editor.getSelection() ?? void 0;
+  }
+  contextMenuPosition.value = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  isContextMenuOpen.value = true;
+}
+function handleDocumentClick(event) {
+  if (!isContextMenuOpen.value)
+    return;
+  const target = event.target;
+  if (target.closest("[data-monaco-custom-context-menu]"))
+    return;
+  closeContextMenu();
+}
+function handleDocumentKeydown(event) {
+  if (event.key === "Escape")
+    closeContextMenu();
+}
+function handlePaste(event) {
+  if (!editor?.hasTextFocus())
+    return;
+  const html = event.clipboardData?.getData("text/html");
+  if (!html)
+    return;
+  const markdown = turndownService.turndown(sanitizePastedHtml(html)).trim();
+  if (!markdown)
+    return;
+  event.preventDefault();
+  event.stopPropagation();
+  insertMarkdown(markdown);
+}
 function ensureMonacoWorkers() {
   const globalAny = globalThis;
   if (globalAny.MonacoEnvironment?.getWorker)
@@ -35,13 +267,18 @@ onMounted(() => {
     minimap: { enabled: false },
     scrollBeyondLastLine: false,
     wordWrap: "on",
-    automaticLayout: true
+    automaticLayout: true,
+    contextmenu: false
   });
   editor.onDidChangeModelContent(() => {
     if (!editor || suppressModelEmit)
       return;
     emit("update:modelValue", editor.getValue());
   });
+  document.addEventListener("paste", handlePaste, true);
+  document.addEventListener("contextmenu", handleContextMenu, true);
+  document.addEventListener("click", handleDocumentClick, true);
+  document.addEventListener("keydown", handleDocumentKeydown, true);
   resizeObserver = new ResizeObserver(() => {
     editor?.layout();
   });
@@ -63,14 +300,47 @@ watch(() => props.modelValue, (nextValue) => {
 onBeforeUnmount(() => {
   resizeObserver?.disconnect();
   resizeObserver = void 0;
+  document.removeEventListener("paste", handlePaste, true);
+  document.removeEventListener("contextmenu", handleContextMenu, true);
+  document.removeEventListener("click", handleDocumentClick, true);
+  document.removeEventListener("keydown", handleDocumentKeydown, true);
   editor?.dispose();
   editor = void 0;
 });
 </script>
 
 <template>
-  <div
-    ref="rootEl"
-    class="w-full"
-  />
+  <div class="relative w-full h-full">
+    <div
+      ref="rootEl"
+      class="w-full h-full"
+    />
+
+    <div
+      v-if="isContextMenuOpen"
+      data-monaco-custom-context-menu
+      class="fixed z-9999 min-w-48 rounded-md border border-black/10 bg-white p-1 shadow-[0_8px_24px_rgba(0,0,0,0.18)]"
+      :style="{
+  left: `${contextMenuPosition.x}px`,
+  top: `${contextMenuPosition.y}px`
+}"
+      role="menu"
+    >
+      <button
+        type="button"
+        class="w-full rounded px-3 py-2 text-left text-sm hover:bg-gray-100"
+        role="menuitem"
+        @click="openFilePicker"
+      >
+        Datei auswählen
+      </button>
+    </div>
+
+    <FilePickerModal
+      :is-open="isFilePickerOpen"
+      ui-hint="media"
+      @close="isFilePickerOpen = false"
+      @select="insertSelectedFile"
+    />
+  </div>
 </template>

package/dist/runtime/server/api/admin/list.js

@@ -8,7 +8,7 @@ function alphaSort(a, b) {
 }
 const querySchema = z.object({
   path: z.string().optional(),
-  type: z.enum(["image", "pdf", "file"]).optional()
+  type: z.enum(["image", "pdf", "file", "media"]).optional()
 });
 export default defineEventHandler(async (event) => {
   const { path, type } = await getValidatedQuery(event, (query) => querySchema.parse(query));
@@ -23,6 +23,9 @@ export default defineEventHandler(async (event) => {
     if (type === "pdf") {
       return isPdfPath(key);
     }
+    if (type === "media") {
+      return isImagePath(key) || isPdfPath(key);
+    }
     return true;
   });
   const filteredFiles = matchingKeys.filter((key) => !key.includes(":"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.3.17",
+  "version": "0.3.19",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",
@@ -38,8 +38,11 @@
     "css:watch": "tailwindcss -i ./src/runtime/app/styles/admin.css -o ./src/runtime/app/styles/admin.min.css --minify --watch"
   },
   "dependencies": {
+    "@nuxt/fonts": "^0.14.0",
     "@nuxt/kit": "^4.2.2",
     "@nuxtjs/mdc": "^0.20.1",
+    "@nuxtjs/plausible": "^3.0.2",
+    "@nuxtjs/robots": "^6.0.6",
     "@types/ejs": "^3.1.5",
     "@vueuse/core": "^14.2.1",
     "csv-parse": "^6.1.0",
@@ -52,6 +55,7 @@
     "nodemailer": "^7.0.13",
     "sharp": "^0.34.5",
     "simple-git": "^3.32.2",
+    "turndown": "^7.2.4",
     "unzipper": "^0.12.3",
     "yaml": "^2.8.2",
     "zod": "^4.3.6"
@@ -66,6 +70,7 @@
     "@tailwindcss/typography": "^0.5.19",
     "@types/node": "^25.3.0",
     "@types/nodemailer": "^7.0.11",
+    "@types/turndown": "^5.0.6",
     "@types/unzipper": "^0.10.11",
     "changelogen": "^0.6.2",
     "eslint": "^9.39.3",