GitHub is the place code lives. You’re making your updates there, and in terms of frontend paintings, you’ll be able to even host it in GitHub pages.

After I put up one thing, I write a weblog publish and incessantly I put one of the crucial code within the publish. When comments is available in about new options I replace the code after which I dread to additionally replace the weblog publish. So, as a substitute, I sought after to have the option to provide a hyperlink to the GitHub repo that presentations the principle hyperlink, a hyperlink to the GitHub pages, and display the most recent commits. This permits other folks to peer what modified within the code with out me converting the publish.

To make this occur, I wrote github-include, a internet element that lets you upload a hyperlink to a repo on your weblog publish. It then converts it to a card appearing the principle repo hyperlink, a hyperlink to the GitHub Pages demo and the ultimate x commits.

As an example, the next HTML code will get transformed to the cardboard proven as a picture right here:

<github-include commits="5" pages="&#x1f30d;" hyperlinks="true">
    <a href="https://github.com/codepo8/mastodon-share">
       Mastodon Percentage
   </a>
</github-include>

Via default, it detects the surroundings of your OS and shows both as a depressing or a gentle theme. In case you don’t need any styling in any respect, you’ll be able to additionally use undeniable HTML as a substitute of the internet element:

<div magnificence="github-include" 
     data-commits="5"
     data-pages="&#x1f30d;" 
     data-links="true">
  <a href="https://github.com/codepo8/mastodon-share">
  Mastodon Percentage
  </a>
</div>

You’ll see it in motion at the demo web page .

You’ll customize all of the capability and labels of the element the usage of attributes. Those are all documented within the README .