Reasonably Scoped Branding Update (#299)

- Adds TsconfigPathsPlugin - Custom icons, branding assets, and favicons now all live under `/src/assets` in organized folders (Mirrors Browsertrix folder organization and naming) - Assets can now be referenced with `import: varName from ~assets/assetpath` app wide! - SVGs continue to use `svg-inline-loader`, favicons are copied to `/site/favicons` on app build - Adds favicons to the main `index.html` page for ReplayWeb.page and `embed.html` example page - Replace README header with new branding - Lives under /assets because it's not app related - Adds new webmanifest app icons - Adds new Electron app .icns (macOS ) and .png (Windows & Linux) app icons - Replaces globe icon in the embed receipt with ReplayWebpage icon! - Adds lockup to the footer section - Removes logo animation - Removes logo values from `renderErrorReport()` in swmanager.ts in favour of additional import statements --------- Co-authored-by: Ilya Kreymer <[email protected]>
webrecorder · Apr 9, 2024 · cbe98c4 · cbe98c4
1 parent ef6c748
commit cbe98c4
Show file tree

Hide file tree

Showing 33 changed files with 137 additions and 321 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
-<p align="center"><img src="/assets/logo.svg" width="128" height="128"></p>
-
-# ReplayWeb.page
+<h1>
+    <div align="center">
+        <img alt="ReplayWebpage" src="assets/replaywebpage-lockup-color-dynamic.svg" width="90%">
+    </div>
+</h1>
 
 ## Serverless Web Archive Replay
 

diff --git a/assets/globe.svg b/assets/globe.svg
diff --git a/assets/logo.svg b/assets/logo.svg
diff --git a/assets/replaywebpage-lockup-color-dynamic.svg b/assets/replaywebpage-lockup-color-dynamic.svg
diff --git a/build/icon.icns b/build/icon.icns
diff --git a/build/icon.png b/build/icon.png
diff --git a/package.json b/package.json
@@ -28,7 +28,8 @@
     "process": "^0.11.10",
     "register-service-worker": "^1.7.2",
     "split.js": "^1.6.4",
-    "stream-browserify": "^3.0.0"
+    "stream-browserify": "^3.0.0",
+    "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "devDependencies": {
     "@playwright/test": "^1.38.1",

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

diff --git a/site/favicon.png b/site/favicon.png
diff --git a/site/index.html b/site/index.html
@@ -2,10 +2,12 @@
 <html class="no-overflow">
   <head>
     <link rel="manifest" href="/webmanifest.json" />
-    <link rel="icon" href="favicon.png" type="image/png" />
     <title>ReplayWeb.page</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <script src="./ui.js"></script>
+    <link rel="icon" href="/favicons/favicon.ico" sizes="32x32">
+    <link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="/favicons/apple-touch-icon.png">
   </head>
   <body>
     <replay-app-main></replay-app-main>

diff --git a/site/logo.svg b/site/logo.svg
diff --git a/site/webmanifest.json b/site/webmanifest.json
@@ -3,18 +3,10 @@
   "short_name": "ReplayWeb.page",
   "description": "A tool to explore and replay interactive archived web pages directly in the browser",
   "icons": [
-    {
-      "src": "assets/favicon.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    },
-    {
-      "src": "assets/logo.svg",
-      "sizes": "252x252",
-      "type": "image/svg"
-    }
+    { "src": "/favicons/icon-192.png", "type": "image/png", "sizes": "192x192" },
+    { "src": "/favicons/icon-512.png", "type": "image/png", "sizes": "512x512" }
   ],
   "start_url": "/",
   "display": "standalone",
-  "theme_color": "#27a0ff"
+  "theme_color": "#ffffff"
 }
diff --git a/src/appmain.ts b/src/appmain.ts
@@ -10,13 +10,15 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import {
   wrapCss,
-  rwpLogo,
   IS_APP,
   VERSION,
   clickOnSpacebarPress,
   updateFaviconLinks,
 } from "./misc";
 
+import brandLockupColor from "~assets/brand/replaywebpage-lockup-color.svg";
+import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
+
 import fasHelp from "@fortawesome/fontawesome-free/svgs/solid/question-circle.svg";
 import fasArrowLeft from "@fortawesome/fontawesome-free/svgs/solid/arrow-left.svg";
 import fasArrowRight from "@fortawesome/fontawesome-free/svgs/solid/arrow-right.svg";
@@ -244,14 +246,20 @@ export class ReplayWebApp extends LitElement {
   }
 
   renderNavBrand() {
-    return html` <span
-      id="home"
-      class="logo-text has-text-weight-bold is-size-6 has-allcaps wide-only"
-    >
-      <span class="has-text-primary">replay</span>
-      <span class="has-text-link">web.page</span>
-      <span class="is-sr-only">Home</span>
-    </span>`;
+    return html` <img
+        style="height: 1.25rem; user-drag: none; user-select: none; -moz-user-select: none;"
+        src="data:image/svg+xml,${encodeURIComponent(
+          brandLockupColor as string,
+        )}"
+        alt="ReplayWeb.page"
+        draggable="false"
+      />
+      <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() {
@@ -261,7 +269,7 @@ export class ReplayWebApp extends LitElement {
         class="skip-link"
         >Skip main navigation</a
       >
-      <nav class="navbar has-background-info" aria-label="main">
+      <nav class="navbar" aria-label="main">
         <div class="navbar-brand">
           ${!this.embed
             ? html`
@@ -270,12 +278,6 @@ export class ReplayWebApp extends LitElement {
                   class="navbar-item wr-logo-item"
                   aria-labelledby="home"
                 >
-                  <fa-icon
-                    id="wrlogo"
-                    size="1.0rem"
-                    .svg=${this.mainLogo}
-                    aria-hidden="true"
-                  ></fa-icon>
                   ${this.renderNavBrand()}
                 </a>
                 ${this.collTitle
@@ -398,7 +400,6 @@ export class ReplayWebApp extends LitElement {
       embed="${ifDefined(this.embed === null ? undefined : this.embed)}"
       appName="${this.appName}"
       swName="${ifDefined(this.swName)}"
-      .appLogo="${this.mainLogo}"
       @replay-favicons=${this.onFavIcons}
       @update-title=${this.onTitle}
       @coll-loaded=${this.onCollLoaded}
@@ -472,7 +473,7 @@ export class ReplayWebApp extends LitElement {
     this.swmanager.register().catch(
       () =>
         // @ts-expect-error - TS2554 - Expected 2 arguments, but got 1.
-        (this.swErrorMsg = this.swmanager?.renderErrorReport(this.mainLogo)),
+        (this.swErrorMsg = this.swmanager?.renderErrorReport()),
     );
 
     window.addEventListener("popstate", () => {
@@ -735,7 +736,13 @@ export class ReplayWebApp extends LitElement {
                 <div class="content">
                   <div style="display: flex">
                     <div class="has-text-centered" style="width: 220px">
-                      <wr-anim-logo class="logo" size="48px"></wr-anim-logo>
+                      <img
+                        style="height: 3rem;"
+                        src="data:image/svg+xml,${encodeURIComponent(
+                          rwpLogo as string,
+                        )}"
+                        alt="ReplayWeb.page Logo"
+                      />
                       <div style="font-size: smaller; margin-bottom: 1em">${
                         IS_APP ? "App" : ""
                       } v${VERSION}</div>