Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sabesansathananthan/material-ui-medium-blog
React blog page which consists of the last ten medium posts. The blog card is created using Material-UI and React application.
https://github.com/sabesansathananthan/material-ui-medium-blog
material-ui medium react reactjs
Last synced: 2 months ago
JSON representation
React blog page which consists of the last ten medium posts. The blog card is created using Material-UI and React application.
- Host: GitHub
- URL: https://github.com/sabesansathananthan/material-ui-medium-blog
- Owner: sabesansathananthan
- Created: 2020-09-23T22:33:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-05-15T17:38:25.000Z (over 2 years ago)
- Last Synced: 2024-08-05T01:11:17.092Z (6 months ago)
- Topics: material-ui, medium, react, reactjs
- Language: JavaScript
- Homepage: https://material-ui-medium-blog.vercel.app
- Size: 20.4 MB
- Stars: 14
- Watchers: 2
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Code of conduct: docs/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- awesome-material-ui - Material-UI Medium Blog - Extended Material-UI Card component to show the Medium blogs. (Components)
README
Material UI Medium Blog
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 .
## 🛠️ Built with
- [React JS](https://reactjs.org/) - Front-End JavaScript library
- [Material UI](https://material-ui.com/) - React UI Framework
## Installation
To setup the app for development on your local machine, please follow the instructions below:
1. Clone the repo to your machine
```bash
git clone https://github.com/sabesansathananthan/material-ui-medium-blog.git
cd material-ui-medium-blog
```
2. Install packages
If you use `npm`
```bash
npm install
```
or
If you use `yarn`
```bash
yarn
```
3. Change username
Use your Medium username👤 instead of `@Sabesan96`. in [Slider.js](./src/components/Slider.js)
```JavaScript
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](./src/Components/PostCard.js). If your time zone is not Indian Standard Time IST Change the ISTOffset value.
Calculation for Finding Offset
For me it is IST. Therefore, +5:30.
Offset = +5 x 60 + 30
```JavaScript
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`
```bash
npm start
```
or
If you use `yarn`
```bash
yarn start
```
6. Visit
## 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](https://material-ui-medium-blog.vercel.app/)
Don't forget to give a star :star: for this repo :slightly_smiling_face:
## 
Related Article
[Embed Medium as a blog on your React Website — Part 2](https://medium.com/datadriveninvestor/embed-medium-as-a-blog-on-your-react-website-part-2-187db2b60a59) - _Sabesan Sathananthan_
## Similar Projects
- [React-Medium-Blog](https://github.com/sabesansathananthan/React-Medium-Blog)
- [React-Dev.to-Blog](https://github.com/sabesansathananthan/react-dev.to-blog)
- [react-medium-blog-v2](https://github.com/sabesansathananthan/react-medium-blog-v2)
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](./.github/LICENSE) file for details