Use an env for loading assets (#5)

.env.example

@@ -0,0 +1,6 @@
+# Uses Vite's method of setting environment variables
+# https://vitejs.dev/guide/env-and-mode
+
+# The public path for asset loading, this needs to be a publically accessible URL on the
+# production version
+VITE_PUBLIC_PATH=/

.gitignore

@@ -29,6 +29,7 @@ node_modules
 
 # dotenv environment variables file
 .env
+!.env.example
 
 # Build output
 dist

src/components/Logo/Logo.tsx

@@ -1,9 +1,11 @@
 import register from 'preact-custom-element';
 
+import config from '../../config';
+
 export default function Logo() {
   return (
     <img
-      src="/recycling-locator-logo.webp"
+      src={`${config.publicPath}recycling-locator-logo.webp`}
       alt="Recycling Locator"
       width="230"
       height="42"

src/config.ts

@@ -0,0 +1,5 @@
+const config = {
+  publicPath: import.meta.env.VITE_PUBLIC_PATH ?? '/',
+};
+
+export default config;