Skip to content

YunYouJun/wc-github-corners

Repository files navigation

wc-github-corners

Published on webcomponents.org npm 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

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>