├── .eslintignore
├── .gitattributes
├── .postcssrc.json
├── .vscode
    └── settings.json
├── src
    ├── sfc.d.ts
    ├── global.d.ts
    ├── index.ts
    └── components
    │   └── GitHubCorners.vue
├── tsconfig-eslint.json
├── tsconfig.json
├── dev
    ├── main.ts
    └── Home.vue
├── jest.config.js
├── .travis.yml
├── index.html
├── .editorconfig
├── .eslintrc.json
├── bili.config.ts
├── babel.config.js
├── .github
    ├── workflows
    │   └── dependabot.yml
    └── dependabot.yml
├── LICENSE
├── test
    └── GitHubCorners.test.ts
├── package.json
├── README.md
└── .gitignore


/.eslintignore:
--------------------------------------------------------------------------------
1 | dev-dist/
2 | dist/
3 | 


--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | *.config.js linguist-detectable=false
2 | 


--------------------------------------------------------------------------------
/.postcssrc.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"plugins": {
3 | 		"autoprefixer": {}
4 | 	}
5 | }
6 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | 	"typescript.tsdk": "node_modules/typescript/lib"
3 | }
4 | 


--------------------------------------------------------------------------------
/src/sfc.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.vue' {
2 | 	import Vue from 'vue';
3 | 	export default Vue;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue';
2 | 
3 | declare global {
4 | 	interface Window {
5 | 		Vue: typeof Vue;
6 | 	}
7 | }
8 | 


--------------------------------------------------------------------------------
/tsconfig-eslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"$schema": "https://json.schemastore.org/tsconfig",
 3 | 	"extends": "./tsconfig.json",
 4 | 	"include": [
 5 | 		"dev",
 6 | 		"src",
 7 | 		"test",
 8 | 		"./*.ts"
 9 | 	]
10 | }
11 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "tsconfig-gluons/browser",
 3 | 	"compilerOptions": {
 4 | 		"module": "ESNext",
 5 | 		"experimentalDecorators": true,
 6 | 		"outDir": "dist"
 7 | 	},
 8 | 	"include": [
 9 | 		"src"
10 | 	]
11 | }
12 | 


--------------------------------------------------------------------------------
/dev/main.ts:
--------------------------------------------------------------------------------
 1 | /// <reference path='../src/sfc.d.ts' />
 2 | 
 3 | import Vue from 'vue';
 4 | 
 5 | import VueGitHubCorners from '../src';
 6 | import Home from './Home.vue';
 7 | 
 8 | Vue.use(VueGitHubCorners);
 9 | 
10 | new Vue({
11 | 	el: '#app',
12 | 	render: h => h(Home)
13 | });
14 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | const { defaults } = require('jest-config');
 2 | 
 3 | const { moduleFileExtensions } = defaults;
 4 | 
 5 | module.exports = {
 6 | 	moduleFileExtensions: [...moduleFileExtensions, 'vue'],
 7 | 	transform: {
 8 | 		'^.+\\.ts$': 'babel-jest',
 9 | 		'^.+\\.vue$': 'vue-jest'
10 | 	}
11 | };
12 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "node"
 4 |   - "lts/*"
 5 | before_install:
 6 |   - curl -L https://unpkg.com/@pnpm/self-installer | node
 7 |   - pnpm config set store-dir ~/.pnpm-store
 8 | install:
 9 |   - pnpm install
10 | cache:
11 |   npm: false
12 |   directories:
13 |     - "~/.pnpm-store"
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 | 	<title>GitHub Corners</title>
 7 | </head>
 8 | <body>
 9 | 	<div id="app"></div>
10 | 	<script src="./dev/main.ts"></script>
11 | </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_style = tab
 5 | indent_size = 4
 6 | charset = utf-8
 7 | insert_final_newline = true
 8 | trim_trailing_whitespace = true
 9 | 
10 | [*.md]
11 | trim_trailing_whitespace = false
12 | 
13 | [{*.{coffee,cson,yml,yaml,jade,pug},{package,bower}.json}]
14 | indent_style = space
15 | indent_size = 2
16 | 


