├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .gitattributes ├── .github ├── dependabot.yml └── workflows │ └── dependabot.yml ├── .gitignore ├── .postcssrc.json ├── .travis.yml ├── .vscode └── settings.json ├── LICENSE ├── README.md ├── babel.config.js ├── bili.config.ts ├── dev ├── Home.vue └── main.ts ├── index.html ├── jest.config.js ├── package.json ├── pnpm-lock.yaml ├── src ├── components │ └── GitHubCorners.vue ├── global.d.ts ├── index.ts └── sfc.d.ts ├── test └── GitHubCorners.test.ts ├── tsconfig-eslint.json └── tsconfig.json /.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 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | dev-dist/ 2 | dist/ 3 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.config.js linguist-detectable=false 2 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.postcssrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": { 3 | "autoprefixer": {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "typescript.tsdk": "node_modules/typescript/lib" 3 | } 4 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | 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 `` 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /dev/Home.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 77 | 78 | 102 | -------------------------------------------------------------------------------- /dev/main.ts: -------------------------------------------------------------------------------- 1 | /// 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 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | GitHub Corners 7 | 8 | 9 |
10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 ", 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 | -------------------------------------------------------------------------------- /src/components/GitHubCorners.vue: -------------------------------------------------------------------------------- 1 | 31 | 32 | 102 | 103 | 130 | -------------------------------------------------------------------------------- /src/global.d.ts: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | 3 | declare global { 4 | interface Window { 5 | Vue: typeof Vue; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/sfc.d.ts: -------------------------------------------------------------------------------- 1 | declare module '*.vue' { 2 | import Vue from 'vue'; 3 | export default Vue; 4 | } 5 | -------------------------------------------------------------------------------- /test/GitHubCorners.test.ts: -------------------------------------------------------------------------------- 1 | /// 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(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 | -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------