Steemblr development update 07 - New sharing options, filtering content, gif category

Steemblr is open source microblogging platform powered by steem blockchain . It allows user to post and explore content which is smaller than a traditional blog.

You can check developer version here: https://steemblr.com

Repository

https://github.com/snwolak/steemblr

New Features

Post link

For easier content share there was added possibility to generate permalink and load single post. Permalink will get you to blog of the user with only one specific post loaded.
Also there was added "Posts" link in blog view to load every posts in a post-permalinked blog. To generate link click on dots icon in post.

It was implemented by using material-ui for dropdown menu and redux for storing single post loaded from firebase.

#1#2

Saving settings, filtering adult content

Added saving and loading settings from database, and first working option which is possibility to choose showing or hiding NSFW content, it is in safe mode by default both when user is logged in and not logged in.

Implementation of this feature was similar to implementation of theme editor, it was achived by using firebase, redux actions and reducers for every possible part of development I could come up with.

#1

Gif category

This feature adds changing post type accordingly to file type when user is creating new photo type post.
It was implemented by using plain JS, just detecting file type and changing post type accordingly.

#1

Pagination from db

Fully working pagination in every view on the website. To make it work, first time when view is loading posts action is calling for newest post in database to get timestamp from it. When user is loading more post timestamp is taken from redux store from last post loaded in view.

#1 #2

Logo implementation

Added new react component with logo which was made by @amirdesaingrafis thanks to utopian task request. It is now used in header, intro page and as loading indication when react-loadable is doing its stuff.

It was implemented by using styled components and simple but effective css for color animation.

@keyframes colorChange {
    0% {
      filter: hue-rotate(0deg);
    }
    100% {
      filter: hue-rotate(360deg);
    }
  }

#1

Github Account

https://github.com/snwolak