Tiny website for steem based projects in only html, css, Js and react.

@hispeedimagins · 2018-09-17 10:12 · utopian-io

Repository

https://github.com/hispeedimagins/comstuff

Introduction

This project is in reality is made for @comedyopenmic as they wanted a slim version in the starting. It is lightweight, quick and uses only html, Js , css and react. But I realized it can be leveraged easily for all the other projects if they want a slim version too. It will lack a lot of features but it will be easy on the pocket to host, slightly. Less complex, anyone can edit and use it for their purpose. You can throw in your own theme as well. Most of the work is done already.

Post Body

Imagine you are new to steem. You get a nice idea, maybe if I do this and start my own tag about xyz. Without dev experience it is difficult for most people. This is where this lightweight source will help, where you just swap it for your tag and done. Your proof of concept starts right away.

var query = { "tag": "comedyopenmic", "limit": "20" };

You swap comedyopenmic for your tag in the myjs file.

https://comedyopenmic.azurewebsites.net

Currently hosted here. You can host it to GitHub pages as well, but it might go against their policy.

Images

Screenshot_2018-09-17 ComedyOpenMic Welcome.png

Site opening

Screenshot_2018-09-17 ComedyOpenMic Welcome(1).png

Content loaded

Screenshot_2018-09-17 ComedyOpenMic Welcome(2).png

Trending and new Screenshot_2018-09-17 ComedyOpenMic Welcome(3).png

Article opened

Screenshot_2018-09-17 ComedyOpenMic Welcome(4).png

Comments from the article (Slightly buggy atm)

Screenshot_2018-09-17 ComedyOpenMic Welcome(5).png

Hot articles

Why no server side code?

It reduces the amount of code and the complexity. Most normal people know some amount of html and js to edit it and make it work for themselves. The server only serves the static pages. Some features will be missing, like sharing of saved drafts across devices, no packaging of multiple js files via the server and other things.

What can it do?
  1. Create your custom homepage.
  2. It will order content according to the tag your service focuses on. Like for comedyopenmic it is comedyopenmic duh.
  3. It fetches 3 categories, hot, new and trending.
  4. You can view an article and its comments.
  5. It uses the same code condenser uses, almost the same.
  6. It uses react components, so swap away.
  7. Uses an open source theme for now, a lot of my own css as well. No dependence on yuuuuuuuuge libraries.
  8. This is just to see if you are actually reading them hehe.
What will be added soon
  1. Profile page
  2. More react components
  3. Login via posting key or steemconnect (MIght take some time.)
  4. Post, comment, un/follow actions, all via the steemjs official library
  5. PWA
  6. Share articles/profiles/comments to other websites.

Maybe more stuff need be.

Contributing

Css, Html and other stuff is the simple stuff. For making changes to react though, you will have first setup nodejs then install babel. Download or fork the source, go to the folder and you will have to type this command in a command prompt

npx babel --watch src --out-dir js --presets react-app/prod

Keep the command window open and edit away, it will automatically convert it to the js file. The React code might seem icky to you, I was and am still learning react so if you have a better way please post a pr, I can learn from it too. I use visual studio code, you can use whatever you like.

Contact me

gmail - hispeedimagins@gmail.com discord - hispeedimagins#6619

Don't like this project? Sound off in the comments. Feature request? put them in the comments.

UpVote|Comment|Resteem -|-|-|

#utopian-io #blog #comedyopenmic #development
Payout: 0.000 HBD
Votes: 27
More interactions (upvote, reblog, reply) coming soon.