[WIP] Show author slug on author and small improvements

components/Author.vue

@@ -18,19 +18,27 @@
         <div style="display: inline-block; float: left; margin-right: 4px;  height: 100%; vertical-align: middle;">
           <ds-avatar
             :image="author.avatar"
-            :name="author.name"
+            :name="author.name || 'Anonymus'"
             style="display: inline-block; vertical-align: middle;"
             size="32px"
           />
         </div>
         <div style="display: inline-block; height: 100%; vertical-align: middle;">
           <b
             class="username"
-            style="vertical-align: middle;"
+            style="vertical-align: middle"
           >
-            {{ author.name | truncate(trunc, 18) }}
+            {{ author.name || 'Anonymus' | truncate(26) }}
           </b>
           <template v-if="post.createdAt">
+            <ds-text
+              size="small"
+              color="softer"
+              tag="span"
+              style="vertical-align: middle; display: inline"
+            >
+              @{{ author.slug | truncate(26) }}
+            </ds-text>
             <br>
             <ds-text
               size="small"
@@ -39,6 +47,15 @@
               {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
             </ds-text>
           </template>
+          <template v-else>
+            <br>
+            <ds-text
+              size="small"
+              color="softer"
+            >
+              @{{ author.slug | truncate(trunc) }}
+            </ds-text>
+          </template>
         </div>
       </a>
     </template>
@@ -136,7 +153,7 @@ export default {
   },
   props: {
     post: { type: Object, default: null },
-    trunc: { type: Number, default: null },
+    trunc: { type: Number, default: -1 },
     showAuthorPopover: { type: Boolean, default: true }
   },
   data() {

components/PostCard.vue

@@ -28,7 +28,7 @@
       <no-ssr>
         <hc-author
           :post="post"
-          :trunc="35"
+          :trunc="26"
           :show-author-popover="showAuthorPopover"
         />
       </no-ssr>
@@ -88,7 +88,7 @@ export default {
       // remove all links from excerpt to prevent issues with the serounding link
       let excerpt = this.post.contentExcerpt.replace(/<a.*>(.+)<\/a>/gim, '')
       // do not display content that is only linebreaks
-      if (excerpt.replace(/<br>/gim, '').trim() === '') {
+      if (excerpt.replace(/(<br ?\/?>\s*){2,}/gim, '').trim() === '') {
         excerpt = ''
       }
 

graphql/UserProfileQuery.js

@@ -7,6 +7,7 @@ export default app => {
       User(slug: $slug) {
         id
         name
+        slug
         avatar
         about
         locationName
@@ -78,6 +79,7 @@ export default app => {
             id
             avatar
             name
+            slug
             location {
               name: name${lang}
             }

layouts/default.vue

@@ -46,7 +46,7 @@
                   slot-scope="{closeMenu}"
                 >
                   <div class="avatar-menu-popover">
-                    {{ $t('login.hello') }} <b>{{ user.name }}</b>
+                    {{ $t('login.hello') }} <b>{{ user.name || 'Anonymus' | truncate(26) }}</b>
                     <template v-if="user.role !== 'user'">
                       <ds-text
                         color="softer"

pages/moderation/index.vue

@@ -11,67 +11,95 @@
     >
       <template
         slot="name"
-        slot-scope="scope"
+        slot-scope="{ row }"
       >
-        <div v-if="scope.row.type === 'contribution'">
-          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.contribution.slug } }">
-            <b>{{ scope.row.contribution.title | truncate(50) }}</b>
+        <div v-if="row.type === 'contribution'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: row.contribution.slug } }">
+            <b>{{ row.contribution.title | truncate(50) }}</b>
           </nuxt-link><br>
           <ds-text
             size="small"
             color="soft"
+            style="display: inline"
           >
-            {{ scope.row.contribution.author.name }}
+            {{ row.contribution.author.name || 'Anonymus' | truncate(26) }}
+          </ds-text>
+          <ds-text
+            size="small"
+            color="softer"
+            style="display: inline"
+          >
+            @{{ row.contribution.author.slug | truncate(26) }}
           </ds-text>
         </div>
-        <div v-else-if="scope.row.type === 'comment'">
-          <nuxt-link :to="{ name: 'post-slug', params: { slug: scope.row.comment.post.slug } }">
-            <b>{{ scope.row.comment.contentExcerpt | truncate(50) }}</b>
+        <div v-else-if="row.type === 'comment'">
+          <nuxt-link :to="{ name: 'post-slug', params: { slug: row.comment.post.slug } }">
+            <b>{{ row.comment.contentExcerpt | plainText | truncate(50) }}</b>
           </nuxt-link><br>
           <ds-text
             size="small"
             color="soft"
+            style="display: inline"
+          >
+            {{ row.comment.author.name || 'Anonymus' | truncate(26) }}
+          </ds-text>
+          <ds-text
+            size="small"
+            color="softer"
+            style="display: inline"
           >
-            {{ scope.row.comment.author.name }}
+            @{{ row.comment.author.slug | truncate(26) }}
           </ds-text>
         </div>
         <div v-else>
-          <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.user.slug } }">
-            <b>{{ scope.row.user.name | truncate(50) }}</b>
+          <nuxt-link :to="{ name: 'profile-slug', params: { slug: row.user.slug } }">
+            <b>{{ row.user.name || 'Anonymus' | truncate(26) }}</b>
           </nuxt-link>
+          <ds-text
+            size="small"
+            color="softer"
+          >
+            @{{ row.user.slug | truncate(26) }}
+          </ds-text>
         </div>
       </template>
       <template
         slot="type"
-        slot-scope="scope"
+        slot-scope="{ row }"
       >
         <ds-text
           color="soft"
         >
           <ds-icon
-            v-if="scope.row.type === 'contribution'"
-            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            v-if="row.type === 'contribution'"
+            v-tooltip="{ content: $t(`report.${row.type}.type`), placement: 'right' }"
             name="bookmark"
           />
           <ds-icon
-            v-else-if="scope.row.type === 'comment'"
-            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            v-else-if="row.type === 'comment'"
+            v-tooltip="{ content: $t(`report.${row.type}.type`), placement: 'right' }"
             name="comments"
           />
           <ds-icon
             v-else
-            v-tooltip="{ content: $t(`report.${scope.row.type}.type`), placement: 'right' }"
+            v-tooltip="{ content: $t(`report.${row.type}.type`), placement: 'right' }"
             name="user"
           />
         </ds-text>
       </template>
       <template
         slot="reporter"
-        slot-scope="scope"
+        slot-scope="{ row }"
       >
-        <nuxt-link :to="{ name: 'profile-slug', params: { slug: scope.row.reporter.slug } }">
-          {{ scope.row.reporter.name }}
+        <nuxt-link :to="{ name: 'profile-slug', params: { slug: row.reporter.slug } }">
+          {{ row.reporter.name || 'Anonymus' | truncate(26) }}
         </nuxt-link>
+        <ds-text
+          size="small"
+          color="softer"
+        >
+          @{{ row.reporter.slug | truncate(26) }}
+        </ds-text>
       </template>
     </ds-table>
     <hc-empty

pages/post/_slug.vue

@@ -9,8 +9,14 @@
           <nuxt-child />
         </transition>
       </ds-flex-item>
-      <ds-flex-item :width="{ base: '200px' }">
-        <ds-menu :routes="routes" />
+      <ds-flex-item
+        style="position: relative"
+        :width="{ base: '100%', sm: '200px' }"
+      >
+        <ds-menu
+          class="post-menu-sticky"
+          :routes="routes"
+        />
       </ds-flex-item>
     </ds-flex>
   </div>
@@ -22,33 +28,41 @@ export default {
     routes() {
       return [
         {
-          name: this.$t('common.post', null, 1),
-          path: `/post/${this.$route.params.slug}`,
-          children: [
-            {
-              name: this.$t('common.comment', null, 2),
-              path: `/post/${this.$route.params.slug}#comments`
-            },
-            {
-              name: this.$t('common.letsTalk'),
-              path: `/post/${this.$route.params.slug}#lets-talk`
-            },
-            {
-              name: this.$t('common.versus'),
-              path: `/post/${this.$route.params.slug}#versus`
-            }
-          ]
+          name: '1. ' + this.$t('common.post', null, 1),
+          path: `/post/${this.$route.params.slug}`
+          // children: [
+          //   {
+          //     name: this.$t('common.comment', null, 2),
+          //     path: `/post/${this.$route.params.slug}#comments`
+          //   },
+          //   {
+          //     name: this.$t('common.letsTalk'),
+          //     path: `/post/${this.$route.params.slug}#lets-talk`
+          //   },
+          //   {
+          //     name: this.$t('common.versus'),
+          //     path: `/post/${this.$route.params.slug}#versus`
+          //   }
+          // ]
         },
         {
-          name: this.$t('common.moreInfo'),
+          name: '2. ' + this.$t('common.moreInfo'),
           path: `/post/${this.$route.params.slug}/more-info`
         },
         {
-          name: this.$t('common.takeAction'),
+          name: '3. ' + this.$t('common.takeAction'),
           path: `/post/${this.$route.params.slug}/take-action`
         }
       ]
     }
   }
 }
 </script>
+
+<style lang="scss">
+@media #{$media-query-small} {
+  .post-menu-sticky {
+    position: fixed;
+  }
+}
+</style>

pages/post/_slug/more-info.vue

@@ -95,6 +95,7 @@ export default {
                 title
                 slug
                 contentExcerpt
+                createdAt
                 shoutedCount
                 commentsCount
                 categories {

pages/profile/_slug.vue

@@ -13,7 +13,7 @@
         <ds-card style="position: relative; height: auto;">
           <ds-avatar
             :image="user.avatar"
-            :name="user.name || 'Anonymus'"
+            :name="user.name"
             class="profile-avatar"
             size="120px"
           />
@@ -31,8 +31,15 @@
               align="center"
               no-margin
             >
-              {{ user.name }}
+              {{ user.name || 'Anonymus' }}
             </ds-heading>
+            <ds-text
+              size="small"
+              color="softer"
+              style="text-align: center"
+            >
+              @{{ user.slug }}
+            </ds-text>
             <ds-text
               v-if="user.location"
               align="center"

plugins/vue-filters.js

@@ -5,6 +5,7 @@ import format from 'date-fns/format'
 import formatRelative from 'date-fns/formatRelative'
 import addSeconds from 'date-fns/addSeconds'
 import accounting from 'accounting'
+import truncate from 'lodash/truncate'
 
 export default ({ app }) => {
   const locales = {
@@ -61,18 +62,14 @@ export default ({ app }) => {
         ? format(addSeconds(new Date('2000-01-01 00:00'), value), 'HH:mm:ss')
         : '00:00:00'
     },
-    truncate: (value = '', length = -1) => {
-      if (!value || typeof value !== 'string' || value.length <= 0) {
-        return ''
-      }
-      if (length <= 0) {
+    truncate: (value = '', length = null) => {
+      if (!length || length <= 0) {
         return value
       }
-      let output = value.substring(0, length)
-      if (output.length < value.length) {
-        output += '…'
-      }
-      return output
+      return truncate(value, {
+        length: length,
+        omission: '…'
+      })
     },
     list: (value, glue = ', ', truncate = 0) => {
       if (!Array.isArray(value) || !value.length) {
@@ -94,6 +91,12 @@ export default ({ app }) => {
           return index === 0 ? letter.toUpperCase() : letter.toLowerCase()
         })
         .replace(/\s+/g, '')
+    },
+    planeText: (value = '') => {
+      return value
+        .replace(/(<br ?\/?>\s*){2,}/gim, '')
+        .replace(/<[a-z-]+.*>(.+)<\/[a-z-]+>/gim, '$1 ')
+        .trim()
     }
   })
 

styleguide/package.json

@@ -63,6 +63,9 @@
     "webpack-bundle-analyzer": "~3.0.4",
     "webpack-merge-and-include-globally": "~2.1.14"
   },
+  "resolve": {
+    "babel-plugin-transform-vue-jsx": "@vue/babel-preset-jsx"
+  },
   "author": "visualjerk",
   "main": "./dist/system.umd.min.js",
   "files": [