Github Corners embed script inspired by Tim Holman.
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>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>See license/acknowledgements from original project.