Adding GitHub repository info, pages links and latest commits to any page using github-includeTuesday, 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 .