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
New section where user can customize his blog. Styles changed in editor are applied to blog modal, profile hover and main blog view.
Editor can be accessed in settings in customize section.
When user is logging in for the first time application creates default blog style for him with data imported from steem api.
Changes made in editor won't affect how user account look like on steemit and other front-ends.
It was implemented by using redux, and firebase firestore. Editor is loading blog layout from database or redux store when it was already loaded.
To view changes in real time, editor is modyfing layout loaded in redux and then blog view is loading new props from store.
Blog title and description
This feature will change your blog title and description.
At the first login title and description are imported from json_metadata. Changing title and description in editor won't change your metadata on steem account, only in steemblr database.
Input changes are dispatched to redux store so components can get new props, and can be seen live.
Changing header image, again it is imported in metadata and changing it in editor won't change your cover image on steemit.
Header is uploaded to firebase storage and link is stored in redux store.
This features lets user change shape of his avatar, user can choose between circle and square shape.
Avatar border radius is changed accordingly to shape name.
Gives user control over which font are used to display blog title. User can choose between one hundred different web pgoogle fonts.
It was implemented by using font-picker-react dependency. With font-picker-react font can be choosen dynamically then props are send to redux and styled-components gets font family, category and url to load choosen font.
Background, title, description color change
This feature lets user change appearance background and title/description elements.
This feature uses react-color for color picker, when color is choosen then app dispatches data to redux store and components are updated.
Hiding blog elements
User can hide elements like header, avatar, title and description. Hiding works in main blog view and blog modal, for now apart from hiding avatar it doesn't work in profile hover.
It was implemented by using checkbox and sending boolean values about which components should be shown in blog views.
Updated blog views
Components responsible for showing profile hover, blog modal and main blog view are now loading custom styles made in theme editor.
It was achived by using prop feature in styled-components. Components are getting styles from database/redux store and loading them into styled-components.