implemented install function & modified package.json

README.md

@@ -1,24 +1,30 @@
 # vue-carbonbadge
+Vue component for the [Website Carbon badge](https://www.websitecarbon.com/badge/).
 
-## Project setup
-```
-npm install
+## Installation
+```shell
+npm install vue-carbonbadge
+yarn add vue-carbonbadge
 ```
 
-### Compiles and hot-reloads for development
-```
-npm run serve
-```
+## How To Use
+**1. Import the package into your main.js file**
+```js
+import CarbonBadge from 'vue-carbonbadge'
+Vue.use(CarbonBadge)
+```
+**2. Use it in your HTML markup**
+```html
+<footer>
+    <CarbonBadge></CarbonBadge>
+</footer>
+```
+**3. You're done! 🎉**
 
-### Compiles and minifies for production
-```
-npm run build
-```
-
-### Lints and fixes files
-```
-npm run lint
+## Customization
+**Toggling dark mode**
+```html
+<CarbonBadge :dark="true"></CarbonBadge>
 ```
 
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+If the `dark` property is not specified, dark mode is detected as per user system preferences.

package.json

@@ -1,11 +1,19 @@
 {
   "name": "vue-carbonbadge",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
+  "description": "Vue component for the Website Carbon Badge",
+  "author": "Niklas Haug",
+  "license": "MIT",
+  "keywords": ["vue", "vue-cli", "websitecarbon", "carbonbadge"],
+  "repository": "https://github.com/niklashaug/vue-carbonbadge",
+  "bugs": "https://github.com/niklashaug/vue-carbonbadge/issues",
+  "main": "./dist/vue-carbonbadge.common.js",
+  "private": false,
+  "files": ["dist/*"],
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "build-package": "vue-cli-service build --target lib --name nameOfYourPackage ./src/index.js",
+    "build-package": "vue-cli-service build --target lib --name vue-carbonbadge ./src/install.js",
     "lint": "vue-cli-service lint"
   },
   "dependencies": {

src/App.vue

@@ -6,13 +6,8 @@
 </template>
 
 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
 export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
+  name: 'App'
 }
 </script>
 

src/components/CarbonBadge.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="wcb" :class="[dark ? 'wcb-d' : '', 'carbonbadge']"></div>
+</template>
+
+<script>
+export default {
+  name: 'CarbonBadge',
+  props: {
+    dark: {
+      type: Boolean,
+      default: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+    }
+  },
+  mounted () {
+    const script = document.createElement('script')
+    script.setAttribute('src', 'https://unpkg.com/[email protected]/b.min.js')
+    document.head.appendChild(script)
+  }
+}
+</script>

src/install.js

@@ -0,0 +1,13 @@
+import CarbonBadgeComponent from './components/CarbonBadge.vue'
+
+const CarbonBadge = {
+    install(Vue) {
+        Vue.component('CarbonBadge', CarbonBadgeComponent);
+    }
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+    window.Vue.use(CarbonBadge)
+}
+
+export default CarbonBadge