merged master in

.eslintignore

@@ -1,5 +1,4 @@
 node_modules
 build
 .nuxt
-cypress/
 styleguide/

.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']
   }
 }

.travis.yml

@@ -28,3 +28,19 @@ after_failure:
   - wget https://raw.githubusercontent.com/DiscordHooks/travis-ci-discord-webhook/master/send.sh
   - chmod +x send.sh
   - ./send.sh failure $WEBHOOK_URL
+
+deploy:
+  - provider: script
+    script: scripts/deploy.sh nitro.human-connection.org
+    on:
+      branch: master
+      tags: true
+  - provider: script
+    script: scripts/deploy.sh nitro-staging.human-connection.org
+    on:
+      branch: master
+  - provider: script
+    script: scripts/deploy.sh "nitro-$(git rev-parse --short HEAD).human-connection.org"
+    on:
+      tags: true
+      all_branches: true

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: {

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>

components/CountTo.vue

@@ -2,7 +2,8 @@
   <span>
     <no-ssr
       placeholder="0"
-      tag="span">
+      tag="span"
+    >
       <count-to
         :start-val="startVal"
         :end-val="endVal"

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>

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>

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>
 

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">

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="bullhorn"
-      @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>

layouts/blank.vue

@@ -2,7 +2,7 @@
   <div class="layout-blank">
     <ds-container>
       <div style="padding: 5rem 2rem;">
-        <nuxt/>
+        <nuxt />
       </div>
     </ds-container>
   </div>

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,27 +16,34 @@
               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;"
-                  @click.native="toggleMenu"/>
+                  @click.native="toggleMenu"
+                />
                 <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>
@@ -44,7 +52,7 @@
     </div>
     <ds-container>
       <div style="padding: 6rem 2rem 5rem;">
-        <nuxt/>
+        <nuxt />
       </div>
     </ds-container>
   </div>

package.json

@@ -58,7 +58,7 @@
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-prettier": "3.0.0",
-    "eslint-plugin-vue": "^4.0.0",
+    "eslint-plugin-vue": "^5.0.0",
     "jest": "^23.6.0",
     "node-sass": "^4.9.3",
     "nodemon": "^1.11.0",

pages/admin.vue

@@ -10,7 +10,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>

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>

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>
 

pages/login.vue

@@ -12,50 +12,67 @@
       <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"/>
+              name="email"
+              icon="envelope"
+            />
             <ds-input
-              :disabled="pending"
               v-model="form.password"
+              :disabled="pending"
               placeholder="Dein Password"
               icon="lock"
               icon-right="question-circle"
-              type="password"/>
+              name="password"
+              type="password"
+            />
             <ds-button
               :loading="pending"
               primary
-              full-width>
+              full-width
+              name="submit"
+              type="submit"
+            >
               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>

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>

pages/post/_slug.vue

@@ -4,7 +4,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>

pages/post/_slug/index.vue

@@ -3,19 +3,22 @@
     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 -->
     <ds-icon
       v-tooltip="{content: category.name, placement: 'top-start', delay: { show: 300 }}"
@@ -31,17 +34,21 @@
     </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" />
@@ -49,7 +56,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>
@@ -58,27 +66,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>

pages/post/_slug/more-info.vue

@@ -1,8 +1,10 @@
 <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-icon
@@ -20,24 +22,30 @@
       <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>

pages/profile/_slug.vue

@@ -3,23 +3,28 @@
     <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
               v-if="user.location && user.location.length"
               align="center"
@@ -36,9 +41,11 @@
           </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>
@@ -46,7 +53,8 @@
                 <ds-number label="Folgen">
                   <hc-count-to
                     slot="count"
-                    :end-val="followedByCount" />
+                    :end-val="followedByCount"
+                  />
                 </ds-number>
               </no-ssr>
             </ds-flex-item>
@@ -55,17 +63,20 @@
                 <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>
           <template v-if="user.about">
             <hr>
@@ -80,20 +91,23 @@
             </ds-space>
           </template>
         </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>
@@ -101,34 +115,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>
@@ -136,24 +160,32 @@
             <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>
@@ -171,7 +203,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>
@@ -183,7 +216,8 @@
                       <ds-number label="Kommentiert">
                         <hc-count-to
                           slot="count"
-                          :end-val="user.commentsCount" />
+                          :end-val="user.commentsCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -195,7 +229,8 @@
                       <ds-number label="Empfohlen">
                         <hc-count-to
                           slot="count"
-                          :end-val="user.shoutedCount" />
+                          :end-val="user.shoutedCount"
+                        />
                       </ds-number>
                     </no-ssr>
                   </ds-space>
@@ -205,17 +240,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>

pages/settings.vue

@@ -10,7 +10,8 @@
       <ds-flex-item>
         <transition
           name="slide-up"
-          appear>
+          appear
+        >
           <nuxt-child />
         </transition>
       </ds-flex-item>

scripts/deploy.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+
+echo "See me deployed at $1 :)"
+

styleguide/src/system/components/data-input/Input/Input.vue

@@ -64,6 +64,13 @@ export default {
       type: String,
       default: null
     },
+    /**
+     * The name of the field for better accessibility
+     */
+    name: {
+      type: String,
+      default: null
+    },
     /**
      * Whether the input should be automatically focused
      */

styleguide/src/system/components/navigation/Button/Button.vue

@@ -13,6 +13,7 @@
       fullWidth && `ds-button-full-width`,
       loading && `ds-button-loading`
     ]"
