Convert URL encoded images to inline SVGs with fa-icon (#303)

Avoid data: URL loading and just inject SVG inline directly for logo, receipt and loader
Additional favicon path fixes

---------
Co-authored-by: Henry Wilkinson <henry@wilkinson.graphics>

.gitignore

@@ -14,7 +14,7 @@ dist/
 plugins-*/
 site/sw.js
 site/ui.js
-site/assets/
+site/favicons/
 .jekyll-cache
 
 ipfs-core.min.js

site/embed.html

@@ -6,9 +6,9 @@
         background-color: lightgrey;
       }
     </style>
-    <link rel="icon" href="/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/favicons/favicon.ico" sizes="32x32">
-    <link rel="icon" href="/favicon.svg" type="image/svg+xml">
+    <link rel="icon" href="/favicons.favicon.svg" type="image/svg+xml">
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png">
   </head>
   <body>
     <replay-web-page

src/appmain.ts

@@ -152,7 +152,13 @@ export class ReplayWebApp extends LitElement {
         align-items: center;
       }
       .wr-logo-item {
-        padding: 0 8px 0 0;
+        padding: 0 0.5rem 0 0;
+
+        -webkit-user-drag: none;
+        -khtml-user-drag: none;
+        -moz-user-drag: none;
+        -o-user-drag: none;
+        user-drag: none;
       }
       .no-wrap {
         white-space: nowrap;
@@ -246,20 +252,13 @@ export class ReplayWebApp extends LitElement {
   }
 
   renderNavBrand() {
-    return html` <img
+    return html` <fa-icon
-        style="height: 1.25rem; user-drag: none; user-select: none; -moz-user-select: none;"
+      .svg="${brandLockupColor}"
-        src="data:image/svg+xml,${encodeURIComponent(
+      size=""
-          brandLockupColor as string,
+      width="9.5rem"
-        )}"
+      height="1.25rem"
-        alt="ReplayWeb.page"
+      aria-hidden="true"
-        draggable="false"
+    ></fa-icon>`;
-      />
-      <span
-        id="home"
-        class="logo-text has-text-weight-bold is-size-6 has-allcaps wide-only"
-      >
-        <span class="is-sr-only">Home</span>
-      </span>`;
   }
 
   renderNavBar() {
@@ -276,7 +275,7 @@ export class ReplayWebApp extends LitElement {
                 <a
                   href="${this.homeUrl}"
                   class="navbar-item wr-logo-item"
-                  aria-labelledby="home"
+                  aria-label="ReplayWeb.page Home"
                 >
                   ${this.renderNavBrand()}
                 </a>
@@ -736,13 +735,12 @@ export class ReplayWebApp extends LitElement {
                 <div class="content">
                   <div style="display: flex">
                     <div class="has-text-centered" style="width: 220px">
-                      <img
+                      <fa-icon
-                        style="height: 3rem;"
+                        size="3rem"
-                        src="data:image/svg+xml,${encodeURIComponent(
+                        .svg=${rwpLogo}
-                          rwpLogo as string,
+                        aria-label="ReplayWeb.page Logo"
-                        )}"
+                        role="img"
-                        alt="ReplayWeb.page Logo"
+                      ></fa-icon>
-                      />
                       <div style="font-size: smaller; margin-bottom: 1em">${
                         IS_APP ? "App" : ""
                       } v${VERSION}</div>

src/embed-receipt.ts

@@ -310,15 +310,17 @@ export class RWPEmbedReceipt extends LitElement {
               <div>
                 <a
                   target="_blank"
-                  href="https://github.com/webrecorder/replayweb.page"
+                  href="https://replayweb.page"
+                  aria-label="ReplayWeb.page Home"
                 >
-                  <img
+                  <fa-icon
-                    style="height: 1.5rem;"
+                    size=""
-                    src="data:image/svg+xml,${encodeURIComponent(
+                    height="1.5rem"
-                      brandLockupColor as string,
+                    width="12rem"
-                    )}"
+                    .svg=${brandLockupColor}
-                    alt="ReplayWeb.page Logo"
+                    aria-label=""
-                  />
+                    aria-hidden="true"
+                  ></fa-icon>
                 </a>
               </div>
               <span>
@@ -326,6 +328,7 @@ export class RWPEmbedReceipt extends LitElement {
                   class="has-text-black"
                   target="_blank"
                   href="https://github.com/webrecorder/replayweb.page"
+                  aria-label="ReplayWeb.page source code"
                   >Source Code
                   <fa-icon
                     class="menu-logo ml-1"

src/loader.ts

@@ -336,11 +336,13 @@ You can select a file to upload from the main page by clicking the 'Choose File.
     return html`
       <section class="container">
         <div class="is-justify-content-center is-flex">
-          <img
+          <fa-icon
-            style="height: 5rem; margin-bottom: 1rem;"
+            size="5rem"
-            src="data:image/svg+xml,${encodeURIComponent(rwpLogo as string)}"
+            style="margin-bottom: 1rem;"
-            alt="ReplayWeb.page Logo"
+            .svg=${rwpLogo}
-          />
+            aria-label="ReplayWeb.page Logo"
+            role="img"
+          ></fa-icon>
         </div>
         ${!this.embed
           ? html` <div class="level">

webpack.config.js

@@ -77,7 +77,7 @@ const electronMainConfig = (/*env, argv*/) => {
           { from: "build/extra_prebuilds/", to: "prebuilds" },
           {
             from: path.resolve(__dirname, "src/assets/favicons"),
-            to: path.resolve(__dirname, "dist"),
+            to: path.resolve(__dirname, "dist/favicons"),
           },
         ],
       }),