mktcms 0.1.6 → 0.1.7

package/README.md

@@ -1,13 +1,6 @@
-<!--
-Get your module up and running quickly.
+# Simple CMS module for Nuxt (pre-alpha)
 
-Find and replace all on all files (CMD+SHIFT+F):
-- Name: My Module
-- Package name: mktcms
-- Description: My new Nuxt module
--->
-
-# Simple CMS module for Nuxt
+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.
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
@@ -20,21 +13,80 @@ Find and replace all on all files (CMD+SHIFT+F):
 
 ## Features
 
-<!-- Highlight some of the features your module provide here -->
-- ⛰ &nbsp;Foo
-- 🚠 &nbsp;Bar
-- 🌲 &nbsp;Baz
-
-## Quick Setup
+- S3 bucket explorer/editor at `/admin`
+- API routes at `/api/admin`
+- `ADMIN_AUTH_KEY` env var to set a password
+- `useContent` composable
 
-Install the module to your Nuxt application with one command:
+## Setup
 
 ```bash
 npx nuxi module add mktcms
 ```
 
-That's it! You can now use My Module in your Nuxt app ✨
+```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"
+```
+
+## Usage
+
+Assuming json files in S3 like `your-project:articles:article-1.json`:
+
+```vue
+<script setup lang="ts">
+import { useContent } from 'mktcms'
+
+type Article = {
+  id: string
+  title: string
+  content: string
+}
+
+const { data: articles } = await useContent<Article[]>('articles')
+</script>
+
+<template>
+  <article v-for="article in articles" :key="article.id">
+    <h2>{{ article.title }}</h2>
+    <p>{{ article.content }}</p>
+  </article>
+</template>
+```
+
+For a specific article:
 
+```vue
+<script setup lang="ts">
+import { useContent } from 'mktcms'
+
+type Article = {
+  id: string
+  title: string
+  content: string
+}
+
+const { data: article } = await useContent<Article>('articles/article-1.json')
+</script>
+
+<template>
+  <article>
+    <h2>{{ article.title }}</h2>
+    <p>{{ article.content }}</p>
+  </article>
+</template>
+```
 
 ## Contribution
 

