Implement custom logo support

man90es · Apr 9, 2024 · ff31212 · ff31212
1 parent ae51abd
commit ff31212
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 4 deletions.
diff --git a/.env.template b/.env.template
@@ -1,4 +1,13 @@
 # Multiple APIs can be defined using a comma separated list
+#VUE_APP_API_ENDPOINT=http://127.0.0.1:6749,http://192.168.0.100:6749
 VUE_APP_API_ENDPOINT=http://127.0.0.1:6749
-VUE_APP_TITLE=Kumori
+
+# Website locale
 VUE_APP_LOCALE=en
+
+# Website title
+VUE_APP_TITLE=Kumori
+
+# Website logo (custom logos can be placed in public/custom)
+#VUE_APP_LOGO=custom/logo.png
+VUE_APP_LOGO=logo.png
diff --git a/.gitignore b/.gitignore
@@ -18,3 +18,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+/public/custom/*
+!.gitkeep
diff --git a/public/custom/.gitkeep b/public/custom/.gitkeep
diff --git a/public/index.html b/public/index.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="<%= VUE_APP_LOCALE %>">
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width,initial-scale=1">
 	<link rel="icon" href="<%= BASE_URL %>favicon.ico">
 	<link rel="stylesheet" href="/index.css">
-	<title>kumori</title>
+	<title>
+		<%= VUE_APP_TITLE %>
+	</title>
 
 	<noscript>You need to enable JavaScript to run this app.</noscript>
 	<div id="app"></div>

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -1,7 +1,7 @@
 <template>
 	<div id="home">
 		<div id="background-layer" :style="backgroundStyle" />
-		<img v-if="loggedOn || 0 === loginPhase" src="logo.svg" @click="() => loggedOn || ++loginPhase" />
+		<img v-if="loggedOn || 0 === loginPhase" :src="logoURI" @click="() => loggedOn || ++loginPhase" />
 		<form v-else-if="1 === loginPhase">
 			<input :disabled="formValues.invite.length" placeholder="Username" type="text" v-model="formValues.name" />
 			or
@@ -36,6 +36,8 @@
 	const loggedOn = computed(() => Boolean(user.id))
 	const user = useUserStore()
 
+	const logoURI = process.env.VUE_APP_LOGO || 'logo.svg'
+
 	const loginPhase = ref(0)
 	const formValues = reactive({
 		email: "",