+    :name="name"
     v-bind="bindings"
     :is="linkTag">
     <ds-icon
@@ -74,6 +75,13 @@ export default {
         return value.match(/(router-link|a|button)/)
       }
     },
+    /**
+     * Button name for accessibilty
+     */
+    name: {
+      type: String,
+      default: null
+    },
     /**
      * Primary style
      * `true, false`

yarn.lock

@@ -1359,13 +1359,6 @@ acorn-globals@^4.1.0:
     acorn "^6.0.1"
     acorn-walk "^6.0.1"
 
-acorn-jsx@^3.0.0:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
-  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
-  dependencies:
-    acorn "^3.0.4"
-
 acorn-jsx@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.0.1.tgz#32a064fd925429216a09b141102bfdd185fae40e"
@@ -1376,12 +1369,7 @@ acorn-walk@^6.0.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
   integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
 
-acorn@^3.0.4:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
-  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
-
-acorn@^5.0.0, acorn@^5.5.0, acorn@^5.5.3, acorn@^5.6.2, acorn@^5.7.3:
+acorn@^5.0.0, acorn@^5.5.3, acorn@^5.6.2, acorn@^5.7.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
@@ -4213,12 +4201,12 @@ eslint-plugin-prettier@3.0.0, eslint-plugin-prettier@^3.0.0:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-vue@^4.0.0:
-  version "4.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-4.7.1.tgz#c829b9fc62582c1897b5a0b94afd44ecca511e63"
-  integrity sha512-esETKhVMI7Vdli70Wt4bvAwnZBJeM0pxVX9Yb0wWKxdCJc2EADalVYK/q2FzMw8oKN0wPMdqVCKS8kmR89recA==
+eslint-plugin-vue@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-5.0.0.tgz#4a2cc1c0e71ea45e1bd9c1a60f925bfe68bb5710"
+  integrity sha512-mSv2Ebz3RaPP+XJO/mu7F+SdR9lrMyGISSExnarLFqqf3pF5wTmwWNrhHW1o9zKzKI811UVTIIkWJJvgO6SsUQ==
   dependencies:
-    vue-eslint-parser "^2.0.3"
+    vue-eslint-parser "^4.0.2"
 
 eslint-scope@3.7.1:
   version "3.7.1"
@@ -4228,14 +4216,6 @@ eslint-scope@3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^3.7.1:
-  version "3.7.3"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-3.7.3.tgz#bb507200d3d17f60247636160b4826284b108535"
-  integrity sha512-W+B0SvF4gamyCTmUc+uITPY0989iXVfKvhwtmJocTaYoc/3khEHmEmvfY/Gn9HA9VV75jrQECsHizkNw1b68FA==
-  dependencies:
-    esrecurse "^4.1.0"
-    estraverse "^4.1.1"
-
 eslint-scope@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.0.tgz#50bf3071e9338bcdc43331794a0cb533f0136172"
@@ -4303,15 +4283,7 @@ esm@^3.0.84:
   resolved "https://registry.yarnpkg.com/esm/-/esm-3.0.84.tgz#bb108989f4673b32d4f62406869c28eed3815a63"
   integrity sha512-SzSGoZc17S7P+12R9cg21Bdb7eybX25RnIeRZ80xZs+VZ3kdQKzqTp2k4hZJjR7p9l0186TTXSgrxzlMDBktlw==
 
-espree@^3.5.2:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
-  integrity sha512-yAcIQxtmMiB/jL32dzEp2enBeidsB7xWPLNiw3IIkpVds1P+h7qF9YwJq1yUNzp2OKXgAprs4F61ih66UsoD1A==
-  dependencies:
-    acorn "^5.5.0"
-    acorn-jsx "^3.0.0"
-
-espree@^4.0.0:
+espree@^4.0.0, espree@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/espree/-/espree-4.1.0.tgz#728d5451e0fd156c04384a7ad89ed51ff54eb25f"
   integrity sha512-I5BycZW6FCVIub93TeVY1s7vjhP9CY6cXCznIRfiig7nRviKZYdRnj/sHEWC6A7WE9RDWOFq9+7OsWSYz8qv2w==
@@ -4330,7 +4302,7 @@ esprima@^4.0.0:
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.0.0, esquery@^1.0.1:
+esquery@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.0.1.tgz#406c51658b1f5991a5f9b62b1dc25b00e3e5c708"
   integrity sha512-SmiyZ5zIWH9VM+SRUReLS5Q8a7GxtRdxEBVZpm98rJM7Sb+A9DVCndXfkeFUd3byderg+EbDkfnevfCwynWaNA==
@@ -10536,17 +10508,17 @@ vue-count-to@^1.0.13:
   resolved "https://registry.yarnpkg.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"
   integrity sha512-6R4OVBVNtQTlcbXu6SJ8ENR35M2/CdWt3Jmv57jOUM+1ojiFmjVGvZPH8DfHpMDSA+ITs+EW5V6qthADxeyYOQ==
 
-vue-eslint-parser@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
-  integrity sha512-ZezcU71Owm84xVF6gfurBQUGg8WQ+WZGxgDEQu1IHFBZNx7BFZg3L1yHxrCBNNwbwFtE1GuvfJKMtb6Xuwc/Bw==
+vue-eslint-parser@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/vue-eslint-parser/-/vue-eslint-parser-4.0.2.tgz#7d10ec5b67d9b2ef240cac0f0e8b2f03773d810e"
+  integrity sha512-A+teFdsAVtVawd4rtLsv8q6uuj2MYt3Uw+GCodqEkjozB3g20G91hbukz60yWa9IUx/yFz+JzKBu/3Djkod36g==
   dependencies:
-    debug "^3.1.0"
-    eslint-scope "^3.7.1"
+    debug "^4.1.0"
+    eslint-scope "^4.0.0"
     eslint-visitor-keys "^1.0.0"
-    espree "^3.5.2"
-    esquery "^1.0.0"
-    lodash "^4.17.4"
+    espree "^4.1.0"
+    esquery "^1.0.1"
+    lodash "^4.17.11"
 
 vue-hot-reload-api@^2.3.0:
   version "2.3.1"