mktcms 0.1.21 → 0.1.22

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

@@ -0,0 +1,24 @@
+<script setup>
+import Saved from "../saved.vue";
+import useSaveContent from "../../../composables/useSaveContent";
+const { content, saveContent, isSaving, savingSuccessful } = await useSaveContent();
+</script>
+
+<template>
+  <div>
+    <textarea
+      v-model="content"
+      class="w-full h-24 resize-y border border-gray-300 p-2 box-border font-mono"
+    />
+
+    <button
+      type="button"
+      class="button w-full justify-center mt-3"
+      @click="saveContent"
+    >
+      <span v-if="isSaving">Speichern...</span>
+      <span v-else>Speichern</span>
+    </button>
+    <Saved v-if="savingSuccessful" />
+  </div>
+</template>

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

@@ -0,0 +1,73 @@
+<script setup>
+import { useRuntimeConfig } from "#app";
+import useFileType from "../../composables/useFileType";
+import { useClipboard } from "@vueuse/core";
+const { filePath } = defineProps({
+  filePath: { type: String, required: true }
+});
+const { public: { mktcms: { siteUrl } } } = useRuntimeConfig();
+const { isImage, isPdf } = useFileType(filePath);
+const { copy, copied } = useClipboard();
+</script>
+
+<template>
+  <div class="flex gap-2">
+    <NuxtLink
+      v-if="isImage || isPdf"
+      class="button secondary"
+      title="Link kopieren"
+      @click.prevent="copy(siteUrl + '/api/content/' + filePath)"
+    >
+      <svg
+        v-if="copied"
+        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="m4.5 12.75 6 6 9-13.5"
+        />
+      </svg>
+      <svg
+        v-else
+        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.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/delete/${filePath}`"
+      class="button secondary"
+      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="size-4"
+      >
+        <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>
+</template>

package/dist/runtime/app/components/content/fileButtons.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/fileIcon.d.vue.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/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,28 @@
 <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();
 </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;"
-        >
+        <FileIcon :file-path="`${path ? path + ':' : ''}${file}`" />
         {{ 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>
+      <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,11 +1,10 @@
 <script setup>
-import { useFetch, useRoute } from "#app";
+import { useFetch } 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(":");
+import usePathParam from "../../composables/usePathParam";
+const { path, pathParts } = usePathParam();
 const { data: keys } = await useFetch("/api/admin/content/list", {
   query: { path }
 });
@@ -33,17 +32,13 @@ const dirs = computed(() => {
 
 <template>
   <div>
-    <Breadcrumb :parts="pathParts" />
-
     <Files
       v-if="files.length"
-      :path="path"
       :files="files"
     />
 
     <Dirs
       v-if="dirs.length"
-      :path="path"
       :dirs="dirs"
       style="margin-top: 8px;"
     />

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

@@ -25,14 +25,14 @@ 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="flex gap-4 items-center">
+      <div class="flex-1">
+        <h3 class="mb-1">
           Ordner
         </h3>
         <select
@@ -51,32 +51,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 +90,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 +99,7 @@ onMounted(() => {
     >
     <input
       ref="fileInputImg"
-      style="display: none"
+      class="hidden"
       type="file"
       accept=".jpg,.jpeg,.png,.gif,.svg,.webp"
       @change="async (e) => {
@@ -102,7 +108,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/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;
+};