GitHub Include - show links to pages and latest commits

This is a small script that allows you to show your GitHub repos in a styled fashion showing the latest commits and a link to GitHub Pages. It is written in Vanilla JavaScript, uses the GitHub API and allorigins.win to get around the CORS issues.

All you need to use it, is include the script in your page:

    <script src="github-include.js"></script>

You can use plain HTML and style it yourself, or use a web component with a dark/light mode.

Plain HTML Demo

HTML Source

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

Plain HTML result (unstyled/page style)

Mastodon Share

Web Component Demo #1

Web Component Source #1

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

Web Component Result #1

Mastodon Share

Web Component Demo #2

Web Component Source #2

<github-include 
    commits="10" loadingmessage="fetching data" 
    commitheader="Actions:" pages="See online">
    <a href="https://github.com/codepo8/a11y-demos">
      Accessibility demos
    </a>
</github-include>

Web Component Result #2

Accessibility demos

Customisation options

Attributes

Each of these attributes can be set and overridden. When using the web component, they are the names as listed. In the HTML case, you need to prepend them with `data-`

commits: Show the last x commits to the repository, f.e. `5`, set to `-1` to show all.
links: If set to `true`, the commit messages will be links to the commits.
pages: If set to a certain text, it will create a link to the GitHub Pages of the project with the text you provide
commitheader: Text to show before the commit messages - preset is `Latest commits:`
loadingmessage: Text to show whilst loading commit messages - preset is `loading…`

Generated HTML

When the script runs, it will generate the following HTML:

<div class="github-include" data-commits="5" data-pages="🌍" data-links="true">
    <a href="https://github.com/codepo8/mastodon-share"
       class="github-include-origin">
        Mastodon Share
    </a>
    <a class="github-include-pages" 
    href="https://codepo8.github.io/mastodon-share/">🌍</a>
    <p class="github-include-commitheader">Latest commits: </p>
    <ul class="github-include-commits">
        <li>
            <a href="https://github … 4065">cleanup</a>
        </li>
        …
    </ul>
</div>