add optional categories to teaser and post

webapp/components/PostTeaser/PostTeaser.vue

@@ -26,7 +26,19 @@
         class="footer"
         v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, post.id)"
       >
-        <div class="categories-placeholder"></div>
+        <div class="categories" v-if="categoriesActive">
+          <hc-category
+            v-for="category in post.categories"
+            :key="category.id"
+            v-tooltip="{
+              content: $t(`contribution.category.name.${category.slug}`),
+              placement: 'bottom-start',
+              delay: { show: 500 },
+            }"
+            :icon="category.icon"
+          />
+        </div>
+        <div v-else class="categories-placeholder"></div>
         <counter-icon
           icon="bullhorn"
           :count="post.shoutedCount"
@@ -70,6 +82,7 @@
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import HcRibbon from '~/components/Ribbon'
+import HcCategory from '~/components/Category'
 import CounterIcon from '~/components/_new/generic/CounterIcon/CounterIcon'
 import { mapGetters } from 'vuex'
 import PostMutations from '~/graphql/PostMutations'
@@ -79,6 +92,7 @@ export default {
   name: 'PostTeaser',
   components: {
     UserTeaser,
+    HcCategory,
     HcRibbon,
     ContentMenu,
     CounterIcon,
@@ -93,6 +107,11 @@ export default {
       default: () => {},
     },
   },
+  data() {
+    return {
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
+    }
+  },
   mounted() {
     const { image } = this.post
     if (!image) return

webapp/graphql/Fragments.js

@@ -78,6 +78,12 @@ export const tagsCategoriesAndPinnedFragment = gql`
     tags {
       id
     }
+    categories {
+      id
+      slug
+      name
+      icon
+    }
     pinnedBy {
       id
       name

webapp/pages/post/_id/_slug/index.vue

@@ -44,6 +44,19 @@
       <h2 class="title hyphenate-text">{{ post.title }}</h2>
       <ds-space margin-bottom="small" />
       <content-viewer class="content hyphenate-text" :content="post.content" />
+      <!-- Categories -->
+      <div v-if="categoriesActive" class="categories">
+        <!-- eslint-enable vue/no-v-html -->
+        <ds-space margin="xx-large" />
+        <ds-space margin="xx-small" />
+        <hc-category
+          v-for="category in post.categories"
+          :key="category.id"
+          :icon="category.icon"
+          :name="$t(`contribution.category.name.${category.slug}`)"
+        />
+      </div>
+      <ds-space margin-bottom="small" />
       <!-- Tags -->
       <div v-if="post.tags && post.tags.length" class="tags">
         <ds-space margin="xx-small" />
@@ -91,6 +104,7 @@
 
 <script>
 import ContentViewer from '~/components/Editor/ContentViewer'
+import HcCategory from '~/components/Category'
 import HcHashtag from '~/components/Hashtag/Hashtag'
 import ContentMenu from '~/components/ContentMenu/ContentMenu'
 import UserTeaser from '~/components/UserTeaser/UserTeaser'
@@ -118,6 +132,7 @@ export default {
     CommentForm,
     CommentList,
     ContentViewer,
+    HcCategory,
     HcHashtag,
     HcShoutButton,
     PageParamsLink,
@@ -138,6 +153,7 @@ export default {
       blurred: false,
       blocked: null,
       postAuthor: null,
+      categoriesActive: this.$env.CATEGORIES_ACTIVE,
     }
   },
   mounted() {
@@ -171,12 +187,12 @@ export default {
     heroImageStyle() {
       /*  Return false when image property is not present or is not a number
           so no unnecessary css variables are set.
-      */
+        */
 
       if (!this.post.image || typeof this.post.image.aspectRatio !== 'number') return false
       /*  Return the aspect ratio as a css variable. Later to be used when calculating
           the height with respect to the width.
-      */
+        */
       return {
         '--hero-image-aspect-ratio': 1.0 / this.post.image.aspectRatio,
       }
@@ -253,12 +269,12 @@ export default {
     /*  The padding top makes sure the correct height is set (according to the
         hero image aspect ratio) before the hero image loads so
         the autoscroll works correctly when following a comment link. 
-    */
+      */
 
     padding-top: calc(var(--hero-image-aspect-ratio) * (100% + 48px));
     /*  Letting the image fill the container, since the container
         is the one determining height
-    */
+      */
     > .image {
       position: absolute;
       top: 0;