Branding via ENV

.github/workflows/docker.yml

@@ -2,10 +2,8 @@ name: Docker
 
 on:
   push:
-    branches: [main]
+    branches: [generic_build]
     tags: [v*]
-  pull_request:
-    branches: [main]
 
 jobs:
   docker:
@@ -18,7 +16,7 @@ jobs:
         id: meta
         uses: docker/metadata-action@v3
         with:
-          images: ${{ secrets.DOCKERHUB_USERNAME }}/eth-faucet
+          images: gatewayfm/eth-faucet-generic:latest
           tags: |
             type=ref,event=branch
             type=ref,event=pr

web/.env

@@ -0,0 +1,4 @@
+# BRANDING 
+
+VITE_LOGO_PATH=/favicon.png
+VITE_BACKGROUND_PATH=/background.jpg

web/.env.example

@@ -0,0 +1,4 @@
+# BRANDING 
+
+VITE_LOGO_PATH=/gpt-logo-white-transparent.svg
+VITE_BACKGROUND_PATH=/gpt-background.jpg

web/src/Faucet.svelte

@@ -16,6 +16,9 @@
   let mounted = false;
   let hcaptchaLoaded = false;
 
+	const logoPath = import.meta.env.VITE_LOGO_PATH
+	const backgroundPath = import.meta.env.VITE_BACKGROUND_PATH
+
   onMount(async () => {
     const res = await fetch('/api/info');
     faucetInfo = await res.json();
@@ -118,14 +121,14 @@
 </svelte:head>
 
 <main>
-  <section class="hero is-info is-fullheight">
+  <section class="hero is-info is-fullheight" style='background-image: url({backgroundPath})'>
     <div class="hero-head">
       <nav class="navbar">
         <div class="container">
           <div class="navbar-brand">
             <a class="navbar-item" href="../..">
-              <span class="icon">
-                <i class="fa fa-bath" />
+              <span class="icon icon-brand">
+                <img src={logoPath} alt="logo"/>
               </span>
               <span><b>{faucetInfo.symbol} Faucet</b></span>
             </a>
@@ -187,10 +190,16 @@
 </main>
 
 <style>
+
+	.icon-brand {
+		width: 5rem; 
+		margin: 1rem;
+	}
+
   .hero.is-info {
     background:
-      linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
-      url('/background.jpg') no-repeat center center fixed;
+      linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
+      no-repeat center center fixed;
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;

web/src/env/env.ts

@@ -0,0 +1,10 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_LOGO_PATH: string;
+  readonly VITE_BACKGROUND_PATH: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}