wc-github-corners

!npm bundle size
!jsDelivr hits (npm)

> 从零开始写一个 Web Component - 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 ...

Demo

Usage

`bash
npm i wc-github-corners
`

$3

See demo/index.html.

- jsdelivr: https://cdn.jsdelivr.net/npm/wc-github-corners@latest
- unpkg: https://www.unpkg.com/wc-github-corners@latest

`html

type="module"
src="https://www.unpkg.com/wc-github-corners@latest"
>


`

$3

`ts
// main.ts
import 'wc-github-corners'
`

`html


`

I successfully used it in a vue project - char-dust.

API

$3

`html

`

$3

#### class: GitHubCorners

##### 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 \. | |
| 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

$3

If you write it in vue template, you should make sure to exclude it from component resolution via compilerOptions.isCustomElement.

In vite:

`ts
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)
},
},
},
}),
],
})
`

$3

Try @vueuse/head.

`html

``

Sponsors