More white-labeling: support for replacing icons and thumbnail

Now web manifest, og:image and favicon can also be configured from .env Also, add _META_ to the name of some .env entries.
oasisprotocol · Feb 14, 2024 · aee768e · aee768e
1 parent cf6e34f
commit aee768e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 14 deletions.
diff --git a/.changelog/1255.trivial.md b/.changelog/1255.trivial.md
@@ -0,0 +1 @@
+More white-labeling: support for replacing icons and thumbnail
diff --git a/.env b/.env
@@ -6,8 +6,11 @@ REACT_APP_BUILD_VERSION=
 # REACT_APP_TESTNET_API=https://testnet.nexus.stg.oasis.io/v1/
 REACT_APP_API=https://nexus.oasis.io/v1/
 REACT_APP_TESTNET_API=https://testnet.nexus.oasis.io/v1/
-REACT_APP_TITLE=Oasis Explorer
-REACT_APP_DESC=Official explorer for the Oasis Network.
+REACT_APP_META_TITLE=Oasis Explorer
+REACT_APP_META_IMAGE=oasis-og-image.jpg
+REACT_APP_META_MANIFEST=app.webmanifest
+REACT_APP_META_FAVICON=favicon.ico
+REACT_APP_META_DESC=Official explorer for the Oasis Network.
 REACT_APP_SOCIAL_TELEGRAM=https://t.me/oasisprotocolcommunity
 REACT_APP_SOCIAL_TWITTER=https://twitter.com/oasisprotocol
 REACT_APP_SOCIAL_DISCORD=https://oasis.io/discord

diff --git a/.env.production b/.env.production
@@ -1,8 +1,11 @@
 REACT_APP_BUILD_DATETIME=
 REACT_APP_BUILD_SHA=
 REACT_APP_BUILD_VERSION=
-REACT_APP_TITLE=Oasis Explorer
-REACT_APP_DESC=Official explorer for the Oasis Network.
+REACT_APP_META_TITLE=Oasis Explorer
+REACT_APP_META_IMAGE=oasis-og-image.jpg
+REACT_APP_META_MANIFEST=app.webmanifest
+REACT_APP_META_FAVICON=favicon.ico
+REACT_APP_META_DESC=Official explorer for the Oasis Network.
 REACT_APP_SOCIAL_TELEGRAM=https://t.me/oasisprotocolcommunity
 REACT_APP_SOCIAL_TWITTER=https://twitter.com/oasisprotocol
 REACT_APP_SOCIAL_DISCORD=https://oasis.io/discord

diff --git a/public/index.html b/public/index.html
@@ -3,17 +3,17 @@
   <head>
     <meta charset="utf-8" />
     <base href="/" />
-    <link rel="icon" href="./favicon.ico" />
+    <link rel="icon" href="$REACT_APP_META_FAVICON" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="./logo192.png" />
-    <link rel="manifest" href="./app.webmanifest" />
-    <meta property="og:title" content="$REACT_APP_TITLE" />
-    <meta property="og:description" content="$REACT_APP_DESC" />
-    <meta property="og:image" content="./oasis-og-image.jpg" />
+    <link rel="manifest" href="$REACT_APP_META_MANIFEST" />
+    <meta property="og:title" content="$REACT_APP_META_TITLE" />
+    <meta property="og:description" content="$REACT_APP_META_DESC" />
+    <meta property="og:image" content="$REACT_APP_META_IMAGE" />
     <meta property="og:type" content="website" />
-    <title>$REACT_APP_TITLE</title>
-    <meta name="description" content="$REACT_APP_DESC" />
+    <title>$REACT_APP_META_TITLE</title>
+    <meta name="description" content="$REACT_APP_META_DESC" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/config.ts b/src/config.ts
@@ -163,4 +163,4 @@ export const deploys = {
 const stableDeploys = [...deploys.production, deploys.staging]
 export const isStableDeploy = stableDeploys.some(url => window.location.origin === url)
 
-export const getAppTitle = () => process.env.REACT_APP_TITLE
+export const getAppTitle = () => process.env.REACT_APP_META_TITLE
diff --git a/src/global.d.ts b/src/global.d.ts
@@ -8,8 +8,11 @@ declare global {
       REACT_APP_API: string
       REACT_APP_TESTNET_API: string
       REACT_APP_SHOW_BUILD_BANNERS?: 'true' | 'false'
-      REACT_APP_TITLE: string
-      REACT_APP_DESC: string
+      REACT_APP_META_TITLE: string
+      REACT_APP_META_IMAGE: string
+      REACT_APP_META_MANIFEST: string
+      REACT_APP_META_FAVICON: string
+      REACT_APP_META_DESC: string
       REACT_APP_SOCIAL_TELEGRAM?: string
       REACT_APP_SOCIAL_TWITTER?: string
       REACT_APP_SOCIAL_DISCORD?: string
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		More white-labeling: support for replacing icons and thumbnail