Merge pull request #242 from rsksmart/feat/DV-364/descriptive-metatags

Feat/dv 364/descriptive metatags
rsksmart · Oct 28, 2024 · e2ca002 · e2ca002
2 parents 1f2da47 + 855236d
commit e2ca002
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 6 deletions.
diff --git a/public/index.html b/public/index.html
@@ -4,7 +4,10 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>RSK explorer</title>
+  <title>Rootstock Explorer</title>
+  <meta name="description" content="Explore Rootstock Blockchain: track $RBTC, tokens, and access detailed data on transactions and blocks. Powered by Bitcoin security, designed for developers.">
+  <meta name="keywords" content="Rootstock, rootstock, RSK, rsk, Bitcoin, BTC, RBTC, rbtc, Blockchain, Explorer, Cryptocurrency">
+
   <style>
     @font-face {
       font-family: Rootstock-Sans-Body;

diff --git a/src/config/types.js b/src/config/types.js
@@ -1,5 +1,5 @@
 
-export const APP_NAME = 'RSK explorer'
+export const APP_NAME = 'Rootstock Explorer'
 
 export const ROUTES = {
   home: 'home',

diff --git a/src/router/index.js b/src/router/index.js
@@ -94,9 +94,54 @@ function isAddressPath ({ path }, address) {
   return `/${r.address}/${address}` === path
 }
 
+function addHashTag (str) {
+  return `#${str}`
+}
+
+function formatParam (paramName, value) {
+  console.log({ paramName, value })
+  let formattedParam = value
+  const isNumber = paramName === 'number'
+  const isHash = typeof value === 'string' && value.includes('0x')
+
+  if (isNumber) {
+    // prexix hashtag # to numbers
+    formattedParam = addHashTag(formattedParam)
+    console.log({ addHashTagAplied: true, formattedParam })
+  } else if (isHash) {
+    // shorten hashes
+    formattedParam = shortenHash(formattedParam)
+    console.log({ shortenHashAplied: true, formattedParam })
+  }
+
+  return formattedParam
+}
+
+function shortenHash (input) {
+  // works for addresses, blockHashes and txHashes
+  const regex = /(0x[a-fA-F0-9]{40,64})/g
+
+  if (regex.test(input)) {
+    // return shortened hash
+    return input.replace(regex, function (match) {
+      return match.substr(0, 6) + '...' + match.substr(-4)
+    })
+  } else {
+    // If no matches, return original input
+    return input
+  }
+}
+
 function getPageTitleFromRoute (route) {
   const { name, params } = route
-  return name + ' - ' + Object.values(params).join(',')
+  const paramsEntries = Object.entries(params)
+
+  if (paramsEntries.length) {
+    const formattedParams = paramsEntries.map(([paramName, value]) => formatParam(paramName, value))
+    return `${name} ${formattedParams.join(' - ')}`
+  } else {
+    return name
+  }
 }
 
 export default router
diff --git a/src/router/routes.js b/src/router/routes.js
@@ -81,7 +81,7 @@ export default [
   },
   {
     path: '/apps',
-    name: 'apps',
+    name: 'Apps',
     component: AppsView
   }
 ]
diff --git a/src/store/getters.js b/src/store/getters.js
@@ -69,7 +69,16 @@ export const connectionStart = state => {
 export const getPageTitle = (state, getters) => page => {
   const { appName } = state
   const netName = getters.networkName
-  let title = `${appName} :: ${netName}`
-  if (page) title += ` - ${page}`
+
+  let title
+  if (netName === 'testnet') {
+    title = `TESTNET ${appName}`
+  } else {
+    title = appName
+  }
+
+  if (page && !page.includes('Home')) {
+    title = `${page} | ${title}`
+  }
   return title
 }