mktcms 0.1.17 → 0.1.19

package/README.md

@@ -1,6 +1,8 @@
 # Simple CMS module for Nuxt (pre-alpha)
 
-This module is my personal, minimalist, opinionated, independent alternative to @nuxt/content and to a large portion of the WordPress projects I’ve worked on.
+This module is my personal, minimalist, opinionated, independent alternative to @nuxt/content and to a large portion of the WordPress projects I’ve worked on. I want to build projects with Nuxt and customers need the simplest possible admin interface to manage content without getting overwhelmed by buttons and features they don’t need.
+
+I don't want to decide on a database schema or limit myself to json. All editable content is stored as a file of supported format (json, markdown, csv, jpg, webp, pdf, etc.) in an S3 bucket. The admin interface is a simple file explorer/editor. The module provides a `useContent` composable to read content files and a `sendMail` utility to send emails via SMTP.
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
@@ -26,19 +28,20 @@ npx nuxi module add mktcms
 ```
 
 ```bash
-MKTCMS_ADMIN_AUTH_KEY="your-admin-auth-key"
-MKTCMS_S3_ACCESS_KEY_ID=your-s3-access-key-id
-MKTCMS_S3_SECRET_ACCESS_KEY=your-s3-secret-access-key
-MKTCMS_S3_BUCKET=your-s3-bucket-name
-MKTCMS_S3_REGION=your-s3-bucket-region
-MKTCMS_S3_PREFIX="your-project"
-MKTCMS_SMTP_HOST="your-smtp-host"
-MKTCMS_SMTP_PORT=465
-MKTCMS_SMTP_SECURE=true
-MKTCMS_SMTP_USER="your-smtp-user"
-MKTCMS_SMTP_PASS="your-smtp-pass"
-MKTCMS_MAILER_FROM="your-mailer-from-address"
-MKTCMS_MAILER_TO="your-mailer-to-address"
+NUXT_PUBLIC_MKTCMS_SITE_URL="http://localhost:3000"
+NUXT_MKTCMS_ADMIN_AUTH_KEY="your-admin-auth-key"
+NUXT_MKTCMS_S3_ACCESS_KEY_ID=your-s3-access-key-id
+NUXT_MKTCMS_S3_SECRET_ACCESS_KEY=your-s3-secret-access-key
+NUXT_MKTCMS_S3_BUCKET=your-s3-bucket-name
+NUXT_MKTCMS_S3_REGION=your-s3-bucket-region
+NUXT_MKTCMS_S3_PREFIX="your-project"
+NUXT_MKTCMS_SMTP_HOST="your-smtp-host"
+NUXT_MKTCMS_SMTP_PORT=465
+NUXT_MKTCMS_SMTP_SECURE=true
+NUXT_MKTCMS_SMTP_USER="your-smtp-user"
+NUXT_MKTCMS_SMTP_PASS="your-smtp-pass"
+NUXT_MKTCMS_MAILER_FROM="your-mailer-from-address"
+NUXT_MKTCMS_MAILER_TO="your-mailer-to-address"
 ```
 
 Add local development storage folder in `.gitignore`:

package/dist/module.json

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

package/dist/module.mjs

@@ -24,6 +24,9 @@ const module$1 = defineNuxtModule({
       mailerFrom: "",
       mailerTo: ""
     }));
+    _nuxt.options.runtimeConfig.public.mktcms = defu((_nuxt.options.runtimeConfig.public.mktcms, {
+      siteUrl: ""
+    }));
     addServerImports({
       name: "sendMail",
       from: resolver.resolve("runtime/server/utils/sendMail")
@@ -74,9 +77,14 @@ const module$1 = defineNuxtModule({
         file: resolver.resolve("./runtime/app/pages/admin/index.vue")
       });
       pages.push({
-        name: "Admin Editor",
-        path: "/admin/edit/:path",
-        file: resolver.resolve("./runtime/app/pages/admin/edit/[path].vue")
+        name: "Admin Text Editor",
+        path: "/admin/edit/text/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/edit/text/[path].vue")
+      });
+      pages.push({
+        name: "Admin Blob Editor",
+        path: "/admin/edit/blob/:path",
+        file: resolver.resolve("./runtime/app/pages/admin/edit/blob/[path].vue")
       });
       pages.push({
         name: "Admin New Content",

package/dist/runtime/app/components/admin.vue

@@ -5,5 +5,5 @@
 </template>
 
 <style>
-*{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0}#mktcms-admin{background-color:#f9f9f9;margin:0 auto;max-width:800px;padding:20px}#mktcms-admin h1{color:#333}#mktcms-admin button{background-color:#3cb371;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;transition:background-color .3s}#mktcms-admin button:hover{background-color:#45a049}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin textarea{border:1px solid #ccc;border-radius:5px;font-size:16px;padding:10px}#mktcms-admin .breadcrumbs{color:#888;font-size:1.5rem;margin:20px 0}#mktcms-admin .breadcrumbs a{color:#888;text-decoration:none}#mktcms-admin .breadcrumbs a:hover{text-decoration:underline}#mktcms-admin .dirs,#mktcms-admin .files{display:flex;flex-direction:column;gap:8px}#mktcms-admin .dirs a,#mktcms-admin .files a{border-radius:4px;display:block;padding:8px 12px;text-decoration:none}#mktcms-admin .dirs a:hover,#mktcms-admin .files a:hover{text-decoration:underline}#mktcms-admin .files a{background-color:#fff;color:#555}#mktcms-admin .dirs a{background-color:#555;color:#fff;display:flex;justify-content:space-between}
+*{box-sizing:border-box}body{font-family:Arial,sans-serif;margin:0}#mktcms-admin{--mktcms-primary-color:#3cb371;--mktcms-primary-color-hover:#45a049;background-color:#f9f9f9;margin:0 auto;max-width:800px;padding:20px}#mktcms-admin h1{color:#333}#mktcms-admin .button,#mktcms-admin button{background-color:var(--mktcms-primary-color);border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:16px;padding:10px 20px;text-align:center;text-decoration:none;transition:background-color .3s}#mktcms-admin .button:hover,#mktcms-admin button:hover{background-color:var(--mktcms-primary-color-hover)}#mktcms-admin .button.soft,#mktcms-admin button.soft{background-color:#eee;color:#666}#mktcms-admin .button.soft:hover,#mktcms-admin button.soft:hover{background-color:#ddd}#mktcms-admin .button-icon{height:20px;vertical-align:middle;width:20px}#mktcms-admin input[type=email],#mktcms-admin input[type=password],#mktcms-admin input[type=text],#mktcms-admin select,#mktcms-admin textarea{background-color:#fff;border:1px solid #ccc;border-radius:5px;font-size:16px;padding:10px;width:100%}#mktcms-admin .breadcrumbs{color:#888;font-size:1rem;margin:20px 0}#mktcms-admin .breadcrumbs a{background-color:#eee;border-radius:4px;color:#888;padding:2px 6px;text-decoration:none}#mktcms-admin .breadcrumbs a:hover{text-decoration:underline}#mktcms-admin .dirs,#mktcms-admin .files{display:flex;flex-direction:column;gap:8px}#mktcms-admin .dirs a,#mktcms-admin .files a{border-radius:4px;display:block;padding:8px 12px;text-decoration:none}#mktcms-admin .dirs a:hover,#mktcms-admin .files a:hover{text-decoration:underline}#mktcms-admin .files a{background-color:#fff;color:#555}#mktcms-admin .dirs a{background-color:#555;color:#fff;display:flex;justify-content:space-between}
 </style>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    parts: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,29 @@
+<script setup>
+defineProps({
+  parts: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="breadcrumbs">
+    <NuxtLink to="/admin">Hauptordner</NuxtLink>
+    <span
+      v-for="(part, index) in parts"
+      :key="index"
+    >
+      /
+      <NuxtLink
+        v-if="index < parts.length - 1"
+        :to="`/admin/${parts.slice(0, index + 1).join(':')}`"
+      >
+        {{ part }}
+      </NuxtLink>
+      <span
+        v-else
+        style="font-weight: bold;"
+      >
+        {{ part }}
+      </span>
+    </span>
+  </div>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    parts: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    path: string;
+    dirs: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,36 @@
+<script setup>
+defineProps({
+  path: { type: String, required: true },
+  dirs: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="dirs">
+    <NuxtLink
+      v-for="dir in dirs"
+      :key="dir"
+      :to="`/admin/${path ? path + ':' : ''}${dir}`"
+    >
+      <span>
+        {{ dir }}
+      </span>
+      <span>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          style="width: 16px; height: 16px; vertical-align: middle;"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m8.25 4.5 7.5 7.5-7.5 7.5"
+          />
+        </svg>
+      </span>
+    </NuxtLink>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    path: string;
+    dirs: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

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

package/dist/runtime/app/components/content/editor/blob/image.vue

@@ -0,0 +1,12 @@
+<script setup>
+const path = defineModel("path", { type: String });
+</script>
+
+<template>
+  <div class="image-editor">
+    <img
+      :src="`/api/admin/content/${path}`"
+      alt="Image Preview"
+    >
+  </div>
+</template>

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

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

package/dist/runtime/app/components/content/editor/blob/index.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { useRoute } from "#app";
+import { ref } from "vue";
+import Image from "./image.vue";
+import Breadcrumb from "../../breadcrumb.vue";
+const path = useRoute().params.path || "";
+const pathParts = path.split(":");
+const isSaving = ref(false);
+const savingSuccessful = ref(false);
+async function saveContent() {
+  isSaving.value = true;
+  savingSuccessful.value = false;
+  await new Promise((resolve) => setTimeout(resolve, 1e3));
+  isSaving.value = false;
+  savingSuccessful.value = true;
+}
+</script>
+
+<template>
+  <div>
+    <Breadcrumb :parts="pathParts" />
+
+    <div>
+      <Image
+        v-if="path.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i)"
+        :path="path"
+      />
+      <button
+        style="margin-top: 10px;"
+        @click="saveContent"
+      >
+        <span v-if="isSaving">Speichern...</span>
+        <span v-else>Speichern</span>
+      </button>
+      <span
+        v-if="savingSuccessful"
+        style="color: green; margin-left: 10px;"
+      >✔️ Gespeichert</span>
+    </div>
+  </div>
+</template>

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

@@ -1,32 +1,32 @@
 <script setup>
 import { useFetch, useRoute } from "#app";
+import { ref, watch } from "vue";
 import Csv from "./csv.vue";
 import Markdown from "./markdown.vue";
+import Breadcrumb from "../../breadcrumb.vue";
 const path = useRoute().params.path || "";
 const pathParts = path.split(":");
 const { data: content } = await useFetch(`/api/admin/content/${path}`);
+const isSaving = ref(false);
+const savingSuccessful = ref(false);
+watch(content, () => {
+  savingSuccessful.value = false;
+});
 async function saveContent() {
+  isSaving.value = true;
+  savingSuccessful.value = false;
   await $fetch(`/api/admin/content/${path}`, {
     method: "POST",
     body: { content: content.value }
   });
+  isSaving.value = false;
+  savingSuccessful.value = true;
 }
 </script>
 
 <template>
   <div>
-    <div class="breadcrumbs">
-      <a href="/admin">Hauptverzeichnis</a>
-      <span
-        v-for="(part, index) in pathParts"
-        :key="index"
-      >
-        /
-        <a :href="`/admin/${pathParts.slice(0, index + 1).join(':')}`">
-          {{ part }}
-        </a>
-      </span>
-    </div>
+    <Breadcrumb :parts="pathParts" />
 
     <div v-if="content !== void 0">
       <Markdown
@@ -37,12 +37,22 @@ async function saveContent() {
         v-else-if="path.endsWith('.csv')"
         v-model:content="content"
       />
+      <textarea
+        v-if="path.match(/\.(txt|json)$/i)"
+        v-model="content"
+        style="width: 100%; height: 400px; font-family: monospace; resize: vertical;"
+      />
       <button
         style="margin-top: 10px;"
         @click="saveContent"
       >
-        Speichern
+        <span v-if="isSaving">Speichern...</span>
+        <span v-else>Speichern</span>
       </button>
+      <span
+        v-if="savingSuccessful"
+        style="color: green; margin-left: 10px;"
+      >✔️ Gespeichert</span>
     </div>
   </div>
 </template>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    path: string;
+    files: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,109 @@
+<script setup>
+defineProps({
+  path: { type: String, required: true },
+  files: { type: Array, required: true }
+});
+</script>
+
+<template>
+  <div class="files">
+    <div
+      v-for="file in files"
+      :key="file"
+      style="display: flex; align-items: center;"
+    >
+      <NuxtLink
+        :to="`/admin/edit/${file.match(/\.md$|\.csv$|\.txt$|\.json$/i) ? 'text' : 'blob'}/${path ? path + ':' : ''}${file}`"
+        style="flex-grow: 1;"
+      >
+        <img
+          v-if="file.match(/\.png$|\.jpg$|\.jpeg$|\.gif$|\.svg$|\.webp$/i)"
+          :src="`/api/content/${path ? path + ':' : ''}${file}`"
+          alt="Vorschaubild"
+          style="width: 64px; height: 64px; vertical-align: middle; margin-right: 4px; object-fit: cover;"
+        >
+        {{ file }}
+      </NuxtLink>
+      <NuxtLink
+        v-if="file.match(/\.png$|\.jpg$|\.jpeg$|\.gif$|\.svg$|\.webp$/i)"
+        style="margin-left: 8px;"
+        title="Link kopieren"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="button-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
+          />
+        </svg>
+      </NuxtLink>
+      <NuxtLink
+        :to="`/admin/move/${path ? path + ':' : ''}${file}`"
+        style="margin-left: 8px;"
+        title="verschieben / umbenennen"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="button-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3.75 9.776c.112-.017.227-.026.344-.026h15.812c.117 0 .232.009.344.026m-16.5 0a2.25 2.25 0 0 0-1.883 2.542l.857 6a2.25 2.25 0 0 0 2.227 1.932H19.05a2.25 2.25 0 0 0 2.227-1.932l.857-6a2.25 2.25 0 0 0-1.883-2.542m-16.5 0V6A2.25 2.25 0 0 1 6 3.75h3.879a1.5 1.5 0 0 1 1.06.44l2.122 2.12a1.5 1.5 0 0 0 1.06.44H18A2.25 2.25 0 0 1 20.25 9v.776"
+          />
+        </svg>
+      </NuxtLink>
+      <NuxtLink
+        :to="`/admin/copy/${path ? path + ':' : ''}${file}`"
+        style="margin-left: 8px;"
+        title="kopieren"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="button-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75"
+          />
+        </svg>
+      </NuxtLink>
+      <NuxtLink
+        :to="`/admin/delete/${path ? path + ':' : ''}${file}`"
+        style="margin-left: 8px;"
+        title="löschen"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="button-icon"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0"
+          />
+        </svg>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+type __VLS_Props = {
+    path: string;
+    files: string[];
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -1,6 +1,9 @@
 <script setup>
 import { useFetch, useRoute } from "#app";
 import { computed } from "vue";
+import Breadcrumb from "./breadcrumb.vue";
+import Files from "./files.vue";
+import Dirs from "./dirs.vue";
 const path = useRoute().params.path || "";
 const pathParts = path.split(":");
 const { data: keys } = await useFetch("/api/admin/content/list", {
@@ -30,60 +33,19 @@ const dirs = computed(() => {
 
 <template>
   <div>
-    <div class="breadcrumbs">
-      <a href="/admin">Hauptverzeichnis</a>
-      <span
-        v-for="(part, index) in pathParts"
-        :key="index"
-      >
-        /
-        <a :href="`/admin/${pathParts.slice(0, index + 1).join(':')}`">
-          {{ part }}
-        </a>
-      </span>
-    </div>
+    <Breadcrumb :parts="pathParts" />
 
-    <div
+    <Files
       v-if="files.length"
-      class="files"
-    >
-      <a
-        v-for="file in files"
-        :key="file"
-        :href="`/admin/edit/${path ? path + ':' : ''}${file}`"
-      >{{ file }}</a>
-    </div>
+      :path="path"
+      :files="files"
+    />
 
-    <div
+    <Dirs
       v-if="dirs.length"
-      class="dirs"
+      :path="path"
+      :dirs="dirs"
       style="margin-top: 8px;"
-    >
-      <a
-        v-for="dir in dirs"
-        :key="dir"
-        :href="`/admin/${path ? path + ':' : ''}${dir}`"
-      >
-        <span>
-          {{ dir }}
-        </span>
-        <span>
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke-width="1.5"
-            stroke="currentColor"
-            style="width: 16px; height: 16px; vertical-align: middle;"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              d="m8.25 4.5 7.5 7.5-7.5 7.5"
-            />
-          </svg>
-        </span>
-      </a>
-    </div>
+    />
   </div>
 </template>

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

@@ -1,23 +1,86 @@
 <script setup>
+import { computed, onMounted, ref, useFetch, useRoute } from "#imports";
 import useAdminUpload from "../../composables/useAdminUpload";
-const { isUploading, fileInput, path, uploadFiles } = useAdminUpload();
+const { data: keys } = await useFetch("/api/admin/content/list");
+const dirs = computed(() => {
+  const dirSet = /* @__PURE__ */ new Set();
+  keys.value?.forEach((key) => {
+    const parts = key.split(":");
+    if (parts.length > 1) {
+      for (let i = 0; i < parts.length - 1; i++) {
+        const dir2 = parts.slice(0, i + 1).join("/");
+        dirSet.add(dir2);
+      }
+    }
+  });
+  return Array.from(dirSet).sort();
+});
+const route = useRoute();
+const dir = ref(route.query.dir || "");
+const newSubdir = ref("");
+const { isUploading, fileInput, fileInputImg, fileInputPdf, path, uploadFiles } = useAdminUpload();
+onMounted(() => {
+  path.value = dir.value;
+});
 </script>
 
 <template>
-  <div style="display: flex; gap: 8px; margin: 16px 0;">
-    <input
-      v-model="path"
-      type="text"
-      placeholder="Unterordner (z.B. 'Produkte')"
+  <div style="display: flex; flex-direction: column; gap: 8px; margin: 16px 0;">
+    <h1 style="margin-bottom: 0;">
+      Datei hochladen
+    </h1>
+
+    <div style="display: flex; gap: 16px; align-items: center;">
+      <div style="flex-grow: 1;">
+        <h3 style="margin-bottom: 4px;">
+          Ordner
+        </h3>
+        <select
+          v-model="dir"
+          @change="path = dir"
+        >
+          <option value="">
+            Hauptordner
+          </option>
+          <option
+            v-for="d in dirs"
+            :key="d"
+            :value="d"
+          >
+            {{ d }}
+          </option>
+        </select>
+      </div>
+      <div style="flex-grow: 1;">
+        <h3 style="margin-bottom: 4px;">
+          Neuen Unterordner erstellen
+        </h3>
+        <input
+          v-model="newSubdir"
+          type="text"
+          placeholder="Unterordner (z.B. 'Produkte')"
+          @change="path = dir ? dir.replace(/\//g, ':') + ':' + newSubdir : newSubdir"
+        >
+      </div>
+    </div>
+
+    <button
+      :disabled="isUploading"
+      @click="fileInputImg?.click()"
+    >
+      Bild hochladen
+    </button>
+    <button
+      :disabled="isUploading"
+      @click="fileInputPdf?.click()"
     >
-    <button :disabled="isUploading">
-      Neuer Inhalt
+      PDF hochladen
     </button>
     <button
       :disabled="isUploading"
       @click="fileInput?.click()"
     >
-      Bild/Dokument hochladen
+      Andere Datei hochladen
     </button>
     <input
       ref="fileInput"
@@ -26,6 +89,24 @@ const { isUploading, fileInput, path, uploadFiles } = useAdminUpload();
       accept=".pdf,.jpg,.jpeg,.png,.gif,.svg,.webp,.md,.docx,.txt"
       @change="async (e) => {
   await uploadFiles(e);
+}"
+    >
+    <input
+      ref="fileInputImg"
+      style="display: none"
+      type="file"
+      accept=".jpg,.jpeg,.png,.gif,.svg,.webp"
+      @change="async (e) => {
+  await uploadFiles(e);
+}"
+    >
+    <input
+      ref="fileInputPdf"
+      style="display: none"
+      type="file"
+      accept=".pdf"
+      @change="async (e) => {
+  await uploadFiles(e);
 }"
     >
   </div>

package/dist/runtime/app/components/header.vue

@@ -1,23 +1,50 @@
+<script setup>
+import { useRoute, useRuntimeConfig } from "#imports";
+const { public: { mktcms: { siteUrl } } } = useRuntimeConfig();
+const route = useRoute();
+</script>
+
 <template>
-  <div style="display: flex; justify-content: space-between; align-items: center;">
-    <h1>
-      <NuxtLink
-        to="/admin"
-        style="text-decoration: none; color: inherit;"
+  <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
+    <NuxtLink
+      v-if="route.fullPath != '/admin'"
+      to="/admin"
+      class="button soft"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="button-icon"
       >
-        Website Verwaltung
-      </NuxtLink>
-    </h1>
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="M15.75 19.5 8.25 12l7.5-7.5"
+        />
+      </svg>
+    </NuxtLink>
     <NuxtLink
       to="/admin/new"
-      style="background-color: #4CAF50; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-left: auto; margin-right: 10px;"
+      class="button"
+      style="margin-left: auto;"
+    >
+      Datei hochladen
+    </NuxtLink>
+    <NuxtLink
+      :to="siteUrl"
+      external
+      target="_blank"
+      class="button soft"
     >
-      Neuer Inhalt
+      zur Website
     </NuxtLink>
     <NuxtLink
       external
       to="/api/admin/logout"
-      style="background-color: #ccc; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"
+      class="button soft"
     >
       Abmelden
     </NuxtLink>

package/dist/runtime/app/composables/useAdminUpload.d.ts

@@ -4,6 +4,8 @@ export default function useAdminUpload(): {
     path: import("vue").Ref<string | null, string | null>;
     files: import("vue").Ref<string[], string[]>;
     fileInput: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    fileInputImg: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
+    fileInputPdf: import("vue").Ref<HTMLInputElement | null, HTMLInputElement | null>;
     uploadFiles: (event: Event) => Promise<void>;
     deleteFile: (path: string) => Promise<void>;
 };

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

@@ -3,6 +3,8 @@ export default function useAdminUpload() {
   const uploadError = ref(null);
   const files = ref([]);
   const fileInput = ref(null);
+  const fileInputImg = ref(null);
+  const fileInputPdf = ref(null);
   const isUploading = ref(false);
   const path = ref(null);
   const sanePath = computed(() => {
@@ -55,6 +57,8 @@ export default function useAdminUpload() {
     path,
     files,
     fileInput,
+    fileInputImg,
+    fileInputPdf,
     uploadFiles,
     deleteFile
   };

package/dist/runtime/app/pages/admin/edit/blob/[path].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/pages/admin/edit/blob/[path].vue

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

package/dist/runtime/app/pages/admin/edit/blob/[path].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/pages/admin/edit/text/[path].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/pages/admin/edit/text/[path].vue

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

package/dist/runtime/app/pages/admin/edit/text/[path].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/server/api/admin/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/admin/content/[path].js

@@ -8,11 +8,17 @@ export default defineEventHandler(async (event) => {
   const { path } = await getValidatedRouterParams(event, (params) => paramsSchema.parse(params));
   const { mktcms: { s3Prefix } } = useRuntimeConfig();
   const fullPath = s3Prefix + ":" + path;
+  const isImage = path.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i);
+  if (isImage) {
+    event.node.res.setHeader("Content-Type", "image/" + path.split(".").pop()?.toLowerCase());
+  } else {
+    event.node.res.setHeader("Content-Type", "text/plain; charset=utf-8");
+  }
   const storage = useStorage("content");
-  const file = await storage.getItem(fullPath);
+  const file = isImage ? await storage.getItemRaw(fullPath) : await storage.getItem(fullPath);
   if (!file) {
     const fallbackStorage = useStorage("fallback");
-    const fallbackFile = await fallbackStorage.getItem(fullPath);
+    const fallbackFile = isImage ? await fallbackStorage.getItemRaw(fullPath) : await fallbackStorage.getItem(fullPath);
     if (fallbackFile) {
       return fallbackFile;
     }

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

@@ -48,11 +48,15 @@ export default defineEventHandler(async (event) => {
   const { path } = await getValidatedRouterParams(event, (params) => paramsSchema.parse(params));
   const { mktcms: { s3Prefix } } = useRuntimeConfig();
   const fullPath = s3Prefix + ":" + path;
+  const isImage = path.match(/\.(png|jpg|jpeg|gif|svg|webp)$/i);
+  if (isImage) {
+    event.node.res.setHeader("Content-Type", "image/" + path.split(".").pop()?.toLowerCase());
+  }
   const storage = useStorage("content");
-  const file = await storage.getItem(fullPath);
+  const file = isImage ? await storage.getItemRaw(fullPath) : await storage.getItem(fullPath);
   if (!file) {
     const fallbackStorage = useStorage("fallback");
-    const fallbackFile = await fallbackStorage.getItem(fullPath);
+    const fallbackFile = isImage ? await fallbackStorage.getItemRaw(fullPath) : await fallbackStorage.getItem(fullPath);
     if (fallbackFile) {
       return parsedFile(fullPath, fallbackFile);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.1.17",
+  "version": "0.1.19",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",

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

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