{"id":20430943,"url":"https://github.com/yuskawu/github-corner-element","last_synced_at":"2025-04-12T20:33:57.199Z","repository":{"id":60603965,"uuid":"538609226","full_name":"YuskaWu/github-corner-element","owner":"YuskaWu","description":"A web component for the corner banner of GitHub.","archived":false,"fork":false,"pushed_at":"2023-01-19T10:20:53.000Z","size":198,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-02T19:40:06.487Z","etag":null,"topics":["corner-banner","custom-element","github-corner","github-corner-element","octocat","web-component"],"latest_commit_sha":null,"homepage":"https://yuskawu.github.io/github-corner-element/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/YuskaWu.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-19T17:05:21.000Z","updated_at":"2024-12-31T08:02:36.000Z","dependencies_parsed_at":"2023-01-25T07:05:12.034Z","dependency_job_id":null,"html_url":"https://github.com/YuskaWu/github-corner-element","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuskaWu%2Fgithub-corner-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuskaWu%2Fgithub-corner-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuskaWu%2Fgithub-corner-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/YuskaWu%2Fgithub-corner-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/YuskaWu","download_url":"https://codeload.github.com/YuskaWu/github-corner-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248630935,"owners_count":21136544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["corner-banner","custom-element","github-corner","github-corner-element","octocat","web-component"],"created_at":"2024-11-15T08:09:43.600Z","updated_at":"2025-04-12T20:33:57.167Z","avatar_url":"https://github.com/YuskaWu.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/YuskaWu/github-corner-element\"\u003e\n    \u003cimg src=\"https://yuskawu.github.io/github-corner-element/github-corner.png\" width=\"150\" height=\"150\" alt=\"github-corner\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.webcomponents.org/element/github-corner-element\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/webcomponents.org-published-blue.svg\" alt=\"webcomponents.org\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/github-corner-element\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/github-corner-element\" alt=\"npm\"\u003e\n  \u003c/a\u003e\n  \u003ca\u003e\n    \u003cimg src=\"https://img.shields.io/bundlephobia/minzip/github-corner-element\" alt=\"npm bundle size\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n# github-corner-element\n\nA web component for the corner banner of GitHub, inspired by [Tim Holman](https://github.com/tholman)'s [GitHub Corners](https://github.com/tholman/github-corners).\n\n[Demo](https://yuskawu.github.io/github-corner-element/example)\n\n## Browser Compatibility\n\nIt's compatible with browsers which supports [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)(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](https://caniuse.com/?search=web%20component) website.\n\n## Installations\n\nUse npm command to install pacakge:\n\n```bash\nnpm install github-corner-element\n```\n\nThen import it directly in your app entry to register `github-corner` element:\n\n```javascript\n// register `github-corner` element in the entry file\nimport 'github-corner-element'\n```\n\nAlternatively, you can load from [UNPKG](https://unpkg.com/) CDN as well:\n\n```html\n\u003c!-- latest version --\u003e\n\u003cscript src=\"https://unpkg.com/github-corner-element\"\u003e\u003c/script\u003e\n\u003c!-- specific version --\u003e\n\u003cscript src=\"https://unpkg.com/github-corner-element@1.0.0\"\u003e\u003c/script\u003e\n\u003c!-- load in ES Module mode --\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/github-corner-element/dist/github-corner-element.es.js\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\nAfter installation you can use it as well as a normal HTML element:\n\n```html\n\u003cgithub-corner href=\"https://github.com/YuskaWu/github-corner-element\"\u003e\u003c/github-corner\u003e\n```\n\n## Attributes\n\nIn addition to the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes), you can also use\nthe following additional attributes on `github-corner` element:\n\n| Attribute Name | Type | Default Value | Description |\n|-------------|----|-------------|-------------|\n| href | [href attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href) of anchor element | none | The URL of github page. |\n| size | value of [width CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/width)  | 5rem | The width and height of github-corner element. |\n| 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. |\n| octocat-color | value of [color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | white | The color of the octocat. |\n| banner-color | value of [color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | black | The color of the banner. |\n| wave-duration | value of [animation-duration CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) | 0.5s | The duration to wave octocat's hand. |\n\nCheckout this [page](https://yuskawu.github.io/github-corner-element/example) for more examples.\n\n## Styling\n\nAs 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()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) CSS pseudo-element.\n\nThere are five parts in shadow DOM that can be selected by [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):\n\n- anchor\n- banner\n- octocat\n- octocat-arm\n- octocat-body\n\nYou can use devtool to inspect shadow DOM and checkout the position of these parts.\n\nHere is an example to style the parts inside shadow DOM(see [live demo](https://yuskawu.github.io/github-corner-element/example#ex-styling)):\n\n```html\n\u003cstyle\u003e\n  .custom-style::part(banner) {\n    fill: #cceb34;\n    stroke: #d453f5;\n    stroke-width: 16;\n    transition: fill 0.2s;\n  }\n\n  .custom-style:hover::part(banner) {\n    fill: white;\n  }\n\n  .custom-style::part(octocat) {\n    fill: #d453f5;\n    stroke: black;\n    stroke-width: 3;\n  }\n\n  .custom-style::part(octocat-arm) {\n    animation-name: wave-hand;\n    animation-duration: 0.2s;\n    animation-iteration-count: infinite\n  }\n\u003c/style\u003e\n...\n\u003cgithub-corner class=\"custom-style\"\u003e\u003c/github-corner\u003e\n```\n\n\u003e NOTE: Using this way will have more specificity, styling by the attributes listed above will be overwritten.\n\n## svg slot\n\nThere is a [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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.\n\nHere is an example to draw eyes on octocat(see [live demo](https://yuskawu.github.io/github-corner-element/example#ex-slot-eyes)):\n\n```html\n\u003cgithub-corner\u003e\n  \u003csvg slot=\"svg\"\u003e\n    \u003ccircle cx=\"160\" cy=\"75\" r=\"4\" fill=\"black\" /\u003e\n    \u003ccircle cx=\"160\" cy=\"75\" r=\"6\" stroke=\"black\" fill=\"transparent\" /\u003e\n    \u003ccircle cx=\"180\" cy=\"95\" r=\"4\" fill=\"black\" /\u003e\n    \u003ccircle cx=\"180\" cy=\"95\" r=\"6\" stroke=\"black\" fill=\"transparent\" /\u003e\n  \u003c/svg\u003e\n\u003c/github-corner\u003e\n```\n\n\u003e NOTE: You can only put an SVG element on the slot, other elements will be ignored.\n\n## License\n\nMIT\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuskawu%2Fgithub-corner-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyuskawu%2Fgithub-corner-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyuskawu%2Fgithub-corner-element/lists"}