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>

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