added createAt date to user, improved content formatting, added keep-alive (disabled)

assets/styles/main.scss

@@ -80,3 +80,38 @@ blockquote {
   width: 100%;
   z-index: 10;
 }
+
+.hc-editor-content {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    &:not(:first-child) {
+      margin-top: 2rem;
+    }
+  }
+  p {
+    &:not(:last-child) {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  dl,
+  ol,
+  ul,
+  blockquote,
+  pre,
+  table {
+    &:not(:first-child) {
+      margin-top: 15px;
+    }
+  }
+  .linebreak {
+    display: none;
+  }
+  // br {
+  //   display: none;
+  // }
+}

components/Author.vue

@@ -28,7 +28,7 @@
           <ds-text
             size="small"
             color="soft">
-            {{ post.createdAt | dateTime }}
+            {{ post.createdAt | dateTime('dd. MMMM yyyy HH:mm') }}
           </ds-text>
         </template>
       </div>

components/PostCard.vue

@@ -7,7 +7,9 @@
       :header="post.title"
       :image="post.image"
       style="cursor: pointer; position: relative;">
-      <div v-html="post.contentExcerpt" />
+      <div
+        class="hc-editor-content"
+        v-html="post.contentExcerpt" />
       <ds-space />
       <ds-space
         margin="small"

graphql/UserProfileQuery.js

@@ -6,6 +6,7 @@ export default gql(`
       id
       name
       avatar
+      createdAt
       friendsCount
       friends {
         id

nuxt.config.js

@@ -31,7 +31,9 @@ module.exports = {
       'reset',
       'reset-token',
       'pages-slug'
-    ]
+    ],
+    // pages to keep alive
+    keepAlivePages: ['index']
   },
   /*
   ** Headers of the page
@@ -65,6 +67,7 @@ module.exports = {
   ** Plugins to load before mounting the App
   */
   plugins: [
+    { src: '~/plugins/keep-alive.js', ssr: false },
     { src: '~/plugins/design-system.js', ssr: true },
     { src: '~/plugins/vue-directives.js', ssr: false },
     { src: '~/plugins/v-tooltip.js', ssr: false },

package.json

@@ -20,7 +20,7 @@
     "@nuxtjs/dotenv": "^1.3.0",
     "accounting": "^0.4.1",
     "cross-env": "^5.2.0",
-    "date-fns": "^1.29.0",
+    "date-fns": "^2.0.0-alpha.24",
     "express": "^4.16.3",
     "graphql-tag": "^2.10.0",
     "jsonwebtoken": "^8.3.0",

pages/post/_slug/index.vue

@@ -8,7 +8,7 @@
     <ds-space margin-bottom="small" />
     <!-- Content -->
     <div
-      class="content"
+      class="content hc-editor-content"
       v-html="post.content" />
     <!-- Shout Button -->
     <ds-space margin="xx-large" />
@@ -183,12 +183,6 @@ export default {
   // max-width: 800px;
   margin: auto;
 
-  .content {
-    br {
-      display: none;
-    }
-  }
-
   .comments {
     margin-top: $space-small;
 

pages/profile/_slug.vue

@@ -20,6 +20,12 @@
               tag="h3"
               align="center"
               no-margin>{{ user.name }}</ds-heading>
+            <ds-text
+              align="center"
+              color="soft"
+              size="small">
+              Mitglied seid {{ user.createdAt | date('MMMM yyyy') }}
+            </ds-text>
           </ds-space>
           <ds-space
             v-if="user.badges && user.badges.length"

plugins/keep-alive.js

@@ -0,0 +1,28 @@
+import Vue from 'vue'
+
+let lastRoute
+const keepAliveHook = {}
+keepAliveHook.install = Vue => {
+  const keepAlivePages = process.env.keepAlivePages || []
+
+  Vue.mixin({
+    // Save route if this instance is a page (has metaInfo)
+    mounted() {
+      if (this.$metaInfo) {
+        lastRoute = this.$route.name
+      }
+    },
+    activated() {
+      if (this.$metaInfo) {
+        lastRoute = this.$route.name
+      }
+    },
+    deactivated() {
+      // If this is a page and we don't want it to be kept alive
+      if (this.$metaInfo && !keepAlivePages.includes(lastRoute)) {
+        this.$destroy()
+      }
+    }
+  })
+}
+Vue.use(keepAliveHook)

plugins/vue-filters.js

@@ -1,19 +1,25 @@
 import Vue from 'vue'
 
+import { en, de } from 'date-fns/locale'
 import format from 'date-fns/format'
-import addSeconds from 'date-fns/add_seconds'
+import formatRelative from 'date-fns/formatRelative'
+import addSeconds from 'date-fns/addSeconds'
 
 import accounting from 'accounting'
 
 export default ({ app }) => {
   app.$filters = Object.assign(app.$filters || {}, {
-    date: (value, fmt = 'DD. MMM YYYY') => {
+    date: (value, fmt = 'dd. MMM yyyy') => {
       if (!value) return ''
-      return format(new Date(value), fmt)
+      return format(new Date(value), fmt, { locale: de })
     },
-    dateTime: (value, fmt = 'DD. MMM YYYY HH:mm') => {
+    dateTime: (value, fmt = 'dd. MMM yyyy HH:mm') => {
       if (!value) return ''
-      return format(new Date(value), fmt)
+      return format(new Date(value), fmt, { locale: de })
+    },
+    relativeDateTime: value => {
+      if (!value) return ''
+      return formatRelative(new Date(value), new Date(), { locale: de })
     },
     number: (
       value,

yarn.lock

@@ -2482,9 +2482,9 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
-date-fns@^1.29.0:
-  version "1.29.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.29.0.tgz#12e609cdcb935127311d04d33334e2960a2a54e6"
+date-fns@^2.0.0-alpha.24:
+  version "2.0.0-alpha.24"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.24.tgz#2988c137c72275af29d7d21cc53eb52b3a8c2586"
 
 date-now@^0.1.4:
   version "0.1.4"