mktcms 0.1.21 → 0.1.23

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

@@ -0,0 +1,80 @@
+<script setup>
+import { useRuntimeConfig } from "#app";
+import useFileType from "../../composables/useFileType";
+const { filePath } = defineProps({
+  filePath: { type: String, required: true }
+});
+const { public: { mktcms: { siteUrl } } } = useRuntimeConfig();
+const { isImage, isCsv, isMarkdown, isText, isPdf } = useFileType(filePath);
+</script>
+
+<template>
+  <img
+    v-if="isImage"
+    :src="`${siteUrl}/api/content/${filePath}`"
+    alt="Vorschaubild"
+    class="size-6 rounded-sm object-cover mr-1"
+  >
+  <svg
+    v-if="isCsv"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="size-6 opacity-20"
+  >
+    <path d="M12 3v18" />
+    <rect
+      width="18"
+      height="18"
+      x="3"
+      y="3"
+      rx="2"
+    />
+    <path d="M3 9h18" />
+    <path d="M3 15h18" />
+  </svg>
+  <svg
+    v-if="isMarkdown || isText"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="size-6 opacity-20"
+  >
+    <path
+      d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"
+    />
+    <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+    <path d="M10 9H8" />
+    <path d="M16 13H8" />
+    <path d="M16 17H8" />
+  </svg>
+  <svg
+    v-if="isPdf"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    class="size-6 opacity-20"
+  >
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M10 8v8h2a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2zm-7 4h2a2 2 0 1 0 0-4H3v8m14-4h3m1-4h-4v8"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    filePath: 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.d.vue.ts

@@ -1,5 +1,4 @@
 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>;

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

@@ -1,109 +1,43 @@
 <script setup>
+import usePathParam from "../../composables/usePathParam";
+import FileIcon from "./fileIcon.vue";
+import FileButtons from "./fileButtons.vue";
 defineProps({
-  path: { type: String, required: true },
   files: { type: Array, required: true }
 });
+const { path } = usePathParam();
+function filenameWithoutExtension(filename) {
+  return filename.replace(/\.[^/.]+$/, "");
+}
+function fileExtension(filename) {
+  const match = filename.match(/\.([^.]+)$/);
+  return match && match[1] ? match[1] : "";
+}
 </script>
 
 <template>
-  <div class="files">
+  <div>
     <div
       v-for="file in files"
       :key="file"
-      style="display: flex; align-items: center;"
+      class="flex gap-2 mb-2"
     >
       <NuxtLink
-        :to="`/admin/edit/${file.match(/\.md$|\.csv$|\.txt$|\.json$/i) ? 'text' : 'blob'}/${path ? path + ':' : ''}${file}`"
-        style="flex-grow: 1;"
+        :to="`/admin/edit/${path ? path + ':' : ''}${file}`"
+        class="flex-1 button secondary"
       >
-        <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>
+        <FileIcon :file-path="`${path ? path + ':' : ''}${file}`" />
+        <div class="w-full flex">
+          {{ filenameWithoutExtension(file) }}
+          <span
+            v-if="fileExtension(file)"
+            class="text-sm text-gray-400 ml-auto"
+          >
+            .{{ fileExtension(file) }}
+          </span>
+        </div>
       </NuxtLink>
+      <FileButtons :file-path="`${path ? path + ':' : ''}${file}`" />
     </div>
   </div>
 </template>

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

@@ -1,5 +1,4 @@
 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>;

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

@@ -1,50 +1,24 @@
 <script setup>
-import { useFetch, useRoute } from "#app";
-import { computed } from "vue";
-import Breadcrumb from "./breadcrumb.vue";
+import { useFetch } from "#app";
 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", {
+import usePathParam from "../../composables/usePathParam";
+const { path } = usePathParam();
+const { data: list } = await useFetch("/api/admin/list", {
   query: { path }
 });
-const keysWithoutCurrentPath = computed(() => {
-  return keys.value?.map(
-    (key) => key.replace(new RegExp("^" + pathParts.join(":") + ":"), "")
-  ) || [];
-});
-const files = computed(() => {
-  return keysWithoutCurrentPath.value.filter((key) => !key.includes(":"));
-});
-const dirs = computed(() => {
-  return keysWithoutCurrentPath.value.reduce((acc, key) => {
-    const parts = key.split(":");
-    if (parts.length > 1 && parts[0]) {
-      const dir = parts[0];
-      if (!acc.includes(dir)) {
-        acc.push(dir);
-      }
-    }
-    return acc;
-  }, []);
-});
 </script>
 
 <template>
   <div>
