Skip to content

Commit fbfb950

Browse files
YuskaWuYuskaWu
committed
create project
1 parent afcb04a commit fbfb950

17 files changed

+3584
-96
lines changed

‎.eslintrc.json

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"env": {
3+
"browser": true,
4+
"es2021": true
5+
},
6+
"extends": [
7+
"eslint:recommended",
8+
"plugin:@typescript-eslint/recommended",
9+
"prettier"
10+
],
11+
"overrides": [
12+
],
13+
"parser": "@typescript-eslint/parser",
14+
"parserOptions": {
15+
"ecmaVersion": "latest",
16+
"sourceType": "module"
17+
},
18+
"plugins": [
19+
"@typescript-eslint"
20+
],
21+
"rules": {
22+
}
23+
}

‎.github/workflows/release.yml

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
name: Release
2+
3+
on:
4+
push:
5+
tags:
6+
- 'v[0-9]+.[0-9]+.[0-9]+'
7+
8+
jobs:
9+
build-test:
10+
name: Build and test
11+
runs-on: ubuntu-latest
12+
steps:
13+
- uses: actions/checkout@v3
14+
- uses: actions/setup-node@v3
15+
with:
16+
node-version: 16
17+
cache: 'npm'
18+
- run: npm ci
19+
- run: npm run build
20+
21+
create-release:
22+
needs: build-test
23+
name: Create release
24+
runs-on: ubuntu-latest
25+
steps:
26+
- uses: 'marvinpinto/action-automatic-releases@latest'
27+
with:
28+
repo_token: '${{ secrets.GITHUB_TOKEN }}'
29+
prerelease: false
30+
31+
publish-package:
32+
needs: create-release
33+
name: Publish Package to npmjs
34+
runs-on: ubuntu-latest
35+
steps:
36+
- uses: actions/checkout@v3
37+
- uses: actions/setup-node@v3
38+
with:
39+
node-version: 16
40+
cache: 'npm'
41+
registry-url: 'https://registry.npmjs.org'
42+
- run: npm ci
43+
- run: npm run build
44+
- run: npm publish
45+
env:
46+
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

‎.gitignore

Lines changed: 15 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -4,101 +4,21 @@ logs
44
npm-debug.log*
55
yarn-debug.log*
66
yarn-error.log*
7+
pnpm-debug.log*
78
lerna-debug.log*
89

9-
# Diagnostic reports (https://nodejs.org/api/report.html)
10-
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
11-
12-
# Runtime data
13-
pids
14-
*.pid
15-
*.seed
16-
*.pid.lock
17-
18-
# Directory for instrumented libs generated by jscoverage/JSCover
19-
lib-cov
20-
21-
# Coverage directory used by tools like istanbul
22-
coverage
23-
*.lcov
24-
25-
# nyc test coverage
26-
.nyc_output
27-
28-
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
29-
.grunt
30-
31-
# Bower dependency directory (https://bower.io/)
32-
bower_components
33-
34-
# node-waf configuration
35-
.lock-wscript
36-
37-
# Compiled binary addons (https://nodejs.org/api/addons.html)
38-
build/Release
39-
40-
# Dependency directories
41-
node_modules/
42-
jspm_packages/
43-
44-
# TypeScript v1 declaration files
45-
typings/
46-
47-
# TypeScript cache
48-
*.tsbuildinfo
49-
50-
# Optional npm cache directory
51-
.npm
52-
53-
# Optional eslint cache
54-
.eslintcache
55-
56-
# Microbundle cache
57-
.rpt2_cache/
58-
.rts2_cache_cjs/
59-
.rts2_cache_es/
60-
.rts2_cache_umd/
61-
62-
# Optional REPL history
63-
.node_repl_history
64-
65-
# Output of 'npm pack'
66-
*.tgz
67-
68-
# Yarn Integrity file
69-
.yarn-integrity
70-
71-
# dotenv environment variables file
72-
.env
73-
.env.test
74-
75-
# parcel-bundler cache (https://parceljs.org/)
76-
.cache
77-
78-
# Next.js build output
79-
.next
80-
81-
# Nuxt.js build / generate output
82-
.nuxt
10+
node_modules
8311
dist
84-
85-
# Gatsby files
86-
.cache/
87-
# Comment in the public line in if your project uses Gatsby and *not* Next.js
88-
# https://nextjs.org/blog/next-9-1#public-directory-support
89-
# public
90-
91-
# vuepress build output
92-
.vuepress/dist
93-
94-
# Serverless directories
95-
.serverless/
96-
97-
# FuseBox cache
98-
.fusebox/
99-
100-
# DynamoDB Local files
101-
.dynamodb/
102-
103-
# TernJS port file
104-
.tern-port
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.prettierignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
build
2+
node_modules

‎.prettierrc.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"semi": false,
3+
"tabWidth": 2,
4+
"singleQuote": true
5+
}

‎.vscode/extensions.json

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"esbenp.prettier-vscode"
5+
]
6+
}

‎README.md