package/dist/module.json

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

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addServerPlugin, addServerHandler, extendPages } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addServerImportsDir, addServerPlugin, addServerHandler, extendPages } from '@nuxt/kit';
 import defu from 'defu';
 
 const module$1 = defineNuxtModule({
@@ -10,13 +10,21 @@ const module$1 = defineNuxtModule({
     const resolver = createResolver(import.meta.url);
     _nuxt.options.runtimeConfig.mktcms = defu((_nuxt.options.runtimeConfig.mktcms, {
       adminAuthKey: "",
-      filesPathPrefix: "",
       s3AccessKey: "",
       s3SecretKey: "",
       s3Endpoint: "",
       s3Bucket: "",
-      s3Region: ""
+      s3Region: "",
+      s3Prefix: "",
+      smtpHost: "",
+      smtpPort: 465,
+      smtpSecure: true,
+      smtpUser: "",
+      smtpPass: "",
+      mailerFrom: "",
+      mailerTo: ""
     }));
+    addServerImportsDir(resolver.resolve("runtime/server/utils"));
     addServerPlugin(resolver.resolve("./runtime/server/plugins/storage"));
     addServerHandler({
       middleware: true,
@@ -30,6 +38,11 @@ const module$1 = defineNuxtModule({
       route: "/api/admin/logout",
       handler: resolver.resolve("./runtime/server/api/admin/logout")
     });
+    addServerHandler({
+      route: "/api/admin/content/:path",
+      method: "post",
+      handler: resolver.resolve("./runtime/server/api/admin/content/[path].post")
+    });
     addServerHandler({
       route: "/api/admin/content/upload",
       handler: resolver.resolve("./runtime/server/api/admin/content/upload")
@@ -39,15 +52,25 @@ const module$1 = defineNuxtModule({
       handler: resolver.resolve("./runtime/server/api/content/list")
     });
     addServerHandler({
-      route: "/api/content/[path]",
+      route: "/api/content/:path",
       handler: resolver.resolve("./runtime/server/api/content/[path]")
     });
     extendPages((pages) => {
       pages.push({
         name: "Admin Dashboard",
-        path: "/admin/:path(.*)?",
+        path: "/admin/:path?",
         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")
+      });
+      pages.push({
+        name: "Admin New Content",
+        path: "/admin/new",
+        file: resolver.resolve("./runtime/app/pages/admin/new.vue")
+      });
       pages.push({
         name: "Admin Login",
         path: "/admin/login",

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

@@ -5,5 +5,5 @@
 </template>
 
 <style>
-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{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}
 </style>

package/dist/runtime/app/components/content/editor.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/editor.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { useFetch, useRoute } from "#app";
+const path = useRoute().params.path || "";
+const pathParts = path.split(":");
+const { data: content } = await useFetch(`/api/content/${path}`);
+async function saveContent() {
+  await $fetch(`/api/admin/content/${path}`, {
+    method: "POST",
+    body: { content: content.value }
+  });
+}
+</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>
+
+    <div v-if="content !== void 0">
+      <textarea
+        v-model="content"
+        style="width: 100%; resize: vertical;"
+      />
+      <button
+        style="margin-top: 10px;"
+        @click="saveContent"
+      >
+        Speichern
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/app/components/content/editor.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/components/content/index.vue

@@ -2,7 +2,7 @@
 import { useFetch, useRoute } from "#app";
 import { computed } from "vue";
 const path = useRoute().params.path || "";
-const pathParts = path.split("/");
+const pathParts = path.split(":");
 const { data: keys } = await useFetch("/api/content/list", {
   query: { path }
 });
@@ -37,7 +37,7 @@ const dirs = computed(() => {
         :key="index"
       >
         /
-        <a :href="`/admin/${pathParts.slice(0, index + 1).join('/')}`">
+        <a :href="`/admin/${pathParts.slice(0, index + 1).join(':')}`">
           {{ part }}
         </a>
       </span>
@@ -50,7 +50,7 @@ const dirs = computed(() => {
       <a
         v-for="file in files"
         :key="file"
-        :href="`/admin/${path ? path + '/' : ''}${file}`"
+        :href="`/admin/edit/${path ? path + ':' : ''}${file}`"
       >{{ file }}</a>
     </div>
 
@@ -62,10 +62,10 @@ const dirs = computed(() => {
       <a
         v-for="dir in dirs"
         :key="dir"
-        :href="`/admin/${path ? path + '/' : ''}${dir}`"
+        :href="`/admin/${path ? path + ':' : ''}${dir}`"
       >
         <span>
-          {{ dir.replace(/:/g, "/").replace(path, "") }}
+          {{ dir }}
         </span>
         <span>
           <svg

package/dist/runtime/app/components/header.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/header.vue

@@ -0,0 +1,25 @@
+<template>
+  <div style="display: flex; justify-content: space-between; align-items: center;">
+    <h1>
+      <NuxtLink
+        to="/admin"
+        style="text-decoration: none; color: inherit;"
+      >
+        Website Verwaltung
+      </NuxtLink>
+    </h1>
+    <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;"
+    >
+      Neuer Inhalt
+    </NuxtLink>
+    <NuxtLink
+      external
+      to="/api/admin/logout"
+      style="background-color: #ccc; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"
+    >
+      Abmelden
+    </NuxtLink>
+  </div>
+</template>

package/dist/runtime/app/components/header.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/[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/[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.vue";
+</script>
+
+<template>
+  <Admin>
+    <Header />
+    <Editor />
+  </Admin>
+</template>

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

@@ -1,22 +1,12 @@
 <script setup>
 import Admin from "../../components/admin.vue";
+import Header from "../../components/header.vue";
 import Content from "../../components/content/index.vue";
-import ContentUpload from "../../components/content/upload.vue";
 </script>
 
 <template>
   <Admin>
-    <div style="display: flex; justify-content: space-between; align-items: center;">
-      <h1>Website Verwaltung</h1>
-      <a
-        href="/api/admin/logout"
-        style="background-color: #ccc; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"
-      >
-        Abmelden
-      </a>
-    </div>
-
-    <ContentUpload />
+    <Header />
     <Content />
   </Admin>
 </template>

package/dist/runtime/app/pages/admin/new.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/new.vue

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

package/dist/runtime/app/pages/admin/new.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].post.d.ts

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

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

@@ -0,0 +1,18 @@
+import { z } from "zod";
+import { defineEventHandler, getValidatedRouterParams, readValidatedBody } from "h3";
+import { useRuntimeConfig, useStorage } from "nitropack/runtime";
+const paramsSchema = z.object({
+  path: z.string().min(1)
+});
+const bodySchema = z.object({
+  content: z.string()
+});
+export default defineEventHandler(async (event) => {
+  const { path } = await getValidatedRouterParams(event, (params) => paramsSchema.parse(params));
+  const { content } = await readValidatedBody(event, (body) => bodySchema.parse(body));
+  const { mktcms: { s3Prefix } } = useRuntimeConfig();
+  const fullPath = s3Prefix + ":" + path;
+  const storage = useStorage("content");
+  const file = await storage.setItem(fullPath, content);
+  return file;
+});

package/dist/runtime/server/api/admin/content/upload.js

@@ -9,7 +9,7 @@ const querySchema = z.object({
 });
 export default defineEventHandler(async (event) => {
   const form = await readMultipartFormData(event);
-  const { mktcms: { filesPathPrefix } } = useRuntimeConfig();
+  const { mktcms: { s3Prefix } } = useRuntimeConfig();
   const { path } = await getValidatedQuery(event, (query) => querySchema.parse(query));
   const sanePath = path ? path.replace(/^\//, "").replace(/\/$/, "") : void 0;
   if (!form) {
@@ -39,7 +39,7 @@ export default defineEventHandler(async (event) => {
       statusMessage: "Invalid file type. Only PDF, JPG, JPEG, and PNG files are allowed."
     });
   }
-  const filePath = [filesPathPrefix, sanePath, sanitizeFilename(file.filename)].filter(Boolean).join("/");
+  const filePath = [s3Prefix, sanePath, sanitizeFilename(file.filename)].filter(Boolean).join("/");
   await useStorage("content").setItemRaw(filePath, Buffer.from(file.data));
   const returnFileName = filePath;
   return { success: true, path: returnFileName };

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

@@ -1,13 +1,15 @@
 import { z } from "zod";
 import { createError, defineEventHandler, getValidatedRouterParams } from "h3";
-import { useStorage } from "nitropack/runtime";
+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(path);
+  const file = await storage.getItem(fullPath);
   if (!file) {
     throw createError({
       statusCode: 404,

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

@@ -6,8 +6,8 @@ const querySchema = z.object({
 });
 export default defineEventHandler(async (event) => {
   const { path } = await getValidatedQuery(event, (query) => querySchema.parse(query));
-  const { mktcms: { filesPathPrefix } } = useRuntimeConfig();
+  const { mktcms: { s3Prefix } } = useRuntimeConfig();
   const storage = useStorage("content");
-  const keys = await storage.getKeys(filesPathPrefix + (path ? ":" + path : ""));
-  return keys.map((key) => key.replace(filesPathPrefix + ":", ""));
+  const keys = await storage.getKeys(s3Prefix + (path ? ":" + path : ""));
+  return keys.map((key) => key.replace(s3Prefix + ":", ""));
 });

package/dist/runtime/server/utils/sendMail.d.ts

@@ -0,0 +1,4 @@
+export default function sendMail({ subject, fields }: {
+    subject: string;
+    fields: Record<string, any>;
+}): Promise<import("nodemailer/lib/smtp-transport").SentMessageInfo>;

package/dist/runtime/server/utils/sendMail.js

@@ -0,0 +1,22 @@
+import nodemailer from "nodemailer";
+import { useRuntimeConfig } from "#imports";
+export default async function sendMail({ subject, fields }) {
+  const { mktcms: { smtpHost, smtpPort, smtpUser, smtpPass, smtpSecure, mailerFrom, mailerTo } } = useRuntimeConfig();
+  const transporter = nodemailer.createTransport({
+    host: smtpHost,
+    port: smtpPort,
+    secure: smtpSecure,
+    auth: {
+      user: smtpUser,
+      pass: smtpPass
+    }
+  });
+  const mailOptions = {
+    from: mailerFrom,
+    to: mailerTo,
+    subject,
+    html: Object.entries(fields).map(([key, value]) => `<p><strong>${key}:</strong> ${value}</p>`).join(""),
+    text: Object.entries(fields).map(([key, value]) => `${key}: ${value}`).join("\n")
+  };
+  return await transporter.sendMail(mailOptions);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mktcms",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Simple CMS module for Nuxt",
   "repository": "mktcode/mktcms",
   "license": "MIT",
@@ -38,6 +38,7 @@
     "@nuxt/kit": "^4.2.2",
     "aws4fetch": "^1.0.20",
     "defu": "^6.1.4",
+    "nodemailer": "^7.0.12",
     "zod": "^4.3.5"
   },
   "devDependencies": {
@@ -47,6 +48,7 @@
     "@nuxt/schema": "^4.2.2",
     "@nuxt/test-utils": "^3.22.0",
     "@types/node": "latest",
+    "@types/nodemailer": "^7.0.5",
     "changelogen": "^0.6.2",
     "eslint": "^9.39.2",
     "nuxt": "^4.2.2",