Usage
Initialize a feed:
var mediumFeed = new MediumFeed();
mediumFeed.useProxy = true; //Optionally enable a CORS proxy for local development
var mediumFeed = new MediumFeed({useProxy: true}); //Enables a CORS proxy for localhost development via options object
Get articles:
mediumFeed.getUserFeed("caden"); //Pass username of the feed you want
mediumFeed.getTopicFeed("technology"); //Pass topic (see: https://medium.com/topics)
mediumFeed.getTagFeed("reactjs"); //Pass a specific tagAsynchronous:
function alertCount(articles){alert(articles.length)} // function to print # of articles returned
mediumFeed.getUserFeed("caden", alertCount); //Pass a callback as second paramMediumArticle:
The MediumFeed functions return arrays of "MediumArticle" objects which contain the following (if available):class MediumArticle {
title //String
link //String
creator //String
pubDate //Date
content //String
categories //Array of Strings
img // Article image
}Demo & Final Notes
Please note: medium-feed makes no assumptions on your styling and therefore only returns what the Medium api gives us. This gives you unlimited freedom to how you display or integrate articles from any Medium source. However... Medium does return some articles with styling. You can attempt to override their styles using the following css attributes but there is no guarantee that these will be stable or will not change in the future.
/* the containing div for medium-feed-snippet & medium-feed-link */
.medium-feed-item{}
/* the image (often feature image) */
.medium-feed-image{}
/* the snippet text of the article */
.medium-feed-snippet{}
/* a link to continue reading on Medium */
.medium-feed-link{}
Some final notes: getUserFeed() returns more 'content' (potentially the full article)
than topics/tags, and returns HTML without the Medium css mentioned above.
I recommend truncating the returned content if you just want a 'snippet', and applying your own HTML-element based css as needed.
Below is the topic feed for 'technology' rendered with simple styling.
