Add preview for site icon

Author: MaddyGuthridge

src/components/Favicon.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+  import consts from '$lib/consts';
+
   type Props = {
     path?: string;
   };
 
-  const { path = '/minifolio.png' }: Props = $props();
+  const { path }: Props = $props();
+
+  const actualPath = path ? `/data/${path}` : consts.APP_ICON_URL;
 </script>
 
-<link rel="icon" href={path} />
+<link rel="icon" href={actualPath} />

src/lib/consts.ts

@@ -7,6 +7,8 @@ export const APP_NAME = 'Minifolio';
 /** Link to app's GitHub repo */
 export const APP_GITHUB = 'https://github.com/MaddyGuthridge/Minifolio';
 
+export const APP_ICON_URL = '/minifolio.png';
+
 /** Author info -- `[name, URL]` */
 type AuthorInfo = [string, string];
 
@@ -22,6 +24,7 @@ export const EDIT_COMMIT_HESITATION = 1_000;
 export default {
   APP_NAME,
   APP_GITHUB,
+  APP_ICON_URL,
   APP_AUTHOR,
   APP_CONTRIBUTORS,
   EDIT_COMMIT_HESITATION,

src/routes/admin/PublicConfig.svelte

@@ -5,7 +5,9 @@
   import api from '$endpoints';
   import consts from '$lib/consts';
   import DelayedUpdater from '$lib/delayedUpdate';
+  import itemId from '$lib/itemId';
   import type { ConfigJson } from '$lib/server/data/config';
+  import { itemFileUrl } from '$lib/urls';
 
   type Props = {
     configJson: ConfigJson;
@@ -33,6 +35,18 @@
         files={imageFiles}
         onchange={() => updater.update(config)}
       />
+      {#if config.siteIcon}
+        <p>
+          Note: the image may be squashed/stretched by the browser when
+          displayed in the address bar.
+        </p>
+        <div class="site-icon-preview">
+          <img
+            src={itemFileUrl(itemId.ROOT, config.siteIcon)}
+            alt={'Preview of site icon'}
+          />
+        </div>
+      {/if}
     </div>
 
     <label for="rel-me"><h3>Verification links</h3></label>
@@ -51,3 +65,16 @@
     />
   </form>
 </div>
+
+<style>
+  .site-icon-preview {
+    aspect-ratio: 1 / 1;
+    max-width: 30%;
+    margin: 10px;
+  }
+  .site-icon-preview > img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+  }
+</style>