Add ability to provide a logo and homepage link (#248)

datalab-org · Jan 29, 2023 · eaba26f · eaba26f
1 parent ff41de1
commit eaba26f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/.docker/app_dockerfile b/.docker/app_dockerfile
@@ -21,7 +21,6 @@ RUN apt-get update \
     && rm -rf /var/lib/apt/lists/*
 
 ENV PATH $PATH:/node_modules/.bin
-COPY webapp/.env .
 CMD [ "yarn", "serve", "--port", "8081"]
 
 FROM base as production

diff --git a/webapp/src/components/Navbar.vue b/webapp/src/components/Navbar.vue
@@ -1,29 +1,41 @@
 <template>
+  <div v-if="this.logo_url != null">
+    <a v-if="this.homepage_url != null" :href="this.homepage_url" target="_blank">
+      <img class="logo-banner" :src="this.logo_url" />
+    </a>
+    <img v-else class="logo-banner" :src="this.logo_url" />
+  </div>
+  <div class="row justify-content-center">
+    <div v-if="currentUser != null">
+      <b>{{ currentUser }}</b> <i>({{ currentUserID }})</i> &nbsp;<a
+        :href="this.api_url + '/logout'"
+        class="btn btn-default btn-link text-primary"
+        >Logout</a
+      >
+    </div>
+    <div v-else class="btn btn-default">
+      <a :href="this.api_url + '/login/github'">Login</a>
+    </div>
+  </div>
   <div id="nav">
     <router-link to="/about">About</router-link> |
     <router-link to="/samples">Samples</router-link> |
     <router-link to="/starting-materials">Starting Materials</router-link> |
     <router-link to="/item-graph">Item graph</router-link>
-    <div v-if="currentUser != null" class="btn mx-auto normal">
-      <b>{{ currentUser }}</b> <i>({{ currentUserID }})</i>
-      <a :href="this.apiUrl + '/logout'" class="btn-link mx-auto text-primary"> (Logout)</a>
-    </div>
-    <div v-else class="btn btn-default ml-3">
-      <a :href="this.apiUrl + '/login/github'">Login</a>
-    </div>
   </div>
 </template>
 
 <script>
-import { API_URL } from "@/resources.js";
-
+import { API_URL, LOGO_URL, HOMEPAGE_URL } from "@/resources.js";
 import { getUserInfo } from "@/server_fetch_utils.js";
 
 export default {
   name: "Navbar",
   data() {
     return {
       apiUrl: API_URL,
+      logo_url: LOGO_URL,
+      homepage_url: HOMEPAGE_URL,
       loginModalIsOpen: false,
       currentUser: null,
       currentUserID: null,
@@ -43,3 +55,19 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.logo-banner {
+  max-width: 200px;
+  width: 100px;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  filter: alpha(opacity=100);
+  opacity: 1;
+}
+a > .logo-banner:hover {
+  filter: alpha(opacity=40);
+  opacity: 0.4;
+}
+</style>
diff --git a/webapp/src/resources.js b/webapp/src/resources.js
@@ -13,6 +13,9 @@ export const API_URL =
   process.env.VUE_APP_API_URL != null ? process.env.VUE_APP_API_URL : "http://localhost:5001";
 export const API_TOKEN = process.env.VUE_APP_API_TOKEN;
 
+export const LOGO_URL = process.env.VUE_APP_LOGO_URL;
+export const HOMEPAGE_URL = process.env.VUE_APP_HOMEPAGE_URL;
+
 export const debounceTime = 250; // time after user stops typing before request is sent
 
 export const blockTypes = {