Merge pull request #482 from bastienwirtz/vuejs-3

Vuejs 3

.eslintrc.cjs

@@ -0,0 +1,17 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  root: true,
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier",
+  ],
+  env: {
+    "vue/setup-compiler-macros": true,
+  },
+  rules: {
+    "vue/multi-word-component-names": "off",
+  },
+};

.github/workflows/integration.yml

@@ -20,12 +20,19 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js ${{ matrix.node-version }}
+    - 
+      name: Checkout
+      uses: actions/checkout@v3
+    - 
+      name: Use Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v2
       with:
         node-version: ${{ matrix.node-version }}
         cache: 'yarn'
-    - run: yarn install
-    - run: yarn lint
+    - 
+      name: install dependencies
+      run: yarn install
+    - 
+      name: Check code style & potentential issues
+      run: yarn lint
 

.github/workflows/release.yml

@@ -10,15 +10,20 @@ jobs:
     name: Upload Release Asset
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - name: Build project
+      - 
+        name: Checkout
+        uses: actions/checkout@v3
+      - 
+        name: Build project
         run: |
           yarn install
           yarn build
-      - name: Create artifact
+      - 
+        name: Create artifact
         working-directory: "dist"
         run: zip -r ../homer.zip ./*
-      - name: Create Release
+      - 
+        name: Create Release
         id: create_release
         uses: softprops/action-gh-release@v1
         with:

docs/configuration.md

@@ -152,7 +152,7 @@ services:
         # background: red # optional color for card to set color directly without custom stylesheet
 ```
 
-View [Custom Services](customservices.md) for details about all available custom services (like PiHole) and how to configure them.
+View **[Custom Services](customservices.md)** for details about all available custom services (like `PiHole`) and how to configure them.
 
 If you choose to fetch message information from an endpoint, the output format should be as follows (or you can [custom map fields as shown in tips-and-tricks](./tips-and-tricks.md#mapping-fields)):
 
@@ -180,27 +180,4 @@ You can read the [bulma modifiers page](https://bulma.io/documentation/modifiers
 
 ## PWA Icons
 
-In order to easily generate all required icon preset for the PWA to work, a tool like [vue-pwa-asset-generator](https://www.npmjs.com/package/vue-pwa-asset-generator) can be used:
-
-```bash
-npx vue-pwa-asset-generator -a {your_512x512_source_png} -o {your_output_folder}
-```
-
-## Supported services
-
-Currently the following services are supported for showing quick infos on the card. They can be used by setting the type to one of the following values at the item.
-
-- PiHole
-- AdGuardHome
-- PaperlessNG
-- Mealie
-
-## Additional configuration
-
-### Paperless
-
-For Paperless you need an API-Key which you have to store at the item in the field `apikey`.
-
-### Mealie
-
-First off make sure to remove an existing `subtitle` as it will take precedence if set. Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
+See icons documentation [here](https://github.com/bastienwirtz/homer/blob/main/public/assets/icons/README.md).

docs/customservices.md

@@ -19,6 +19,7 @@ within Homer:
 + [Emby / Jellyfin](#emby--jellyfin)
 + [Uptime Kuma](#uptime-kuma)
 + [Tautulli](#tautulli)
++ [Mealie](#mealie)
 + [Healthchecks](#healthchecks)
 
 If you experiencing any issue, please have a look to the [troubleshooting](troubleshooting.md) page.
@@ -225,6 +226,11 @@ endpoint pointing to Tautulli!
   apikey: "MY-SUPER-SECRET-API-KEY"
 ```
 
+## Mealie
+
+First off make sure to remove an existing `subtitle` as it will take precedence if set. 
+Setting `type: "Mealie"` will then show the number of recipes Mealie is keeping organized or the planned meal for today if one is planned. You will have to set an API key in the field `apikey` which can be created in your Mealie installation.
+
 ## Healthchecks
 
 This service displays information about the configured status checks from the Healthchecks application.

docs/development.md

@@ -5,11 +5,11 @@ If you want to contribute to Homer, please read the [contributing guidelines](ht
 ```sh
 # Using yarn (recommended)
 yarn install
-yarn serve
+yarn dev
 
 # **OR** Using npm
 npm install
-npm run serve
+npm run dev
 ```
 
 ## Custom services

index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="assets/icons/favicon.ico" />
+    <link rel="apple-touch-icon" href="assets/icons/apple-touch-icon.png" sizes="180x180">
+    <link rel="mask-icon" href="assets/icons/logo.svg">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
+    <title>Homer</title>
+  </head>
+  <body>
+    <div id="app-mount"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

lighttpd.conf

@@ -8,4 +8,4 @@ server.document-root   = "/www"
 alias.url              = ( env.SUBFOLDER => "/www" )
 server.indexfiles      = ("index.html")
 server.follow-symlink  = "enable"
-server.feature-flags  += ( "server.clock-jump-restart" => 0 )
+server.feature-flags  += ( "server.clock-jump-restart" => 0 )

package.json

@@ -1,35 +1,29 @@
 {
   "name": "homer",
-  "version": "21.09.1",
+  "version": "22.07.2",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview --port 5050",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.1.1",
     "bulma": "^0.9.4",
-    "core-js": "^3.22.7",
     "js-yaml": "^4.1.0",
     "lodash.merge": "^4.6.2",
-    "register-service-worker": "^1.7.2",
-    "vue": "^2.6.14"
+    "vue": "^3.2.33"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.19",
-    "@vue/cli-plugin-eslint": "~4.5.19",
-    "@vue/cli-plugin-pwa": "~4.5.19",
-    "@vue/cli-service": "~4.5.19",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "prettier": "^2.2.1",
-    "raw-loader": "^4.0.2",
-    "sass": "^1.26.5",
-    "sass-loader": "^8.0.2",
-    "vue-template-compiler": "^2.6.12"
+    "@rushstack/eslint-patch": "^1.1.0",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "eslint": "^8.5.0",
+    "eslint-plugin-vue": "^9.2.0",
+    "prettier": "^2.5.1",
+    "sass": "^1.52.2",
+    "vite": "^2.9.14",
+    "vite-plugin-pwa": "^0.12.3"
   },
   "license": "Apache-2.0"
 }

public/assets/icons/README.md

@@ -0,0 +1,12 @@
+# PWA Icons / Images 
+
+We suggest you to create a svg or png icon (if it is a png icon, with the maximum resolution possible) for your application and use it to generate a favicon package in [Favicon Generator](https://realfavicongenerator.net/).
+
+Once generated, download the ZIP and use android-* icons for pwa-*:
+
+- use `android-chrome-192x192.png` for `pwa-192x192.png`
+- use `android-chrome-512x512.png` for `pwa-512x512.png`
+- `apple-touch-icon.png` is `apple-touch-icon.png`
+- `favicon.ico` is `favicon.ico`
+
+`