Medium on Website

📕 The simplest and most customizable way to show Medium blog posts on your website (and that's responsive)

Medium.com does not have a quick way to have your stories on your personal website... BUT it gives you a rss feed.
This means that your stories can be retrieved, parsed and restyled as you want.

Fortunately medium-on-website solves the problem in a quick way.

Table of contents

• How to use
  • Set your rss2json account
  • Change the API_URL
  • Load the script in the HTML file
• Customization
  • Themes
  • Templates
• Expand
  • Add new themes
  • Add new templates
• TODO

How to use

It's so simple that you just need 3 steps:

• Set your rss2json account
• Change the API_URL in medium-on-website.js
• Load the script in the HTML file

Set your rss2json account

• Sign up to rss2json, then add your Medium rss link link in /me/feeds/ page. For example, mine is https://medium.com/feed/@giacintocarlucci.

• Click on the little eye icon on the right and copy your API_URL.

Extra: you will have 10.000 requests per day with the free plan (which is a ton), but if you want to prevent unhautorized use you can add restriction within IP addresses or HTTP referrers in /me/api_key/ page.

Change the API_URL

• Open the medium-on-website.js file and change the API_URL const with the one you just copied at the previous step.

Load the script in the HTML file

If you are building the page from scratch, you can just use the index.html example file as starting point.
If you want to add Medium blog posts in an existing page, you will at least need to:

• import the stylesheet and script in head section:

<link rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="./medium-on-website.js"></script>

• have one div in the body section with 'posts' id:

<div id="posts"></div>

If you want, you can import Google fonts used in the stylesheet (or change them):

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Palanquin:wght@700&family=Roboto&display=swap" rel="stylesheet"> 

Customization

Themes

To change the post theme, just use the data-theme attribute in the main div of the index.html file.
You can choose beween the following themes:

theme	background	text	border	link
light
dark
batman

Templates

To change the post layout, you can use the provided templates using the data-template attribute in the main div of the index.html file
The available templates are the following:

• classic
• compact
• mini

Expand

Add new Themes

As the css file is very intuitive, you can easily add your themes:

/* light mode */
:root {
  --color-primary: #000000;
  --color-background: #ffffff;
  --color-border: #dddddd;
  --color-link: #0373b7;
}

/* dark mode */
[data-theme="dark"] {
  --color-primary: #eeeeee;
  --color-background: #292929;
  --color-border: #555555;
  --color-link: #46a7e1;
}

/* your custom theme */
[data-theme="custom"] {
  --color-primary: ???;
  --color-background: ???;
  --color-border: ???;
  --color-link: ???;
}

Add new Templates

If you want to create your custom template just take in example one of the current templates and adjust the code accordingly, every template is an arrow function that returns an html string + the info passed with postData parameter:

const getClassicPost = (postData) => {
  let template = 
  `
    <div id="post-container">
      <div id="post-header">
        <div id="post-author-image">
          <img src="${postData.authorImage}" alt="${postData.authorName}"/>
        </div>
        <div id="post-author-info">
          <div id="post-author">
            ${postData.authorName}
          </div>
          <div id="post-date">
            ${formatDate(postData.postDate)}
          </div>
        </div>
      </div>
      <img id="post-image" src="${postData.postImage}" alt="${postData.postTitle}"/>
      <div id="post-title">
        ${postData.postTitle}
      </div>
      <div id="post-content">
        ${trimContent(postData.postDescription)}...
        <p id="post-link">
          <a href="${postData.postLink}"> Continue reading... </a>
        </p>
      </div>
    </div>
  `
  return template;
}

Do not forget to add the new template name to the switch case in displayPosts function:

/*...*/
switch(postTemplate){
      case "classic":
        HTMLPost = getClassicPost(postData)
        break;
      case "compact":
        HTMLPost = getCompactPost(postData)
        break;
      case "custom":
        /* calling your custom template function*/
        HTMLPost = getCustomPost(postData)
        break;
      default:
        HTMLPost = getClassicPost(postData)
    }
/*...*/

TODO

• 💪 more robust api calls
• 🌗 light/dark theme
• 🦇 batman theme
• 👌 compact layout
• 🤏 mini layout

icons by Icons8