Embed A Medium Feed On Your Site – medium-widget

A Medium widget that allows you to display the latest articles from any Medium.com writer on your site.

How to use it:

1. Download and load the medium-blogpost-widget.js JavaScript file in the document.

<script src="./src/medium-blogpost-widget.js"></script>

2. Add the <medium-blogpost /> component to the page and replace the default Medium username as follows:

<medium-blogpost username="ashley-richmond"></medium-blogpost>

3. Overrride the default styles of the Medium widget.

.medium-blogpost {
  width: 300px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(131, 131, 131, 0.2);
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS",
    sans-serif;
  border-radius: 8px;
}
.medium-blogpost-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid rgba(131, 131, 131, 0.2);
}
.medium-blogpost-author-img img {
  width: 80px;
  border-radius: 50%;
  margin: 10px;
}
.medium-blogpost-author-info h3 {
  margin: 0;
  font-size: 20px;
}
.medium-blogpost-author-info p {
  margin: 0;
  font-size: 12px;
  color: rgba(68, 68, 68, 0.8);
}
.medium-blogpost-articles {
  display: flex;
  flex-direction: column;
  max-height: 300px;
  overflow: auto;
}
a {
  text-decoration: none;
}
.medium-blogpost-single-article {
  padding: 10px;
  color: black;
  border-bottom: 1px solid rgba(131, 131, 131, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
  color: white;
}
.medium-blogpost-single-article h3 {
  margin: 0;
}
.medium-blogpost-single-article p {
  margin: 0;
  margin-top: 5px;
  font-size: 12px;
}
.medium-follow-button {
  margin-top: 5px;
  border: none;
  outline: none;
  /* padding: 5px 10px; */
  background: none;
  color: rgba(3, 168, 124, 1);
  /* border: 2px solid; */
  border: solid rgba(3, 168, 124, 1) 1px;
  border-radius: 4px;
  cursor:pointer;
}