Feature/additional endpoints (#257)

* new recipe summary route

* add categories to cards

* add pillow

* show tags instead of categories

* additional debug info

* add todays meal image url

* about page

* fix reactive tag

* changelog + docs

* bump version

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

frontend/src/components/Recipe/RecipeCard.vue

@@ -5,6 +5,7 @@
       :elevation="hover ? 12 : 2"
       :to="route ? `/recipe/${slug}` : ''"
       @click="$emit('click')"
+      min-height="275"
     >
       <v-img height="200" :src="getImage(image)">
         <v-expand-transition v-if="description">
@@ -25,9 +26,9 @@
         </div>
       </v-card-title>
 
-      <v-card-actions class="">
+      <v-card-actions>
         <v-rating
-          class="mr-2"
+          class="mr-2 my-auto"
           color="secondary"
           background-color="secondary lighten-3"
           dense
@@ -36,14 +37,25 @@
           :value="rating"
         ></v-rating>
         <v-spacer></v-spacer>
+        <RecipeChips
+          :items="tags"
+          :title="false"
+          :limit="2"
+          :small="true"
+          :isCategory="false"
+        />
       </v-card-actions>
     </v-card>
   </v-hover>
 </template>
 
 <script>
+import RecipeChips from "@/components/Recipe/RecipeViewer/RecipeChips";
 import { api } from "@/api";
 export default {
+  components: {
+    RecipeChips,
+  },
   props: {
     name: String,
     slug: String,
@@ -54,6 +66,9 @@ export default {
     route: {
       default: true,
     },
+    tags: {
+      default: true,
+    },
   },
   methods: {
     getImage(image) {

frontend/src/components/Recipe/RecipeViewer/RecipeChips.vue

@@ -1,12 +1,13 @@
 <template>
   <div v-if="items && items.length > 0">
-    <h2 class="mt-4">{{ title }}</h2>
+    <h2 v-if="title" class="mt-4">{{ title }}</h2>
     <v-chip
       label
       class="ma-1"
       color="accent"
+      :small="small"
       dark
-      v-for="category in items"
+      v-for="category in items.slice(0, limit)"
       :to="`/recipes/${urlParam}/${getSlug(category)}`"
       :key="category"
     >
@@ -19,10 +20,18 @@
 export default {
   props: {
     items: Array,
-    title: String,
+    title: {
+      default: null,
+    },
     isCategory: {
       default: true,
     },
+    limit: {
+      default: 999,
+    },
+    small: {
+      default: false,
+    },
   },
   computed: {
     allCategories() {
@@ -32,8 +41,8 @@ export default {
       return this.$store.getters.getAllTags;
     },
     urlParam() {
-      return this.isCategory ? 'category' : 'tag'
-    }
+      return this.isCategory ? "category" : "tag";
+    },
   },
   methods: {
     getSlug(name) {