Feat: New Logo

VueTorrent · Apr 15, 2021 · b2858a4 · b2858a4
1 parent a83ea14
commit b2858a4
Show file tree

Hide file tree

Showing 21 changed files with 109 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -1,8 +1,14 @@
 # VueTorrent
+<p>
+<img align="right" width="200px" src="https://imgur.com/x6dKNB3.png">   
 
-The sleekest looking WebUI for qBittorrent made with Vue.js!
+<p>&nbsp;</p>
+The sleekest looking WebUI for qBittorrent made with Vue.js!  
 
 > Vue, qBitorrent, Vuetify
+</p>
+<p>&nbsp;</p>
+
 
 ## Screenshots
 
@@ -84,3 +90,4 @@ but before you do that:
 ## Credits
 
 - Other alternate WebUI written in Vue [`CzBiX qb-web`](https://github.com/CzBiX/qb-web)
+- Many thanks @m4ximuel for designing the icon & helping out with the project
diff --git a/VueTorrent-logo.png b/VueTorrent-logo.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/icons/android-chrome-192x192.png b/public/icons/android-chrome-192x192.png
diff --git a/public/icons/android-chrome-512x512.png b/public/icons/android-chrome-512x512.png
diff --git a/public/icons/android-chrome-maskable-192x192.png b/public/icons/android-chrome-maskable-192x192.png
diff --git a/public/icons/android-chrome-maskable-512x512.png b/public/icons/android-chrome-maskable-512x512.png
diff --git a/public/icons/apple-touch-icon.png b/public/icons/apple-touch-icon.png
diff --git a/public/icons/favicon-16x16.png b/public/icons/favicon-16x16.png
diff --git a/public/icons/favicon-32x32.png b/public/icons/favicon-32x32.png
diff --git a/public/icons/msapplication-icon-144x144.png b/public/icons/msapplication-icon-144x144.png
diff --git a/public/icons/safari-pinned-tab.svg b/public/icons/safari-pinned-tab.svg
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
diff --git a/public/img/icons/favicon.ico b/public/img/icons/favicon.ico
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
diff --git a/public/index.html b/public/index.html
@@ -3,10 +3,10 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-    <meta name="Description" content="The sleekest looking WEBUI for qBittorrent made with Vuejs!">
-    <link rel="icon" href="./favicon.ico">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="./favicon.ico?s=1">
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body oncontextmenu='return false'>

diff --git a/vue.config.js b/vue.config.js
@@ -1,16 +1,68 @@
 const webpack = require('webpack')
 
+const iconVersion = 22 //fingerprint
+
 const qBittorrentPort = process.env['QBITTORRENT_PORT'] ?? 8080
 const vueTorrentPort = process.env['VUETORRENT_PORT'] ?? 8000
 const proxyTarget = process.env['QBITTORRENT_TARGET'] ?? 'http://localhost'
 
 module.exports = {
   pwa: {
+    manifestPath: 'manifest.' + iconVersion + '.json',
     name: 'VueTorrent', //PWApp name
     themeColor: '#597566', //PWA title bar color ( windows 10 PWA, android web browser and PWA address bar color )
     manifestOptions: {
+      //start_url: 'https://example.com/',
+      icons: [
+        {
+          src: './icons/android-chrome-192x192.png?s=' + iconVersion,
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: './icons/android-chrome-512x512.png?s=' + iconVersion,
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          src: './icons/android-chrome-maskable-192x192.png?s=' + iconVersion,
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'maskable'
+        },
+        {
+          src: './icons/android-chrome-maskable-512x512.png?s=' + iconVersion,
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable'
+        },
+
+        {
+          src: './icons/apple-touch-icon.png?s=' + iconVersion,
+          sizes: '180x180',
+          type: 'image/png'
+        },
+        {
+          src: './icons/safari-pinned-tab.svg?s=' + iconVersion,
+          sizes: '683x683',
+          type: 'image/svg+xml'
+        },
+        {
+          src: './icons/msapplication-icon-144x144.png?s=' + iconVersion,
+          sizes: '144x144',
+          type: 'image/png'
+        }
+
+      ],
       background_color: '#eeeeee' //background color for android PWA splash page
     },
+    iconPaths: {
+      favicon: './favicon.ico?s=' + iconVersion,
+      favicon32: './icons/favicon-32x32.png?s=' + iconVersion,
+      favicon16: './icons/favicon-16x16.png?s=' + iconVersion,
+      appleTouchIcon: './icons/apple-touch-icon.png?s=' + iconVersion,
+      maskIcon: './icons/safari-pinned-tab.svg?s=' + iconVersion
+    },
     workboxOptions: {
       skipWaiting: true
     }
@@ -20,6 +72,24 @@ module.exports = {
       .plugin('html')
       .tap(args => {
         args[0].title = 'VueTorrent'
+        args[0].meta = [
+          {
+            name: 'description',
+            content: 'The sleekest looking WEBUI for qBittorrent made with Vuejs!'
+          },
+          {
+            property: 'og:image',
+            content: './icons/android-chrome-maskable-512x512.png?s=' + iconVersion
+          },
+          {
+            property: 'og:description',
+            content: 'torrent universal server for remote download.'
+          },
+          {
+            property: 'og:title',
+            content: 'WELCOME :: VUE TORRENT'
+          }
+        ]
 
         return args
       })