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 <ikreymer@gmail.com>
This commit is contained in:
Henry Wilkinson
co-authored by
Ilya Kreymer
Ilya Kreymer
parent
ef6c748170
commit
cbe98c4fa1
+26
-19
@@ -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>
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 24 24"><clipPath id="a"><path d="M0 0h23.04v23.04H0z"/></clipPath><g clip-path="url(#a)"><path d="M6.544 10.796a.239.239 0 0 1-.236-.282 5.32 5.32 0 0 1 2.959-3.801.118.118 0 0 1 .158.155c-.409.993-.69 2.276-.777 3.702a.24.24 0 0 1-.239.226zm7.07-3.927a.12.12 0 0 1 .026-.133.12.12 0 0 1 .133-.024 5.32 5.32 0 0 1 2.958 3.802.24.24 0 0 1-.235.281l-1.865.001a.24.24 0 0 1-.239-.226c-.087-1.426-.368-2.709-.778-3.701m2.882 5.367c.071 0 .138.032.184.086a.24.24 0 0 1 .052.196 5.32 5.32 0 0 1-2.959 3.802.12.12 0 0 1-.133-.024.12.12 0 0 1-.025-.132c.409-.992.69-2.275.777-3.702a.24.24 0 0 1 .239-.226zm-7.07 3.928a.12.12 0 0 1-.159.157 5.32 5.32 0 0 1-2.958-3.803.24.24 0 0 1 .052-.195.24.24 0 0 1 .183-.085c.475-.002 1.429-.002 1.865-.002a.24.24 0 0 1 .239.226c.087 1.427.368 2.71.778 3.702m.666-3.672a.24.24 0 0 1 .064-.18.24.24 0 0 1 .175-.075l2.378-.001a.24.24 0 0 1 .239.256c-.102 1.519-.442 2.843-.957 3.717a2.1 2.1 0 0 1-.397.509.12.12 0 0 1-.148 0 2.1 2.1 0 0 1-.397-.509c-.515-.874-.855-2.198-.957-3.717m2.856-1.951a.24.24 0 0 1-.239.255h-2.378a.24.24 0 0 1-.239-.255c.102-1.52.442-2.843.957-3.717.121-.206.261-.392.397-.509a.12.12 0 0 1 .148 0c.136.117.276.303.397.509.515.874.855 2.197.957 3.717" style="fill:#0891b2"/><path d="M22.833 12.8a.24.24 0 0 1 .122.24c-.746 5.641-5.578 10-11.421 10-5.869 0-10.718-4.398-11.43-10.075a.238.238 0 0 1 .357-.232c.518.3 1.38.802 1.697.987a.24.24 0 0 0 .242-.001l1.706-1.002a.24.24 0 0 1 .358.165 7.205 7.205 0 0 0 7.07 5.838 7.21 7.21 0 0 0 7.057-5.767.24.24 0 0 1 .121-.164l1.961-1.059a.24.24 0 0 1 .23.001zM.226 10.24A.24.24 0 0 1 .104 10C.85 4.359 5.682 0 11.525 0c5.869 0 10.718 4.398 11.43 10.075a.238.238 0 0 1-.357.232c-.518-.3-1.38-.802-1.697-.987a.24.24 0 0 0-.242.001l-1.706 1.002a.24.24 0 0 1-.358-.165 7.205 7.205 0 0 0-7.07-5.838 7.21 7.21 0 0 0-7.057 5.767.24.24 0 0 1-.121.164L2.386 11.31a.24.24 0 0 1-.231-.001z" style="fill:#4d7c0f"/></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 189 24"><clipPath id="a"><path d="M0-.001h188.88v23.04H0z"/></clipPath><g clip-path="url(#a)"><path d="M32.997 13.728v4.437h-3.014V4.874h5.934q2.04 0 3.089 1.01 1.067 1.011 1.067 2.808 0 1.516-.805 2.659a7.1 7.1 0 0 1-1.362 1.429l2.26 4.673v.712h-2.957l-2.354-4.437zm0-6.477v4.324h2.824q.536-.387.845-.973.374-.674.374-1.535 0-.88-.412-1.348-.392-.468-1.142-.468zm17.932 10.914h-8.218V4.874h8.218v2.658h-5.204v2.92h4.773v2.116h-4.773v2.939h5.204zm5.604-3.295v3.295H53.52V4.874h5.222q1.592 0 2.64.561a3.47 3.47 0 0 1 1.554 1.685q.524 1.104.524 2.752 0 1.61-.524 2.733a3.58 3.58 0 0 1-1.554 1.685q-1.048.58-2.64.58zm0-7.619v5.242h2.135q.86 0 1.31-.674.468-.675.468-1.947 0-.823-.206-1.404-.206-.6-.618-.899a1.47 1.47 0 0 0-.954-.318zm17.194 10.914h-7.9V4.874h3.014v10.558h4.886zm34.178 0h-2.303l-1.703-12.486v-.805h2.939l.971 7.612 2.117-5.516h1.217l2.085 5.411 1.004-7.507h2.902v.805l-1.685 12.486h-2.359l-2.527-6.122-.047-.15-.047.15zm19.699 0h-8.218V4.874h8.218v2.658H122.4v2.92h4.774v2.116H122.4v2.939h5.204zm9.03 0h-6.439V4.874h6.496q1.684 0 2.583.842.898.824.898 2.265a3.27 3.27 0 0 1-.767 2.134 4.5 4.5 0 0 1-1.039.939q.785.338 1.282.914.824.955.824 2.434 0 1.741-.973 2.752-.974 1.011-2.865 1.011m-3.425-11.026v3.444h3.035q.38-.346.615-.786.28-.524.281-1.123 0-.693-.356-1.105-.336-.43-.936-.43zm0 5.316v3.37h2.845q.673 0 1.011-.412.356-.43.356-1.236 0-.823-.356-1.273a1.15 1.15 0 0 0-.773-.449zm12.801 2.415v3.295h-3.014V4.874h5.223q1.591 0 2.639.561a3.47 3.47 0 0 1 1.554 1.685q.524 1.104.524 2.752 0 1.61-.524 2.733a3.58 3.58 0 0 1-1.554 1.685q-1.048.58-2.639.58zm0-7.619v5.242h2.134q.861 0 1.31-.674.468-.675.468-1.947 0-.823-.206-1.404-.206-.6-.617-.899a1.47 1.47 0 0 0-.955-.318zm41.707 10.914h-8.218V4.874h8.218v2.658h-5.204v2.92h4.774v2.116h-4.774v2.939h5.204zM78.842 15.862l-.733 2.303h-2.864v-.655l4.268-12.636h2.996l4.212 12.579v.712h-2.977l-.706-2.303zm3.6-1.947L80.98 9.146l-1.518 4.769zm8.283-.522L86.85 5.66v-.786h2.77l2.546 5.874 2.565-5.874h2.751v.805l-3.871 7.742.015 4.744h-2.901zm66.79 2.469-.733 2.303h-2.864v-.655l4.268-12.636h2.996l4.212 12.579v.712h-2.977l-.706-2.303zm3.6-1.947-1.462-4.769-1.518 4.769zm11.706 4.437q-1.985 0-3.332-.693-1.348-.71-2.041-2.227-.693-1.536-.692-3.95 0-2.284.73-3.782.749-1.516 2.19-2.265t3.557-.749q1.628 0 3.313.412l-.505 2.471a14 14 0 0 0-2.677-.262q-1.216 0-2.022.449-.786.432-1.198 1.367-.393.936-.393 2.434 0 1.535.318 2.489.318.956.973 1.404.656.43 1.704.431a9 9 0 0 0 1.142-.075v-3.07l-2.022-.487v-1.834h4.736v7.375a12 12 0 0 1-1.872.412q-.954.15-1.909.15" style="fill:#14122d"/><path d="M6.544 10.796a.239.239 0 0 1-.236-.283 5.32 5.32 0 0 1 2.959-3.801.12.12 0 0 1 .133.023.12.12 0 0 1 .025.133c-.409.992-.69 2.275-.777 3.702a.24.24 0 0 1-.239.225zm7.07-3.928a.12.12 0 0 1 .159-.157 5.32 5.32 0 0 1 2.958 3.803.24.24 0 0 1-.052.195.24.24 0 0 1-.183.085c-.475.002-1.429.002-1.865.002a.24.24 0 0 1-.239-.226c-.087-1.427-.368-2.71-.778-3.702m2.882 5.368a.238.238 0 0 1 .236.282 5.32 5.32 0 0 1-2.959 3.801.12.12 0 0 1-.133-.023.12.12 0 0 1-.025-.133c.409-.992.69-2.275.777-3.702a.24.24 0 0 1 .239-.225zm-7.07 3.927a.12.12 0 0 1-.159.157 5.32 5.32 0 0 1-2.958-3.803.24.24 0 0 1 .052-.195.24.24 0 0 1 .183-.085l1.865-.001c.127 0 .232.099.239.225.087 1.427.368 2.71.778 3.702m.666-3.672a.24.24 0 0 1 .239-.255h2.378a.24.24 0 0 1 .239.255c-.102 1.519-.442 2.843-.957 3.717a2.1 2.1 0 0 1-.397.509.12.12 0 0 1-.148 0 2.1 2.1 0 0 1-.397-.509c-.515-.874-.855-2.198-.957-3.717m2.856-1.951a.24.24 0 0 1-.239.255l-2.378.001a.24.24 0 0 1-.239-.256c.102-1.519.442-2.843.957-3.717.121-.206.261-.391.397-.509a.12.12 0 0 1 .148 0c.136.118.276.303.397.509.515.874.855 2.198.957 3.717" style="fill:#0891b2"/><path d="M22.833 12.799a.24.24 0 0 1 .122.241c-.746 5.64-5.578 9.999-11.421 9.999-5.869 0-10.718-4.397-11.43-10.074a.238.238 0 0 1 .357-.233c.518.3 1.38.803 1.697.987a.24.24 0 0 0 .242 0l1.706-1.003a.24.24 0 0 1 .358.165 7.204 7.204 0 0 0 7.07 5.838 7.21 7.21 0 0 0 7.057-5.767.24.24 0 0 1 .121-.164l1.961-1.059a.24.24 0 0 1 .23.001zM.226 10.239a.24.24 0 0 1-.122-.24c.746-5.641 5.578-10 11.421-10 5.869 0 10.718 4.398 11.43 10.075a.24.24 0 0 1-.107.226.24.24 0 0 1-.25.007c-.518-.3-1.38-.803-1.697-.988a.24.24 0 0 0-.242.001l-1.706 1.003a.24.24 0 0 1-.358-.165 7.205 7.205 0 0 0-7.07-5.839 7.21 7.21 0 0 0-7.057 5.767.24.24 0 0 1-.121.164l-1.961 1.06a.24.24 0 0 1-.231-.002z" style="fill:#4d7c0f"/></g></svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" clip-rule="evenodd" viewBox="0 0 8 8">
|
||||
<style>.b{fill:#0891b2}.g{fill:#4d7c0f}@media (prefers-color-scheme:dark){.b{fill:#0aaed7}.g{fill:#65a414}}</style>
|
||||
<path class="b" d="M2.2 3.6a.08.08 0 0 1-.08-.1c.11-.56.49-1.02 1-1.26h.04v.05c-.13.33-.23.76-.26 1.23 0 .05-.03.08-.07.08H2.2Zm2.36-1.31v-.04a.04.04 0 0 1 .05-.01c.5.23.88.7.99 1.26 0 .03 0 .05-.02.07a.08.08 0 0 1-.06.03H4.9a.08.08 0 0 1-.08-.08c-.03-.47-.12-.9-.26-1.23Zm.96 1.79c.02 0 .05 0 .06.03.02.02.02.04.02.06-.1.56-.48 1.03-.99 1.27h-.04a.04.04 0 0 1-.01-.05c.14-.33.23-.76.26-1.24 0-.04.04-.07.08-.07h.62Zm-2.36 1.3v.05a.04.04 0 0 1-.05.01c-.5-.24-.88-.7-.98-1.27a.08.08 0 0 1 .07-.1h.63c.04 0 .07.04.08.08.02.48.12.9.25 1.24Zm.23-1.22c0-.02 0-.04.02-.06a.08.08 0 0 1 .06-.02h.79c.02 0 .04 0 .06.02l.02.06c-.04.51-.15.95-.32 1.24a.74.74 0 0 1-.13.17.04.04 0 0 1-.05 0 .71.71 0 0 1-.13-.17 2.74 2.74 0 0 1-.32-1.24Zm.95-.65c0 .03 0 .05-.02.06a.08.08 0 0 1-.06.03h-.8a.05.05 0 0 1-.05-.03.08.08 0 0 1-.02-.06c.03-.5.14-.94.32-1.24a.7.7 0 0 1 .13-.17.04.04 0 0 1 .05 0c.04.04.09.1.13.17.17.3.28.74.32 1.24Z"/>
|
||||
<path class="g" d="M7.64 4.2a.1.1 0 0 1 .04.08 3.84 3.84 0 0 1-7.63-.03.08.08 0 0 1 .11-.08l.58.33c.02.02.05.02.08 0l.56-.32a.08.08 0 0 1 .07 0c.03 0 .04.03.05.05a2.4 2.4 0 0 0 4.73.01c0-.02.02-.04.04-.05l.64-.35a.08.08 0 0 1 .08 0l.65.36ZM.1 3.41a.08.08 0 0 1-.04-.08 3.84 3.84 0 0 1 7.61.03c0 .03 0 .06-.03.07a.08.08 0 0 1-.09 0L7 3.12a.08.08 0 0 0-.08 0l-.57.33a.08.08 0 0 1-.07 0 .08.08 0 0 1-.05-.05 2.4 2.4 0 0 0-4.7-.03.1.1 0 0 1-.05.06l-.65.35a.08.08 0 0 1-.08 0L.1 3.41Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 122 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 772 KiB |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-down" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M1.646 6.646a.5.5 0 0 1 .708 0L8 12.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
|
||||
<path fill-rule="evenodd" d="M1.646 2.646a.5.5 0 0 1 .708 0L8 8.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 449 B |
@@ -0,0 +1,4 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-double-up" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M7.646 2.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 3.707 2.354 9.354a.5.5 0 1 1-.708-.708l6-6z"/>
|
||||
<path fill-rule="evenodd" d="M7.646 6.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 7.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 413 B |
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path fill="currentColor" d="M9.014 8.5c-.048 1-.24 1.86-.497 2.47-.15.357-.304.582-.424.701a1 1 0 0 1-.07.062 1 1 0 0 1-.07-.062c-.12-.12-.273-.343-.424-.7-.257-.61-.448-1.472-.497-2.471zM10.018 8.5c-.052 1.183-.288 2.236-.638 2.999A3.76 3.76 0 0 0 11.75 8.5zM6.666 11.499A3.76 3.76 0 0 1 4.296 8.5h1.732c.053 1.183.288 2.236.638 2.999M7.032 7.5c.049-1 .24-1.86.497-2.47.15-.357.305-.581.424-.701a1 1 0 0 1 .07-.062q.026.018.07.062c.12.12.274.344.424.7.258.61.449 1.472.497 2.471zM6.028 7.5H4.295a3.76 3.76 0 0 1 2.371-2.999c-.35.763-.585 1.816-.638 2.999M9.38 4.501A3.76 3.76 0 0 1 11.75 7.5h-1.733c-.052-1.183-.288-2.236-.638-2.999"/><path fill="currentColor" d="M12.921 9.078A5.01 5.01 0 0 1 8.023 13a5.01 5.01 0 0 1-4.981-4.42l-1.538.92-1.48-.886C.337 12.745 3.798 16 8.023 16c4.104 0 7.489-3.073 7.965-7.038L14.542 8zM16.023 7.386C15.71 3.255 12.247 0 8.023 0 3.92 0 .533 3.073.057 7.038L1.504 8l1.621-1.078A5.01 5.01 0 0 1 8.023 3a5.01 5.01 0 0 1 4.981 4.42l1.538-.92z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
+23
-38
@@ -1,6 +1,7 @@
|
||||
import btGlobe from "../assets/globe.svg";
|
||||
import btAngleDoubleDown from "../assets/chevron-double-down.svg";
|
||||
import btAngleDoubleUp from "../assets/chevron-double-up.svg";
|
||||
import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
|
||||
import brandLockupColor from "~assets/brand/replaywebpage-lockup-color.svg";
|
||||
import btAngleDoubleDown from "~assets/icons/chevron-double-down.svg";
|
||||
import btAngleDoubleUp from "~assets/icons/chevron-double-up.svg";
|
||||
import fabGithub from "@fortawesome/fontawesome-free/svgs/brands/github.svg";
|
||||
import fasDownload from "@fortawesome/fontawesome-free/svgs/solid/download.svg";
|
||||
|
||||
@@ -18,7 +19,6 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
| ItemType
|
||||
| null
|
||||
| Record<string, never> = null;
|
||||
@property({ type: Object }) appLogo = null;
|
||||
@property({ type: String }) ts: string | null = null;
|
||||
@property({ type: String }) url: string | null = null;
|
||||
|
||||
@@ -160,16 +160,9 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.embed-globe {
|
||||
margin: 0.25rem;
|
||||
padding: 7px;
|
||||
background-color: #0366d6;
|
||||
border-radius: 9999px;
|
||||
color: white;
|
||||
border-width: 1px;
|
||||
border-color: #d1d5da;
|
||||
border-style: solid;
|
||||
line-height: 0.5em;
|
||||
.embed-logo {
|
||||
margin: 0.5rem;
|
||||
line-height: 0.5rem;
|
||||
}
|
||||
`;
|
||||
}
|
||||
@@ -203,10 +196,10 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
@click="${this.onEmbedDrop}"
|
||||
>
|
||||
<fa-icon
|
||||
class="menu-logo mr-2 embed-globe"
|
||||
size="1rem"
|
||||
class="embed-logo"
|
||||
size="1.5rem"
|
||||
aria-hidden="true"
|
||||
.svg=${btGlobe}
|
||||
.svg=${rwpLogo}
|
||||
></fa-icon>
|
||||
<span class="embed-info-buttontext">
|
||||
This embed is part of a web archive. Click here to learn more.
|
||||
@@ -310,32 +303,24 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
: nothing}
|
||||
</div>
|
||||
${sourceUrl ? html`` : ""}
|
||||
<p
|
||||
class="is-size-7 is-flex is-justify-content-space-between"
|
||||
<div
|
||||
class="is-size-7 is-flex is-justify-content-space-between is-align-items-center"
|
||||
style="margin-top: 40px"
|
||||
>
|
||||
<span>
|
||||
<div>
|
||||
<a
|
||||
class="has-text-black"
|
||||
target="_blank"
|
||||
href="https://github.com/webrecorder/replayweb.page"
|
||||
>${
|
||||
// TODO: Fix this the next time the file is edited.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
this.appLogo
|
||||
? html`
|
||||
<fa-icon
|
||||
class="menu-logo mr-1"
|
||||
size="1.0rem"
|
||||
aria-hidden="true"
|
||||
.svg=${this.appLogo}
|
||||
></fa-icon>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
Powered by ReplayWeb.page
|
||||
>
|
||||
<img
|
||||
style="height: 1.5rem;"
|
||||
src="data:image/svg+xml,${encodeURIComponent(
|
||||
brandLockupColor as string,
|
||||
)}"
|
||||
alt="ReplayWeb.page Logo"
|
||||
/>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
<a
|
||||
class="has-text-black"
|
||||
@@ -350,7 +335,7 @@ export class RWPEmbedReceipt extends LitElement {
|
||||
></fa-icon>
|
||||
</a>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+2
-3
@@ -7,7 +7,7 @@ import {
|
||||
} from "lit";
|
||||
import { ifDefined } from "lit/directives/if-defined.js";
|
||||
|
||||
import { wrapCss, rwpLogo, updateFaviconLinks } from "./misc";
|
||||
import { wrapCss, updateFaviconLinks } from "./misc";
|
||||
import { SWManager } from "./swmanager";
|
||||
import { property } from "lit/decorators.js";
|
||||
import type { FavIconEventDetail } from "./types";
|
||||
@@ -83,7 +83,6 @@ class Embed extends LitElement {
|
||||
appName = "ReplayWeb.page";
|
||||
customConfig = null;
|
||||
reloadCount = 0;
|
||||
logo = rwpLogo;
|
||||
|
||||
isCrossOrigin: boolean | undefined;
|
||||
swmanager: SWManager | undefined;
|
||||
@@ -121,7 +120,7 @@ class Embed extends LitElement {
|
||||
} catch (e) {
|
||||
// TODO: Fix this the next time the file is edited.
|
||||
// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
|
||||
this.errorMessage = this.swmanager.renderErrorReport(this.logo);
|
||||
this.errorMessage = this.swmanager.renderErrorReport();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+3
-7
@@ -17,13 +17,13 @@ import "@shoelace-style/shoelace/dist/components/button/button.js";
|
||||
import "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
|
||||
import {
|
||||
wrapCss,
|
||||
rwpLogo,
|
||||
IS_APP,
|
||||
VERSION,
|
||||
clickOnSpacebarPress,
|
||||
apiPrefix,
|
||||
replayPrefix,
|
||||
} from "./misc";
|
||||
import rwpIcon from "~assets/icons/replaywebpage.svg";
|
||||
|
||||
import {
|
||||
sourceToId,
|
||||
@@ -168,9 +168,6 @@ class Item extends LitElement {
|
||||
@property({ type: String })
|
||||
appVersion = VERSION;
|
||||
|
||||
@property({ type: String })
|
||||
appLogo = rwpLogo;
|
||||
|
||||
@property({ type: Number })
|
||||
autoUpdateInterval = 10;
|
||||
|
||||
@@ -1385,10 +1382,10 @@ class Item extends LitElement {
|
||||
@click="${this.onAbout}"
|
||||
>
|
||||
<fa-icon
|
||||
class="menu-logo"
|
||||
class="has-text-grey"
|
||||
size="1.0rem"
|
||||
aria-hidden="true"
|
||||
.svg=${this.appLogo}
|
||||
.svg=${rwpIcon}
|
||||
></fa-icon>
|
||||
<span> About ${this.appName}</span>
|
||||
<span class="menu-version">(${this.appVersion})</span>
|
||||
@@ -1460,7 +1457,6 @@ class Item extends LitElement {
|
||||
.collInfo=${this.itemInfo || {}}
|
||||
url=${this.url}
|
||||
ts=${this.ts}
|
||||
.appLogo=${this.appLogo}
|
||||
>
|
||||
</rwp-embed-receipt>`;
|
||||
}
|
||||
|
||||
+7
-9
@@ -1,5 +1,6 @@
|
||||
import { LitElement, html, css, type PropertyValues } from "lit";
|
||||
import { wrapCss } from "./misc";
|
||||
import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
|
||||
|
||||
import prettyBytes from "pretty-bytes";
|
||||
|
||||
@@ -298,13 +299,6 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 96px;
|
||||
height: 96px;
|
||||
margin: 1em;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.progress-div {
|
||||
position: relative;
|
||||
width: 400px !important;
|
||||
@@ -341,8 +335,12 @@ You can select a file to upload from the main page by clicking the 'Choose File.
|
||||
render() {
|
||||
return html`
|
||||
<section class="container">
|
||||
<div class="has-text-centered is-flex">
|
||||
<wr-anim-logo class="logo" size="96px"></wr-anim-logo>
|
||||
<div class="is-justify-content-center is-flex">
|
||||
<img
|
||||
style="height: 5rem; margin-bottom: 1rem;"
|
||||
src="data:image/svg+xml,${encodeURIComponent(rwpLogo as string)}"
|
||||
alt="ReplayWeb.page Logo"
|
||||
/>
|
||||
</div>
|
||||
${!this.embed
|
||||
? html` <div class="level">
|
||||
|
||||
-61
@@ -6,7 +6,6 @@ import { styleMap } from "lit/directives/style-map.js";
|
||||
|
||||
import allCssRaw from "../assets/main.scss";
|
||||
|
||||
import rwpLogo from "../assets/logo.svg";
|
||||
import type { FavIconEventDetail } from "./types";
|
||||
|
||||
const apiPrefix = "./w/api";
|
||||
@@ -134,63 +133,6 @@ class FaIcon extends LitElement {
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
class AnimLogo extends FaIcon {
|
||||
constructor() {
|
||||
super();
|
||||
// @ts-expect-error - TS2339 - Property 'svg' does not exist on type 'AnimLogo'.
|
||||
this.svg = rwpLogo;
|
||||
}
|
||||
|
||||
static get styles() {
|
||||
return css`
|
||||
#wrlogo #stop5687 {
|
||||
animation: animLeft 7s linear infinite;
|
||||
}
|
||||
|
||||
#wrlogo #stop5689 {
|
||||
animation: animRight 7s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes animLeft {
|
||||
0% {
|
||||
stop-color: #4876ff;
|
||||
}
|
||||
25% {
|
||||
stop-color: #1b0921;
|
||||
}
|
||||
50% {
|
||||
stop-color: #4876ff;
|
||||
}
|
||||
75% {
|
||||
stop-color: #04cdff;
|
||||
}
|
||||
100% {
|
||||
stop-color: #4876ff;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animRight {
|
||||
0% {
|
||||
stop-color: #04cdff;
|
||||
}
|
||||
25% {
|
||||
stop-color: #4876ff;
|
||||
}
|
||||
50% {
|
||||
stop-color: #1b0921;
|
||||
}
|
||||
75% {
|
||||
stop-color: #4876ff;
|
||||
}
|
||||
100% {
|
||||
stop-color: #04cdff;
|
||||
}
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
// ===========================================================================
|
||||
class WrModal extends LitElement {
|
||||
constructor() {
|
||||
@@ -263,7 +205,6 @@ class WrModal extends LitElement {
|
||||
}
|
||||
|
||||
customElements.define("fa-icon", FaIcon);
|
||||
customElements.define("wr-anim-logo", AnimLogo);
|
||||
|
||||
customElements.define("wr-modal", WrModal);
|
||||
|
||||
@@ -272,9 +213,7 @@ export {
|
||||
IS_APP,
|
||||
VERSION,
|
||||
clickOnSpacebarPress,
|
||||
rwpLogo,
|
||||
FaIcon,
|
||||
AnimLogo,
|
||||
WrModal,
|
||||
LitElement,
|
||||
html,
|
||||
|
||||
+2
-1
@@ -1,7 +1,8 @@
|
||||
import { LitElement, html, css, type PropertyValues } from "lit";
|
||||
import { property } from "lit/decorators.js";
|
||||
|
||||
import { wrapCss, rwpLogo } from "./misc";
|
||||
import { wrapCss } from "./misc";
|
||||
import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
|
||||
import type { ItemType } from "./types";
|
||||
|
||||
// ===========================================================================
|
||||
|
||||
+3
-2
@@ -1,5 +1,6 @@
|
||||
import { html } from "lit";
|
||||
import { register } from "register-service-worker";
|
||||
import rwpLogo from "~assets/brand/replaywebpage-icon-color.svg";
|
||||
|
||||
// ===========================================================================
|
||||
export class SWManager {
|
||||
@@ -153,7 +154,7 @@ export class SWManager {
|
||||
Please try a different browser.`;
|
||||
}
|
||||
|
||||
renderErrorReport(logo: string, override?: string) {
|
||||
renderErrorReport(override?: string) {
|
||||
// @ts-expect-error - TS2339 - Property 'errorMsg' does not exist on type 'SWManager'.
|
||||
const msg = this.errorMsg || override;
|
||||
|
||||
@@ -168,7 +169,7 @@ export class SWManager {
|
||||
style="margin: 1em;flex-grow: 1;"
|
||||
id="wrlogo"
|
||||
size="2.5rem"
|
||||
.svg=${logo}
|
||||
.svg=${rwpLogo}
|
||||
aria-hidden="true"
|
||||
></fa-icon>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user