Support configurable branding of graphics

Allows the image and icon folders to be set as part of the branding
configuration.

branding.json

@@ -27,5 +27,9 @@
   "support-url": "https://askubuntu.com/questions/tagged/ubuntu-touch",
   "contact-name": "Telegram",
   "contact-url": "https://t.me/WelcomePlus",
-  "update-url": "https://api.github.com/repos/ubports/ubports-installer/releases/latest"
+  "update-url": "https://api.github.com/repos/ubports/ubports-installer/releases/latest",
+  "screens": "public/screens",
+  "images": "public/img",
+  "icons": "build/icons/",
+  "logo": "yumi.svg"
 }

build.js

@@ -69,9 +69,13 @@ var buildConfig = {
   publish: [],
   files: [
     "src/**/*",
-    "public/**/*",
+    "public/*",
+    "public/build/**/*",
+    "public/fonts/**/*",
+    `${branding.screens}/**/*`,
+    `${branding.images}/**/*`,
     "node_modules/**/*",
-    "build/icons/icon.*",
+    `${branding.icons}/icon.*`,
     "branding.json",
     // exclude binaries for other operating systems
     ...PLATFORMS.filter(p => p !== opts.os).map(

src/ui/modals/specific-modals/DeveloperModeModal.svelte

@@ -1,6 +1,7 @@
 <script>
   import { createEventDispatcher } from "svelte";
   import Modal from "./Modal.svelte";
+  import branding from "../../../../branding.json";
 
   const dispatch = createEventDispatcher();
   const close = () => dispatch("close");
@@ -41,7 +42,7 @@
           </div>
           <div class="col-6">
             <img
-              src="./screens/ubuntu-dev-mode.gif"
+              src="../{branding.screens}/ubuntu-dev-mode.gif"
               alt="ubuntu-dev-mode"
               style="width: 100%"
             />
@@ -83,7 +84,7 @@
           </div>
           <div class="col-6">
             <img
-              src="./screens/android-dev-mode.gif"
+              src="../{branding.screens}/android-dev-mode.gif"
               alt="android-dev-mode"
               style="width: 100%"
             />

src/ui/partials/Animation.svelte

@@ -4,6 +4,7 @@
   import { tsParticles } from "tsparticles";
   import CircuitBoard from "./CircuitBoard.svelte";
   import Squares from "./Squares.svelte";
+  import branding from "../../../branding.json";
 
   onMount(updateAnimations);
   animationType.subscribe(updateAnimations);
@@ -98,12 +99,12 @@
   }
 
   .download-animation {
-    background-image: url("../img/arrow-down.png");
+    background-image: url("../../{branding.images}/arrow-down.png");
     animation: download-animation 8s linear infinite;
   }
 
   .push-animation {
-    background-image: url("../img/arrow-right.png");
+    background-image: url("../../{branding.images}/arrow-right.png");
     animation: push-animation 10s linear infinite;
   }
 

src/ui/partials/Yumi.svelte

@@ -1,4 +1,6 @@
 <script>
+  import branding from "../../../branding.json";
+
   let ubpRobotFoot = true;
   let ubpRobotSide = false;
 
@@ -26,7 +28,7 @@
 </script>
 
 <img
-  src="./img/yumi.svg"
+  src="../{branding.images}/{branding.logo}"
   alt="yumi"
   class="yumi"
   class:yumi-foot={ubpRobotFoot}

src/ui/views/Done.svelte

@@ -6,7 +6,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />

src/ui/views/ManualDownload.svelte

@@ -4,6 +4,7 @@
     manualDownloadGroup,
     eventObject
   } from "../../stores.mjs";
+  import branding from "../../../branding.json";
 
   let downloadedFile;
 
@@ -18,7 +19,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />

src/ui/views/NotSupported.svelte

@@ -10,7 +10,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen5.jpg"
+      src="../{branding.screens}/Screen5.jpg"
       alt="Screen5"
       style="height: 350px; margin: auto; display: block;"
     />

src/ui/views/SelectOs.svelte

@@ -1,6 +1,6 @@
 <script>
   const { ipcRenderer } = require("electron");
-  const branding = require("../../../branding.json");
+  import branding from "../../../branding.json";
 
   import {
     osSelectOptions,
@@ -18,7 +18,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen6.jpg"
+      src="../{branding.screens}/Screen6.jpg"
       alt="Screen6"
       style="height: 350px; margin: auto; display: flex;"
     />

src/ui/views/UserAction.svelte

@@ -1,13 +1,14 @@
 <script>
   import { userActionEventObject, actionData } from "../../stores.mjs";
+  import branding from "../../../branding.json";
 </script>
 
 <div class="row">
   <div class="col-6">
     <img
       src={$actionData.image
-        ? `./img/${$actionData.image}.jpg`
-        : "./screens/Screen6.jpg"}
+        ? `../${branding.images}/${$actionData.image}.jpg`
+        : `../${branding.screens}/Screen6.jpg`}
       alt="Screen6"
       style="height: 350px; margin: auto; display: block;"
     />

src/ui/views/WaitForDevice.svelte

@@ -22,7 +22,7 @@
 <div class="row">
   <div class="col-6">
     <img
-      src="./screens/Screen1.jpg"
+      src="../{branding.screens}/Screen1.jpg"
       alt="screen1"
       style="height: 350px; margin: auto;"
     />