From 749a598574e707c50e64f9feb84453e5c06608f8 Mon Sep 17 00:00:00 2001
From: "rusov.d.s" <rusov.d.s@gmail.com>
Date: Wed, 14 Mar 2018 16:23:15 +0700
Subject: [PATCH] add social buttons

---
 client/src/app.js                             |   4 +-
 client/src/components/chains/PostModal.vue    |   7 +-
 client/src/components/chains/PostShare.vue    |  68 +++++++++
 client/src/components/chains/PostView.vue     |   2 +-
 .../src/components/chains/PublishDrafts.vue   |  20 ++-
 .../src/components/chains/PublishHeader.vue   |  10 +-
 client/src/containers/chains/Post.vue         |  10 +-
 client/src/containers/chains/Publish.vue      | 125 ++++++----------
 client/src/i18n/en.js                         |   4 +-
 client/src/i18n/ru.js                         |   4 +-
 client/src/store/modules/publish.js           |  37 +++--
 client/static/css/styles.css                  | 138 ++++++++++++++++--
 client/static/img/pencil.svg                  |  39 +++++
 client/static/img/share-buttons.svg           |  35 +++++
 package-lock.json                             |  30 ++++
 package.json                                  |   1 +
 server/libs/postingWrapper/index.js           |   3 +
 server/models/user.js                         |  24 +--
 18 files changed, 430 insertions(+), 131 deletions(-)
 create mode 100644 client/src/components/chains/PostShare.vue
 create mode 100644 client/static/img/pencil.svg
 create mode 100644 client/static/img/share-buttons.svg

diff --git a/client/src/app.js b/client/src/app.js
index 1baf4ad..a99c684 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -16,7 +16,7 @@ import Meta from 'vue-meta'
 import GlobalComponents from './plugins/globalComponents'
 import 'vue2-toast/lib/toast.css'
 import Toast from 'vue2-toast'
-
+import SocialSharing from 'vue-social-sharing'
 
 const CONSTANTS = require('@oneplace/constants')
 
@@ -28,7 +28,7 @@ Vue.use(Toast, {
 })
 
 Vue.use(Chains)
-
+Vue.use(SocialSharing)
 Vue.use(GlobalComponents)
 Vue.use(VueI18n)
 Vue.use(Vue2TouchEvents)
diff --git a/client/src/components/chains/PostModal.vue b/client/src/components/chains/PostModal.vue
index da4b194..e8ec5a6 100644
--- a/client/src/components/chains/PostModal.vue
+++ b/client/src/components/chains/PostModal.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="post-view__overlay" v-if="!processing">
+  <div class="post-view__overlay" v-if="!processing" id="post-overlay">
+    <post-share v-if="post"></post-share>
     <div class="post-view__modal">
       <post-view v-on-click-outside="close" v-if="post" :is-modal="true"></post-view>
       <comments-wrapper :post="post" v-if="post"></comments-wrapper>
@@ -11,12 +12,14 @@
 import PostView from './PostView.vue'
 import { mixin as onClickOutside } from 'vue-on-click-outside'
 import CommentsWrapper from './CommentsWrapper.vue'
