Support for using custom app title and description

oasisprotocol · Feb 13, 2024 · 9ddadfe · 9ddadfe
1 parent 7a0b38b
commit 9ddadfe
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 7 deletions.
diff --git a/.changelog/1244.feature.md b/.changelog/1244.feature.md
@@ -0,0 +1 @@
+Add support for white-labeling Explorer
diff --git a/.env b/.env
@@ -7,3 +7,5 @@ REACT_APP_BUILD_VERSION=
 REACT_APP_API=https://nexus.oasis.io/v1/
 REACT_APP_TESTNET_API=https://testnet.nexus.oasis.io/v1/
 # REACT_APP_NO_BUILD_BANNERS=true
+# REACT_APP_TITLE=Magic Explorer
+# REACT_APP_DESC=The official explorer for my cool project
diff --git a/package.json b/package.json
@@ -119,6 +119,7 @@
     "msw": "^1.3.2",
     "msw-storybook-addon": "^1.10.0",
     "parcel": "2.11.0",
+    "posthtml-expressions": "^1.11.3",
     "prettier": "3.2.5",
     "process": "0.11.10",
     "react-app-polyfill": "3.0.0",

diff --git a/posthtml.config.js b/posthtml.config.js
@@ -0,0 +1,14 @@
+const dotenv = require('dotenv')
+
+dotenv.config()
+
+module.exports = {
+  plugins: {
+    'posthtml-expressions': {
+      locals: {
+        APP_TITLE: process.env.REACT_APP_TITLE ?? 'Oasis Explorer',
+        APP_DESCRIPTION: process.env.REACT_APP_DESC ?? 'Official explorer for the Oasis Network.',
+      },
+    },
+  },
+}
diff --git a/public/index.html b/public/index.html
@@ -8,12 +8,12 @@
     <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="Oasis Explorer" />
-    <meta property="og:description" content="Official explorer for the Oasis Network." />
+    <meta property="og:title" content="{{ APP_TITLE }}" />
+    <meta property="og:description" content="{{ APP_DESCRIPTION }}" />
     <meta property="og:image" content="./oasis-og-image.jpg" />
     <meta property="og:type" content="website" />
-    <title>Oasis Explorer</title>
-    <meta name="description" content="Official explorer for the Oasis Network." />
+    <title>{{ APP_TITLE }}</title>
+    <meta name="description" content="{{ APP_DESCRIPTION }}" />
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/app/components/PageLayout/Logotype.tsx b/src/app/components/PageLayout/Logotype.tsx
@@ -7,6 +7,7 @@ import { Link as RouterLink } from 'react-router-dom'
 import { OasisIcon } from '../CustomIcons/OasisIcon'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
+import { getAppTitle } from '../../../config'
 
 interface LogotypeProps {
   color?: string
@@ -40,7 +41,7 @@ export const Logotype: FC<LogotypeProps> = ({ color, showText }) => {
       <OasisIcon sx={{ fontSize: logoSize }} />
       {showText && (
         <Typography variant="h1" color={color || theme.palette.layout.main} sx={{ whiteSpace: 'nowrap' }}>
-          {t('pageTitle')}
+          {getAppTitle(t)}
         </Typography>
       )}
     </Box>

diff --git a/src/app/components/Search/index.tsx b/src/app/components/Search/index.tsx
@@ -24,6 +24,7 @@ import { isValidBlockHeight } from '../../utils/helpers'
 import { typingDelay } from '../../../styles/theme'
 import { isValidMnemonic } from '../../utils/helpers'
 import Collapse from '@mui/material/Collapse'
+import { getAppTitle } from '../../../config'
 
 export type SearchVariant = 'button' | 'icon' | 'expandable'
 
@@ -163,7 +164,7 @@ const SearchCmp: FC<SearchProps> = ({ scope, variant, disabled, onFocusChange: o
   const hasError = !!errorMessage
 
   const warningMessage = hasPrivacyProblem
-    ? t('search.error.privacy', { appName: t('appName'), wordsOfPower })
+    ? t('search.error.privacy', { appName: getAppTitle(t), wordsOfPower })
     : undefined
   const hasWarning = !!warningMessage
 

diff --git a/src/config.ts b/src/config.ts
@@ -1,5 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import { Layer } from './oasis-nexus/generated/api' // We get this from the generated code to avoid circular imports
+import { TFunction } from 'i18next'
 
 export const consensusDecimals = 9
 
@@ -154,3 +155,5 @@ export const deploys = {
 
 const stableDeploys = [...deploys.production, deploys.staging]
 export const isStableDeploy = stableDeploys.some(url => window.location.origin === url)
+
+export const getAppTitle = (t: TFunction) => process.env.REACT_APP_TITLE ?? t('appName')
diff --git a/yarn.lock b/yarn.lock
@@ -8377,6 +8377,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fclone@^1.0.11:
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/fclone/-/fclone-1.0.11.tgz#10e85da38bfea7fc599341c296ee1d77266ee640"
+  integrity sha512-GDqVQezKzRABdeqflsgMr7ktzgF9CyS+p2oe0jJqUY6izSSbhPIQJDpoU4PtGcD7VPM9xh/dVrTu6z1nwgmEGw==
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -11416,7 +11421,23 @@ postcss@^8.4.21:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
-posthtml-parser@^0.10.1:
+posthtml-expressions@^1.11.3:
+  version "1.11.3"
+  resolved "https://registry.yarnpkg.com/posthtml-expressions/-/posthtml-expressions-1.11.3.tgz#a4d8215cdfa0a74f7be23d8dce1a22bdda1ff8f8"
+  integrity sha512-S75Sp3UUoOQJV2vtubJOuv6u/R9hqJE62rgihOTxKCTog68A5OIRNBoIWLKMVD8VJ8l0vQaIEKzWZ4Vm3ht5hw==
+  dependencies:
+    fclone "^1.0.11"
+    posthtml "^0.16.5"
+    posthtml-match-helper "^1.0.1"
+    posthtml-parser "^0.10.0"
+    posthtml-render "^3.0.0"
+
+posthtml-match-helper@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/posthtml-match-helper/-/posthtml-match-helper-1.0.4.tgz#b8f384179732cb5d5e060b9dd1945a2352eb6a44"
+  integrity sha512-Tj9orTIBxHdnraCxoEGjoizsFsTGvukzwcuhOjYQGmDG6gTlaRbMrGgi1J+FwKTN8hsCQENHYY0Deqs9a89BVg==
+
+posthtml-parser@^0.10.0, posthtml-parser@^0.10.1:
   version "0.10.2"
   resolved "https://registry.yarnpkg.com/posthtml-parser/-/posthtml-parser-0.10.2.tgz#df364d7b179f2a6bf0466b56be7b98fd4e97c573"
   integrity sha512-PId6zZ/2lyJi9LiKfe+i2xv57oEjJgWbsHGGANwos5AvdQp98i6AtamAl8gzSVFGfQ43Glb5D614cvZf012VKg==