From 56ed20f3bf7b57d2011d85873522b6967ad9e98f Mon Sep 17 00:00:00 2001
From: JB <jb@visualjerk.de>
Date: Tue, 4 Dec 2018 22:02:15 +0100
Subject: [PATCH] Use kebab-case for components in templates

---
 .eslintrc.js                   |   3 +-
 components/Author.vue          |  44 ++++++++-----
 components/Badges.vue          |   9 ++-
 components/CountTo.vue         |   3 +-
 components/FollowButton.vue    |   5 +-
 components/LoadMore.vue        |   6 +-
 components/Logo.vue            |   8 +--
 components/PostCard.vue        |  12 ++--
 components/ShoutButton.vue     |  11 +++-
 layouts/blank.vue              |   2 +-
 layouts/default.vue            |  24 ++++---
 pages/admin.vue                |   3 +-
 pages/admin/index.vue          |  54 ++++++++++------
 pages/index.vue                |   9 ++-
 pages/login.vue                |  37 +++++++----
 pages/logout.vue               |  17 +++--
 pages/post/_slug.vue           |   3 +-
 pages/post/_slug/index.vue     |  47 +++++++++-----
 pages/post/_slug/more-info.vue |  25 +++++---
 pages/profile/_slug.vue        | 110 ++++++++++++++++++++++-----------
 pages/settings.vue             |   3 +-
 21 files changed, 294 insertions(+), 141 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 25a4edfe4..fdc9bfb5e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -19,6 +19,7 @@ module.exports = {
   // add your custom rules here
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/component-name-in-template-casing': ['error', 'kebab-case']
   }
 }
diff --git a/components/Author.vue b/components/Author.vue
index f307bc19b..53379afa8 100644
--- a/components/Author.vue
+++ b/components/Author.vue
@@ -5,29 +5,36 @@
     :open-group="Math.random().toString()"
     placement="top-start"
     trigger="manual"
-    offset="0">
+    offset="0"
+  >
     <a
       v-router-link
       :href="author.slug ? $router.resolve({ name: 'profile-slug', params: { slug: author.slug } }).href : null"
       style="white-space: nowrap; display: flex; align-items: center;"
       @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave">
+      @mouseleave="popoveMouseLeave"
+    >
       <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
         <ds-avatar
           :image="author.avatar"
           :name="author.name"
           style="display: inline-block; vertical-align: middle;"
-          size="32px" />
+          size="32px"
+        />
       </div>
       <div style="display: inline-block; height: 100%; vertical-align: middle;">
         <b
           class="username"
-          style="vertical-align: middle;">{{ author.name | truncate(trunc, 18) }}</b>
+          style="vertical-align: middle;"
+        >
+          {{ author.name | truncate(trunc, 18) }}
+        </b>
         <template v-if="post.createdAt">
           <br>
           <ds-text
             size="small"