--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import GitHubCorners from './components/GitHubCorners.vue';
 4 | 
 5 | function install(vue: typeof Vue): void {
 6 | 	vue.component('github-corners', GitHubCorners);
 7 | }
 8 | 
 9 | if (typeof window !== 'undefined' && window.Vue) {
10 | 	install(window.Vue);
11 | }
12 | 
13 | export default {
14 | 	install
15 | };
16 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "gluons/esnext",
 3 | 	"overrides": [
 4 | 		{
 5 | 			"files": ["*.vue"],
 6 | 			"extends": "gluons/vue-ts",
 7 | 			"parserOptions": {
 8 | 				"project": "tsconfig-eslint.json"
 9 | 			}
10 | 		},
11 | 		{
12 | 			"files": ["*.ts"],
13 | 			"extends": "gluons/ts",
14 | 			"parserOptions": {
15 | 				"project": "tsconfig-eslint.json"
16 | 			}
17 | 		}
18 | 	]
19 | }
20 | 


--------------------------------------------------------------------------------
/bili.config.ts:
--------------------------------------------------------------------------------
 1 | import { Config } from 'bili';
 2 | import { resolve } from 'path';
 3 | 
 4 | const config: Config = {
 5 | 	input: resolve(__dirname, './src/index.ts'),
 6 | 	output: {
 7 | 		format: ['cjs', 'es', 'iife', 'iife-min'],
 8 | 		fileName: 'vue-github-corners.[format][min][ext]',
 9 | 		moduleName: 'VueGitHubCorners',
10 | 		sourceMap: true
11 | 	},
12 | 	plugins: {
13 | 		vue: true
14 | 	}
15 | };
16 | 
17 | export default config;
18 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 | 	const env = process.env.NODE_ENV;
 3 | 
 4 | 	api.cache.never();
 5 | 
 6 | 	if (env === 'test') {
 7 | 		return {
 8 | 			presets: [
 9 | 				[
10 | 					'@babel/preset-env',
11 | 					{
12 | 						targets: {
13 | 							node: 'current'
14 | 						}
15 | 					}
16 | 				],
17 | 				'@babel/preset-typescript'
18 | 			]
19 | 		};
20 | 	}
21 | 
22 | 	return {
23 | 		presets: ['bili/babel']
24 | 	};
25 | };
26 | 


--------------------------------------------------------------------------------
/.github/workflows/dependabot.yml:
--------------------------------------------------------------------------------
 1 | name: Dependabot Automerge PR
 2 | on:
 3 |   pull_request:
 4 |     branches:
 5 |       - master
 6 |   check_suite:
 7 |     types:
 8 |       - completed
 9 |   status: {}
10 | 
11 | jobs:
12 |   automerge:
13 |     name: Dependabot Automerge
14 |     runs-on: ubuntu-latest
15 |     if: github.actor == 'dependabot[bot]'
16 |     steps:
17 |       - name: Automerge
18 |         uses: pascalgn/automerge-action@v0.9.0
19 |         env:
20 |           GITHUB_TOKEN: "${{ secrets.GITHUB_TOKEN }}"
21 |           MERGE_LABELS: "dependencies"
22 |           MERGE_COMMIT_MESSAGE: "🔀 Automerge pull request #${{ github.event.pull_request.number }}"
23 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "npm" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "weekly"
12 |       day: "saturday"
13 |       timezone: "Asia/Bangkok"
14 |     assignees:
15 |       - "gluons"
16 |     ignore:
17 |       - dependency-name: "@types/node"
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2017 Saran Tanpituckpong
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/test/GitHubCorners.test.ts:
--------------------------------------------------------------------------------
 1 | /// <reference path='../src/sfc.d.ts' />
 2 | 
 3 | import { shallowMount } from '@vue/test-utils';
 4 | import GitHubCorners from '../src/components/GitHubCorners.vue';
 5 | 
 6 | type GitHubCornersComputed = {
 7 | 	url: string;
 8 | 	blankAttr: string;
 9 | 	relAttr: string;
10 | 	svgStyle: CSSStyleDeclaration;
11 | };
12 | type GitHubCornersWithComputed = GitHubCorners & GitHubCornersComputed;
13 | 
14 | const GITHUB_BASE_URL = 'https://github.com';
15 | 
16 | const defaultBgColor = '#151513';
17 | const defaultColor = '#fff';
18 | 
19 | describe('GitHubCorners', () => {
20 | 	const repo = 'gluons/vue-gh-corners';
21 | 	const wrapper = shallowMount<GitHubCornersWithComputed>(GitHubCorners, {
22 | 		propsData: {
23 | 			repo,
24 | 			position: 'left',
25 | 			blank: false
26 | 		}
27 | 	});
28 | 	const { vm } = wrapper;
29 | 
30 | 	it('should have default background color', () => {
31 | 		expect(wrapper.props('bgColor')).toEqual(defaultBgColor);
32 | 	});
33 | 	it('should have default color', () => {
34 | 		expect(wrapper.props('color')).toEqual(defaultColor);
35 | 	});
36 | 	it('should have left position', () => {
37 | 		expect(wrapper.props('position')).toEqual('left');
38 | 	});
39 | 	it('should have expected `url` computed value', () => {
40 | 		expect(vm.url).toEqual(`${GITHUB_BASE_URL}/${repo}`);
41 | 	});
42 | 	it('should have expected `blankAttr` computed value', () => {
43 | 		expect(vm.blankAttr).toBeNull();
44 | 	});
45 | 	it('should have expected `relAttr` computed value', () => {
46 | 		expect(vm.relAttr).toBeNull();
47 | 	});
48 | 	it('should have proper `svgStyle` computed value', () => {
49 | 		expect(vm.svgStyle.fill).toEqual(defaultBgColor);
50 | 		expect(vm.svgStyle.color).toEqual(defaultColor);
51 | 		expect(vm.svgStyle.left).toEqual(0);
52 | 		expect(vm.svgStyle.transform).toEqual('scale(-1, 1)');
53 | 	});
54 | });
55 | 


