Import images

- Vite base URL now works
- Images are hashed for deployment so can be cached
- Ignore images in src for the licensing check

src/App.svelte

@@ -23,6 +23,7 @@
   import BottomPanel from './components/bottom/BottomPanel.svelte';
   import { t } from './i18n';
   import { consent } from './script/stores/complianceStore';
+  import microbitLogoImage from './imgs/microbit-logo.svg';
 
   ConnectionBehaviours.setInputBehaviour(new InputBehaviour());
   ConnectionBehaviours.setOutputBehaviour(new OutputBehaviour());
@@ -50,11 +51,7 @@
 
       <div class="w-full flex flex-col bg-backgrounddark">
         <ControlBar>
-          <img
-            class="mr-8"
-            src="/imgs/microbit-logo.svg"
-            alt="Micro:bit logo"
-            width="150px" />
+          <img class="mr-8" src={microbitLogoImage} alt="Micro:bit logo" width="150px" />
           <h1 class="text-xl font-thin whitespace-nowrap">{$t('content.index.title')}</h1>
           <div class="flex flex-row basis-full justify-end">
             <SelectLanguageControlBarDropdown />

src/__tests__/license-identifiers.test.ts

@@ -12,7 +12,7 @@ import 'jest-expect-message';
 import * as path from 'path';
 
 // Place files you wish to ignore by name in here
-const ignoredFiles: string[] = ['.DS_Store'];
+const ignoredFiles: RegExp[] = [/^\.DS_Store$/, /\.(gif|svg|png|jpg|jpeg)$/];
 const directoriesToScan = ['./src/', './microbit/v2/source/', './microbit/v1/source/'];
 
 const licenseIdentifierStringSPDX = 'SPDX-License-Identifier:';
@@ -27,12 +27,12 @@ type DirectoryContents = {
   folders: string[];
 };
 
