Friday, August 12, 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

Picture by Aron Visuals on Unsplash

I’ve already applied 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 appreciated that person interface however not happy. So I considered utilizing Materials-UI for higher person expertise. Right here I’m going to elucidate applied it in pure JavaScript and React Js. Right here you would see the stay demo of this react utility. That is my thirty second Medium article.

I’ve already launched React and Medium in my earlier articles. Should you’ve missed, click on these hyperlinks and skim them. I like to indicate my lively 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 enticing and straightforward 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 find out how to begin from scratch.

First, it is advisable create a react utility. For that run the next command in your shell/terminal in a particular folder (e.g., desktop )

npx create-react-app medium-post

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

Create React App file group

It’s good to delete some recordsdata and manage the recordsdata for the event after you open the folder in your IDE. Due to this fact it is advisable go to the src folder and delete Brand.svg, App.css, index.css, and App.take a look at.js recordsdata. And create the next folders contained in the src folder named elements, belongings, 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 recordsdata 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 likely 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

Be aware: Fetching JSON Information could be achieved by way of the fetch API in JavaScript. Purpose for utilizing Axios Even outdated browsers like IE11 can run Axios with none situation. Fetch(), alternatively, solely helps Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+ (you possibly can see the total 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
Picture 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.

Change your Medium person title as an alternative 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 lively 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 keeping with 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 Lively hours

Right here I’ve showcased 4 steps to embed Medium as a weblog in your React Web site. Should you use this, you received’t spend cash to embed medium. Nevertheless, while you comply with these strategies, you’ll be unable to indicate your associated medium posts part in your weblog. You’ll be able to clone the Repo from this hyperlink. If you’re going to use this challenge then Don’t overlook to present a star⭐️ for this repo.

Comfortable Coding 😊 !!!

Thanks for studying this far. Should you loved this put up, please share, remark, and press that 👏 a number of occasions (as much as 50 occasions). . . Possibly it can assist somebody.

Observe me on Twitter and Medium should you’re all in favour of extra in-depth and informative write-ups like these sooner or later!



Please enter your comment!
Please enter your name here

Most Popular