Steemblr development update 13 - parsing images in post; photo, audio & video links validation

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

Parsing images

Showing images and gifs instead of links in posts.

How does it work?

Every link(remarkable i'm using to parse markdown is making a links automatically) is parsed and checked with regexp to find out if its image or not.

/(https?:\/\/.*\.(?:png|jpg|gif|jpeg))/i;

If image is found, the tag is changed from a to img

transformTags: {
          a: function(tagName, attribs) {
            const re = /(https?:\/\/.*\.(?:png|jpg|gif|jpeg))/i;
            if (re.test(attribs.href)) {
              return {
                tagName: "img",
                attribs: {
                  src: attribs.href
                },
                text: ""
              };
            }
            return {
              tagName: "a",
              attribs: {
                href: attribs.href
              }
            };
          }
        }

To make it work I have used sanitize-html dependency and regex to test links.

#1 #2

Links validation

To prevent users from sending unsupported links and breaking stuff I have implemented functionality which checks if link is supported by app.

How does it work?

It is using regex to found out if link is supported or not, if not there is error as you can se above on the gif. Error is shown by using redux controlled interface I have made earlier.

Right now photo section is supporting: jpg,jpeg, png, gifs as direct links audio section: soundcloud and youtube links and video section only youtube links.

#1 #2 #3

Additional Changelog

• Beneficiary reward is now changed from 15% to 5%
• App is now reloading when user encounter error with steemconnect or db,
• Styling changes on post, updated font weight on headers and word wrap on links

Github Account

https://github.com/snwolak