github-corner-element

A web component for the corner banner of GitHub, inspired by Tim Holman's GitHub Corners.

Browser Compatibility

It's compatible with browsers which supports Web Component(including Custom elements, Shadow DOM and HTML Template). For modern browsers it should be fine, but old browser may not work. Check out the compatibility on Can I use website.

Installations

Use npm command to install pacakge:

npm install github-corner-element

Then import it directly in your app entry to register github-corner element:

// register `github-corner` element in the entry file
import 'github-corner-element'

Alternatively, you can load from UNPKG CDN as well:

<!-- latest version -->
<script src="https://unpkg.com/github-corner-element"></script>
<!-- specific version -->
<script src="https://unpkg.com/[email protected]"></script>
<!-- load in ES Module mode -->
<script type="module" src="https://unpkg.com/github-corner-element/dist/github-corner-element.es.js"></script>

Usage

After installation you can use it as well as a normal HTML element:

<github-corner href="https://github.com/YuskaWu/github-corner-element"></github-corner>

Attributes

In addition to the global attributes, you can also use the following additional attributes on github-corner element:

Attribute Name	Type	Default Value	Description
href	href attribute of anchor element	none	The URL of github page.
size	value of width CSS property	5rem	The width and height of github-corner element.
placement	'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'	'top-right'	The placement of github-corner element, it can be one of the four corners.
octocat-color	value of color CSS property	white	The color of the octocat.
banner-color	value of color CSS property	black	The color of the banner.
wave-duration	value of animation-duration CSS property	0.5s	The duration to wave octocat's hand.

Checkout this page for more examples.

Styling

As normal HTML element, you can style it with class and style attribute. But if you want to style elements which is inside the shadow DOM, then you have to use ::part() CSS pseudo-element.

There are five parts in shadow DOM that can be selected by ::part():

anchor
banner
octocat
octocat-arm
octocat-body

You can use devtool to inspect shadow DOM and checkout the position of these parts.

Here is an example to style the parts inside shadow DOM(see live demo):

<style>
  .custom-style::part(banner) {
    fill: #cceb34;
    stroke: #d453f5;
    stroke-width: 16;
    transition: fill 0.2s;
  }

  .custom-style:hover::part(banner) {
    fill: white;
  }

  .custom-style::part(octocat) {
    fill: #d453f5;
    stroke: black;
    stroke-width: 3;
  }

  .custom-style::part(octocat-arm) {
    animation-name: wave-hand;
    animation-duration: 0.2s;
    animation-iteration-count: infinite
  }
</style>
...
<github-corner class="custom-style"></github-corner>

NOTE: Using this way will have more specificity, styling by the attributes listed above will be overwritten.

svg slot

There is a slot named "svg", SVG element on the slot will be cloned and append into the SVG container inside shadow DOM. If you want to add additional SVG to draw something special, or you want to define SVG gradients, you can use the slot to do so.

Here is an example to draw eyes on octocat(see live demo):

<github-corner>
  <svg slot="svg">
    <circle cx="160" cy="75" r="4" fill="black" />
    <circle cx="160" cy="75" r="6" stroke="black" fill="transparent" />
    <circle cx="180" cy="95" r="4" fill="black" />
    <circle cx="180" cy="95" r="6" stroke="black" fill="transparent" />
  </svg>
</github-corner>

NOTE: You can only put an SVG element on the slot, other elements will be ignored.

License

MIT

yuskawu / github-corner-element Goto Github PK