From 44a63e9a51e28d80ab2bf568fe23eb86ab1fa3a8 Mon Sep 17 00:00:00 2001
From: gabaldon <maria@otherplane.com>
Date: Fri, 12 Apr 2024 16:48:10 +0200
Subject: [PATCH] fix: update dynamic meta data

---
 packages/ui/components/DataFeedDetails.vue    | 36 ++++++++++++++++++-
 .../ui/components/EcosystemNetworkList.vue    | 25 +++++++------
 packages/ui/components/LandingPage.vue        | 24 ++++++-------
 3 files changed, 59 insertions(+), 26 deletions(-)

diff --git a/packages/ui/components/DataFeedDetails.vue b/packages/ui/components/DataFeedDetails.vue
index 13016655..b59cffbe 100644
--- a/packages/ui/components/DataFeedDetails.vue
+++ b/packages/ui/components/DataFeedDetails.vue
@@ -257,7 +257,41 @@ watch(
   },
   { deep: true },
 )
-
+useHead({
+  title: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
+  meta: [
+    {
+      hid: 'title',
+      name: 'title',
+      content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
+    },
+    {
+      hid: 'description',
+      name: 'description',
+      content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
+    },
+    {
+      hid: 'twitter:title',
+      name: 'twitter:title',
+      content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
+    },
+    {
+      hid: 'twitter:description',
+      name: 'twitter:description',
+      content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
+    },
+    {
+      hid: 'og:title',
+      property: 'og:title',
+      content: `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
+    },
+    {
+      hid: 'og:description',
+      property: 'og:description',
+      content: `Last result of ${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'} is ${lastResultValue.value} at ${lastResultDate.value}`,
+    },
+  ],
+})
 useSeoMeta({
   ogTitle: () =>
     `${normalizedFeed.value?.name ?? ''} Witnet Data Feed on ${normalizedFeed.value?.networkName ?? 'selected network'}`,
diff --git a/packages/ui/components/EcosystemNetworkList.vue b/packages/ui/components/EcosystemNetworkList.vue
index b919f2c0..a6c9e2d7 100644
--- a/packages/ui/components/EcosystemNetworkList.vue
+++ b/packages/ui/components/EcosystemNetworkList.vue
@@ -45,18 +45,6 @@ import { generateNavOptions } from '../utils/generateNavOptions'
 const store = useStore()
 const route = useRoute()
 const router = useRouter()
-
-useServerSeoMeta({
-  ogTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
-  title: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
-  description: () =>
-    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
-  ogDescription: () =>
-    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
-  twitterTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
-  twitterDescription: () =>
-    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
-})
 const currentEcosystem = ref(route.params.network.toString())
 const currentEcosystemSeoFormat = ref(currentEcosystem.value.toUpperCase())
 const selectedEcosystem = computed(() => store.selectedEcosystem)
@@ -134,7 +122,7 @@ useHead({
     {
       hid: 'og:title',
       property: 'og:title',
-      content: 'Data Feeds Explorer | Witnet',
+      content: `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
     },
     {
       hid: 'og:description',
@@ -158,6 +146,17 @@ useHead({
     },
   ],
 })
+useSeoMeta({
+  ogTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
+  title: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
+  description: () =>
+    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
+  ogDescription: () =>
+    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
+  twitterTitle: () => `Witnet Data Feeds on ${currentEcosystemSeoFormat.value}`,
+  twitterDescription: () =>
+    `Explore the list of decentralized data feeds on ${currentEcosystemSeoFormat.value}, using the Witnet oracle network`,
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/ui/components/LandingPage.vue b/packages/ui/components/LandingPage.vue
index f4a4bb92..27ef053d 100644
--- a/packages/ui/components/LandingPage.vue
+++ b/packages/ui/components/LandingPage.vue
@@ -21,18 +21,6 @@
 import { generateSelectOptions } from '../utils/generateSelectOptions'
 const store = useStore()
 
-useServerSeoMeta({
-  ogTitle: () => 'Data Feeds Explorer | Witnet',
-  title: () => 'Data Feeds Explorer | Witnet',
-  description: () =>
-    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
-  ogDescription: () =>
-    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
-  twitterTitle: () => 'Data Feeds Explorer | Witnet',
-  twitterDescription: () =>
-    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
-})
-
 const totalFeeds = computed(() => store.totalFeeds)
 const networks = computed(() => store.networks)
 const supportedChains = computed(() => {
@@ -61,6 +49,18 @@ onMounted(async () => {
   store.updateSelectedNetwork({ networks: [] })
   await store.fetchEcosystems()
 })
+
+useSeoMeta({
+  ogTitle: () => 'Data Feeds Explorer | Witnet',
+  title: () => 'Data Feeds Explorer | Witnet',
+  description: () =>
+    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
+  ogDescription: () =>
+    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
+  twitterTitle: () => 'Data Feeds Explorer | Witnet',
+  twitterDescription: () =>
+    'Explore the list of decentralized data feeds to connect your smart contracts to real world events, using the Witnet oracle network',
+})
 </script>
 
 <style lang="scss" scoped>