-    <Breadcrumb :parts="pathParts" />
-
     <Files
-      v-if="files.length"
-      :path="path"
-      :files="files"
+      v-if="list && list.files.length"
+      :files="list.files"
     />
 
     <Dirs
-      v-if="dirs.length"
-      :path="path"
-      :dirs="dirs"
+      v-if="list && list.dirs.length"
+      :dirs="list.dirs"
       style="margin-top: 8px;"
     />
   </div>

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

@@ -0,0 +1,19 @@
+<template>
+  <div class="text-emerald-700 text-center my-3 flex items-center justify-center gap-2">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      class="size-6"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        d="m4.5 12.75 6 6 9-13.5"
+      />
+    </svg>
+    Gespeichert
+  </div>
+</template>

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

@@ -1,20 +1,7 @@
 <script setup>
-import { computed, onMounted, ref, useFetch, useRoute } from "#imports";
+import { onMounted, ref, useFetch, useRoute } from "#imports";
 import useAdminUpload from "../../composables/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 { data: list } = await useFetch("/api/admin/list");
 const route = useRoute();
 const dir = ref(route.query.dir || "");
 const newSubdir = ref("");
@@ -25,14 +12,33 @@ onMounted(() => {
 </script>
 
 <template>
-  <div style="display: flex; flex-direction: column; gap: 8px; margin: 16px 0;">
-    <h1 style="margin-bottom: 0;">
+  <div class="flex flex-col gap-2 my-4">
+    <h1 class="my-6">
       Datei hochladen
     </h1>
 
-    <div style="display: flex; gap: 16px; align-items: center;">
-      <div style="flex-grow: 1;">
-        <h3 style="margin-bottom: 4px;">
+    <div class="bg-emerald-50 text-emerald-800 p-4 rounded flex gap-4 items-center">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke-width="1.5"
+        stroke="currentColor"
+        class="size-10 opacity-50"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z"
+        />
+      </svg>
+      Wenn eine Datei mit gleichem Namen im ausgewählten Ordner bereits existiert, wird diese
+      überschrieben!
+    </div>
+
+    <div class="flex gap-4 items-center">
+      <div class="flex-1">
+        <h3 class="mb-1">
           Ordner
         </h3>
         <select
@@ -43,7 +49,7 @@ onMounted(() => {
             Hauptordner
           </option>
           <option
-            v-for="d in dirs"
+            v-for="d in list?.dirs"
             :key="d"
             :value="d"
           >
@@ -51,32 +57,38 @@ onMounted(() => {
           </option>
         </select>
       </div>
-      <div style="flex-grow: 1;">
-        <h3 style="margin-bottom: 4px;">
-          Neuen Unterordner erstellen
+      <div class="flex-1">
+        <h3 class="mb-1">
+          Unterordner erstellen
         </h3>
         <input
           v-model="newSubdir"
           type="text"
-          placeholder="Unterordner (z.B. 'Produkte')"
+          placeholder="z.B. Produkte"
           @change="path = dir ? dir.replace(/\//g, ':') + ':' + newSubdir : newSubdir"
         >
       </div>
     </div>
 
     <button
+      type="button"
+      class="button"
       :disabled="isUploading"
       @click="fileInputImg?.click()"
     >
       Bild hochladen
     </button>
     <button
+      type="button"
+      class="button"
       :disabled="isUploading"
       @click="fileInputPdf?.click()"
     >
       PDF hochladen
     </button>
     <button
+      type="button"
+      class="button"
       :disabled="isUploading"
       @click="fileInput?.click()"
     >
@@ -84,7 +96,7 @@ onMounted(() => {
     </button>
     <input
       ref="fileInput"
-      style="display: none"
+      class="hidden"
       type="file"
       accept=".pdf,.jpg,.jpeg,.png,.gif,.svg,.webp,.md,.docx,.txt"
       @change="async (e) => {
@@ -93,7 +105,7 @@ onMounted(() => {
     >
     <input
       ref="fileInputImg"
-      style="display: none"
+      class="hidden"
       type="file"
       accept=".jpg,.jpeg,.png,.gif,.svg,.webp"
       @change="async (e) => {
@@ -102,7 +114,7 @@ onMounted(() => {
     >
     <input
       ref="fileInputPdf"
-      style="display: none"
+      class="hidden"
       type="file"
       accept=".pdf"
       @change="async (e) => {

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

@@ -1,15 +1,41 @@
 <script setup>
-import { useRoute, useRuntimeConfig } from "#imports";
+import { useRuntimeConfig } from "#imports";
 const { public: { mktcms: { siteUrl } } } = useRuntimeConfig();
-const route = useRoute();
 </script>
 
 <template>
-  <div style="display: flex; justify-content: space-between; align-items: center; gap: 8px;">
+  <div class="flex items-start justify-between gap-2">
+    <div class="flex flex-col gap-1 items-start">
+      <NuxtLink
+        to="/admin"
+        class="font-bold text-xl"
+      >
+        {{ siteUrl.replace(/https?:\/\//, "") }}
+      </NuxtLink>
+      <NuxtLink
+        :to="siteUrl"
+        class="font-bold button small secondary justify-between"
+      >
+        zur Website
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="size-4"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+          />
+        </svg>
+      </NuxtLink>
+    </div>
     <NuxtLink
-      v-if="route.fullPath != '/admin'"
-      to="/admin"
-      class="button soft"
+      to="/admin/new"
+      class="button small ml-auto"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -17,36 +43,40 @@ const route = useRoute();
         viewBox="0 0 24 24"
         stroke-width="1.5"
         stroke="currentColor"
-        class="button-icon"
+        class="size-4"
       >
         <path
           stroke-linecap="round"
           stroke-linejoin="round"
-          d="M15.75 19.5 8.25 12l7.5-7.5"
+          d="M12 4.5v15m7.5-7.5h-15"
         />
       </svg>
-    </NuxtLink>
-    <NuxtLink
-      to="/admin/new"
-      class="button"
-      style="margin-left: auto;"
-    >
-      Datei hochladen
-    </NuxtLink>
-    <NuxtLink
-      :to="siteUrl"
-      external
-      target="_blank"
-      class="button soft"
-    >
-      zur Website
+      <span class="hidden sm:inline">
+        Datei hochladen
+      </span>
     </NuxtLink>
     <NuxtLink
       external
       to="/api/admin/logout"
-      class="button soft"
+      class="button small secondary"
     >
-      Abmelden
+      <span class="hidden sm:inline">
+        abmelden
+      </span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        class="size-4"
+      >
+        <path d="m16 17 5-5-5-5" /><path d="M21 12H9" /><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+      </svg>
     </NuxtLink>
   </div>
 </template>

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

@@ -7,5 +7,4 @@ export default function useAdminUpload(): {
     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

@@ -1,3 +1,4 @@
+import { navigateTo } from "#imports";
 import { computed, ref } from "vue";
 export default function useAdminUpload() {
   const uploadError = ref(null);
@@ -25,7 +26,7 @@ export default function useAdminUpload() {
     const formData = new FormData();
     formData.append("file", file);
     try {
-      const res = await $fetch("/api/admin/content/upload", {
+      const res = await $fetch("/api/admin/upload", {
         method: "POST",
         body: formData,
         query: { path: sanePath.value }
@@ -33,24 +34,13 @@ export default function useAdminUpload() {
       if (res?.success && res.path) {
         files.value.push(res.path);
       }
+      await navigateTo(`/admin/${sanePath.value ? sanePath.value : ""}`);
     } catch (error) {
       uploadError.value = error.data?.statusMessage || "Fehler beim Hochladen der Datei";
       input.value = "";
     }
     isUploading.value = false;
   }
-  async function deleteFile(path2) {
-    uploadError.value = null;
-    try {
-      await $fetch("/api/content/remove", {
-        method: "DELETE",
-        body: { path: path2 }
-      });
-      files.value = files.value.filter((p) => p !== path2);
-    } catch (error) {
-      uploadError.value = error.data?.statusMessage || "Fehler beim L\xF6schen der Datei";
-    }
-  }
   return {
     uploadError,
     isUploading,
@@ -59,7 +49,6 @@ export default function useAdminUpload() {
     fileInput,
     fileInputImg,
     fileInputPdf,
-    uploadFiles,
-    deleteFile
+    uploadFiles
   };
 }

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

@@ -0,0 +1,7 @@
+export default function useFileType(path: string): {
+    isImage: boolean;
+    isPdf: boolean;
+    isMarkdown: boolean;
+    isCsv: boolean;
+    isText: boolean;
+};

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

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

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

@@ -0,0 +1,9 @@
+export default function usePathParam(): {
+    path: string;
+    pathParts: string[];
+    isImage: boolean;
+    isPdf: boolean;
+    isMarkdown: boolean;
+    isCsv: boolean;
+    isText: boolean;
+};