--------------------------------------------------------------------------------
/dev/Home.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<div id="home">
  3 | 		<github-corners
  4 | 			repo="gluons/vue-gh-corners"
  5 | 			:bg-color="currentBgColor"
  6 | 			:color="currentColor"
  7 | 			:position="position"
  8 | 		></github-corners>
  9 | 		<div id="custom">
 10 | 			<button type="button" @click="swapPosition">Swap Position</button>
 11 | 			<button type="button" @click="swapColor">Swap Color</button>
 12 | 			<button type="button" @click="changeBgColor">Change Color</button>
 13 | 		</div>
 14 | 	</div>
 15 | </template>
 16 | 
 17 | <script lang="ts">
 18 | import Vue from 'vue';
 19 | 
 20 | export default Vue.extend({
 21 | 	name: 'Home',
 22 | 	data() {
 23 | 		return {
 24 | 			position: 'right',
 25 | 			isSwapColor: false,
 26 | 			colors: ['#151513', 'red', 'green', 'blue'],
 27 | 			currentColorIndex: 0
 28 | 		};
 29 | 	},
 30 | 	computed: {
 31 | 		currentBgColor() {
 32 | 			if (!this.isSwapColor) {
 33 | 				return this.colors[this.currentColorIndex];
 34 | 			} else {
 35 | 				return 'white';
 36 | 			}
 37 | 		},
 38 | 		currentColor() {
 39 | 			if (!this.isSwapColor) {
 40 | 				return 'white';
 41 | 			} else {
 42 | 				return this.colors[this.currentColorIndex];
 43 | 			}
 44 | 		}
 45 | 	},
 46 | 	methods: {
 47 | 		updatePageBg() {
 48 | 			if (this.isSwapColor) {
 49 | 				const currentBgColor = this.colors[this.currentColorIndex];
 50 | 
 51 | 				document.body.style.setProperty(
 52 | 					'background-color',
 53 | 					currentBgColor
 54 | 				);
 55 | 			} else {
 56 | 				document.body.style.removeProperty('background-color');
 57 | 			}
 58 | 		},
 59 | 		swapPosition() {
 60 | 			this.position = this.position == 'right' ? 'left' : 'right';
 61 | 		},
 62 | 		swapColor() {
 63 | 			this.isSwapColor = !this.isSwapColor;
 64 | 			this.updatePageBg();
 65 | 		},
 66 | 		changeBgColor() {
 67 | 			if (this.currentColorIndex + 1 >= this.colors.length) {
 68 | 				this.currentColorIndex = 0;
 69 | 			} else {
 70 | 				this.currentColorIndex++;
 71 | 			}
 72 | 			this.updatePageBg();
 73 | 		}
 74 | 	}
 75 | });
 76 | </script>
 77 | 
 78 | <style>
 79 | #custom {
 80 | 	text-align: center;
 81 | 	margin-top: 5rem;
 82 | }
 83 | button {
 84 | 	background-color: #9c34d9;
 85 | 	border-radius: 5px;
 86 | 	border: none;
 87 | 	color: white;
 88 | 	cursor: pointer;
 89 | 	font-family: inherit;
 90 | 	font-size: 20px;
 91 | 	outline: none;
 92 | 	padding: 10px 20px;
 93 | 	text-decoration: none;
 94 | }
 95 | button:hover {
 96 | 	background-color: #fc3cf6;
 97 | }
 98 | button:active {
 99 | 	background-color: #fa3c72;
100 | }
101 | </style>
102 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-gh-corners",
 3 |   "version": "3.0.1",
 4 |   "description": "GitHub Corners for Vue.",
 5 |   "main": "./dist/vue-github-corners.cjs.js",
 6 |   "module": "./dist/vue-github-corners.es.js",
 7 |   "unpkg": "./dist/vue-github-corners.iife.min.js",
 8 |   "jsdelivr": "./dist/vue-github-corners.iife.min.js",
 9 |   "style": "./dist/vue-github-corners.iife.min.css",
