Home

Awesome

<h1 align='center'>Material UI Medium Blog</h1> <p align="center"> Aim of this Project is embed Medium as a blog on your React website with an active status badge (green badge) for a time period . </p> <img alt="UI" src="./docs/post-active-hours.png" align='center'/> <img alt="UI" src="./docs/post-non-active-hours.png" align='center'/> <p align="center"> <a href="https://github.com/sabesansathananthan/material-ui-medium-blog/blob/master/.github/LICENSE"> <img alt="licence" src="https://img.shields.io/github/license/sabesansathananthan/material-ui-medium-blog" /> </a><a href="https://github.com/sabesansathananthan/material-ui-medium-blog"> <img alt="GitHub package.json version" src="https://img.shields.io/github/package-json/v/sabesansathananthan/material-ui-medium-blog" /> </a><a href="https://github.com/sabesansathananthan/material-ui-medium-blog"> <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/sabesansathananthan/material-ui-medium-blog?color=ff69b4" /> </a><a href="https://twitter.com/intent/tweet?text=Wow,%20I%20used%20material-ui-medium-blog.%20That%20is%20excellent.%20Thank%20you%20@TheSabesan"> <img alt="Twitter URL" src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Ftwitter.com%2FTheSabesan" /> </a> </p>

🛠️ Built with

Installation

To setup the app for development on your local machine, please follow the instructions below:

  1. Clone the repo to your machine

    git clone https://github.com/sabesansathananthan/material-ui-medium-blog.git
cd material-ui-medium-blog

  2. Install packages

    If you use npm

    npm install

    or

    If you use yarn

    yarn

  3. Change username

    Use your Medium username👤 instead of @Sabesan96. in Slider.js

    mediumURL = "https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@Sabesan96";

  4. Change active hours Active hours set as morning 5.00 am to night 8.00 pm. You could change the active hours in PostCard.js. If your time zone is not Indian Standard Time IST Change the ISTOffset value.<br> Calculation for Finding Offset <br> For me it is IST. Therefore, +5:30. <br> Offset = +5 x 60 + 30

    const ISTOffset = 330; // IST offset UTC +5:30 đź• 
const isOnline = ISTTime.getHours() >= 5 && ISTTime.getHours() <= 20;

  5. Run the development server

    If you use npm

    npm start

    or

    If you use yarn

    yarn start

  6. Visit http://localhost:3000

How does the category tag work?

How can we choose a particular category tag among a medium post’s 5 category tags?

I proposed a method for that. In a particular medium post which category tag was tagged the highest time in last 10 medium posts is suitable for that post.

Live Demo

Don't forget to give a star :star: for this repo :slightly_smiling_face:

<img alt='Article' height='25px' src ="https://raw.githubusercontent.com/matiassingers/awesome-readme/master/icon.png"/> Related Article

Embed Medium as a blog on your React Website — Part 2 - Sabesan Sathananthan

Similar Projects

đź“„ License

This project is licensed under the MIT License - see the LICENSE file for details