+import PostShare from './PostShare.vue'
 const KEY_CODE_ESC = 27
 export default {
   name: 'PostModal',
   components: {
     PostView,
-    CommentsWrapper
+    CommentsWrapper,
+    PostShare
   },
   mixins: [onClickOutside],
   mounted() {
diff --git a/client/src/components/chains/PostShare.vue b/client/src/components/chains/PostShare.vue
new file mode 100644
index 0000000..0577878
--- /dev/null
+++ b/client/src/components/chains/PostShare.vue
@@ -0,0 +1,68 @@
+<template>
+  <social-sharing :url="url" inline-template v-show="isVisible">
+    <div class="share-icons__wrapper share-icons__wrapper--visible">
+      <network network="facebook">
+        <span data-link="#share-facebook">
+          <i class="share-icon share-icon--facebook"></i>
+        </span>
+      </network>
+      <network network="twitter">
+        <span data-link="#share-twitter">
+          <i class="share-icon share-icon--twitter"></i>
+        </span>
+      </network>
+      <network network="googleplus">
+        <span data-link="#share-googleplus">
+          <i class="share-icon share-icon--google-plus"></i>
+        </span>
+      </network>
+      <network network="vk">
+        <span data-link="#share-vk">
+          <i class="share-icon share-icon--vk"></i>
+        </span>
+      </network>
+    </div>
+  </social-sharing>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  name: 'PostShare',
+  data() {
+    return {
+      isVisible: false,
+      url: ''
+    }
+  },
+  mounted() {
+    this.scrollHandler()
+    const target = document.getElementById('post-overlay') || window
+    target.addEventListener('scroll', this.scrollHandler)
+    Vue.nextTick(() => {
+      this.url = window.location.href
+    })
+  },
+  beforeDestroy() {
+    const target = document.getElementById('post-overlay') || window
+    target.removeEventListener('scroll', this.scrollHandler)
+  },
+  methods: {
+    scrollHandler() {
+      const body = document.getElementById('post-body')
+
+      if (body) {
+        const rect = body.getBoundingClientRect()
+        const pageHeight = document.body.getBoundingClientRect().height
+
+        if (rect.height < pageHeight / 2)
+          this.isVisible = rect.bottom > pageHeight / 3
+        else 
+          this.isVisible = rect.top < 0 && rect.bottom > pageHeight / 2
+      }
+    }
+  }
+}
+</script>
+
diff --git a/client/src/components/chains/PostView.vue b/client/src/components/chains/PostView.vue
index 33a7b50..2adbab5 100644
--- a/client/src/components/chains/PostView.vue
+++ b/client/src/components/chains/PostView.vue
@@ -44,7 +44,7 @@
       <header class="post-view__post-heading">
         <h1 class="h1 post-view__post-title">{{post.title}}</h1>
       </header>
-      <div class="post-view__post-body markdown" v-html="post.body"></div>
+      <div class="post-view__post-body markdown" v-html="post.body" id="post-body"></div>
       <div class="post-view__post-info post-view__post-info--bottom" v-if="!$store.state.core.params[chain].processing">
         <post-bottom 
             type="post"
diff --git a/client/src/components/chains/PublishDrafts.vue b/client/src/components/chains/PublishDrafts.vue
index 4b57ed5..a81a97c 100644
--- a/client/src/components/chains/PublishDrafts.vue
+++ b/client/src/components/chains/PublishDrafts.vue
@@ -6,17 +6,17 @@
         <pulse-loader :color="'#383838'" :size="'10px'"></pulse-loader>
       </center>
 
-      <div class="publish__drafts-new" v-if="!processing">{{$t('publish.createNewDraft')}}</div>
+      <div class="publish__drafts-new" v-if="!processing" @click.stop="createDraft">{{$t('publish.createNewDraft')}}</div>
       <div class="publish__no-drafts" v-if="!processing && drafts && !drafts.length">{{$t('publish.youHaveNoDrafts')}}</div>
       <div class="publish__drafts-list">
-        <div class="publish__drafts-item" v-for="draft in drafts" :key="draft.id">
+        <div class="publish__drafts-item" v-for="draft in drafts" :key="draft.id" @click.stop="selectDraft(draft)">
           <div class="column-wrapper">
             <span class="publish__drafts-name">{{draft.title}}</span>
             <span class="publish__drafts-time">
               <time-ago :time="draft.time.toString()"></time-ago>
             </span>
           </div>
-          <a href="#" title="Delete draft" @click.prevent="deleteDraft(draft)">
+          <a href="#" title="Delete draft" @click.stop="deleteDraft(draft)">
             <svg class="publish__icon">
               <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/static/img/icons-sprite.svg#delete"></use>
             </svg>
@@ -77,8 +77,20 @@ export default {
     close() {
       this.setIsVisible(false)
     },
+    createDraft() {
+      this.$store.dispatch('publish/createDraft').then(() => {
+        this.$emit('update')
+      })
+    },
     deleteDraft(draft) {
-      this.$store.dispatch('publish/deleteDraft', { draft })
+      this.$store.dispatch('publish/deleteDraft', { draft }).then(() => {
+        this.$emit('update')
+      })
+    },
+    selectDraft(draft) {
+      this.$store.dispatch('publish/selectDraft', { draft })
+      this.isVisible = false
+      this.$emit('update')
     }
   }
 }
diff --git a/client/src/components/chains/PublishHeader.vue b/client/src/components/chains/PublishHeader.vue
index abd0814..1d3c5b9 100644
--- a/client/src/components/chains/PublishHeader.vue
+++ b/client/src/components/chains/PublishHeader.vue
@@ -12,11 +12,11 @@
           >
             {{account.username}}
           </router-link>
-          <span>New post</span>
+          <span>{{$t(`publish.${mode}`)}}</span>
         </div>
       </div>
       <div>
-        <publish-drafts></publish-drafts>
+        <publish-drafts @update="$emit('update')"></publish-drafts>
         <publish-options :chain="chain" :account="account"></publish-options>
       </div>
     </div>
