Rework og images define

Author: GusevPM

components/OgImage/StatsMetricImage.vue

@@ -23,7 +23,7 @@ const bgStyles = computed(() => {
 		<img src="/img/stats_bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '80px' }">
-			<div :style="{ display: 'flex', alignItems: 'center' }">
+			<div class="flex flex-row items-center">
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }">stats</span>
 				<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
 				<span :style="{ fontSize: '50px', color: '#FF8351' }">

components/OgImage/ValidatorImage.vue

@@ -29,11 +29,11 @@ const bgStyles = computed(() => {
 			<div :style="{ display: 'flex', alignItems: 'center' }">
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.9)' }">validator</span>
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">('</span>
-				<span :style="{ fontSize: '40px', color: '#FF8351' }"> celestiavaloper•••{{ validator.address.slice(-4) }} </span>
+				<span :style="{ fontSize: '40px', color: '#FF8351' }"> celestiavaloper•••{{ validator.address.hash.slice(-4) }} </span>
 				<span :style="{ fontSize: '60px', color: 'rgba(255,255,255, 0.3)' }">')</span>
 			</div>
 
-			<span :style="{ fontSize: '46px', color: 'rgba(255,255,255, 0.9)' }">
+			<span v-if="validator.moniker" :style="{ fontSize: '46px', color: 'rgba(255,255,255, 0.9)' }">
 				{{ validator.moniker }}
 			</span>
 

pages/address/[hash].vue

@@ -24,10 +24,9 @@ if (!rawAddress.value) {
 	cacheStore.current.address = address.value
 }
 
-defineOgImage({
+defineOgImageComponent("AddressImage", {
 	title: "Address",
 	address: address.value,
-	component: "AddressImage",
 	cacheKey: `${address.value?.hash.slice(-4)}-${address.value?.balance.spendable}-${address.value?.first_height}-${
 		address.value?.last_height
 	}`,

pages/block/[height].vue

@@ -32,10 +32,9 @@ if (!rawBlock.value) {
 	cacheStore.current.block = block.value
 }
 
-defineOgImage({
+defineOgImageComponent("BlockImage", {
 	title: "Block",
 	block: block.value,
-	component: "BlockImage",
 	cacheKey: `${block.value?.height}`,
 })
 

pages/namespace/[id].vue

@@ -26,10 +26,9 @@ if (!rawNamespace.value) {
 	cacheStore.current.namespace = namespace.value
 }
 
-defineOgImage({
+defineOgImageComponent("NamespaceImage", {
 	title: "Namespace",
 	namespace: namespace.value,
-	component: "NamespaceImage",
 	cacheKey: `${namespace.value?.hash}`,
 })
 

pages/rollup/[slug].vue

@@ -26,10 +26,9 @@ if (!rawRollup.value) {
 	cacheStore.current.rollup = rollup.value
 }
 
-defineOgImage({
+defineOgImageComponent("RollupImage", {
 	title: "Rollup",
 	rollup: rollup.value,
-	component: "RollupImage",
 	cacheKey: `${rollup.value?.name}`,
 })
 

pages/rollup/rank/[slug].vue

@@ -138,10 +138,9 @@ const fetchData = async () => {
 }
 await fetchData()
 
-defineOgImage({
+defineOgImageComponent("RollupImage", {
 	title: "Rollup",
 	rollup: rollup.value,
-	component: "RollupImage",
 	cacheKey: `${rollup.value?.name}`,
 })
 

pages/stats/[metric].vue

@@ -55,10 +55,9 @@ if (!series.value?.page) {
 	}
 }
 
-defineOgImage({
+defineOgImageComponent("StatsMetricImage", {
 	title: "Statistics",
 	series: series.value,
-	component: "StatsMetricImage",
 	cacheKey: `${series.value?.page}`,
 })
 

pages/validator/[id].vue

@@ -25,11 +25,10 @@ if (!rawValidator.value) {
 	cacheStore.current.validator = validator.value
 }
 
-defineOgImage({
+defineOgImageComponent("ValidatorImage", {
 	title: "Validator",
 	validator: validator.value,
-	component: "ValidatorImage",
-	cacheKey: `${validator.value?.moniker}`,
+	cacheKey: `${validator.value?.moniker || validator.value.address.hash}`,
 })
 
 useHead({