feature/finish-recipe-assets (#384)

* add features to readme

* Copy markdown reference

* prop as whole recipe

* parameter as url instead of query

* add card styling to editor

* move images to /recipes/{slug}/images

* add image to breaking changes

* fix delete and import errors

* fix debug/about response

* logger updates

* dashboard ui

* add server side events

* unorganized routes

* default slot

* add backup viewer to dashboard

* format

* add dialog to backup imports

* initial event support

* delete assets when removed

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/UI/LogCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="mt-2">
+    <v-card>
+      <v-card-title class="headline">
+        Log
+        <v-spacer></v-spacer>
+        <v-text-field
+          class="ml-auto shrink mb-n7"
+          solo
+          label="Log Lines"
+          type="number"
+          append-icon="mdi-refresh-circle"
+          v-model="lines"
+          @click:append="getLogText"
+          suffix="lines"
+          single-line
+        >
+        </v-text-field>
+        <TheDownloadBtn :button-text="$t('about.download-log')" download-url="/api/debug/log">
+          <template v-slot:default="{ downloadFile }">
+            <v-btn bottom right relative fab icon color="primary" @click="downloadFile">
+              <v-icon> mdi-download </v-icon>
+            </v-btn>
+          </template>
+        </TheDownloadBtn>
+      </v-card-title>
+      <v-divider></v-divider>
+      <v-card-text>
+        <div v-for="(item, index) in splitText" :key="index" :class="getClass(item)">
+          {{ item }}
+        </div>
+      </v-card-text>
+    </v-card>
+  </div>
+</template>
+
+<script>
+import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
+import { api } from "@/api";
+export default {
+  components: { TheDownloadBtn },
+  data() {
+    return {
+      lines: 200,
+      text: "",
+    };
+  },
+  mounted() {
+    this.getLogText();
+  },
+  computed: {
+    splitText() {
+      return this.text.split("/n");
+    },
+  },
+  methods: {
+    async getLogText() {
+      this.text = await api.meta.getLogText(this.lines);
+    },
+    getClass(text) {
+      const isError = text.includes("ERROR:");
+      if (isError) {
+        return "log--error";
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.log-text {
+  background-color: #e0e0e077;
+}
+.log--error {
+  color: #ef5350;
+}
+.line-number {
+  color: black;
+  font-weight: bold;
+}
+</style>