github-corners

Github Corners embed script inspired by Tim Holman.

Examples

• JSFiddle
• Replit

Usage

Include the embed script on your webpage:

<!-- insert before `</body>` -->
<script src="https://unpkg.com/github-corners/dist/embed.min.js"></script>

Specify a version to prevent breaking changes:

<!-- replace `latest` with a version like `0.1.0` -->
<script src="https://unpkg.com/github-corners@latest/dist/embed.min.js"></script>

Improve page loading with async or defer attribute:

<script
  async
  defer
  src="https://unpkg.com/github-corners/dist/embed.min.js"
></script>

FAQ

The GitHub Corner renders on your page. Great! But how do I specify a link?

Set it with the data-href attribute:

<script
  data-href="https://github.com/remarkablemark/github-corners"
  src="https://unpkg.com/github-corners/dist/embed.min.js"
></script>

What if I want the link to open in a new tab?

Set data-target to _blank:

<script
  data-href="https://github.com/remarkablemark/github-corners"
  data-target="_blank"
  src="https://unpkg.com/github-corners/dist/embed.min.js"
></script>

Can I change the aria-label of the link?

Yes, the data-label value will override the default value:

<script
  data-label="Check out the GitHub Corners repository!"
  data-href="https://github.com/remarkablemark/github-corners"
  src="https://unpkg.com/github-corners/dist/embed.min.js"
></script>

What if I want to change the color or position of the corner?

You can always override the default styling of the svg:

<!-- insert after embed script -->
<style>
  .github-corner > svg {
    fill: skyblue;
  }
</style>

License

MIT

See license/acknowledgements from original project.