Finally Comments - New Site and Library Fixes

in utopian-io •  5 months ago

steem-comments-new-colour.png

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-finally.png

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-finally.png

New Site


finally-colours.png

New Brand Colours


landing.png

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.png

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.png

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.png

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

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

I couldn’t sleep, so of course I’m here browsing Steemit at 6 AM... I must have sensed an update incoming! Excellent work as always!

·

Glad to have this post be part of your morning scrolling session. Thanks for the support Bryan 👊

Thank you for your contribution. Your contributions are always of a great quality.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

·

Thanks for looking over the update! 👊

You always inspire me to put some time in on websites of my own! So although I've got quite a bit more styling to do over the coming days, I just finished porting over one of my webcomics to a fresh WordPress site, with linked FinallyComments on every strip naturally! Take a look and if you'd like to add me to the examples list on the home site I'd be honored!

http://appetitefordistractioncomic.com

·

That is awesome to hear and the effect goes full circle. Seeing you and other users implementing Finally drives me to keep working on it.

I'll get your site listed on the example, thanks 👊

Hey @sambillingham
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Contributing on Utopian
Learn how to contribute on our website or by watching this tutorial on Youtube.

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!