-            color="soft">
+            color="soft"
+          >
             {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
           </ds-text>
         </template>
@@ -37,7 +44,8 @@
       slot="popover"
       style="min-width: 250px;"
       @mouseover="popoverMouseEnter"
-      @mouseleave="popoveMouseLeave">
+      @mouseleave="popoveMouseLeave"
+    >
       <!--<ds-avatar
         :image="author.avatar"
         :name="author.name || 'Anonymus'"
@@ -46,28 +54,32 @@
       <hc-badges
         v-if="author.badges && author.badges.length"
         :badges="author.badges"
-        style="margin-bottom: -10px" />
+        style="margin-bottom: -10px"
+      />
       <ds-flex>
         <ds-flex-item class="ds-tab-nav-item">
           <ds-space margin="small">
             <ds-number
               :count="fanCount"
               label="Folgen"
-              size="x-large" />
+              size="x-large"
+            />
           </ds-space>
         </ds-flex-item>
         <ds-flex-item class="ds-tab-nav-item ds-tab-nav-item-active">
           <ds-space margin="small">
             <ds-number
               :count="author.contributionsCount"
-              label="Beiträge" />
+              label="Beiträge"
+            />
           </ds-space>
         </ds-flex-item>
         <ds-flex-item class="ds-tab-nav-item">
           <ds-space margin="small">
             <ds-number
               :count="author.commentsCount"
-              label="Kommentare" />
+              label="Kommentare"
+            />
           </ds-space>
         </ds-flex-item>
       </ds-flex>
@@ -79,15 +91,17 @@
       <ds-flex
         v-if="!itsMe"
         gutter="x-small"
-        style="margin-bottom: 0;">
+        style="margin-bottom: 0;"
+      >
         <ds-flex-item :width="{base: 3}">
           <hc-follow-button
             :follow-id="author.id"
-            @update="voted = true" />
+            @update="voted = true"
+          />
         </ds-flex-item>
-        <ds-flex-item :width="{base: 1}" >
+        <ds-flex-item :width="{base: 1}">
           <ds-button full-width>
-            <ds-icon name="user-times"/>
+            <ds-icon name="user-times" />
           </ds-button>
         </ds-flex-item>
       </ds-flex>
@@ -98,7 +112,6 @@
 
 <script>
 import HcFollowButton from '~/components/FollowButton.vue'
-import HcCountTo from '~/components/CountTo.vue'
 import HcBadges from '~/components/Badges.vue'
 
 let mouseEnterTimer = null
@@ -108,7 +121,6 @@ export default {
   name: 'HcAuthor',
   components: {
     HcFollowButton,
-    HcCountTo,
     HcBadges
   },
   props: {
diff --git a/components/Badges.vue b/components/Badges.vue
index 7ffe9baa7..d0cb30e91 100644
--- a/components/Badges.vue
+++ b/components/Badges.vue
@@ -3,15 +3,18 @@
     :class="[
       (badges.length === 2) && 'hc-badges-dual'
     ]"
-    class="hc-badges">
+    class="hc-badges"
+  >
     <div
       v-for="badge in badges"
       :key="badge.key"
-      class="hc-badge-container">
+      class="hc-badge-container"
+    >
       <img
         :title="badge.key"
         :src="badge.icon"
-        class="hc-badge" >
+        class="hc-badge"
+      >
     </div>
   </div>
 </template>
diff --git a/components/CountTo.vue b/components/CountTo.vue
index 8e68a906d..bf828608d 100644
--- a/components/CountTo.vue
+++ b/components/CountTo.vue
@@ -2,7 +2,8 @@
   <span>
     <no-ssr
       placeholder="0"
-      tag="span">
+      tag="span"
+    >
       <count-to
         :start-val="startVal"
         :end-val="endVal"
diff --git a/components/FollowButton.vue b/components/FollowButton.vue
index 790a86d12..04818dc94 100644
--- a/components/FollowButton.vue
+++ b/components/FollowButton.vue
@@ -5,7 +5,10 @@
     icon="plus"
     primary
     full-width
-    @click.prevent="follow">Folgen</ds-button>
+    @click.prevent="follow"
+  >
+    Folgen
+  </ds-button>
 </template>
 
 <script>
diff --git a/components/LoadMore.vue b/components/LoadMore.vue
index e905925a7..5bec2684a 100644
--- a/components/LoadMore.vue
+++ b/components/LoadMore.vue
@@ -1,12 +1,14 @@
 <template>
   <ds-space
     margin-top="large"
-    style="text-align: center">
+    style="text-align: center"
+  >
     <ds-button
       :icon="loading ? 'spinner' : 'arrow-down'"
       :disabled="loading"
       ghost
-      @click="$emit('click')">
+      @click="$emit('click')"
+    >
       mehr laden
     </ds-button>
   </ds-space>
diff --git a/components/Logo.vue b/components/Logo.vue
index f02dd127c..6c7285417 100644
--- a/components/Logo.vue
+++ b/components/Logo.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="VueToNuxtLogo">
-    <div class="Triangle Triangle--two"/>
-    <div class="Triangle Triangle--one"/>
-    <div class="Triangle Triangle--three"/>
-    <div class="Triangle Triangle--four"/>
+    <div class="Triangle Triangle--two" />
+    <div class="Triangle Triangle--one" />
+    <div class="Triangle Triangle--three" />
+    <div class="Triangle Triangle--four" />
   </div>
 </template>
 
diff --git a/components/PostCard.vue b/components/PostCard.vue
index 59f19d1f2..2ee7665f8 100644
--- a/components/PostCard.vue
+++ b/components/PostCard.vue
@@ -6,21 +6,25 @@
     <ds-card
       :header="post.title"
       :image="post.image"
-      style="cursor: pointer; position: relative;">
+      style="cursor: pointer; position: relative;"
+    >
       <ds-space margin-bottom="large">
         <div
           class="hc-editor-content"
-          v-html="excerpt" />
+          v-html="excerpt"
+        />
       </ds-space>
       <ds-space
         margin="small"
-        style="position: absolute; bottom: 44px;">
+        style="position: absolute; bottom: 44px;"
+      >
         <!-- TODO: find better solution for rendering errors -->
         <no-ssr>
           <hc-author
             :post="post"
             :trunc="35"
-            :show-author-popover="showAuthorPopover" />
+            :show-author-popover="showAuthorPopover"
+          />
         </no-ssr>
       </ds-space>
       <template slot="footer">
diff --git a/components/ShoutButton.vue b/components/ShoutButton.vue
index 84de685f1..9f00a6566 100644
--- a/components/ShoutButton.vue
+++ b/components/ShoutButton.vue
@@ -1,18 +1,23 @@
 <template>
   <ds-space
     margin="large"
-    style="text-align: center">
+    style="text-align: center"
+  >
     <ds-button
       :disabled="disabled || loading"
       danger
       size="x-large"
       icon="heart"
-      @click="shout" />
+      @click="shout"
+    />
     <ds-space margin-bottom="xx-small" />
     <ds-text color="soft">
       <ds-heading
         style="display: inline"
-        tag="h3">{{ shoutedCount }}x</ds-heading> Empfohlen
+        tag="h3"
+      >
+        {{ shoutedCount }}x
+      </ds-heading> Empfohlen
     </ds-text>
   </ds-space>
 </template>
diff --git a/layouts/blank.vue b/layouts/blank.vue
index a8fa6eaa9..827b1aaf7 100644
--- a/layouts/blank.vue
+++ b/layouts/blank.vue
@@ -2,7 +2,7 @@
   <div class="layout-blank">
     <ds-container>
       <div style="padding: 5rem 2rem;">
-        <nuxt/>
+        <nuxt />
       </div>
     </ds-container>
   </div>
diff --git a/layouts/default.vue b/layouts/default.vue
index 59f3ca73c..8a34f66ba 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -4,7 +4,8 @@
       <ds-container style="padding: .5rem 3rem .2rem;">
         <a
           v-router-link
-          href="/">
+          href="/"
+        >
           <ds-logo />
         </a>
         <template v-if="isLoggedIn">
@@ -15,26 +16,33 @@
               placement="bottom-end"
               trigger="manual"
               offset="10"
-              style="float: right">
+              style="float: right"
+            >
               <a
                 :href="$router.resolve({name: 'profile-slug', params: {slug: user.slug}}).href"
-                @click.prevent="toggleMenu()">
+                @click.prevent="toggleMenu()"
+              >
                 <ds-avatar
                   :image="user.avatar"
                   :name="user.name"
-                  size="42" />
+                  size="42"
+                />
               </a>
               <div
                 slot="popover"
                 style="padding-top: .5rem; padding-bottom: .5rem;"
                 @mouseover="popoverMouseEnter"
-                @mouseleave="popoveMouseLeave">
+                @mouseleave="popoveMouseLeave"
+              >
                 Hallo {{ user.name }}
                 <ds-menu
                   :routes="routes"
-                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"/>
+                  style="margin-left: -15px; margin-right: -15px; padding-top: 1rem; padding-bottom: 1rem;"
+                />
                 <ds-space margin="xx-small" />
-                <nuxt-link :to="{ name: 'logout'}">Logout</nuxt-link>
+                <nuxt-link :to="{ name: 'logout'}">
+                  Logout
+                </nuxt-link>
               </div>
             </v-popover>
           </no-ssr>
@@ -43,7 +51,7 @@
     </div>
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
-        <nuxt/>
+        <nuxt />
       </div>
     </ds-container>
   </div>
diff --git a/pages/admin.vue b/pages/admin.vue
index 13f4b6705..6ce9ca5a1 100644
--- a/pages/admin.vue
+++ b/pages/admin.vue
@@ -10,7 +10,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>
diff --git a/pages/admin/index.vue b/pages/admin/index.vue
index 995b438c1..ac9acf648 100644
--- a/pages/admin/index.vue
+++ b/pages/admin/index.vue
@@ -9,11 +9,13 @@
                 :count="0"
                 label="Users"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countUsers || 0"
-                    :end-val="statistics.countUsers || 0" />
+                    :end-val="statistics.countUsers || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -24,11 +26,13 @@
                 :count="0"
                 label="Posts"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countPosts || 0"
-                    :end-val="statistics.countPosts || 0" />
+                    :end-val="statistics.countPosts || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -39,11 +43,13 @@
                 :count="0"
                 label="Comments"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countComments || 0"
-                    :end-val="statistics.countComments || 0" />
+                    :end-val="statistics.countComments || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -54,11 +60,13 @@
                 :count="0"
                 label="Notifications"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countNotifications || 0"
-                    :end-val="statistics.countNotifications || 0" />
+                    :end-val="statistics.countNotifications || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -69,11 +77,13 @@
                 :count="0"
                 label="Organization"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countOrganizations || 0"
-                    :end-val="statistics.countOrganizations || 0" />
+                    :end-val="statistics.countOrganizations || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -84,11 +94,13 @@
                 :count="0"
                 label="Projects"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countProjects || 0"
-                    :end-val="statistics.countProjects || 0" />
+                    :end-val="statistics.countProjects || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -99,11 +111,13 @@
                 :count="0"
                 label="Open Invites"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countInvites || 0"
-                    :end-val="statistics.countInvites || 0" />
+                    :end-val="statistics.countInvites || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -114,11 +128,13 @@
                 :count="0"
                 label="Follows"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countFollows || 0"
-                    :end-val="statistics.countFollows || 0" />
+                    :end-val="statistics.countFollows || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
@@ -129,11 +145,13 @@
                 :count="0"
                 label="Shouts"
                 size="x-large"
-                uppercase>
+                uppercase
+              >
                 <no-ssr slot="count">
                   <hc-count-to
                     :start-val="statisticsBefore.countShouts || 0"
-                    :end-val="statistics.countShouts || 0" />
+                    :end-val="statistics.countShouts || 0"
+                  />
                 </no-ssr>
               </ds-number>
             </ds-space>
diff --git a/pages/index.vue b/pages/index.vue
index 0a68ff8e9..77e69c780 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -3,18 +3,21 @@
     <ds-flex
       v-if="Post && Post.length"
       :width="{ base: '100%' }"
-      gutter="base">
+      gutter="base"
+    >
       <ds-flex-item
         v-for="post in uniq(Post)"
+        :key="post.id"
         :width="{ base: '100%', xs: '100%', md: '50%', xl: '33%' }"
-        :key="post.id">
+      >
         <hc-post-card :post="post" />
       </ds-flex-item>
     </ds-flex>
     <hc-load-more
       v-if="true"
       :loading="$apollo.loading"
-      @click="showMoreContributions" />
+      @click="showMoreContributions"
+    />
   </div>
 </template>
 
diff --git a/pages/login.vue b/pages/login.vue
index 9084163f2..1a0a268ab 100644
--- a/pages/login.vue
+++ b/pages/login.vue
@@ -12,50 +12,63 @@
       <ds-flex gutter="small">
         <ds-flex-item
           :width="{ base: '100%', sm: '50%' }"
-          center>
+          center
+        >
           <ds-space
             margin-top="small"
             margin-bottom="xxx-small"
-            center>
+            center
+          >
             <img
               class="login-image"
               src="/img/sign-up/humanconnection.svg"
-              alt="Human Connection">
+              alt="Human Connection"
+            >
           </ds-space>
         </ds-flex-item>
         <ds-flex-item
           :width="{ base: '100%', sm: '50%' }"
-          center>
+          center
+        >
           <ds-space margin="small">
-            <ds-text size="small">Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.</ds-text>
+            <ds-text size="small">
+              Wenn Du ein Konto bei Human Connection hast, melde Dich bitte hier an.
+            </ds-text>
           </ds-space>
           <form
             :disabled="pending"
-            @submit.prevent="onSubmit">
+            @submit.prevent="onSubmit"
+          >
             <ds-input
-              :disabled="pending"
               v-model="form.email"
+              :disabled="pending"
               placeholder="Deine E-Mail"
               type="email"
-              icon="envelope"/>
+              icon="envelope"
+            />
             <ds-input
-              :disabled="pending"
               v-model="form.password"
+              :disabled="pending"
               placeholder="Dein Password"
               icon="lock"
               icon-right="question-circle"
-              type="password"/>
+              type="password"
+            />
             <ds-button
               :loading="pending"
               primary
-              full-width>
+              full-width
+            >
               Anmelden
             </ds-button>
             <ds-space margin="x-small">
               <a
                 href="https://human-connection.org"
                 title="zur Präsentationsseite"
-                target="_blank">Was ist Human Connection?</a>
+                target="_blank"
+              >
+                Was ist Human Connection?
+              </a>
             </ds-space>
           </form>
         </ds-flex-item>
diff --git a/pages/logout.vue b/pages/logout.vue
index 7927be45f..483e28270 100644
--- a/pages/logout.vue
+++ b/pages/logout.vue
@@ -3,25 +3,32 @@
     <ds-flex>
       <ds-flex-item
         :width="{ base: '100%' }"
-        center>
+        center
+      >
         <ds-space
           style="text-align: center;"
           margin-top="large"
           margin-bottom="xxx-small"
-          center>
+          center
+        >
           <img
             style="width: 200px;"
             src="/img/sign-up/onourjourney.png"
-            alt="Human Connection">
+            alt="Human Connection"
+          >
         </ds-space>
         <ds-space
           style="text-align: center;"
           margin-top="small"
           margin-bottom="xxx-small"
-          center>
+          center
+        >
           <ds-heading
             tag="h3"
-            soft>Logging out...</ds-heading>
+            soft
+          >
+            Logging out...
+          </ds-heading>
         </ds-space>
       </ds-flex-item>
     </ds-flex>
diff --git a/pages/post/_slug.vue b/pages/post/_slug.vue
index c3022b8a3..b3e6e2ea8 100644
--- a/pages/post/_slug.vue
+++ b/pages/post/_slug.vue
@@ -4,7 +4,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>
diff --git a/pages/post/_slug/index.vue b/pages/post/_slug/index.vue
index fbb185c9e..240815eb9 100644
--- a/pages/post/_slug/index.vue
+++ b/pages/post/_slug/index.vue
@@ -3,38 +3,48 @@
     v-if="post"
     :image="post.image"
     :header="post.title"
-    class="post-card">
+    class="post-card"
+  >
     <hc-author :post="post" />
     <ds-space margin-bottom="small" />
     <!-- Content -->
     <div
       class="content hc-editor-content"
-      v-html="post.content" />
+      v-html="post.content"
+    />
     <!-- Shout Button -->
     <ds-space margin="xx-large" />
     <hc-shout-button
       v-if="post.author"
       :count="post.shoutedCount"
-      :post-id="post.id" />
+      :post-id="post.id"
+    />
     <!-- Categories -->
     <div class="tags">
       <ds-icon name="compass" /> <ds-tag
         v-for="category in post.categories"
-        :key="category.id">{{ category.name }}</ds-tag>
+        :key="category.id"
+      >
+        {{ category.name }}
+      </ds-tag>
     </div>
     <!-- Tags -->
     <template v-if="post.tags && post.tags.length">
-      <ds-space margin="xx-small"/>
+      <ds-space margin="xx-small" />
       <div class="tags">
         <ds-icon name="tags" /> <ds-tag
           v-for="tag in post.tags"
-          :key="tag.id"><ds-icon name="tag" /> {{ tag.name }}</ds-tag>
+          :key="tag.id"
+        >
+          <ds-icon name="tag" /> {{ tag.name }}
+        </ds-tag>
       </div>
     </template>
-    <ds-space margin="small"/>
+    <ds-space margin="small" />
     <!-- Comments -->
     <ds-section
-      slot="footer">
+      slot="footer"
+    >
       <h3 style="margin-top: 0;">
         <span>
           <ds-icon name="comments" />
@@ -42,7 +52,8 @@
             v-if="post.commentsCount"
             style="transform: scale(.8); margin-top: -4px; margin-left: -12px; position: absolute;"
             color="primary"
-            round>
+            round
+          >
             {{ post.commentsCount }}
           </ds-tag> &nbsp; Comments
         </span>
@@ -51,27 +62,35 @@
       <div
         v-if="post.commentsCount"
         id="comments"
-        class="comments">
+        class="comments"
+      >
         <div
           v-for="comment in post.comments"
           :key="comment.id"
-          class="comment">
+          class="comment"
+        >
           <ds-space margin-bottom="x-small">
             <hc-author :post="comment" />
           </ds-space>
           <div
             v-if="!comment.deleted"
             style="padding-left: 40px;"
-            v-html="comment.contentExcerpt" />
+            v-html="comment.contentExcerpt"
+          />
           <ds-text
             v-else
             style="padding-left: 40px; font-weight: bold;"
-            color="soft"><ds-icon name="ban" /> Vom Benutzer gelöscht</ds-text>
+            color="soft"
+          >
+            <ds-icon name="ban" /> Vom Benutzer gelöscht
+          </ds-text>
         </div>
         <ds-space margin-bottom="small" />
       </div>
       <div v-else>
-        <p style="text-align: center; opacity: .5;">NO COMMENTS</p>
+        <p style="text-align: center; opacity: .5;">
+          NO COMMENTS
+        </p>
       </div>
     </ds-section>
   </ds-card>
diff --git a/pages/post/_slug/more-info.vue b/pages/post/_slug/more-info.vue
index f111f3d32..a44c54e7d 100644
--- a/pages/post/_slug/more-info.vue
+++ b/pages/post/_slug/more-info.vue
@@ -1,37 +1,48 @@
 <template>
   <ds-card>
-    <h2 style="margin-bottom: .2em;">Mehr Informationen</h2>
+    <h2 style="margin-bottom: .2em;">
+      Mehr Informationen
+    </h2>
     <p>Hier findest du weitere infos zum Thema.</p>
-    <ds-space/>
+    <ds-space />
     <h3><ds-icon name="compass" /> Themenkategorien</h3>
     <div class="tags">
       <ds-tag
         v-for="category in post.categories"
-        :key="category.id">{{ category.name }}</ds-tag>
+        :key="category.id"
+      >
+        {{ category.name }}
+      </ds-tag>
     </div>
     <template v-if="post.tags && post.tags.length">
       <h3><ds-icon name="tags" /> Schlagwörter</h3>
       <div class="tags">
         <ds-tag
           v-for="tag in post.tags"
-          :key="tag.id"><ds-icon name="tag" /> {{ tag.name }}</ds-tag>
+          :key="tag.id"
+        >
+          <ds-icon name="tag" /> {{ tag.name }}
+        </ds-tag>
       </div>
     </template>
     <h3>Verwandte Beiträge</h3>
     <ds-section style="margin: 0 -1.5rem; padding: 1.5rem;">
       <ds-flex
         v-if="post.relatedContributions && post.relatedContributions.length"
-        gutter="small">
+        gutter="small"
+      >
         <ds-flex-item
           v-for="relatedPost in post.relatedContributions"
           :key="relatedPost.id"
-          :width="{ base: '50%' }">
+          :width="{ base: '50%' }"
+        >
           <hc-post-card :post="relatedPost" />
         </ds-flex-item>
       </ds-flex>
       <ds-space
         v-else
-        style="text-align: center; padding-top: 2em; opacity: .6;">
+        style="text-align: center; padding-top: 2em; opacity: .6;"
+      >
         No related Posts
       </ds-space>
     </ds-section>
diff --git a/pages/profile/_slug.vue b/pages/profile/_slug.vue
index 1873fee26..43ad88416 100644
--- a/pages/profile/_slug.vue
+++ b/pages/profile/_slug.vue
@@ -3,35 +3,43 @@
     <ds-card v-if="user && user.image">
       <p>PROFILE IMAGE</p>
     </ds-card>
-    <ds-space/>
+    <ds-space />
     <ds-flex
       v-if="user"
       :width="{ base: '100%' }"
-      gutter="base">
+      gutter="base"
+    >
       <ds-flex-item :width="{ base: '100%', sm: 2, md: 2, lg: 1 }">
         <ds-card style="position: relative; height: auto;">
           <ds-avatar
             :image="user.avatar"
             :name="user.name || 'Anonymus'"
             class="profile-avatar"
-            size="120px" />
+            size="120px"
+          />
           <ds-space margin="small">
             <ds-heading
               tag="h3"
               align="center"
-              no-margin>{{ user.name }}</ds-heading>
+              no-margin
+            >
+              {{ user.name }}
+            </ds-heading>
             <ds-text
               align="center"
               color="soft"
-              size="small">
+              size="small"
+            >
               Mitglied seid {{ user.createdAt | date('MMMM yyyy') }}
             </ds-text>
           </ds-space>
           <ds-space
             v-if="user.badges && user.badges.length"
-            margin="x-small">
+            margin="x-small"
+          >
             <hc-badges
-              :badges="user.badges" />
+              :badges="user.badges"
+            />
           </ds-space>
           <ds-flex>
             <ds-flex-item>
@@ -39,7 +47,8 @@
                 <ds-number label="Folgen">
                   <hc-count-to
                     slot="count"
-                    :end-val="followedByCount" />
+                    :end-val="followedByCount"
+                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
@@ -48,33 +57,39 @@
                 <ds-number label="Folgt">
                   <hc-count-to
                     slot="count"
-                    :end-val="Number(user.followingCount) || 0" />
+                    :end-val="Number(user.followingCount) || 0"
+                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
           </ds-flex>
           <ds-space
-            margin="small">
+            margin="small"
+          >
             <hc-follow-button
               v-if="!myProfile"
               :follow-id="user.id"
-              @update="voted = true && fetchUser()" />
+              @update="voted = true && fetchUser()"
+            />
           </ds-space>
         </ds-card>
-        <ds-space/>
+        <ds-space />
         <ds-heading
           tag="h3"
           soft
-          style="text-align: center; margin-bottom: 10px;">
+          style="text-align: center; margin-bottom: 10px;"
+        >
           Netzwerk
         </ds-heading>
         <ds-card style="position: relative; height: auto;">
           <ds-space
             v-if="user.following && user.following.length"
-            margin="x-small">
+            margin="x-small"
+          >
             <ds-text
               tag="h5"
-              color="soft">
+              color="soft"
+            >
               Wem folgt {{ user.name | truncate(15) }}?
             </ds-text>
           </ds-space>
@@ -82,34 +97,44 @@
             <ds-space
               v-for="follow in uniq(user.following)"
               :key="follow.id"
-              margin="x-small">
+              margin="x-small"
+            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
                 <hc-related-user
                   :post="follow"
-                  :trunc="15" />
+                  :trunc="15"
+                />
               </no-ssr>
             </ds-space>
             <ds-space
               v-if="user.followingCount - user.following.length"
-              margin="small">
+              margin="small"
+            >
               <ds-text
                 size="small"
-                color="softer">und {{ user.followingCount - user.following.length }} weitere</ds-text>
+                color="softer"
+              >
+                und {{ user.followingCount - user.following.length }} weitere
+              </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">{{ user.name }} folgt niemandem</p>
+            <p style="text-align: center; opacity: .5;">
+              {{ user.name }} folgt niemandem
+            </p>
           </template>
         </ds-card>
-        <ds-space/>
+        <ds-space />
         <ds-card style="position: relative; height: auto;">
           <ds-space
             v-if="user.followedBy && user.followedBy.length"
-            margin="x-small">
+            margin="x-small"
+          >
             <ds-text
               tag="h5"
-              color="soft">
+              color="soft"
+            >
               Wer folgt {{ user.name | truncate(15) }}?
             </ds-text>
           </ds-space>
@@ -117,31 +142,40 @@
             <ds-space
               v-for="follow in uniq(user.followedBy)"
               :key="follow.id"
-              margin="x-small">
+              margin="x-small"
+            >
               <!-- TODO: find better solution for rendering errors -->
               <no-ssr>
                 <hc-related-user
                   :post="follow"
-                  :trunc="15" />
+                  :trunc="15"
+                />
               </no-ssr>
             </ds-space>
             <ds-space
               v-if="user.followedByCount - user.followedBy.length"
-              margin="small">
+              margin="small"
+            >
               <ds-text
                 size="small"
-                color="softer">und {{ user.followedByCount - user.followedBy.length }} weitere</ds-text>
+                color="softer"
+              >
+                und {{ user.followedByCount - user.followedBy.length }} weitere
+              </ds-text>
             </ds-space>
           </template>
           <template v-else>
-            <p style="text-align: center; opacity: .5;">niemand folgt {{ user.name }}</p>
+            <p style="text-align: center; opacity: .5;">
+              niemand folgt {{ user.name }}
+            </p>
           </template>
         </ds-card>
       </ds-flex-item>
       <ds-flex-item :width="{ base: '100%', sm: 3, md: 5, lg: 3 }">
         <ds-flex
           :width="{ base: '100%' }"
-          gutter="small">
+          gutter="small"
+        >
           <ds-flex-item>
             <ds-card class="ds-tab-nav">
               <ds-flex>
@@ -152,7 +186,8 @@
                       <ds-number label="Beiträge">
                         <hc-count-to
                           slot="count"
-                          :end-val="user.contributionsCount" />
+                          :end-val="user.contributionsCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -164,7 +199,8 @@
                       <ds-number label="Kommentiert">
                         <hc-count-to
                           slot="count"
-                          :end-val="user.commentsCount" />
+                          :end-val="user.commentsCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -176,7 +212,8 @@
                       <ds-number label="Empfohlen">
                         <hc-count-to
                           slot="count"
-                          :end-val="user.shoutedCount" />
+                          :end-val="user.shoutedCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -186,17 +223,20 @@
           </ds-flex-item>
           <ds-flex-item
             v-for="post in uniq(user.contributions.filter(post => !post.deleted))"
+            :key="post.id"
             :width="{ base: '100%', md: '100%', xl: '50%' }"
-            :key="post.id">
+          >
             <hc-post-card
               :post="post"
-              :show-author-popover="false" />
+              :show-author-popover="false"
+            />
           </ds-flex-item>
         </ds-flex>
         <hc-load-more
           v-if="hasMore"
           :loading="$apollo.loading"
-          @click="showMoreContributions" />
+          @click="showMoreContributions"
+        />
       </ds-flex-item>
     </ds-flex>
   </div>
diff --git a/pages/settings.vue b/pages/settings.vue
index 7b625e742..cf93cbfa4 100644
--- a/pages/settings.vue
+++ b/pages/settings.vue
@@ -10,7 +10,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>