Adding GitHub repository info, pages links and latest commits to any page using github-include

Tuesday, August 22nd, 2023 at 12:17 pm

GitHub is where code lives. You make your updates there, and in the case of frontend work, you can even host it in GitHub pages.

When I publish something, I write a blog post and often I put some of the code in the post. When feedback comes in about new features I update the code and then I dread to also update the blog post. So, instead, I wanted to find a way to offer a link to the GitHub repo that shows the main link, a link to the GitHub pages, and show the latest commits. This allows people to see what changed in the code without me changing the post.

To make this happen, I wrote github-include, a web component that allows you to add a link to a repo to your blog post. It then converts it to a card showing the main repo link, a link to the GitHub Pages demo and the last x commits.

For example, the following HTML code gets converted to the card shown as an image here:

<github-include commits="5" pages="🌍" links="true">
    <a href="https://github.com/codepo8/mastodon-share">
       Mastodon Share
   </a>
</github-include>

By default, it detects the setting of your OS and displays either as a dark or a light theme. If you don’t want any styling at all, you can also use plain HTML instead of the web component:

<div class="github-include" 
     data-commits="5"
     data-pages="🌍" 
     data-links="true">
  <a href="https://github.com/codepo8/mastodon-share">
  Mastodon Share
  </a>
</div>

You can see it in action on the demo page .

You can customise all the functionality and labels of the component using attributes. These are all documented in the README .