feat(logo): add configurable logo name

Author: TasoOneAsia

README.md

@@ -46,9 +46,10 @@ The config can be found in `web/config.js`. This holds a plethora of configurati
 | ENABLE_GFM_MARKDOWN | Whether to enable the `Github Flavored Markdown` spec for the parser | `ENABLE_GFM_MARKDOWN = true`
 | ENABLE_SERVER_LOGO | Whether to enable the server logo | `ENABLE_SERVER_LOGO = true`
 | SERVER_LOGO_POSITION | Where to place logo if enabled | `SERVER_LOGO_POSITION = 'top-left'`
+| SERVER_LOGO_FILE_NAME | The name of your logo file within "logo/" directory | `SERVER_LOGO_FILE_NAME = 'logo.png'`
 | MUSIC_ENABLED | Enable loading music | `MUSIC_ENABLED = true `
 | MUSIC_START_VOLUME | The volume for loading music (0 - 1.0) | `MUSIC_START_VOLUME = 0.5`
-| MUSIC_FILE_NAME | The name of the music file to play in the "music/" folder | `MUSIC_FILE_NAME = music.mp3`
+| MUSIC_FILE_NAME | The name of the music file to play in the "music/" folder | `MUSIC_FILE_NAME = 'music.mp3'`
 
 ## Customize
 

web/assets/script.js

@@ -5,7 +5,7 @@ import {
   ENABLE_CURSOR,
   SERVER_LOGO_POSITION,
   ENABLE_SERVER_LOGO,
-  MUSIC_ENABLED
+  MUSIC_ENABLED, SERVER_LOGO_FILE_NAME
 } from '../config.js'
 
 import { parsedMdTips } from "./markdown_parser.js";
@@ -130,6 +130,9 @@ const startBackgroundInterval = () => {
 */
 const setupServerLogo = () => {
   if (!ENABLE_SERVER_LOGO) return;
+  const logoLocation = `./logo/${SERVER_LOGO_FILE_NAME}`
+  logoEl.css('background', `url(${logoLocation})`)
+  logoEl.css('background-size', 'contain')
   logoEl.css('visibility', 'visible')
   logoEl.addClass(SERVER_LOGO_POSITION)
 }

web/assets/styles.css

@@ -77,9 +77,8 @@ a[onclick] {
 }
 
 #server-logo {
-  background: url("./images/logo.png") no-repeat;
   visibility: hidden;
-  background-size: contain;
+  background-repeat: no-repeat;
   position: absolute;
   width: 15vh;
   height: 15vh;

web/config.js

@@ -64,4 +64,7 @@ export const ENABLE_GFM_MARKDOWN = false
 export const ENABLE_SERVER_LOGO = true
 
 // Define server logo placement ['top-left', 'top-right', 'bottom-right', 'center']
-export const SERVER_LOGO_POSITION = 'top-right'
+export const SERVER_LOGO_POSITION = 'center'
+
+// The name of your logo file within "logo/" directory
+export const SERVER_LOGO_FILE_NAME = 'logo.png'