README

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

Usage

npm i wc-github-corners

By CDN

See demo/index.html.

<!-- cdn -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/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	Type	Default	Description
`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>

Usage no npm install needed!