https://github.com/YunYouJun/wc-github-corners

:octocat: A web component for github corners. Can be used anywhere.
https://github.com/YunYouJun/wc-github-corners

github-corners lit web-components

Last synced: 2 months ago
JSON representation

:octocat: A web component for github corners. Can be used anywhere.

• Host: GitHub
• URL: https://github.com/YunYouJun/wc-github-corners
• Owner: YunYouJun
• License: mit
• Created: 2021-09-24T18:52:59.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-02-12T12:45:00.000Z (11 months ago)
• Last Synced: 2024-05-19T10:00:49.797Z (8 months ago)
• Topics: github-corners, lit, web-components
• Language: TypeScript
• Homepage: https://yunyoujun.github.io/wc-github-corners/
• Size: 115 KB
• Stars: 44
• Watchers: 3
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - YunYouJun/wc-github-corners - :octocat: A web component for github corners. Can be used anywhere. (TypeScript)
• awesome - YunYouJun/wc-github-corners - :octocat: A web component for github corners. Can be used anywhere. (TypeScript)

README

        
# wc-github-corners

[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/wc-github-corners)

[![npm](https://img.shields.io/npm/v/wc-github-corners)](https://www.npmjs.com/package/wc-github-corners)

![npm bundle size](https://img.shields.io/bundlephobia/minzip/wc-github-corners)

![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hy/wc-github-corners)

> [从零开始写一个 Web Component - GitHub Corners | 云游君的小站](https://www.yunyoujun.cn/posts/how-to-write-a-web-component/)

A web component by [lit](https://github.com/lit/lit) for [GitHub Corners](https://github.com/tholman/github-corners).

The final product is an ES module, and it can be used alone.

> Anywhere like Vanilla JS / Vue / React / Angular / Svelte ...

[Demo](https://www.yunyoujun.cn/wc-github-corners/)

## Usage

```bash

npm i wc-github-corners

```

### By CDN

See [demo/index.html](./demo/index.html).

- jsdelivr: `https://cdn.jsdelivr.net/npm/wc-github-corners@latest`

- unpkg: `https://www.unpkg.com/wc-github-corners@latest`

```html

```

### By NPM

```ts

// main.ts

import 'wc-github-corners'

```

```html

```

I successfully used it in a vue project - [char-dust](https://github.com/YunYouJun/char-dust).

## API

### Example

```html

```

### `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 \. |                |

| `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](https://live.bilibili.com/822719).

Thanks to my fans and [sponsors](https://sponsors.yunyoujun.cn/).

## 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:

```ts

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](https://github.com/vueuse/head).

```html

  import { useHead } from "@vueuse/head";

  useHead({

    script: [

      {

        src: "https://cdn.jsdelivr.net/npm/wc-github-corners@latest",

        type: "module",

      },

    ],

  });

```

## [Sponsors](https://sponsors.yunyoujun.cn)