-const readDirectory = (directory: string, ignoreList: string[]): DirectoryContents => {
+const readDirectory = (directory: string, ignoreList: RegExp[]): DirectoryContents => {
   const files: string[] = [];
   const folders: string[] = [];
   const filesRead = fs.readdirSync(directory);
   filesRead.forEach(file => {
-    if (ignoreList.includes(file)) return;
+    if (ignoreList.some(ignoreRegExp => ignoreRegExp.test(file))) return;
     const fileLocation = path.join(directory, file);
     const stats = fs.statSync(fileLocation);
     if (stats.isFile()) {

src/components/Gesture.svelte

@@ -30,6 +30,7 @@
   import ImageSkeleton from './skeletonloading/ImageSkeleton.svelte';
   import GestureTilePart from './GestureTilePart.svelte';
   import StaticConfiguration from '../StaticConfiguration';
+  import microbitRecordingGuideImage from '../imgs/microbit_record_guide.svg';
 
   // Variables for component
   export let onNoMicrobitSelect: () => void;
@@ -259,7 +260,7 @@
             <ImageSkeleton
               height={95}
               width={140}
-              src="/imgs/microbit_record_guide.svg"
+              src={microbitRecordingGuideImage}
               alt="microbit recording guide" />
           </div>
           <p class=" text-center absolute w-60px right-23px top-30px">

src/components/LoadingSpinner.svelte

@@ -4,8 +4,10 @@
   SPDX-License-Identifier: MIT
  -->
 
-<script></script>
+<script>
+  import loadingSpinnerImage from '../imgs/loadingspinner.gif';
+</script>
 
 <div class="justify-center items-center self-center m-auto">
-  <img alt="loading" src="/imgs/loadingspinner.gif" width="150px" />
+  <img alt="loading" src={loadingSpinnerImage} width="150px" />
 </div>

src/components/bottom/ConnectedLiveGraphButtons.svelte

@@ -9,6 +9,7 @@
   import TypingUtils from '../../script/TypingUtils';
   import { state } from '../../script/stores/uiStore';
   import StandardButton from '../StandardButton.svelte';
+  import loadingSpinnerImage from '../../imgs/loadingspinner.gif';
 
   export let onOutputDisconnectButtonClicked: () => void;
   export let onInputDisconnectButtonClicked: () => void;
@@ -25,7 +26,7 @@
           >{$t('menu.model.disconnect')}</StandardButton>
       {:else}
         <StandardButton onClick={TypingUtils.emptyFunction} color="disabled">
-          <img alt="loading" src="imgs/loadingspinner.gif" style="height:24px" />
+          <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
         </StandardButton>
       {/if}
     {/if}
@@ -37,7 +38,7 @@
         >{$t('footer.disconnectButton')}</StandardButton>
     {:else}
       <StandardButton onClick={TypingUtils.emptyFunction} color="disabled">
-        <img alt="loading" src="/imgs/loadingspinner.gif" style="height:24px" />
+        <img alt="loading" src={loadingSpinnerImage} style="height:24px" />
       </StandardButton>
     {/if}
   </div>

src/components/connection-prompt/bluetooth/BluetoothConnectingDialog.svelte

@@ -19,6 +19,7 @@
   import { DeviceRequestStates } from '../../../script/stores/connectDialogStore';
   import Environment from '../../../script/Environment';
   import StaticConfiguration from '../../../StaticConfiguration';
+  import loadingSpinnerImage from '../../../imgs/loadingspinner.gif';
 
   // callbacks
   export let deviceState: DeviceRequestStates;
@@ -114,7 +115,7 @@
     <!-- Show spinner while connecting -->
     <div class="w-650px flex flex-col justify-center items-center">
       <p>{$t('connectMB.bluetooth.connecting')}</p>
-      <img alt="loading" src="/imgs/loadingspinner.gif" width="100px" />
+      <img alt="loading" src={loadingSpinnerImage} width="100px" />
       <div class="bg-primary rounded w-full h-5">
         <div
           style="width: {`${timeoutProgress * 100}%`};"

src/components/connection-prompt/bluetooth/ConnectBatteryDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitConnectedImage from '../../../imgs/stylised-microbit-connected.svg';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -19,7 +20,7 @@
     </p>
     <p>{$t('connectMB.connectBattery.subtitle')}</p>
     <img
-      src="/imgs/stylised-microbit-connected.svg"
+      src={microbitConnectedImage}
       alt="Battery connection diagram"
       class="px-40 pt-5" />
   </div>

src/components/connection-prompt/bluetooth/ConnectCableDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -34,10 +35,7 @@
         {$t('connectMB.connectCableMB2.subtitle')}
       {/if}
     </p>
-    <img
-      src="imgs/connect-cable.gif"
-      alt="GIF of connecting micro:bit"
-      class="px-55 py-5" />
+    <img src={connectCableImage} alt="GIF of connecting micro:bit" class="px-55 py-5" />
   </div>
   <div class="flex">
     {#if currentStage === 'usb' || currentStage === 'usb1'}

src/components/connection-prompt/bluetooth/StartBluetoothDialog.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import microbitImage from '../../../imgs/stylised-microbit-black.svg';
 
   export let onNextClick: () => void;
   export let onStartRadioClick: () => void;
@@ -18,7 +19,7 @@
     <p>{$t('connectMB.bluetoothStart.subtitle')}</p>
     <div class="inline-grid grid-cols-3 gap-30 py-20 px-10">
       <div>
-        <img src="imgs/stylised-microbit-black.svg" alt="radio ingredients" />
+        <img src={microbitImage} alt="radio ingredients" />
         <p class="pt-10 text-center font-bold">
           {$t('connectMB.bluetoothStart.requirements1')}
         </p>

src/components/connection-prompt/radio/ConnectCableDialogMB1.svelte

@@ -7,6 +7,7 @@
 <script lang="ts">
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
+  import connectCableImage from '../../../imgs/connect-cable.gif';
 
   export let onNextClick: () => void;
   export let onBackClick: () => void;
@@ -19,10 +20,7 @@
       {$t('connectMB.connectCableMB1.heading')}
     </p>
     <p class="leading-normal">{$t('connectMB.connectCableMB1.subtitle')}</p>
-    <img
-      src="imgs/connect-cable.gif"
-      alt="GIF of connecting micro:bit"
-      class="px-55 py-5" />
+    <img src={connectCableImage} alt="GIF of connecting micro:bit" class="px-55 py-5" />
   </div>
   <div class="flex">
     <p class="self-center w-full hover:cursor-pointer" on:click={onSkipClick}>

src/components/connection-prompt/usb/SelectMicrobitDialogUsb.svelte

@@ -8,6 +8,7 @@
   import StandardButton from '../../StandardButton.svelte';
   import { t } from '../../../i18n';
   import Microbits from '../../../script/microbit-interfacing/Microbits';
+  import selectMicrobitImage from '../../../imgs/select-microbit.png';
 
   export let onBackClick: () => void;
   export let onFound: () => void;
@@ -29,7 +30,7 @@
       {$t('connectMB.webPopup')}
     </p>
     <img
-      src="/imgs/select-microbit.png"
+      src={selectMicrobitImage}
       alt="Instructions on how to choose microbit from web popup using usb"
       class="left-0 pt-5" />
     <p class="absolute left-3/4 transform -translate-x-1/2 top-1/2 -translate-y-28">

src/components/connection-prompt/usb/manual/ManualInstallTutorial.svelte

@@ -11,6 +11,9 @@
   import Microbits from '../../../../script/microbit-interfacing/Microbits';
   import ImageSkeleton from '../../../skeletonloading/ImageSkeleton.svelte';
   import Bowser from 'bowser';
+  import transferFirmwareMacOSImage from '../../../../imgs/transfer_firmware_macos.gif';
+  import transferFirmwareChromeOSImage from '../../../../imgs/transfer_firmware_chromeos.gif';
+  import transferFirmwareWindowsImage from '../../../../imgs/transfer_firmware_windows.gif';
 
   export let onConnectBluetoothClick: () => void;
 
@@ -23,13 +26,13 @@
   const getIllustrationGif = (os: string) => {
     switch (os) {
       case 'Chrome OS':
-        return 'imgs/transfer_firmware_chromeos.gif';
+        return transferFirmwareChromeOSImage;
       case 'Windows':
-        return 'imgs/transfer_firmware_windows.gif';
+        return transferFirmwareWindowsImage;
       case 'macOS':
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
       default:
-        return 'imgs/transfer_firmware_macos.gif';
+        return transferFirmwareMacOSImage;
     }
   };
 

src/components/datacollection/RecordInformationContent.svelte

@@ -8,6 +8,7 @@
   import { t } from '../../i18n';
   import ImageSkeleton from '../skeletonloading/ImageSkeleton.svelte';
   import { getInfoBoxColors } from '../information/InformationComponentUtility';
+  import recordingGuideImage from '../../imgs/microbit_record_guide.svg';
   export let isLightTheme = true;
 
   const colors = getInfoBoxColors(isLightTheme);
@@ -26,7 +27,7 @@
       <ImageSkeleton
         alt="microbit recording guide"
         height={134}
-        src="/imgs/microbit_record_guide.svg"
+        src={recordingGuideImage}
         width={200} />
     </div>
     <p class=" text-center absolute w-60px right-10px top-35px">

src/components/output/OutputGestureStack.svelte

@@ -35,6 +35,9 @@
   import { PinTurnOnState } from './PinSelectorUtil';
   import MBSpecs from '../../script/microbit-interfacing/MBSpecs';
   import Gestures from '../../script/Gestures';
+  import rightArrowImage from '../../imgs/right_arrow.svg';
+  import rightArrowBlueImage from '../../imgs/right_arrow_blue.svg';
+  import blankMicrobitImage from '../../imgs/blank_microbit.svg';
 
   type TriggerAction = 'turnOn' | 'turnOff' | 'none';
 
@@ -251,13 +254,13 @@
     <img
       class="m-auto"
       class:hidden={wasTriggered}
-      src={'imgs/right_arrow.svg'}
+      src={rightArrowImage}
       alt="right arrow icon"
       width="30px" />
     <img
       class="m-auto"
       class:hidden={!wasTriggered || !$state.isInputReady}
-      src={'imgs/right_arrow_blue.svg'}
+      src={rightArrowBlueImage}
       alt="right arrow icon"
       width="30px" />
   </div>
@@ -267,7 +270,7 @@
     <div
       class="w-177px relative rounded-xl bg-transparent h-full border-1 border-primaryborder">
       <ImageSkeleton
-        src="imgs/blank_microbit.svg"
+        src={blankMicrobitImage}
         alt="microbit guide"
         width={177}
         height={144}

src/menus/TrainingMenu.svelte

@@ -9,14 +9,15 @@
   import { state } from '../script/stores/uiStore';
   import { t } from '../i18n';
   import ImageSkeleton from '../components/skeletonloading/ImageSkeleton.svelte';
+  import modelImage from '../imgs/model.svg';
 </script>
 
 <div class="h-40 w-40 m-auto mt-2 flex flex-col justify-center">
   {#if $state.isPredicting}
     <div class="text-white text-center flex flex-col justify-center items-center">
       <ImageSkeleton
         alt="Model Icon"
-        src="imgs/model.svg"
+        src={modelImage}
         height={100}
         width={100}
         loadingColorPrimary="#68BDBF"

src/pages/Homepage.svelte

@@ -5,6 +5,9 @@
  -->
 
 <script lang="ts">
+  import trainModelImage from '../imgs/TrainModel.svg';
+  import inputDataImage from '../imgs/InputData.svg';
+  import testModelImage from '../imgs/TestModel.svg';
   import FrontPageContentTile from '../components/FrontPageContentTile.svelte';
   import StandardButton from '../components/StandardButton.svelte';
   import { t } from '../i18n';
@@ -42,11 +45,7 @@
           <h2 class="text-center text-3xl mb-5">
             {$t('content.index.toolProcessCards.data.title')}
           </h2>
-          <img
-            class="mb-5"
-            alt="add data"
-            src="/imgs/InputData.svg"
-            width={tileImageSize} />
+          <img class="mb-5" alt="add data" src={inputDataImage} width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.data.description')}
           </p>
@@ -59,7 +58,7 @@
           <img
             class="mb-5"
             alt="train model"
-            src="/imgs/TrainModel.svg"
+            src={trainModelImage}
             width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.train.description')}
@@ -70,11 +69,7 @@
           <h2 class="text-center text-3xl mb-5">
             {$t('content.index.toolProcessCards.model.title')}
           </h2>
-          <img
-            class="mb-5"
-            alt="test model"
-            src="/imgs/TestModel.svg"
-            width={tileImageSize} />
+          <img class="mb-5" alt="test model" src={testModelImage} width={tileImageSize} />
           <p class="text-center w-75">
             {$t('content.index.toolProcessCards.model.description')}
           </p>

src/pages/model/ModelPageStackView.svelte

@@ -23,6 +23,7 @@
   import Microbits from '../../script/microbit-interfacing/Microbits';
   import TrainModelFirstTitle from '../../components/TrainModelFirstTitle.svelte';
   import OutputGesture from '../../components/output/OutputGesture.svelte';
+  import downArrowImage from '../../imgs/down_arrow.svg';
 
   // In case of manual classification, variables for evaluation
   let recordingTime = 0;
@@ -150,7 +151,7 @@
             <div class="text-center ml-0 mb-2 mt-8">
               <img
                 class="m-auto arrow-filter-color"
-                src="/imgs/down_arrow.svg"
+                src={downArrowImage}
                 alt="down arrow icon"
                 width="80px" />
             </div>