wc-github-corners
A web component by lit for GitHub Corners.
The final product is an ES module, and it can be used alone.
Anywhere like Vanilla JS / Vue / React / Angular / Svelte ...
Usage
npm i wc-github-corners
By CDN
See demo/index.html.
- jsdelivr:
https://cdn.jsdelivr.net/npm/wc-github-corners@latest
- unpkg:
https://www.unpkg.com/wc-github-corners@latest
<!-- cdn -->
<script
type="module"
src="https://www.unpkg.com/wc-github-corners@latest"
></script>
<github-corners></github-corners>
By NPM
// main.ts
import 'wc-github-corners'
<!-- index.html -->
<github-corners></github-corners>
I successfully used it in a vue project - char-dust.
API
Example
<github-corners fill="#0078e7" position="left" reverse></github-corners>
src/index.ts
:
GitHubCorners
class: Superclass
Name | Module | Package |
---|---|---|
LitElement |
lit |
Fields
Name | Privacy | Type | Default | Description | Inherited From |
---|---|---|---|---|---|
blank |
boolean |
false |
target="_blank" for link | ||
color |
string |
'#fff' |
Font color | ||
fill |
string |
'#151513' |
Fill color for github corners | ||
repo |
string |
'YunYouJun/wc-github-corners' |
Your GitHub Repo Name, generate url start with <https://github.com>. | ||
url |
string |
'' |
You also can custom it to override the url generated by repo. | ||
label |
string |
'View source on GitHub' |
Hover title | ||
reverse |
boolean |
false |
Reverse color and fill | ||
position |
string |
'right' |
Position of github corners, 'left' or 'right' |
I written it as a tutorial in my Bilibili Live Room.
Thanks to my fans and sponsors.
FAQ
[Vue warn]: Failed to resolve component: github-corners
If you write it in vue template, you should make sure to exclude it from component resolution via compilerOptions.isCustomElement
.
In vite:
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
Vue({
include: [/\.vue$/, /\.md$/],
template: {
compilerOptions: {
isCustomElement: (tag) => {
return ['github-corners'].includes(tag)
},
},
},
}),
],
})
Want to use by CDN in vue?
Try @vueuse/head.
<script setup lang="ts">
import { useHead } from "@vueuse/head";
useHead({
script: [
{
src: "https://cdn.jsdelivr.net/npm/wc-github-corners@latest",
type: "module",
},
],
});
</script>