Update the boilerplate with Vue 3 (#15)

* Update to use Kocal/vue-web-extension boilerplate

* Remove unused files

* build: Update GitHub release actions

* build: Remove yarn package step

* refactor: Remove unused logo

* fix: Fix age decimal margin

* build: Update package name to not include mode

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.eslintrc.js

@@ -1,33 +1,15 @@
-// https://eslint.org/docs/user-guide/configuring
-// File taken from https://github.com/vuejs-templates/webpack/blob/1.3.1/template/.eslintrc.js, thanks.
-
 module.exports = {
   root: true,
-  parserOptions: {
-    parser: 'babel-eslint'
-  },
   env: {
-    browser: true,
+    node: true,
     webextensions: true,
   },
-  extends: [
-    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
-    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
-    'plugin:vue/essential',
-    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
-    'standard',
-    // https://prettier.io/docs/en/index.html
-    'plugin:prettier/recommended'
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue'
-  ],
-  // add your custom rules here
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
   rules: {
-    // allow async-await
-    'generator-star-spacing': 'off',
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  }
-}
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

.github/workflows/pre-release.yml

@@ -2,9 +2,9 @@ name: "pre-release"
 
 on:
   push:
-    branches: [ master ]
+    branches: [master]
   pull_request:
-    branches: [ master ]
+    branches: [master]
   workflow_dispatch:
 
 jobs:
@@ -14,14 +14,13 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      
+
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: "yarn"
       - run: yarn install --frozen-lockfile
       - run: yarn build
-      - run: yarn package
 
       - uses: "marvinpinto/action-automatic-releases@latest"
         with:
@@ -30,4 +29,4 @@ jobs:
           prerelease: true
           title: "Development Build"
           files: |
-            web-ext-artifacts/mortality-*.zip
+            artifacts/mortality-*.zip

.github/workflows/tagged-release.yml

@@ -12,18 +12,17 @@ jobs:
 
     steps:
       - uses: actions/checkout@v2
-      
+
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
-          cache: 'yarn'
+          node-version: "14"
+          cache: "yarn"
       - run: yarn install --frozen-lockfile
       - run: yarn build
-      - run: yarn package
 
       - uses: "marvinpinto/action-automatic-releases@latest"
         with:
           repo_token: "${{ secrets.GITHUB_TOKEN }}"
           prerelease: false
           files: |
-            web-ext-artifacts/mortality-*.zip
+            artifacts/mortality-*.zip

.gitignore

@@ -1,5 +1,28 @@
-/node_modules
-/*.log
+.DS_Store
+node_modules
 /dist
-/dist-zip
-/web-ext-artifacts
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# Vue Browser Extension Output
+*.pem
+*.pub
+*.zip
+/artifacts

README.md

@@ -2,25 +2,38 @@
 
 A Chrome extension that shows a live counter of your age to motivate you to live life to the fullest.
 
-![Screenshot Light Theme](/listing/screenshot_chrome_light.png?raw=true)
+![Screenshot Light Theme](/images/screenshot_chrome_light.png?raw=true)
 
-![Screenshot Dark Theme](/listing/screenshot_chrome_dark.png?raw=true)
+![Screenshot Dark Theme](/images/screenshot_chrome_dark.png?raw=true)
 
 ## Install
 
-<a href="https://chrome.google.com/webstore/detail/mortality/dmcopoldcoemapdejndbdnfmbofbkmbh"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Google_Chrome_icon_%28September_2014%29.svg" width="50px"/> Add to Chrome</a>
+<a href="https://chrome.google.com/webstore/detail/mortality/dmcopoldcoemapdejndbdnfmbofbkmbh"><img src="./images/chrome_logo.svg" width="50px"/> Add to Chrome</a>
 
-<a href="https://addons.mozilla.org/firefox/addon/mortality/"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Firefox_logo%2C_2019.svg" width="50px"/> Add to FireFox</a>
+<a href="https://addons.mozilla.org/firefox/addon/mortality/"><img src="./images/firefox_logo.svg" width="50px"/> Add to FireFox</a>
 
-<a href="https://microsoftedge.microsoft.com/addons/detail/dljbhjjkfdabmfijhmcoodklndhminom"><img src="https://upload.wikimedia.org/wikipedia/en/9/98/Microsoft_Edge_logo_%282019%29.svg" width="50px"/> Add to Edge</a>
+<a href="https://microsoftedge.microsoft.com/addons/detail/dljbhjjkfdabmfijhmcoodklndhminom"><img src="./images/edge_logo.svg" width="50px"/> Add to Edge</a>
 
-## Build
+## Project setup
+```
+yarn install --frozen-lockfile
+```
 
-1. `yarn install --frozen-lockfile`
-1. `yarn build`
-1. `yarn package`
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
 
-You will find the built package under `web-ext-artifacts` folder.
+### Compiles and minifies for production
+```
+yarn build
+```
+Built package will be created under `artifacts` folder.
+
+### Lints and fixes files
+```
+yarn lint
+```
 
 ## Credits
 

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};