Monday, December 5, 2022
HomeSoftware EngineeringEmbed Medium as a weblog in your React Web site — Half...

Embed Medium as a weblog in your React Web site — Half 2 | by Sabesan Sathananthan


Embed Medium in your Web site utilizing Materials-UI offers higher UI

Photograph by Aron Visuals on Unsplash

I’ve already carried out Medium as a weblog on my web site. Earlier than I used shards-react. I’ve talked about that methodology in my twenty sixth article. However I prefer to make it higher. I preferred that consumer interface however not happy. So I thought of utilizing Materials-UI for higher consumer expertise. Right here I’m going to elucidate carried out it in pure JavaScript and React Js. Right here you possibly can see the reside demo of this react utility. That is my thirty second Medium article.

I’ve already launched React and Medium in my earlier articles. For those who’ve missed, click on these hyperlinks and browse them. I like to indicate my energetic hours on my weblog web page with a inexperienced badge. I prefer to migrate my weblog elements from Shards-React to Materials-UI. As a result of Materials-UI Elements are trying engaging and simple to deal with. Then I assumed, why can’t I implement that in my weblog web page. Now I completed that and have a repo in GitHub. On this article, I’m going to say the best way to begin from scratch.

First, it’s good to create a react utility. For that run the next command in your shell/terminal in a selected folder (e.g., desktop )

npx create-react-app medium-post

A brand new folder will probably be created, and it is going to be named as a medium-post. From this step, our utility is bootstrapped with Create React App. For extra data, click on the hyperlink. Then open that mission in your IDE. I’m personally utilizing the VS Code IDE.

Create React App file group

It is advisable to delete some information and set up the information for the event after you open the folder in your IDE. Subsequently it’s good to go to the src folder and delete Emblem.svg, App.css, index.css, and App.take a look at.js information. And create the next folders contained in the src folder named elements, property, helpers, and utils, then transfer your serviceWorker.js into the helper’s folder. App.js file into the Elements folder.

Now open the index.js file and delete the next snippet in index.js file.

import ‘./index.css’;

Then modify the App.js and serviceWorker.js information paths in index.js import like following.

import App from ‘./elements/App’;
import * as serviceWorker from ‘./helpers/serviceWorker’;

Go to the Elements folder and open the App.js. Delete the return a part of the App operate. Now your file group will probably be like under.

Set up Materials-UI for Materials Design kind element.

npm set up @material-ui/core --save

Set up Axios to make HTTP requests to the API.

npm set up axios --save

Word: Fetching JSON Knowledge might be achieved by the fetch API in JavaScript. Purpose for utilizing Axios Even outdated browsers like IE11 can run Axios with none concern. Fetch(), alternatively, solely helps Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you’ll be able to see the complete compatibly desk on Can I exploit…)

Set up react-fontawesome to show icons.

npm i @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome --save
Photograph by Christina Morillo from Pexels

Then create a brand new file named slider.js contained in the elements folder. Add the next code within the slider.js file.

Exchange your Medium consumer identify as a substitute of @Sabesan96 on line 13.

Then create the utils folder and create the Totext.js file contained in the utils folder. Add the next snippet within the Totext.js file.

Then create the ShortenText.js file contained in the utils folder and add the next snippet within the ShortenText.js file

Create PostCard.js file contained in the element folder and add the next snippet within the PostCard.js file.

Within the PostCard.js I achieved the energetic standing badge. In there I exploit the Date() operate to create an object in JavaScript with present date and time. And I conditionally render the element (line 140) in response to my get up time (5 am) and Bedtime (10 pm). Code part of line 110 – line133 is for date formatting.

Lastly, Render the Slider element in App.js, as proven under

UI in sleeping hours
UI in Energetic hours

Right here I’ve showcased 4 steps to embed Medium as a weblog in your React Web site. For those who use this, you gained’t spend cash to embed medium. Nevertheless, if you comply with these strategies, you can be unable to indicate your associated medium posts part in your weblog. You may clone the Repo from this hyperlink. If you will use this mission then Don’t neglect to offer a star⭐️ for this repo.

Joyful Coding 😊 !!!

Thanks for studying this far. For those who loved this publish, please share, remark, and press that 👏 a couple of instances (as much as 50 instances). . . Perhaps it is going to assist somebody.

Comply with me on Twitter and Medium if you happen to’re considering extra in-depth and informative write-ups like these sooner or later!



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments