Add custom favicon generation + Add settings for home logo

l3mpire · Oct 7, 2022 · 172b75d · 172b75d
1 parent 2d4746e
commit 172b75d
Show file tree

Hide file tree

Showing 19 changed files with 409 additions and 65 deletions.
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -17,6 +17,7 @@
     "body-parser": "^1.20.0",
     "escape-string-regexp": "^5.0.0",
     "fast-json-stable-stringify": "^2.1.0",
+    "favicons": "^7.0.1",
     "file-type": "^16.5.3",
     "gm": "^1.23.1",
     "hotkeys-js": "^3.9.4",

diff --git a/app/public/favicon/android-chrome-192x192.png b/app/public/favicon/android-chrome-192x192.png
diff --git a/app/public/favicon/android-chrome-256x256.png b/app/public/favicon/android-chrome-256x256.png
diff --git a/app/public/favicon/apple-touch-icon.png b/app/public/favicon/apple-touch-icon.png
diff --git a/app/public/favicon/browserconfig.xml b/app/public/favicon/browserconfig.xml
diff --git a/app/public/favicon/favicon-16x16.png b/app/public/favicon/favicon-16x16.png
diff --git a/app/public/favicon/favicon-32x32.png b/app/public/favicon/favicon-32x32.png
diff --git a/app/public/favicon/favicon.ico b/app/public/favicon/favicon.ico
diff --git a/app/public/favicon/mstile-150x150.png b/app/public/favicon/mstile-150x150.png
diff --git a/app/public/favicon/safari-pinned-tab.svg b/app/public/favicon/safari-pinned-tab.svg
diff --git a/app/public/favicon/site.webmanifest b/app/public/favicon/site.webmanifest
diff --git a/app/settings-dev.json b/app/settings-dev.json
@@ -10,7 +10,9 @@
       "staging": false,
       "enableLogClient": false,
       "primaryColor": "#A5E6BA",
-      "secondaryColor": "#13C4A3"
+      "secondaryColor": "#13C4A3",
+      "logoURL": "https://assets.website-files.com/62b4ba92180b4210cc065959/62b4c09cbc28c2286fc87ed6_Logo.svg",
+      "faviconURL": "https://assets.website-files.com/62b4ba92180b4210cc065959/62bdafd68a5ffb164edbdf51_Favicon%20(1).png"
     },
 
     "debug": false,

diff --git a/core/client/helpers.js b/core/client/helpers.js
@@ -344,10 +344,13 @@ const getHslFromHex = H => {
   return { h, s, l };
 };
 
+const filesURL = `${Meteor.settings.public.lp.website}${Meteor.settings.public.files.route}/`;
+
 export {
   allowPhaserMouseInputs,
   canAnswerCall,
   clamp,
+  filesURL,
   formatURL,
   formatURLs,
   generateEntityThumbnail,

diff --git a/core/client/scenes/scene-loading.js b/core/client/scenes/scene-loading.js
@@ -1,4 +1,5 @@
 import Phaser from 'phaser';
+import { filesURL } from '../helpers';
 
 LoadingScene = new Phaser.Class({
   Extends: Phaser.Scene,
@@ -14,8 +15,10 @@ LoadingScene = new Phaser.Class({
   },
 
   preload() {
+    const { logoURL } = Meteor.settings.public.lp;
+
     this.load.setBaseURL('/');
-    this.load.image('logo', 'lemverse.png');
+    this.load.image('logo', logoURL ? `${filesURL}logo` : null || 'lemverse.png');
     this.load.image('scene-loader-background', 'assets/images/scene-loader-background.png');
   },
 

diff --git a/core/client/ui/main.hbs.html b/core/client/ui/main.hbs.html
@@ -1,16 +1,14 @@
 <head>
-  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />
+  <meta name="viewport"
+    content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no" />
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
-  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
-  <link rel="manifest" href="/favicon/site.webmanifest">
-  <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#5bbad5">
-  <link rel="shortcut icon" href="/favicon/favicon.ico">
+  <link id="favicon" rel="icon" type="image/png">
+  <link id="favicon-16" rel="icon" type="image/png" sizes="16x16">
+  <link id="favicon-32" rel="icon" type="image/png" sizes="32x32">
+  <link id="apple-touch-icon" irel="apple-touch-icon" sizes="180x180">
   <meta name="msapplication-TileColor" content="#00a300">
-  <meta name="msapplication-config" content="/favicon/browserconfig.xml">
   <meta name="theme-color" content="#ffffff">
 </head>
 

diff --git a/core/client/ui/main.js b/core/client/ui/main.js
@@ -1,6 +1,11 @@
-import { nearestDuration } from '../helpers';
+import { nearestDuration, filesURL } from '../helpers';
 
 document.title = Meteor.settings.public.lp.product;
+document.getElementById('favicon').setAttribute('href', `${filesURL}favicon.png`);
+document.getElementById('favicon-16').setAttribute('href', `${filesURL}favicon16x16.png`);
+document.getElementById('favicon-32').setAttribute('href', `${filesURL}favicon32x32.png`);
+document.getElementById('apple-touch-icon').setAttribute('href', `${filesURL}appletouchicon.png`);
+
 Session.setDefault('retryTimeDuration', 0);
 const updateRetryTimeDuration = () => Session.set('retryTimeDuration', moment(Meteor.status().retryTime).diff());
 

diff --git a/core/server/files.js b/core/server/files.js
@@ -1,8 +1,21 @@
 import FileType from 'file-type';
 import '../collections';
 import gm from 'gm';
+import { favicons } from 'favicons';
 import { fileOnBeforeUpload } from '../lib/misc';
 
+const faviconsConfiguration = {
+  appName: 'lemverse',
+  icons: {
+    android: false,
+    appleIcon: ['apple-touch-icon.png'],
+    appleStartup: false,
+    favicons: ['favicon-16x16.png', 'favicon-32x32.png'],
+    windows: false,
+    yandex: false,
+  },
+};
+
 const filesAfterUploadEditorTileset = (user, fileRef) => {
   log('filesAfterUploadEditorTileset: start', { userId: user._id, fileRef });
   if (!/png|jpe?g/i.test(fileRef.extension || '')) return;
@@ -136,6 +149,19 @@ const filesAfterUploadAsset = async (user, fileRef) => {
   log('filesAfterUploadAsset: done', { userId: user._id });
 };
 
+
+const filesAfterUploadFavicon = async fileRef => {
+  log('filesAfterUploadFavicon: start', { fileRef });
+
+  const response = await favicons(fileRef.path, faviconsConfiguration);
+  const allFiles = response.images.concat(response.files);
+
+  // fileId can't contain file extension + special characters like '-'
+  allFiles.forEach(image => Files.write(image.contents, { fileName: image.name, fileId: image.name.split('.')[0].replace('-', '') }));
+
+  log('filesAfterUploadFavicon: done', { fileRef });
+};
+
 Files.onBeforeUpload = function (file) {
   if (this.eof) {
     const { mime } = Promise.await(FileType.fromFile(file.path)) || file; // fallback to default mime for non binary-based file
@@ -149,13 +175,15 @@ Files.onBeforeUpload = function (file) {
 };
 
 Files.on('afterUpload', fileRef => {
-  const user = Meteor.users.findOne(fileRef.userId);
+  const source = fileRef.meta?.source;
+  const user = source !== 'favicon' && Meteor.users.findOne(fileRef.userId);
   log('FilesCollection: afterUpload start', { userId: user._id, fileRef });
 
-  if (fileRef.meta?.source === 'editor-assets') filesAfterUploadAsset(user, fileRef);
-  else if (fileRef.meta?.source === 'editor-characters') filesAfterUploadEditorCharacter(user, fileRef);
-  else if (fileRef.meta?.source === 'editor-tilesets') filesAfterUploadEditorTileset(user, fileRef);
-  else if (fileRef.meta?.source === 'voice-recorder') filesAfterUploadVoiceRecorder(user, fileRef);
+  if (source === 'editor-assets') filesAfterUploadAsset(user, fileRef);
+  else if (source === 'editor-characters') filesAfterUploadEditorCharacter(user, fileRef);
+  else if (source === 'editor-tilesets') filesAfterUploadEditorTileset(user, fileRef);
+  else if (source === 'voice-recorder') filesAfterUploadVoiceRecorder(user, fileRef);
+  else if (source === 'favicon') filesAfterUploadFavicon(fileRef);
 });
 
 Meteor.publish('files', fileIds => {

diff --git a/core/server/lemverse.js b/core/server/lemverse.js
@@ -71,3 +71,29 @@ lp.defer(() => {
     createdAt: new Date(),
   });
 });
+
+const allFilesName = ['favicon.png', 'favicon-16x16.png', 'favicon-32x32.png', 'apple-touch-icon.png'];
+
+Meteor.startup(() => {
+  const { faviconURL, logoURL } = Meteor.settings.public.lp;
+
+  // Check if logo already exist
+  const logoHash = crypto.createHash('sha256').update(logoURL).digest('hex');
+  if (!Files.findOne({ meta: { hash: logoHash } })) {
+    // otherwise delete current logo to replace it
+    Files.remove({ name: 'logo.png' }, error => {
+      if (error) log('FilesCollection: error occured while removing logo', error);
+      Files.load(logoURL, { fileName: 'logo.png', fileId: 'logo', meta: { hash: logoHash } });
+    });
+  }
+
+  // Check if favicon already exist
+  const faviconHash = crypto.createHash('sha256').update(faviconURL).digest('hex');
+  if (!Files.findOne({ meta: { hash: faviconHash } })) {
+    // otherwise delete all related favicons to regenerate them
+    Files.remove({ name: { $in: allFilesName } }, error => {
+      if (error) log('FilesCollection: error occured while removing favicon', error);
+      Files.load(faviconURL, { fileName: 'favicon.png', fileId: 'favicon', meta: { hash: faviconHash, source: 'favicon' } }, () => {}, true);
+    });
+  }
+});