Actifit.io Website Updates

Repository

https://github.com/actifit/actifit-landingpage

Introduction

This post represents another update to the work being done on Actifit official website & web solution, actifit.io. Part of this update involved adding support for display of Steem posts on single page, compared to old approach of popup mode, supporting capability of displaying any Steem post, initiating work on user profile, supporting refunding exchange transactions, as well as adding telegram and Actifit whitepaper to the website.

Technology Stack

The website is built using Vue.js.

Work Done:

Commits List:

Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit
Commit

Single Post Separate View

Actifit website supported till now a single view for activity report, popup mode. We wanted to provide more flexibility to users, but also improve on our SEO, via introducing support for single post display based upon post url.
For this purpose, we implemented support to display single view images, via a URL structure that matches any of the following:
https://actifit.io/@user/post-url
https://actifit.io/user/post-url
https://actifit.io/tag/@user/post-url
The latter of which actually redirects to the first one.

We wanted actifit site to support usernames with both @ and no @ signs, as initially our username structure did not follow the @ sign, but also that @ sign structure in URLs is not much of a standard.

To accomplish the above, we relied on params for the URLs, by creating new folder structures to support those urls. So we created the following new folder structures

and then setup proper redirection from the 3rd type to take back to our single post implementation

this.$router.push({ path: "/"+this.$route.params.username+"/"+this.$route.params.permlink })

this below is an example of a rendered post

We implemented a full functionality in terms of upvoting and commenting, so as the user experience is complete.

User Profile Page

Following the folder structure and changes above, we initiated the work on a full user page, to contain different types of info pertaining Actifit & Steem users.

As of now, the user profile page is still under progress, and contains basic info, including user profile image, username, number of actifit activit reports, user rank, as well as a link to activity page

Implement Default Moderator Comment Signature

As we increased our moderators and our moderation activity on actifit reports, we found it much easier to proceed with implementing a standard template for moderators, which would display by default as a signature to their comments.

For this purpose, we setup a global moderator signature, under nuxt.config.js, which would then be accessile via the different pages/templates that support our comment system. In case the user is part of the moderation team, the signature will auto-show for them in the comments.

Refunded Transactions Display

We added support for the display of new type of exchange transactions "refunded", whereby users who passed 14 days without a proper actifit post were actually refunded their AFIT tokens used . This info relied on data newly introduced via the API/transactions, whereby the status of the transaction was adjusted to be refunded if it matches conditions above.

Various Additional Changes/Fixes

We implemented the following additional changes:

• We switched current busy.org urls on actifit.io to actually use actifit.io instead.

• We had to roll back some of the changes we had made once integrating the new markdown editor, as unfortunately it faced troubles with some HTML+markdown support, hence we restored some of the regex work we had removed before.

• We added a link to our new telegram channel.

• We added a link to our official whitepaper

Roadmap

Further continuous improvements will be done on the actifit website, including a potential revamp of the main page content, adding some additional content pages, a complete fitness profile page, more user rank screens...

How to contribute?

You can chat to us on the official actifit discord, or to me in discord private @mcfarhat#6013.
Contributions are accepted as pull requests to the official github repo.
We are having continuous tasks assigned to different contributors to our project. More official tasks are continuously announced :)

GitHub Account

https://github.com/mcfarhat