10 |   "typings": "./dist/index.d.ts",
11 |   "files": [
12 |     "dist"
13 |   ],
14 |   "scripts": {
15 |     "prebuild": "del-cli dist/",
16 |     "build": "bili",
17 |     "predev": "del-cli dev-dist/",
18 |     "dev": "parcel index.html -d dev-dist/ --open --no-autoinstall",
19 |     "prepublishOnly": "npm run build",
20 |     "lint": "eslint .",
21 |     "test": "cross-env NODE_ENV=test jest --verbose"
22 |   },
23 |   "repository": {
24 |     "type": "git",
25 |     "url": "git+https://github.com/gluons/vue-gh-corners.git"
26 |   },
27 |   "keywords": [
28 |     "vue",
29 |     "vuejs",
30 |     "vue-component",
31 |     "github",
32 |     "corners"
33 |   ],
34 |   "author": "Saran Tanpituckpong <sarunta@gmail.com>",
35 |   "license": "MIT",
36 |   "bugs": {
37 |     "url": "https://github.com/gluons/vue-gh-corners/issues"
38 |   },
39 |   "homepage": "https://github.com/gluons/vue-gh-corners",
40 |   "browserslist": [
41 |     "extends browserslist-config-vue"
42 |   ],
43 |   "prettier": "@gluons/prettier-config",
44 |   "peerDependencies": {
45 |     "vue": "2"
46 |   },
47 |   "devDependencies": {
48 |     "@babel/core": "^7.11.1",
49 |     "@babel/preset-env": "^7.11.0",
50 |     "@babel/preset-typescript": "^7.10.4",
51 |     "@gluons/prettier-config": "^2.0.6",
52 |     "@types/jest": "^26.0.9",
53 |     "@types/node": "^12.12.54",
54 |     "@typescript-eslint/eslint-plugin": "^3.8.0",
55 |     "@typescript-eslint/parser": "^3.8.0",
56 |     "@vue/component-compiler-utils": "^3.2.0",
57 |     "@vue/test-utils": "^1.0.0-beta.29",
58 |     "autoprefixer": "^9.4.9",
59 |     "babel-core": "bridge",
60 |     "babel-jest": "^26.2.2",
61 |     "bili": "^5.0.5",
62 |     "browserslist-config-vue": "^1.0.3",
63 |     "cross-env": "^7.0.2",
64 |     "del-cli": "^3.0.1",
65 |     "eslint": "^7.6.0",
66 |     "eslint-config-gluons": "^6.0.5",
67 |     "jest": "^26.2.2",
68 |     "jest-config": "^26.2.2",
69 |     "parcel-bundler": "^1.12.4",
70 |     "postcss": "^7.0.32",
71 |     "prettier": "^2.0.5",
72 |     "rollup": "^2.23.1",
73 |     "rollup-plugin-typescript2": "^0.27.2",
74 |     "rollup-plugin-vue": "5",
75 |     "tsconfig-gluons": "^1.1.0",
76 |     "typescript": "^3.9.7",
77 |     "vue": "2.6.11",
78 |     "vue-hot-reload-api": "^2.3.4",
79 |     "vue-jest": "^3.0.6",
80 |     "vue-template-compiler": "^2.6.11"
81 |   },
82 |   "dependencies": {
83 |     "tslib": "^2.0.1",
84 |     "vue-runtime-helpers": "^1.1.2"
85 |   }
86 | }
87 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue GitHub Corners
  2 | [![license](https://img.shields.io/github/license/gluons/vue-gh-corners.svg?style=flat-square)](./LICENSE)
  3 | [![vue 2](https://img.shields.io/badge/vue-2-42b983.svg?style=flat-square)](https://vuejs.org)
  4 | [![npm](https://img.shields.io/npm/v/vue-gh-corners.svg?style=flat-square)](https://www.npmjs.com/package/vue-gh-corners)
  5 | [![npm](https://img.shields.io/npm/dt/vue-gh-corners.svg?style=flat-square)](https://www.npmjs.com/package/vue-gh-corners)
  6 | [![Travis](https://img.shields.io/travis/gluons/vue-gh-corners.svg?style=flat-square)](https://travis-ci.org/gluons/vue-gh-corners)
  7 | [![TSLint](https://img.shields.io/badge/TSLint-gluons-15757B.svg?style=flat-square)](https://github.com/gluons/tslint-config-gluons)
  8 | [![Gitmoji](https://img.shields.io/badge/gitmoji-%20😜%20😍-FFDD67.svg?style=flat-square)](https://github.com/carloscuesta/gitmoji)
  9 | 
 10 | :octocat: [tholman's GitHub Corners](https://github.com/tholman/github-corners) for [Vue](https://vuejs.org/).
 11 | 
 12 | ## Installation
 13 | 
 14 | Via [npm](https://www.npmjs.com/):
 15 | 
 16 | [![npm](https://nodei.co/npm/vue-gh-corners.png?downloads=true&downloadRank=true&stars=true)](https://www.npmjs.com/package/vue-gh-corners)
 17 | 
 18 | ```sh
 19 | npm install --save vue-gh-corners
 20 | ```
 21 | 
 22 | Via [Yarn](https://yarnpkg.com/):
 23 | 
 24 | ```sh
 25 | yarn add vue-gh-corners
 26 | ```
 27 | 
 28 | ## Demo
 29 | 
 30 | Go to https://gluons.github.io/vue-gh-corners/
 31 | 
 32 | ## Usage
 33 | 
 34 | ```javascript
 35 | import Vue from 'vue';
 36 | import VueGitHubCorners from 'vue-gh-corners';
 37 | 
 38 | // Import GitHub Corners stylesheet.
 39 | import 'vue-gh-corners/dist/vue-github-corners.iife.css';
 40 | 
 41 | Vue.use(VueGitHubCorners);
 42 | ```
 43 | 
 44 | ```vue
 45 | <template>
 46 | 	<div id="app">
 47 | 		<github-corners repo="gluons/vue-gh-corners"></github-corners>
 48 | 	</div>
 49 | </template>
 50 | ```
 51 | 
 52 | ## API
 53 | 
 54 | ### Props
 55 | 
 56 | #### repo
 57 | **Type:** `string`  
 58 | **Required:** `true`
 59 | 
 60 | GitHub repository slug (`username/repo`).
 61 | 
 62 | #### blank
 63 | **Type:** `boolean`  
 64 | **Default:** `true`
 65 | 
 66 | Enable `target="_blank"` for `<a>` link.
 67 | 
 68 | #### bg-color
 69 | **Type:** `string`  
 70 | **Default:** `#151513`
 71 | 
 72 | The corner background color.
 73 | 
 74 | > It's corner SVG's `fill` value.
 75 | 
 76 | #### color
 77 | **Type:** `string`  
 78 | **Default:** `#fff`
 79 | 
 80 | The corner octocat color.
 81 | 
 82 | > It's corner SVG's `color` value.
 83 | 
 84 | #### position
 85 | **Type:** `string`  
 86 | **Default:** `right`
 87 | 
 88 | The position of corner.
 89 | 
 90 | - `left`
 91 | - `right`
 92 | 
 93 | ## Development
 94 | 
 95 | - `yarn dev`: Run demo webpage for dev.
 96 | - `yarn build`: Build the component.
 97 | 
 98 | ---
 99 | 
100 | **Use [Bili](https://github.com/egoist/bili) — 🥂 Delightful library bundler.**
101 | 


--------------------------------------------------------------------------------
/src/components/GitHubCorners.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | 	<a
  3 | 		:href="url"
  4 | 		:target="blankAttr"
  5 | 		:rel="relAttr"
  6 | 		class="github-corner"
  7 | 		aria-label="View source on GitHub"
  8 | 	>
  9 | 		<svg
 10 | 			width="80"
 11 | 			height="80"
 12 | 			viewBox="0 0 250 250"
 13 | 			:style="svgStyle"
 14 | 			aria-hidden="true"
 15 | 		>
 16 | 			<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
 17 | 			<path
 18 | 				d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
 19 | 				fill="currentColor"
 20 | 				style="transform-origin: 130px 106px;"
 21 | 				class="octo-arm"
 22 | 			></path>
 23 | 			<path
 24 | 				d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
 25 | 				fill="currentColor"
 26 | 				class="octo-body"
 27 | 			></path>
 28 | 		</svg>
 29 | 	</a>
 30 | </template>
 31 | 
 32 | <script lang="ts">
 33 | import Vue from 'vue';
 34 | 
 35 | const GITHUB_BASE_URL = 'https://github.com';
 36 | 
 37 | export default Vue.extend({
 38 | 	name: 'GitHubCorners',
 39 | 	props: {
 40 | 		repo: {
 41 | 			type: String,
 42 | 			required: true
 43 | 		},
 44 | 		blank: {
 45 | 			type: Boolean,
 46 | 			default: true
 47 | 		},
 48 | 		bgColor: {
 49 | 			type: String,
 50 | 			default: '#151513'
 51 | 		},
 52 | 		color: {
 53 | 			type: String,
 54 | 			default: '#fff'
 55 | 		},
 56 | 		position: {
 57 | 			type: String,
 58 | 			default: 'right',
 59 | 			validator(value) {
 60 | 				return value === 'left' || value === 'right';
 61 | 			}
 62 | 		}
 63 | 	},
 64 | 	computed: {
 65 | 		url() {
 66 | 			const repo = this.repo;
 67 | 
 68 | 			return `${GITHUB_BASE_URL}/${repo}`;
 69 | 		},
 70 | 		svgStyle() {
 71 | 			let positionStyles = {};
 72 | 
 73 | 			if (this.position === 'left') {
 74 | 				positionStyles = {
 75 | 					left: 0,
 76 | 					transform: 'scale(-1, 1)'
 77 | 				};
 78 | 			} else {
 79 | 				positionStyles = {
 80 | 					right: 0
 81 | 				};
 82 | 			}
 83 | 
 84 | 			return {
 85 | 				fill: this.bgColor,
 86 | 				color: this.color,
 87 | 				position: 'absolute',
 88 | 				border: 0,
 89 | 				top: 0,
 90 | 				...positionStyles
 91 | 			};
 92 | 		},
 93 | 		blankAttr() {
 94 | 			return this.blank ? '_blank' : null;
 95 | 		},
 96 | 		relAttr() {
 97 | 			return this.blank ? 'noopener noreferrer' : null;
 98 | 		}
 99 | 	}
100 | });
101 | </script>
102 | 
103 | <style>
104 | .github-corner:hover .octo-arm {
105 | 	animation: octocat-wave 560ms ease-in-out;
106 | }
107 | @keyframes octocat-wave {
108 | 	0%,
109 | 	100% {
110 | 		transform: rotate(0);
111 | 	}
112 | 	20%,
113 | 	60% {
114 | 		transform: rotate(-25deg);
115 | 	}
116 | 	40%,
117 | 	80% {
118 | 		transform: rotate(10deg);
119 | 	}
120 | }
121 | @media (max-width: 500px) {
122 | 	.github-corner:hover .octo-arm {
123 | 		animation: none;
124 | 	}
125 | 	.github-corner .octo-arm {
126 | 		animation: octocat-wave 560ms ease-in-out;
127 | 	}
128 | }
129 | </style>
130 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | 
  2 | # Created by https://www.toptal.com/developers/gitignore/api/node,linux,windows
  3 | # Edit at https://www.toptal.com/developers/gitignore?templates=node,linux,windows
  4 | 
  5 | ### Linux ###
  6 | *~
  7 | 
  8 | # temporary files which can be created if a process still has a handle open of a deleted file
  9 | .fuse_hidden*
 10 | 
 11 | # KDE directory preferences
 12 | .directory
 13 | 
 14 | # Linux trash folder which might appear on any partition or disk
 15 | .Trash-*
 16 | 
 17 | # .nfs files are created when an open file is removed but is still being accessed
 18 | .nfs*
 19 | 
 20 | ### Node ###
 21 | # Logs
 22 | logs
 23 | *.log
 24 | npm-debug.log*
 25 | yarn-debug.log*
 26 | yarn-error.log*
 27 | lerna-debug.log*
 28 | 
 29 | # Diagnostic reports (https://nodejs.org/api/report.html)
 30 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 31 | 
 32 | # Runtime data
 33 | pids
 34 | *.pid
 35 | *.seed
 36 | *.pid.lock
 37 | 
 38 | # Directory for instrumented libs generated by jscoverage/JSCover
 39 | lib-cov
 40 | 
 41 | # Coverage directory used by tools like istanbul
 42 | coverage
 43 | *.lcov
 44 | 
 45 | # nyc test coverage
 46 | .nyc_output
 47 | 
 48 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 49 | .grunt
 50 | 
 51 | # Bower dependency directory (https://bower.io/)
 52 | bower_components
 53 | 
 54 | # node-waf configuration
 55 | .lock-wscript
 56 | 
 57 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 58 | build/Release
 59 | 
 60 | # Dependency directories
 61 | node_modules/
 62 | jspm_packages/
 63 | 
 64 | # TypeScript v1 declaration files
 65 | typings/
 66 | 
 67 | # TypeScript cache
 68 | *.tsbuildinfo
 69 | 
 70 | # Optional npm cache directory
 71 | .npm
 72 | 
 73 | # Optional eslint cache
 74 | .eslintcache
 75 | 
 76 | # Microbundle cache
 77 | .rpt2_cache/
 78 | .rts2_cache_cjs/
 79 | .rts2_cache_es/
 80 | .rts2_cache_umd/
 81 | 
 82 | # Optional REPL history
 83 | .node_repl_history
 84 | 
 85 | # Output of 'npm pack'
 86 | *.tgz
 87 | 
 88 | # Yarn Integrity file
 89 | .yarn-integrity
 90 | 
 91 | # dotenv environment variables file
 92 | .env
 93 | .env.test
 94 | 
 95 | # parcel-bundler cache (https://parceljs.org/)
 96 | .cache
 97 | 
 98 | # Next.js build output
 99 | .next
100 | 
101 | # Nuxt.js build / generate output
102 | .nuxt
103 | dist
104 | 
105 | # Gatsby files
106 | .cache/
107 | # Comment in the public line in if your project uses Gatsby and not Next.js
108 | # https://nextjs.org/blog/next-9-1#public-directory-support
109 | # public
110 | 
111 | # vuepress build output
112 | .vuepress/dist
113 | 
114 | # Serverless directories
115 | .serverless/
116 | 
117 | # FuseBox cache
118 | .fusebox/
119 | 
120 | # DynamoDB Local files
121 | .dynamodb/
122 | 
123 | # TernJS port file
124 | .tern-port
125 | 
126 | # Stores VSCode versions used for testing VSCode extensions
127 | .vscode-test
128 | 
129 | ### Windows ###
130 | # Windows thumbnail cache files
131 | Thumbs.db
132 | Thumbs.db:encryptable
133 | ehthumbs.db
134 | ehthumbs_vista.db
135 | 
136 | # Dump file
137 | *.stackdump
138 | 
139 | # Folder config file
140 | [Dd]esktop.ini
141 | 
142 | # Recycle Bin used on file shares
143 | $RECYCLE.BIN/
144 | 
145 | # Windows Installer files
146 | *.cab
147 | *.msi
148 | *.msix
149 | *.msm
150 | *.msp
151 | 
152 | # Windows shortcuts
153 | *.lnk
154 | 
155 | # End of https://www.toptal.com/developers/gitignore/api/node,linux,windows
156 | 
157 | # Dist files
158 | dist/
159 | dev-dist/
160 | 
161 | # rollup-plugin-typescript2 cache
162 | .rpt2_cache/
163 | 


--------------------------------------------------------------------------------