@@ -55,6 +55,12 @@ export default {
   computed: {
     DEFAULT_AVATAR() {
       return CONSTANTS.DEFAULT.AVATAR_IMAGE
+    },
+    mode() {
+      let mode = 'newPost'
+      if (this.$store.state.publish.drafts.loadFromDraft) mode = 'draft'
+      if (this.$store.state.publish.form.permlink) mode = 'edit'
+      return mode
     }
   },
   methods: {
diff --git a/client/src/containers/chains/Post.vue b/client/src/containers/chains/Post.vue
index 231a3af..d8ac38a 100644
--- a/client/src/containers/chains/Post.vue
+++ b/client/src/containers/chains/Post.vue
@@ -1,6 +1,7 @@
 <template>
   <section class="main-content">
     <section class="post-page__wrapper">
+      <post-share></post-share>
       <div class="container">
         <center><pulse-loader :loading="!post" :color="'#383838'" :size="'10px'"></pulse-loader></center>
         <post-view v-if="post" :is-modal="false"></post-view>
@@ -17,15 +18,20 @@
 <script>
 import PostView from '../../components/chains/PostView.vue'
 import CommentsWrapper from '../../components/chains/CommentsWrapper.vue'
+import PostShare from '../../components/chains/PostShare.vue'
 
 export default {
   name: 'Post',
   components: {
     PostView,
-    CommentsWrapper
+    CommentsWrapper,
+    PostShare
   },
   asyncData({ store, route, router }) {
-    if (!store.state.postView.post || store.state.postView.post.permlink !== route.params.permlink) {
+    if (
+      !store.state.postView.post ||
+      store.state.postView.post.permlink !== route.params.permlink
+    ) {
       return store
         .dispatch('fetchPostByPermlink', {
           chain: route.params.chain,
diff --git a/client/src/containers/chains/Publish.vue b/client/src/containers/chains/Publish.vue
index c668d49..b2bc0c6 100644
--- a/client/src/containers/chains/Publish.vue
+++ b/client/src/containers/chains/Publish.vue
@@ -5,10 +5,11 @@
       :accounts-by-chain="accountsByChain"
       :account="account" 
       :chain="chain"
+      @update="onUpdate"
     ></publish-header>
 
-    <section class="publish__post-editor">
-      <textarea class="publish__input-title input" :placeholder="$t('publish.enterPostTitle')" v-model="title"></textarea>
+    <section class="publish__post-editor" v-on:drop="onDrop">
+      <textarea class="publish__input-title input" :placeholder="$t('publish.enterPostTitle')" v-model="title" ref="title" maxlength="256"></textarea>
       <textarea :placeholder="$t('publish.typeYourStoryHere')" ref="area"></textarea>
     </section>
   </div>
@@ -44,6 +45,19 @@ export default {
   components: {
     PublishHeader
   },
+  methods: {
+    onDrop($event) {
+      for (let i = 0; i < $event.dataTransfer.items.length; i++) {
+        if ($event.dataTransfer.items[i].kind === 'file') {
+          const file = $event.dataTransfer.items[i].getAsFile()
+          console.log('... file[' + i + '].name = ' + file.name)
+        }
+      }
+    },
+    onUpdate() {
+      this.mde.value(this.body)
+    }
+  },
   mounted() {
     const SimpleMDE = require('simplemde')
 
@@ -57,80 +71,20 @@ export default {
       },
       element: this.$refs.area,
       toolbar: [
-        {
-          name: 'bold',
-          action: SimpleMDE.toggleBold,
-          className: 'fa fa-bold',
-          title: 'Bold'
-        },
-        {
-          name: 'italic',
-          action: SimpleMDE.toggleItalic,
-          className: 'fa fa-italic',
-          title: 'Italic'
-        },
-        {
-          name: 'heading',
-          action: SimpleMDE.toggleHeadingSmaller,
-          className: 'fa fa-header',
-          title: 'Heading'
-        },
-        {
-          name: 'heading-smaller',
-          action: SimpleMDE.toggleHeadingSmaller,
-          className: 'fa fa-header fa-header-x fa-header-smaller',
-          title: 'Smaller Heading'
-        },
-        {
-          name: 'heading-bigger',
-          action: SimpleMDE.toggleHeadingBigger,
-          className: 'fa fa-header fa-header-x fa-header-bigger',
-          title: 'Bigger Heading'
-        },
-        '|', // Separator
-        {
-          name: 'code',
-          action: SimpleMDE.toggleCodeBlock,
-          className: 'fa fa-code',
-          title: 'Code'
-        },
-        {
-          name: 'quote',
-          action: SimpleMDE.toggleBlockquote,
-          className: 'fa fa-quote-left',
-          title: 'Quote'
-        },
-        {
-          name: 'unordered-list',
-          action: SimpleMDE.toggleUnorderedList,
-          className: 'fa fa-list-ul',
-          title: 'Generic List'
-        },
-        {
-          name: 'ordered-list',
-          action: SimpleMDE.toggleOrderedList,
-          className: 'fa fa-list-ol',
-          title: 'Numbered List'
-        },
-        '|', // Separator
-        {
-          name: 'link',
-          action: SimpleMDE.drawLink,
-          className: 'fa fa-link',
-          title: 'Create Link'
-        },
-        {
-          name: 'image',
-          action: SimpleMDE.drawImage,
-          className: 'fa fa-picture-o',
-          title: 'Insert Image'
-        },
-        {
-          name: 'horizontal-rule',
-          action: SimpleMDE.drawHorizontalRule,
-          className: 'fa fa-minus',
-          title: 'Insert Horizontal Line'
-        },
+        'bold',
+        'italic',
+        'heading',
+        'heading-smaller',
+        'heading-bigger',
+        '|',
+        'code',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        '|',
+        'link',
+        'image',
+        'horizontal-rule',
         '|',
         {
           name: 'side-by-side',
@@ -149,12 +103,7 @@ export default {
           title: 'Toggle Fullscreen'
         },
         '|',
-        {
-          name: 'guide',
-          action: "https://simplemde.com/markdown-guide",
-          className: 'fa fa-question-circle',
-          title: 'Markdown Guide'
-        }
+        'guide'
       ],
       promptURLs: true,
       spellChecker: false,
@@ -162,11 +111,21 @@ export default {
       styleSelectedText: false
     })
 
-    this.mde.value(this.value)
+    this.mde.value(this.body)
     this.mde.codemirror.on('change', () => {
       this.body = this.mde.value()
     })
   },
+  watch: {
+    title(to, from) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      context.font = "bold 32px 'Noto Sans', sans-serif"
+      const metrics = context.measureText(to)
+      const q = Math.floor(metrics.width / 830) + 1
+      this.$refs.title.style.height = q * 48 + 'px'
+    }
+  },
   computed: {
     body: stateModel('body'),
     title: stateModel('title'),
diff --git a/client/src/i18n/en.js b/client/src/i18n/en.js
index 230d603..ac6c50b 100644
--- a/client/src/i18n/en.js
+++ b/client/src/i18n/en.js
@@ -178,7 +178,9 @@ module.exports = {
     upVotePost: 'Upvote post',
     enterPostTitle: 'Enter post title',
     typeYourStoryHere:'Type your story here...',
-
+    newPost: 'New post',
+    draft: 'Draft',
+    edit: 'Edit',
     drafts: 'Drafts',
     youHaveNoDrafts: 'You have no drafts.',
     createNewDraft: 'Create new draft'
diff --git a/client/src/i18n/ru.js b/client/src/i18n/ru.js
index c71abc1..e540574 100644
--- a/client/src/i18n/ru.js
+++ b/client/src/i18n/ru.js
@@ -179,7 +179,9 @@ module.exports = {
     upVotePost: 'Голосовать за пост',
     enterPostTitle: 'Введите заголовок поста',
     typeYourStoryHere: 'Напишите свою историю здесь...',
-
+    newPost: 'Новая запись',
+    draft: 'Черновик',
+    edit: 'Редактирование',
     drafts: 'Черновики',
     youHaveNoDrafts: 'У вас 0 черновиков',
     createNewDraft: 'Создать новый черновик'
diff --git a/client/src/store/modules/publish.js b/client/src/store/modules/publish.js
index 09a418b..816d834 100644
--- a/client/src/store/modules/publish.js
+++ b/client/src/store/modules/publish.js
@@ -8,19 +8,17 @@ const CONSTANTS = require('@oneplace/constants')
 const TYPES = {
   INIT_FORM_OBJECT: 'INIT_FORM_OBJECT',
   SET_FORM_OBJECT: 'SET_FORM_OBJECT',
-  SET_DRAFTS_OBJECT: 'SET_DRAFTS_OBJECT',
-  SET_DRAFTS_PROCESSING: 'SET_DRAFTS_PROCESSING',
-  SET_DRAFTS_COLLECTION: 'SET_DRAFTS_COLLECTION'
+  SET_DRAFTS_OBJECT: 'SET_DRAFTS_OBJECT'
 }
 
 const generatePermLink = (chain, data, prefix = '') => {
   if (data.permlink) return Promise.resolve()
   else {
-    let permlink = getSlug(data.title.replace(/[<>]/g, ''), {truncate: 128})
+    let permlink = getSlug(data.title.replace(/[<>]/g, ''), {truncate: 128}).toLowerCase()
     if (prefix) permlink = [prefix, permlink].join('-')
     return Api.getContent(chain, data.author, permlink)
       .then(response => {
-        const prefix = base58.encode(secureRandom.randomBuffer(4))
+        const prefix = base58.encode(secureRandom.randomBuffer(4)).toLowerCase()
         return generatePermLink(chain, data, prefix)
       })
       .catch(err => {
@@ -41,6 +39,7 @@ export default () => {
         processing: false,
         permlink: null,
         body: '',
+        title: '',
         tags: [],
         rewardsOpts: '50',
         upVotePost: false
@@ -65,12 +64,6 @@ export default () => {
     },
     [TYPES.SET_DRAFTS_OBJECT](state, params) {
       state.drafts = Object.assign(state.drafts, params)
-    },
-    [TYPES.SET_DRAFTS_PROCESSING](state, flag) {
-      state.drafts.processing = flag
-    },
-    [TYPES.SET_DRAFTS_COLLECTION](state, collection) {
-      state.drafts.collection = collection
     }
   }
 
@@ -101,17 +94,35 @@ export default () => {
             else
               params.collection = state.drafts.collection.map(draft => active.id === draft.id ? Object.assign(draft, active) : draft)
 
+            params.collection.sort((a, b) => a.time - b.time)
             commit(TYPES.SET_DRAFTS_OBJECT, params)
           })
       }
     },
+    createDraft({commit, state}) {
+      commit(TYPES.SET_DRAFTS_OBJECT, {loadFromDraft: false, active: null})
+      commit(TYPES.SET_FORM_OBJECT, {body: '', title: ''})
+    },
     deleteDraft({commit, state}, {draft}) {
       return Api.deleteDraft(draft)
         .then(response => {
-          const collection = state.drafts.collection.filter(_draft => _draft.id !== draft.id)
-          commit(TYPES.SET_DRAFTS_OBJECT, {collection})
+          const params = {}
+          params.collection = state.drafts.collection.filter(_draft => _draft.id !== draft.id)
+
+          if (state.drafts.active && state.drafts.active.id === draft.id) {
+            params.active = null
+            params.loadFromDraft = false
+            commit(TYPES.SET_FORM_OBJECT, {body: '', title: ''})
+          }
+          commit(TYPES.SET_DRAFTS_OBJECT, params)
         })
     },
+    selectDraft({commit, state}, {draft}) {
+      const {body, title} = draft
+
+      commit(TYPES.SET_DRAFTS_OBJECT, {loadFromDraft: true, active: draft})
+      commit(TYPES.SET_FORM_OBJECT, {body, title})
+    },
     submitForm({commit, state}, {chain, account}) {
       commit(TYPES.SET_FORM_OBJECT, {processing: true})
       const data = state.form
diff --git a/client/static/css/styles.css b/client/static/css/styles.css
index 12b4187..a9eb55e 100644
--- a/client/static/css/styles.css
+++ b/client/static/css/styles.css
@@ -293,9 +293,27 @@ hr {
   align-items: center;
 }
 
+.header__publish {
+  display: block;
+  height: 32px;
+  margin-right: 20px;
+}
+
+.icon--publish {
+  position: relative;
+  transition: all 0.3s ease;
+  width: 32px;
+  height: 32px;
+  fill: #cfd2d2;
+}
+
+.icon--publish:hover {
+  fill: #a8adad;
+}
+
 .header__chain-wrapper {
   width: 90px;
-  margin-right: 20px;
+  margin-right: 23px;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -443,7 +461,7 @@ hr {
   display: block;
   font-size: 13px;
   color: #818888;
-  padding: 5px 16px 6px;
+  padding: 8px 16px;
 }
 
 .header__usermenu-item:hover {
@@ -541,11 +559,11 @@ hr {
 .header__profile-btn {
   display: block;
   position: relative;
-  width: 25px;
-  height: 25px;
+  width: 24px;
+  height: 24px;
   background: url("/static/img/settings.svg") 50% 50% no-repeat transparent;
   background-size: cover;
-  margin-left: 25px;
+  margin-left: 24px;
 }
 
 .header__profile-btn:before {
@@ -2816,9 +2834,6 @@ hr {
 
 .post-view__reply-preview {
   display: block;
-  padding: 8px 16px;
-  background: --color-deffault;
-  border: 1px dashed #cfd2d2;
 }
 
 .post-view__comments-header {
@@ -4055,6 +4070,7 @@ hr {
   text-transform: none;
   color: #818888;
   border: 1px solid #a8adad;
+  background: transparent;
 }
 
 .publish__btn-post:hover {
@@ -4589,6 +4605,96 @@ hr {
   text-decoration: underline;
 }
 
+.share-icons__wrapper {
+  opacity: 0;
+  width: 40px;
+  height: auto;
+  position: fixed;
+  bottom: calc(50vh - 98px);
+  left: 20px;
+  transition: all 0.5s ease;
+  z-index: 10;
+}
+
+.share-icons__wrapper span {
+  display: block;
+  margin-bottom: 12px;
+}
+
+.share-icons__wrapper span:last-child {
+  margin-bottom: 0;
+}
+
+.share-icons__wrapper--visible {
+  opacity: 1;
+}
+
+.share-icon {
+  position: relative;
+  display: block;
+  width: 40px;
+  height: 40px;
+  background: url("/static/img/share-buttons.svg") 0 0 no-repeat transparent;
+  background-size: 160px 40px;
+}
+
+.share-icon:before,.share-icon:after {
+  position: absolute;
+  display: block;
+  content: '';
+  transition: all 0.3s ease;
+  border-radius: 50%;
+}
+
+.share-icon:before {
+  top: 1px;
+  left: 1px;
+  right: 1px;
+  bottom: 1px;
+  background: #a8adad;
+  z-index: -1;
+}
+
+.share-icon:after {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border: 1px solid transparent;
+}
+
+.share-icon:hover {
+  cursor: pointer;
+}
+
+.share-icon:hover:before {
+  background: #383838;
+}
+
+.share-icon:hover:after {
+  top: -4px;
+  left: -4px;
+  right: -4px;
+  bottom: -4px;
+  border-color: #a8adad;
+}
+
+.share-icon--facebook {
+  background-position: 0 0;
+}
+
+.share-icon--google-plus {
+  background-position: 66.67% 0;
+}
+
+.share-icon--twitter {
+  background-position: 33.33% 0;
+}
+
+.share-icon--vk {
+  background-position: 100% 0;
+}
+
 @font-face {
   font-family:'Noto Sans';src:url("/static/fonts/notosans-bold.woff2") format('woff2'), url("/static/fonts/notosans-bold.woff") format('woff');font-weight:700;font-style:normal;
 }
@@ -4626,7 +4732,7 @@ hr {
   }
 
   .post-view__close-post {
-    left: calc(50% + 452px);
+    left: calc(50% + 460px);
   }
 
   .post-view__post-wrapper {
@@ -4638,6 +4744,20 @@ hr {
   }
 }
 
+@media screen and (max-width: 1060px) {
+  .share-icons__wrapper {
+    width: 32px;
+    bottom: calc(50vh - 82px);
+    left: 16px;
+  }
+
+  .share-icon {
+    width: 32px;
+    height: 32px;
+    background-size: 128px 32px;
+  }
+}
+
 @media screen and (max-width: 1040px) {
   .container {
     width: 960px;
diff --git a/client/static/img/pencil.svg b/client/static/img/pencil.svg
new file mode 100644
index 0000000..c9e82ad
--- /dev/null
+++ b/client/static/img/pencil.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="icon" x="0px" y="0px" viewBox="0 0 300 300" style="enable-background:new 0 0 300 300;" xml:space="preserve" width="100%" height="100%">
+<g>
+	<g>
+		<path d="M149.996,0C67.157,0,0.001,67.161,0.001,149.997S67.157,300,149.996,300s150.003-67.163,150.003-150.003    S232.835,0,149.996,0z M221.302,107.945l-14.247,14.247l-29.001-28.999l-11.002,11.002l29.001,29.001l-71.132,71.126    l-28.999-28.996L84.92,186.328l28.999,28.999l-7.088,7.088l-0.135-0.135c-0.786,1.294-2.064,2.238-3.582,2.575l-27.043,6.03    c-0.405,0.091-0.817,0.135-1.224,0.135c-1.476,0-2.91-0.581-3.973-1.647c-1.364-1.359-1.932-3.322-1.512-5.203l6.027-27.035    c0.34-1.517,1.286-2.798,2.578-3.582l-0.137-0.137L192.3,78.941c1.678-1.675,4.404-1.675,6.082,0.005l22.922,22.917    C222.982,103.541,222.982,106.267,221.302,107.945z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/client/static/img/share-buttons.svg b/client/static/img/share-buttons.svg
new file mode 100644
index 0000000..4295253
--- /dev/null
+++ b/client/static/img/share-buttons.svg
@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 2048 512" style="enable-background:new 0 0 2048 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<g>
+	<path class="st0" d="M256,0C114.6,0,0,114.6,0,256s114.6,256,256,256s256-114.6,256-256S397.4,0,256,0z M353.7,130.4h-35.4
+		c-27.8,0-33.1,13.2-33.1,32.6v42.7h66.2v66.9h-66.2v171.6h-69.1V272.5h-57.7v-66.9h57.7v-49.3c0-57.2,35-88.4,86-88.4l51.6,0.1
+		V130.4L353.7,130.4z"/>
+</g>
+<g>
+	<g>
+		<path class="st0" d="M768,0C626.6,0,512,114.6,512,256s114.6,256,256,256s256-114.6,256-256S909.4,0,768,0z M895.4,198.5l0.2,8.2
+			c0,83.3-63.4,179.3-179.3,179.3c-35.6,0-68.7-10.4-96.6-28.3c4.9,0.6,10,0.9,15,0.9c29.5,0,56.7-10.1,78.3-27
+			c-27.6-0.5-50.8-18.8-58.9-43.8c3.9,0.7,7.8,1.1,11.9,1.1c5.8,0,11.3-0.7,16.6-2.2c-28.8-5.8-50.6-31.3-50.6-61.8v-0.8
+			c8.5,4.7,18.2,7.6,28.5,7.9c-16.9-11.3-28-30.6-28-52.4c0-11.6,3.1-22.4,8.5-31.7c31.1,38.1,77.5,63.2,129.9,65.9
+			c-1.1-4.6-1.6-9.4-1.6-14.4c0-34.8,28.2-63,63-63c18.1,0,34.5,7.6,46,19.9c14.3-2.8,27.8-8.1,40-15.3
+			c-4.7,14.7-14.7,27.1-27.7,34.9c12.7-1.5,24.9-4.9,36.2-9.9C918.4,178.6,907.7,189.7,895.4,198.5z"/>
+	</g>
+</g>
+<path class="st0" d="M1280,0c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S1421.4,0,1280,0z M1205.9,385.6
+	c-72.2,0-129.6-57.4-129.6-129.6s57.4-129.6,129.6-129.6c35.2,0,64.8,13,87,35.2l-35.2,33.3c-9.3-9.3-25.9-20.4-51.8-20.4
+	c-44.4,0-79.6,37-79.6,81.5c0,44.4,35.2,81.5,79.6,81.5c51.8,0,70.4-37,74.1-55.5h-74.1v-44.4h122.2c1.9,7.4,1.9,13,1.9,22.2
+	C1330,333.8,1280,385.6,1205.9,385.6z M1483.7,274.5h-37v37h-37v-37h-37v-37h37v-37h37v37h37V274.5z"/>
+<path class="st0" d="M1792,0c-141.4,0-256,114.6-256,256s114.6,256,256,256s256-114.6,256-256S1933.4,0,1792,0z M1938.7,368.3
+	l-44.9,0.6c0,0-9.6,1.9-22.3-6.8c-16.8-11.5-32.6-41.5-45-37.6c-12.5,4-12.1,30.9-12.1,30.9s0.1,5.8-2.8,8.8c-3.1,3.3-9.2,4-9.2,4
+	h-20.1c0,0-44.3,2.7-83.4-38c-42.6-44.3-80.2-132.3-80.2-132.3s-2.2-5.8,0.2-8.6c2.6-3.1,9.9-3.3,9.9-3.3l48-0.3
+	c0,0,4.5,0.8,7.8,3.1c2.7,2,4.2,5.6,4.2,5.6s7.8,19.6,18,37.4c20.1,34.7,29.4,42.3,36.2,38.5c9.9-5.4,7-49,7-49s0.2-15.8-5-22.9
+	c-4-5.5-11.6-7.1-14.9-7.5c-2.7-0.4,1.7-6.6,7.5-9.5c8.6-4.2,23.9-4.5,41.9-4.3c14.1,0.1,18.1,1,23.6,2.3
+	c16.6,4,10.9,19.4,10.9,56.5c0,11.9-2.1,28.5,6.4,34.1c3.7,2.4,12.7,0.4,35.2-37.9c10.7-18.1,18.7-39.4,18.7-39.4s1.7-3.8,4.5-5.4
+	c2.8-1.7,6.5-1.1,6.5-1.1l50.5-0.3c0,0,15.2-1.8,17.6,5c2.6,7.2-5.7,24-26.3,51.5c-33.9,45.2-37.7,41-9.5,67.1
+	c26.9,25,32.5,37.1,33.4,38.6C1962.2,366.8,1938.7,368.3,1938.7,368.3z"/>
+</svg>
diff --git a/package-lock.json b/package-lock.json
index 222d02b..77b8ac4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3710,6 +3710,11 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.2.0.tgz",
       "integrity": "sha1-De4/7TH81GlhjOc0IJn8GvoL2xM="
     },
+    "estree-walker": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.3.1.tgz",
+      "integrity": "sha1-5rGlHPcpJSTnI3wxLl/mZgwc4ao="
+    },
     "esutils": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
@@ -10187,6 +10192,23 @@
         "inherits": "2.0.3"
       }
     },
+    "rollup-plugin-json": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-json/-/rollup-plugin-json-2.3.0.tgz",
+      "integrity": "sha512-W45nZH7lmXgkSR/DkeyF4ks0YWFrMysdjUT049gTuAg+lwUEDBKI2+PztqW8UDSMlXCAeEONsLzpDDyBy9m+9A==",
+      "requires": {
+        "rollup-pluginutils": "2.0.1"
+      }
+    },
+    "rollup-pluginutils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.0.1.tgz",
+      "integrity": "sha1-fslbNXP2VDpGpkYb2afFRFJdD8A=",
+      "requires": {
+        "estree-walker": "0.3.1",
+        "micromatch": "2.3.11"
+      }
+    },
     "run-async": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-0.1.0.tgz",
@@ -12196,6 +12218,14 @@
         "source-map": "0.5.6"
       }
     },
+    "vue-social-sharing": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/vue-social-sharing/-/vue-social-sharing-2.3.3.tgz",
+      "integrity": "sha1-jSPlCSPHHgriQYgQjCGDaTTPVnA=",
+      "requires": {
+        "rollup-plugin-json": "2.3.0"
+      }
+    },
     "vue-spinner": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/vue-spinner/-/vue-spinner-1.0.3.tgz",
diff --git a/package.json b/package.json
index c3f1866..a609316 100644
--- a/package.json
+++ b/package.json
@@ -68,6 +68,7 @@
     "vue-router": "^3.0.1",
     "vue-scrollto": "^2.8.0",
     "vue-server-renderer": "^2.5.7",
+    "vue-social-sharing": "^2.3.3",
     "vue-spinner": "^1.0.3",
     "vue2-toast": "^1.3.1",
     "vue2-touch-events": "^0.2.3",
diff --git a/server/libs/postingWrapper/index.js b/server/libs/postingWrapper/index.js
index a2458c7..b9bc168 100644
--- a/server/libs/postingWrapper/index.js
+++ b/server/libs/postingWrapper/index.js
@@ -29,7 +29,10 @@ class PostingWrapper {
         jsonMetadata.tags = tags
       }
       jsonMetadata.app = 'oneplace'
+
       const isPost = !parentAuthor && !parentPermlink
+      if (!parentPermlink) parentPermlink = tags.length ? tags[0] : 'general'
+
       const isUpdate = !!permlink
       if (!permlink && !isPost) {
         permlink = this.clients[chain].formatter.commentPermlink(parentAuthor, parentPermlink)
diff --git a/server/models/user.js b/server/models/user.js
index 6ee32e5..2e01c03 100644
--- a/server/models/user.js
+++ b/server/models/user.js
@@ -43,17 +43,19 @@ module.exports = Model => {
   });
 
   Model.current = async (req, cb) => {
-    // let user = await Model.findById(req.accessToken.userId, {include: ['accounts']})
-    // for (let account of user.accounts()) {
-    //   account.avatar = await blockChains.getAvatar(account.chain, account.username)
-    //   account.data = await blockChains.getAccount(account.chain, account.username)
-    // }
-    // const tags = await getTagWithOrder(user.id)
-    // user = JSON.parse(JSON.stringify(user))
-    // user.tags = tags
-    // return user
-
-    return {"id":"d887e0a0-2366-11e8-8be8-c7ecaeda43f5","email":"rusov.d.s@gmail.com","role":1,"status":1,"emailVerified":true,"online":null,"ip":null,"lang":"en","created":1520578526,"updated":1520820561,"accounts":[{"id":1,"username":"rusovds","chain":"g","avatar":"https://steemitimages.com/100x100/https://pp.userapi.com/c639320/v639320337/4d7a8/yIGYsRgNg80.jpg","data":{"id":90379,"name":"rusovds","owner":{"weight_threshold":1,"account_auths":[],"key_auths":[["GLS7oku1nUusspKuzkTGxYNzev2crZbzQu75BxkqLgHnUzAW1PsxN",1]]},"active":{"weight_threshold":1,"account_auths":[],"key_auths":[["GLS5Kn2iM1QxErE7pVox2KbLCnNhsXH5YxEQH7MLYQkwTQxoD1815",1]]},"posting":{"weight_threshold":1,"account_auths":[["oneplace",1],["oneplace.app",1]],"key_auths":[["GLS5xccEAnr7jfcVRBXVu3rpxzZhYbZrZr98hf5Jfcdg2h5G6k3DA",1]]},"memo_key":"GLS5uyEx2vVWj2N92dTnALdbfxWpYv989j7zkqAFp9Z5aAwvt5cy6","json_metadata":"{\"profile\":{\"profile_image\":\"https://pp.userapi.com/c639320/v639320337/4d7a8/yIGYsRgNg80.jpg\"}}","proxy":"","last_owner_update":"2017-12-11T06:40:06","last_account_update":"2018-03-07T01:30:06","created":"2017-12-10T14:23:42","mined":false,"owner_challenged":false,"active_challenged":false,"last_owner_proved":"1970-01-01T00:00:00","last_active_proved":"1970-01-01T00:00:00","recovery_account":"golosio","last_account_recovery":"1970-01-01T00:00:00","reset_account":"null","comment_count":0,"lifetime_vote_count":0,"post_count":43,"can_vote":true,"voting_power":9950,"last_vote_time":"2018-03-09T14:53:33","balance":"0.000 GOLOS","savings_balance":"0.000 GOLOS","sbd_balance":"0.003 GBG","sbd_seconds":"263711112","sbd_seconds_last_update":"2018-02-25T10:53:06","sbd_last_interest_payment":"2018-02-16T08:26:15","savings_sbd_balance":"0.000 GBG","savings_sbd_seconds":"0","savings_sbd_seconds_last_update":"1970-01-01T00:00:00","savings_sbd_last_interest_payment":"1970-01-01T00:00:00","savings_withdraw_requests":0,"vesting_shares":"33695.433055 GESTS","vesting_withdraw_rate":"0.000000 GESTS","next_vesting_withdrawal":"1969-12-31T23:59:59","withdrawn":0,"to_withdraw":0,"withdraw_routes":0,"curation_rewards":0,"posting_rewards":2760,"proxied_vsf_votes":[0,0,0,0,0,0,0,0],"witnesses_voted_for":0,"average_bandwidth":176086036,"lifetime_bandwidth":"81524000000","last_bandwidth_update":"2018-03-09T14:53:33","average_market_bandwidth":127998532,"last_market_bandwidth_update":"2018-02-21T00:11:30","last_post":"2018-03-07T02:06:51","last_root_post":"2018-02-16T02:36:54","post_bandwidth":11722,"new_average_bandwidth":"7672068101","new_average_market_bandwidth":3890098718,"vesting_balance":"0.000 GOLOS","reputation":"439345795585","transfer_history":[],"market_history":[],"post_history":[],"vote_history":[],"other_history":[],"witness_votes":[],"tags_usage":[],"guest_bloggers":[],"blog_category":{}}}],"tags":[]}
+    if (process.env.NODE_ENV === 'production') {
+      let user = await Model.findById(req.accessToken.userId, {include: ['accounts']})
+      for (let account of user.accounts()) {
+        account.avatar = await blockChains.getAvatar(account.chain, account.username)
+        account.data = await blockChains.getAccount(account.chain, account.username)
+      }
+      const tags = await getTagWithOrder(user.id)
+      user = JSON.parse(JSON.stringify(user))
+      user.tags = tags
+      return user
+    } else {
+      return {"id": "d887e0a0-2366-11e8-8be8-c7ecaeda43f5", "email": "rusov.d.s@gmail.com", "role": 1, "status": 1, "emailVerified": true, "online": null, "ip": null, "lang": "en", "created": 1520578526, "updated": 1520820561, "accounts": [{"id": 1, "username": "rusovds", "chain": "g", "avatar": "https://steemitimages.com/100x100/https://pp.userapi.com/c639320/v639320337/4d7a8/yIGYsRgNg80.jpg", "data": {"id": 90379, "name": "rusovds", "owner": {"weight_threshold": 1, "account_auths": [], "key_auths": [["GLS7oku1nUusspKuzkTGxYNzev2crZbzQu75BxkqLgHnUzAW1PsxN", 1]]}, "active": {"weight_threshold": 1, "account_auths": [], "key_auths": [["GLS5Kn2iM1QxErE7pVox2KbLCnNhsXH5YxEQH7MLYQkwTQxoD1815", 1]]}, "posting": {"weight_threshold": 1, "account_auths": [["oneplace", 1], ["oneplace.app", 1]], "key_auths": [["GLS5xccEAnr7jfcVRBXVu3rpxzZhYbZrZr98hf5Jfcdg2h5G6k3DA", 1]]}, "memo_key": "GLS5uyEx2vVWj2N92dTnALdbfxWpYv989j7zkqAFp9Z5aAwvt5cy6", "json_metadata": "{\"profile\":{\"profile_image\":\"https://pp.userapi.com/c639320/v639320337/4d7a8/yIGYsRgNg80.jpg\"}}", "proxy": "", "last_owner_update": "2017-12-11T06:40:06", "last_account_update": "2018-03-07T01:30:06", "created": "2017-12-10T14:23:42", "mined": false, "owner_challenged": false, "active_challenged": false, "last_owner_proved": "1970-01-01T00:00:00", "last_active_proved": "1970-01-01T00:00:00", "recovery_account": "golosio", "last_account_recovery": "1970-01-01T00:00:00", "reset_account": "null", "comment_count": 0, "lifetime_vote_count": 0, "post_count": 43, "can_vote": true, "voting_power": 9950, "last_vote_time": "2018-03-09T14:53:33", "balance": "0.000 GOLOS", "savings_balance": "0.000 GOLOS", "sbd_balance": "0.003 GBG", "sbd_seconds": "263711112", "sbd_seconds_last_update": "2018-02-25T10:53:06", "sbd_last_interest_payment": "2018-02-16T08:26:15", "savings_sbd_balance": "0.000 GBG", "savings_sbd_seconds": "0", "savings_sbd_seconds_last_update": "1970-01-01T00:00:00", "savings_sbd_last_interest_payment": "1970-01-01T00:00:00", "savings_withdraw_requests": 0, "vesting_shares": "33695.433055 GESTS", "vesting_withdraw_rate": "0.000000 GESTS", "next_vesting_withdrawal": "1969-12-31T23:59:59", "withdrawn": 0, "to_withdraw": 0, "withdraw_routes": 0, "curation_rewards": 0, "posting_rewards": 2760, "proxied_vsf_votes": [0, 0, 0, 0, 0, 0, 0, 0], "witnesses_voted_for": 0, "average_bandwidth": 176086036, "lifetime_bandwidth": "81524000000", "last_bandwidth_update": "2018-03-09T14:53:33", "average_market_bandwidth": 127998532, "last_market_bandwidth_update": "2018-02-21T00:11:30", "last_post": "2018-03-07T02:06:51", "last_root_post": "2018-02-16T02:36:54", "post_bandwidth": 11722, "new_average_bandwidth": "7672068101", "new_average_market_bandwidth": 3890098718, "vesting_balance": "0.000 GOLOS", "reputation": "439345795585", "transfer_history": [], "market_history": [], "post_history": [], "vote_history": [], "other_history": [], "witness_votes": [], "tags_usage": [], "guest_bloggers": [], "blog_category": {}}}], "tags": []}
+    }
   }
 
   function getTagWithOrder(userId) {