├── .npmignore
├── assets
    └── logo.png
├── LICENSE
├── src
    ├── entry.js
    └── Ribbon.vue
├── .gitignore
├── package.json
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | /build
2 | /assets


--------------------------------------------------------------------------------
/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ubaldop/vue-ribbon/HEAD/assets/logo.png


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Peter Pan
 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 | 


--------------------------------------------------------------------------------
/src/entry.js:
--------------------------------------------------------------------------------
 1 | // Import vue component
 2 | import component from './ribbon.vue';
 3 | 
 4 | // install function executed by Vue.use()
 5 | function install(Vue) {
 6 |   if (install.installed) return;
 7 |   install.installed = true;
 8 |   Vue.component('Ribbon', component);
 9 | }
10 | 
11 | // Create module definition for Vue.use()
12 | const plugin = {
13 |   install,
14 | };
15 | 
16 | // To auto-install when vue is found
17 | /* global window global */
18 | let GlobalVue = null;
19 | if (typeof window !== 'undefined') {
20 |   GlobalVue = window.Vue;
21 | } else if (typeof global !== 'undefined') {
22 |   GlobalVue = global.Vue;
23 | }
24 | if (GlobalVue) {
25 |   GlobalVue.use(plugin);
26 | }
27 | 
28 | // Inject install function into component - allows component
29 | // to be registered via Vue.use() as well as Vue.component()
30 | component.install = install;
31 | 
32 | // Export component by default
33 | export default component;
34 | 
35 | // It's possible to expose named exports when writing components that can
36 | // also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
37 | // export const RollupDemoDirective = component;
38 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | 
 8 | # Runtime data
 9 | pids
