Finally Comments - New Site and Library Fixes

https://Finallycomments.com

Repository

https://github.com/code-with-sam/finallycomments/
https://github.com/code-with-sam/npm-finallycomments/

Finally Comments is an embeddable comments system powered by the STEEM blockchain. The aim of this project is to promote the STEEM ecosystem by breaking the comments system out of the walls of STEEM based apps replacing popular comments systems like Disqus & Facebook comments plugin. Comment threads can be created from scratch or can use any existing STEEM comments thread.

---

I’m pleased to Finally 😉 bring you another update to FinallyComments. I’ve been working on a new user-facing website to help give extra information and better explain Finally Comments. While there are still many improvements to make I feel it’s important to keep up momentum and share the latest progress with you.

New Features

New https://finallycomments.com website. Take a quick look and let me know what you think.

The old version used many https://bulma.io/ defaults made as a quick MVP. I opted to create a new primary brand colour for finally a darker Navy Blue instead of the default Bulma Cyan. The site is not set in one of my all-time favourite fonts Brandon Grotesque. My hope is to do a 2nd pass at the site and add more iconography and animations but these extra details were starting to drag out.

Old Landing Page

The previous site was a single landing page separated into 4 sections. The new site has a similar landing page but with 4 additional pages/views.

New Site

---

New Brand Colours

---

Landing Page
Information and layout on the landing page is mostly unchanged now just with some extra details and new styles. Brief intro, directions on where to go to get stated, latest news/blog post and the finally embed example it'self.

About

The about page aims to answer many of the questions I get asked repeatedly. It serves as a place to learn about what Finally is without having to go back through ten update blog posts. The FAQ will likely be expanded in future.

Get Started

Brief introduction/ examples of the HTML embed and Javascript library. Towards the end of the page there is a list of examples where finally has been used. So far these are only my example but users are welcome to submit their sites to have them listed.

News - Single

The news page now links blog posts that are pulled from the STEEM blockchain and loaded on the Finally site rather than redirecting to steemit.

While it might seem a little unnecessary loading the Finallycomments posts directly rather thank linking externally it A) keeps people on site and B) allows me to showcase the Finally embed itself. A perfect use case if you're creating a STEEM based project or have a STEEM presence but also have an external site/presence.

So while it might seem a tad meta you can now see an example of Finally on any of the single blog posts on the Finally site e.g https://finallycomments.com/post/finally-comments-api-and-new-dashboard-features

Below is an example using code from the finallycomments.com site of how quickly you can create your own interface to STEEM data using the steem-js and finallycomments. With only two functions (+ the necessary libraries) you have post data and a functioning comments system. 👏

initSinglePost = async () => {
  let permlink = $('main').data('permlink')
  let postData = await steem.api.getContentAsync('sambillingham', permlink)
  app.appendSingePostContent(postData)
  finallycomments.init()
  let options = {
    values: true,
    reputation: true,
    profile: false
  }
  finallycomments.appendTo('.single-post__finally-comments', 'steem', permlink, 'sambillingham', options)
}

appendSingePostContent = (post) => {
  let converter = new showdown.Converter();
  let html = purify.sanitize(converter.makeHtml(post.body))
  let template = `<h1>${post.title}</h1>${html}`
  $('.single-post__content').append(template)
}

---

Parcel JS

The Finally site is now bundled with Parcel all dependencies are wrapped up rather thank linking to multiple external CDNs. We're one step closer to breaking apart the Finally thread logic into more manageable chunks (which it desperately needs). The Finally site now makes use of the Finally package for it's embed examples.

Library Update

The NPM library has also been updated to replicate the old library functionality. The library now includes a function to autoload any embed code it may find on the page.

Feedback

Thank you for all of the recent feedback and encouragement for Finally. I'm always open to hearing your thoughts and ideas about what needs to be done or what direction this project should go in.

Fixes

Smaller bug fixes for both the NPM library and

NPM Finally - incorrect urlparts vs urlparam. Mismatch of function name was causing the appendTo function to throw errors for missing data.
NPM Finally - post-message not recognised without correct message property. A missing object property for settings was causing the iframe embed to ignore the message which passes settings.
Finally - #20 - Total comments now include Guest comments + Steem blockchain comments.

Github
https://github.com/code-with-sam/finallycomments/pull/30
https://github.com/code-with-sam/finallycomments/pull/31 - Main Site Update
https://github.com/code-with-sam/finallycomments/pull/32

https://github.com/code-with-sam/npm-finallycomments/pull/3
https://github.com/code-with-sam/npm-finallycomments/pull/4
https://github.com/code-with-sam/npm-finallycomments/pull/5