Feat: New Logo

2024-11-24 10:25:47 +03:00 · 2021-04-15 23:22:47 +09:00 · 2021-04-15 23:22:47 +09:00 · b2858a4f68
commit b2858a4f68
parent a83ea144cf
21 changed files with 109 additions and 4 deletions
--- 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
--- a/VueTorrent-logo.png
+++ b/VueTorrent-logo.png
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icons/android-chrome-192x192.png
+++ b/public/icons/android-chrome-192x192.png
--- a/public/icons/android-chrome-512x512.png
+++ b/public/icons/android-chrome-512x512.png
--- a/public/icons/android-chrome-maskable-192x192.png
+++ b/public/icons/android-chrome-maskable-192x192.png
--- a/public/icons/android-chrome-maskable-512x512.png
+++ b/public/icons/android-chrome-maskable-512x512.png
--- a/public/icons/apple-touch-icon.png
+++ b/public/icons/apple-touch-icon.png
--- a/public/icons/favicon-16x16.png
+++ b/public/icons/favicon-16x16.png
--- a/public/icons/favicon-32x32.png
+++ b/public/icons/favicon-32x32.png
--- a/public/icons/msapplication-icon-144x144.png
+++ b/public/icons/msapplication-icon-144x144.png
--- a/public/icons/safari-pinned-tab.svg
+++ b/public/icons/safari-pinned-tab.svg
@ -0,0 +1,28 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="512.000000pt" height="512.000000pt" viewBox="0 0 512.000000 512.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.11, written by Peter Selinger 2001-2013
+</metadata>
+<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M435 4702 c-20 -3 -20 -10 -19 -2136 0 -1173 3 -2137 6 -2142 6 -9
+1063 -13 1071 -4 2 3 159 212 348 465 189 253 349 467 356 475 7 8 489 652
+1073 1430 583 778 1066 1422 1073 1430 7 8 23 31 37 50 13 19 29 40 35 46 37
+43 279 376 275 381 -3 3 -242 6 -531 7 l-526 1 -79 -105 c-43 -57 -84 -111
+-91 -120 -7 -8 -43 -56 -80 -106 -37 -50 -78 -104 -90 -120 -12 -16 -135 -180
+-273 -364 -137 -184 -256 -342 -263 -350 -6 -8 -50 -67 -97 -130 -47 -63 -89
+-119 -93 -125 -5 -5 -69 -91 -143 -190 -74 -99 -143 -191 -154 -205 -10 -14
+-117 -156 -237 -316 -120 -160 -228 -304 -240 -320 -12 -16 -85 -114 -162
+-217 l-141 -188 -2 1427 -3 1427 -515 1 c-283 1 -524 0 -535 -2z"/>
+<path d="M3745 2691 c-13 -2 -104 -116 -250 -313 -126 -171 -234 -315 -240
+-322 -19 -22 -215 -286 -218 -293 -1 -5 215 -8 481 -8 l483 0 262 350 c144
+192 267 356 274 365 75 96 161 216 157 220 -6 5 -918 7 -949 1z"/>
+<path d="M2725 1345 c-7 -5 -93 -118 -191 -250 -99 -132 -184 -246 -191 -255
+-61 -76 -311 -416 -308 -419 6 -5 1965 -5 1970 0 24 25 693 924 689 928 -10
+10 -1957 6 -1969 -4z"/>
+</g>
+</svg>
--- a/public/img/icons/android-chrome-192x192.png
+++ b/public/img/icons/android-chrome-192x192.png
--- a/public/img/icons/apple-touch-icon-152x152.png
+++ b/public/img/icons/apple-touch-icon-152x152.png
--- a/public/img/icons/apple-touch-icon.png
+++ b/public/img/icons/apple-touch-icon.png
--- a/public/img/icons/favicon-16x16.png
+++ b/public/img/icons/favicon-16x16.png
--- a/public/img/icons/favicon-32x32.png
+++ b/public/img/icons/favicon-32x32.png
--- a/public/img/icons/favicon.ico
+++ b/public/img/icons/favicon.ico
--- a/public/img/icons/mstile-150x150.png
+++ b/public/img/icons/mstile-150x150.png
--- 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'>
--- 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
      })