10 | *.pid
11 | *.seed
12 | *.pid.lock
13 | 
14 | # Directory for instrumented libs generated by jscoverage/JSCover
15 | lib-cov
16 | 
17 | # Coverage directory used by tools like istanbul
18 | coverage
19 | 
20 | # nyc test coverage
21 | .nyc_output
22 | 
23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
24 | .grunt
25 | 
26 | # Bower dependency directory (https://bower.io/)
27 | bower_components
28 | 
29 | # node-waf configuration
30 | .lock-wscript
31 | 
32 | # Compiled binary addons (https://nodejs.org/api/addons.html)
33 | build/Release
34 | 
35 | # Dependency directories
36 | node_modules/
37 | jspm_packages/
38 | 
39 | # TypeScript v1 declaration files
40 | typings/
41 | 
42 | # Optional npm cache directory
43 | .npm
44 | 
45 | # Optional eslint cache
46 | .eslintcache
47 | 
48 | # Optional REPL history
49 | .node_repl_history
50 | 
51 | # Output of 'npm pack'
52 | *.tgz
53 | 
54 | # Yarn Integrity file
55 | .yarn-integrity
56 | 
57 | # dotenv environment variables file
58 | .env
59 | 
60 | # next.js build output
61 | .next
62 | 
63 | # distribution folder
64 | /dist
65 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ribbon",
 3 |   "version": "1.0.1",
 4 |   "description": "Vue component for GitHub ribbons",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+https://github.com/P3trur0/vue-ribbon.git"
 8 |   },
 9 |   "keywords": [
10 |     "vue",
11 |     "vuejs",
12 |     "vue2",
13 |     "ribbon",
14 |     "github",
15 |     "component"
16 |   ],
17 |   "author": "P3trur0",
18 |   "license": "MIT",
19 |   "bugs": {
20 |     "url": "https://github.com/P3trur0/vue-ribbon/issues"
21 |   },
22 |   "homepage": "https://flatmap.it/vue-ribbon/",
23 |   "main": "dist/ribbon.umd.js",
24 |   "module": "dist/ribbon.esm.js",
25 |   "unpkg": "dist/ribbon.min.js",
26 |   "browser": {
27 |     "./sfc": "src/ribbon.vue"
28 |   },
29 |   "files": [
30 |     "dist/*",
31 |     "src/*"
32 |   ],
33 |   "scripts": {
34 |     "build": "npm run build:unpkg & npm run build:es & npm run build:umd",
35 |     "build:umd": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format umd --file dist/ribbon.umd.js",
36 |     "build:es": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format es --file dist/ribbon.esm.js",
37 |     "build:unpkg": "cross-env NODE_ENV=production rollup --config build/rollup.config.js --format iife --file dist/ribbon.min.js"
38 |   },
39 |   "devDependencies": {
40 |     "cross-env": "^5.2.0",
41 |     "minimist": "^1.2.0",
42 |     "rollup": "^1.1.2",
43 |     "rollup-plugin-buble": "^0.19.6",
44 |     "rollup-plugin-commonjs": "^9.2.0",
45 |     "rollup-plugin-replace": "^2.1.0",
46 |     "rollup-plugin-uglify-es": "0.0.1",
47 |     "rollup-plugin-vue": "^4.6.2",
48 |     "vue": "^2.5.22",
49 |     "vue-template-compiler": "^2.5.22"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | <p align="center">
 2 |   <img src="https://github.com/P3trur0/vue-ribbon/blob/master/assets/logo.png?raw=true" alt="vue-ribbon"/>
 3 |   <br/>
 4 |   <a href="https://www.npmjs.com/package/vue-ribbon"><img src="https://img.shields.io/badge/npm-1.0.1-blue.svg" alt="Version"></a>
 5 |   <a href="https://www.npmjs.com/package/vue-ribbon"><img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License"></a>
 6 | </p>
 7 | 
 8 | _Did you develop a Vue application hosted on GitHub? Add this Vue component for embedding a GitHub fork ribbon on it!_
 9 | 
10 | ---
11 | 
12 | vue-ribbon is a Vue Single File Component implementing [GitHub ribbons](https://github.blog/2008-12-19-github-ribbons/). It comes with a set of properties making the component customizable for your needs.
13 | 
14 | ### Properties
15 | 
16 | If you need to customize the ribbon look and feel, you can use the following optional properties.
17 | 
18 | 
19 | | Name     | Description                                                                                     | Type      | Default                         |
20 | | -------- | ----------------------------------------------------------------------------------------------- | --------- | ------------------------------- |
21 | | text     | The text to display on the ribbon                                                               | `String`  | _vue-ribbon: check it out!_     |
22 | | url      | The URL linked                                                                                  | `String`  | _https://flatmap.it/vue-ribbon_ |
23 | | position | The position of the ribbon. It can be `right-top`,  `right-bottom`,  `left-top`,  `left-bottom` | `String`  | _right-top_                     |
24 | | fixed    | If defined, it makes the ribbon fixed                                                           | `Boolean` | _false_                         |
25 | | color    | Defines the background color of the ribbon                                                      | `String`  | _#364a5e_                       |
26 | 
27 | The color of the text is automatically detected by the component: for background color with a luma greater than 128 the text is white, otherwise black.
28 | See how it looks on this [demo](https://flatmap.it/vue-ribbon)!
29 | 
30 | ### Installation
31 | You can install vue-ribbon using npm:
32 | 
33 | ```bash
34 | npm install --save vue-ribbon
35 | ```
36 | 
37 | Alternatively, you can import `vue-ribbon` via `<script>` tag in the browser directly, avoiding the NPM installation:
38 | 
39 | ```html
40 | <script src="https://unpkg.com/vue"></script>
41 | <script src="https://unpkg.com/vue-ribbon"></script>
42 | ```
43 | 
44 | ### Usage
45 | Once installed, it is easy to use it.  
46 | 
47 | #### Importing the component
48 | First, you need to import `vue-ribbon` in your files. You can do that in different ways. For example, it can be imported into a build process for use in full-fledged Vue applications:
49 | 
50 | ```js
51 | import Ribbon from 'vue-ribbon';
52 | 
53 | export default {
54 |   components: {
55 |     Ribbon,
56 |   },
57 |   // rest of the component
58 | }
59 | ```
60 | 
61 | #### Using the component
62 | Once imported, you can use your component as follows:
63 | 
64 | ```js
65 | <Ribbon/>
66 | ```
67 | 
68 | ### Credits
69 | The inspiration for this component comes from [github-fork-ribbon-css](https://github.com/simonwhitaker/github-fork-ribbon-css).
70 | 
71 | ### Contributing
72 | This component can be improved both in features and performances. Please, help in doing it better!


--------------------------------------------------------------------------------
/src/Ribbon.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div id="vue-ribbon-box">
  3 |     <a
  4 |       :id="componentId"
  5 |       :href="href"
  6 |       :title="text"
  7 |       :class="ribbonClass"
  8 |       :data-ribbon="text"
  9 |     >{{text}}</a>
 10 |   </div>
 11 | </template>
 12 | 
 13 | <script>
 14 | export default {
 15 |   name: "Ribbon",
 16 |   props: {
 17 |     text: {
 18 |       type: String,
 19 |       default: "vue-ribbon: check it out!"
 20 |     },
 21 | 
 22 |     url: {
 23 |       type: String,
 24 |       default: "https://flatmap.it/vue-ribbon"
 25 |     },
 26 |     position: {
 27 |       type: String,
 28 |       validator: function(value) {
 29 |         return (
 30 |           value === "left-top" ||
 31 |           value === "right-top" ||
 32 |           value === "left-bottom" ||
 33 |           value === "right-bottom"
 34 |         );
 35 |       },
 36 |       default: "right-top"
 37 |     },
 38 |     fixed: {
 39 |       type: Boolean,
 40 |       default: false
 41 |     },
 42 |     color: {
 43 |       type: String,
 44 |       validator: function(value) {
 45 |         return value.length === 7;
 46 |       },
 47 |       default: "#364a5e"
 48 |     }
 49 |   },
 50 | 
 51 |   computed: {
 52 |     ribbonClass() {
 53 |       return {
 54 |         "vue-ribbon": true,
 55 |         [`${this.position}`]: true,
 56 |         fixed: this.fixed
 57 |       };
 58 |     },
 59 | 
 60 |     href() {
 61 |       return this.url;
 62 |     },
 63 | 
 64 |     componentId() {
 65 |       return `vue-ribbon-${this._uid}`;
 66 |     }
 67 |   },
 68 | 
 69 |   methods: {
 70 |     isLightColor() {
 71 |       let rgb = parseInt(this.color.substring(1), 16);
 72 |       let r = (rgb >> 16) & 0xff;
 73 |       let g = (rgb >> 8) & 0xff;
 74 |       let b = (rgb >> 0) & 0xff;
 75 |       let luma = 0.2126 * r + 0.7152 * g + 0.0722 * b;
 76 |       return luma > 128;
 77 |     },
 78 | 
 79 |     dynamicCSSClass() {
 80 |       let nodeId = "vue-ribbon-bkg-" + this._uid;
 81 |       let style = document.getElementById(nodeId);
 82 |       if (!style) {
 83 |         style = document.createElement("style");
 84 |         style.id = nodeId;
 85 |         style.type = "text/css";
 86 |         this.$el.appendChild(style);
 87 |       }
 88 |       let cssClass = `#${this.componentId}:before { background-color: ${
 89 |         this.color
 90 |       }} `;
 91 |       if (this.isLightColor()) {
 92 |         cssClass += `#${
 93 |           this.componentId
 94 |         }:after { color: #000; border-color: #000;}`;
 95 |       }
 96 |       style.innerHTML = cssClass;
 97 |     }
 98 |   },
 99 | 
100 |   mounted: function() {
101 |     this.dynamicCSSClass();
102 |   },
103 | 
104 |   beforeUpdate: function() {
105 |     this.dynamicCSSClass();
106 |   }
107 | };
108 | </script>
109 | 
110 | <style scoped>
111 | /* Credits go to:
112 | * https://github.com/simonwhitaker/github-fork-ribbon-css
113 | */
114 | 
115 | .vue-ribbon {
116 |   width: 12.1em;
117 |   height: 12.1em;
118 |   position: absolute;
119 |   overflow: hidden;
120 |   top: 0;
121 |   right: 0;
122 |   z-index: 9999;
123 |   pointer-events: none;
124 |   font-size: 13px;
125 |   text-decoration: none;
126 |   text-indent: -999999px;
127 | }
128 | 
129 | .vue-ribbon.fixed {
130 |   position: fixed;
131 | }
132 | 
133 | .vue-ribbon:hover,
134 | .vue-ribbon:active {
135 |   background-color: rgba(0, 0, 0, 0);
136 | }
137 | 
138 | .vue-ribbon:before,
139 | .vue-ribbon:after {
140 |   position: absolute;
141 |   display: block;
142 |   width: 15.38em;
143 |   height: 1.54em;
144 |   top: 3.23em;
145 |   right: -3.23em;
146 |   -webkit-box-sizing: content-box;
147 |   -moz-box-sizing: content-box;
148 |   box-sizing: content-box;
149 |   -webkit-transform: rotate(45deg);
150 |   -moz-transform: rotate(45deg);
151 |   -ms-transform: rotate(45deg);
152 |   -o-transform: rotate(45deg);
153 |   transform: rotate(45deg);
154 | }
155 | 
156 | .vue-ribbon:before {
157 |   content: "";
158 |   padding: 0.38em 0;
159 |   background-image: -webkit-gradient(
160 |     linear,
161 |     left top,
162 |     left bottom,
163 |     from(rgba(0, 0, 0, 0)),
164 |     to(rgba(0, 0, 0, 0.15))
165 |   );
166 |   background-image: -webkit-linear-gradient(
167 |     top,
168 |     rgba(0, 0, 0, 0),
169 |     rgba(0, 0, 0, 0.15)
170 |   );
171 |   background-image: -moz-linear-gradient(
172 |     top,
173 |     rgba(92, 60, 60, 0),
174 |     rgba(0, 0, 0, 0.15)
175 |   );
176 |   background-image: -ms-linear-gradient(
177 |     top,
178 |     rgba(0, 0, 0, 0),
179 |     rgba(0, 0, 0, 0.15)
180 |   );
181 |   background-image: -o-linear-gradient(
182 |     top,
183 |     rgba(0, 0, 0, 0),
184 |     rgba(0, 0, 0, 0.15)
185 |   );
186 |   background-image: linear-gradient(
187 |     to bottom,
188 |     rgba(0, 0, 0, 0),
189 |     rgba(0, 0, 0, 0.15)
190 |   );
191 |   -webkit-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
192 |   -moz-box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
193 |   box-shadow: 0 0.15em 0.23em 0 rgba(0, 0, 0, 0.5);
194 | 
195 |   pointer-events: auto;
196 | }
197 | 
198 | .vue-ribbon:after {
199 |   content: attr(data-ribbon);
200 |   color: #fff;
201 |   font: 700 1em "Helvetica Neue", Helvetica, Arial, sans-serif;
202 |   line-height: 1.54em;
203 |   text-decoration: none;
204 |   text-shadow: 0 -0.08em rgba(0, 0, 0, 0.5);
205 |   text-align: center;
206 |   text-indent: 0;
207 |   padding: 0.15em 0;
208 |   margin: 0.15em 0;
209 |   border-width: 0.08em 0;
210 |   border-style: dotted;
211 |   border-color: #fff;
212 |   border-color: rgba(255, 255, 255, 0.7);
213 | }
214 | 
215 | .vue-ribbon.left-top,
216 | .vue-ribbon.left-bottom {
217 |   right: auto;
218 |   left: 0;
219 | }
220 | 
221 | .vue-ribbon.left-bottom,
222 | .vue-ribbon.right-bottom {
223 |   top: auto;
224 |   bottom: 0;
225 | }
226 | 
227 | .vue-ribbon.left-top:before,
228 | .vue-ribbon.left-top:after,
229 | .vue-ribbon.left-bottom:before,
230 | .vue-ribbon.left-bottom:after {
231 |   right: auto;
232 |   left: -3.23em;
233 | }
234 | 
235 | .vue-ribbon.left-bottom:before,
236 | .vue-ribbon.left-bottom:after,
237 | .vue-ribbon.right-bottom:before,
238 | .vue-ribbon.right-bottom:after {
239 |   top: auto;
240 |   bottom: 3.23em;
241 | }
242 | 
243 | .vue-ribbon.left-top:before,
244 | .vue-ribbon.left-top:after,
245 | .vue-ribbon.right-bottom:before,
246 | .vue-ribbon.right-bottom:after {
247 |   -webkit-transform: rotate(-45deg);
248 |   -moz-transform: rotate(-45deg);
249 |   -ms-transform: rotate(-45deg);
250 |   -o-transform: rotate(-45deg);
251 |   transform: rotate(-45deg);
252 | }
253 | </style>
254 | 


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