Lines changed: 129 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,129 @@
1-
# github-corner
1+
# github-corner-element
2+
3+
A web component for the corner banner of GitHub, inspired by [Tim Holman](https://github.com/tholman)'s [GitHub Corners](https://github.com/tholman/github-corners).
4+
5+
[Demo](https://yuskawu.github.io/github-corner-element/example)
6+
7+
## Browser Compatibility
8+
9+
It's compatible with browsers which supports [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components)(including `Custom elements`, `Shadow DOM` and `HTML Template`). For modern browsers it should be fine, but old browser may not work. Checkout the compatibility [here](https://caniuse.com/?search=web%20component).
10+
11+
## Installations
12+
13+
Use npm command to install pacakge:
14+
15+
```bash
16+
npm install github-corner-element
17+
```
18+
19+
Then import it directly in your app entry to register `github-corner` element:
20+
21+
```javascript
22+
// register `github-corner` element in the entry file
23+
import 'github-corner-element'
24+
```
25+
26+
Alternatively, you can load from [UNPKG](https://unpkg.com/) CDN as well:
27+
28+
```html
29+
<!-- latest version -->
30+
<script src="https://unpkg.com/github-corner-element"></script>
31+
<!-- specific version -->
32+
<script src="https://unpkg.com/github-corner-element@1.0.0"></script>
33+
<!-- load in ES Module mode -->
34+
<script type="module" src="https://unpkg.com/github-corner-element/dist/github-corner-element.es.js"></script>
35+
```
36+
37+
## Usage
38+
39+
After installation you can use it as well as a normal HTML element:
40+
41+
```html
42+
<github-corner href="https://github.com/YuskaWu/github-corner-element"></github-corner>
43+
```
44+
45+
## Attributes
46+
47+
In addition to the [global attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes), you can also use
48+
the following additional attributes on `github-corner` element:
49+
50+
| Attribute Name | Type | Default Value | Description |
51+
|-------------|----|-------------|-------------|
52+
| href | [href attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-href) of anchor element | none | The URL of github page. |
53+
| size | value of [width CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | 5rem | The width and height of github-corner element. |
54+
| placement | 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right' | 'top-right' | The placement of github-corner element, it can be one of the four corners. |
55+
| octocat-color | value of [color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | white | The color of the octocat. |
56+
| banner-color | value of [color CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/color) | black | The color of the banner. |
57+
| wave-duration | value of [animation-duration CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration) | 0.5s | The duration to wave octocat's hand. |
58+
59+
Checkout this [page](https://yuskawu.github.io/github-corner-element/example) for more examples.
60+
61+
## Styling
62+
63+
As normal HTML element, you can style it with `class` and `style` attribute. But if you want to style elements which is inside the shadow DOM, then you have to use [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part) CSS pseudo-element.
64+
65+
There are five parts in shadow DOM that can be selected by [::part()](https://developer.mozilla.org/en-US/docs/Web/CSS/::part):
66+
67+
- anchor
68+
- banner
69+
- octocat
70+
- octocat-arm
71+
- octocat-body
72+
73+
You can use devtool to inspect shadow DOM and checkout the position of these parts.
74+
75+
Here is an example to style the parts inside shadow DOM(see live demo [here](https://yuskawu.github.io/github-corner-element/example#ex-styling)):
76+
77+
```html
78+
<style>
79+
.custom-style::part(banner) {
80+
fill: #cceb34;
81+
stroke: #d453f5;
82+
stroke-width: 16;
83+
transition: fill 0.2s;
84+
}
85+
86+
.custom-style:hover::part(banner) {
87+
fill: white;
88+
}
89+
90+
.custom-style::part(octocat) {
91+
fill: #d453f5;
92+
stroke: black;
93+
stroke-width: 3;
94+
}
95+
96+
.custom-style::part(octocat-arm) {
97+
animation-name: wave-hand;
98+
animation-duration: 0.2s;
99+
animation-iteration-count: infinite
100+
}
101+
</style>
102+
...
103+
<github-corner class="custom-style"></github-corner>
104+
```
105+
106+
> NOTE: Using this way will have more specificity, styling by the attributes listed above will be overwritten.
107+
108+
## svg slot
109+
110+
There is a [slot](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) named `"svg"`, SVG element on the slot will be cloned and append into the SVG container inside shadow DOM. If you want to add additional SVG to draw something special, or you want to define SVG gradients, you can use the slot to do so.
111+
112+
Here is an example to draw eyes on octocat(see live demo [here](https://yuskawu.github.io/github-corner-element/example#ex-slot-eyes)):
113+
114+
```html
115+
<github-corner>
116+
<svg slot="svg">
117+
<circle cx="160" cy="75" r="4" fill="black" />
118+
<circle cx="160" cy="75" r="6" stroke="black" fill="transparent" />
119+
<circle cx="180" cy="95" r="4" fill="black" />
120+
<circle cx="180" cy="95" r="6" stroke="black" fill="transparent" />
121+
</svg>
122+
</github-corner>
123+
```
124+
125+
> NOTE: You can only put an SVG element on the slot, other elements will be ignored.
126+
127+
## License
128+
129+
MIT

0 commit comments

Comments
 (0)