0.1.6 • Published 10 months ago
wc-github-corners v0.1.6
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
:
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 \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>