wc-github-corners

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

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>
<github-corners repo="YunYouJun/wc-github-corners" blank />

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>

Sponsors