Fix og images

components/LeftSidebar.vue

@@ -95,7 +95,7 @@ const mainLinks = reactive([
 				name: "Ecosystem",
 				path: "/stats?tab=ecosystem",
 				queryParam: {tab: "ecosystem"},
-				show: true,
+				show: false,
 				// show: isMainnet(),
 			},
 		],

components/OgImage/AddressImage.vue

@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -28,8 +25,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">

components/OgImage/BlockImage.vue

@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -30,8 +27,8 @@ const messages = computed(() => [...new Set(props.block.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex' }">

components/OgImage/NamespaceImage.vue

@@ -14,9 +14,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -25,8 +22,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
 			<div :style="{ display: 'flex', alignItems: 'center' }">

components/OgImage/RollupImage.vue

@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -28,8 +25,8 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/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' }">

components/OgImage/TxImage.vue

@@ -17,9 +17,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -30,12 +27,12 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 120px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '40px' }">
-			<div :style="{ display: 'flex', alignItems: 'center', gap: '24px' }">
-				<div :style="{ display: 'flex', alignItems: 'center' }">
+			<div class="flex flex-row items-center" :style="{ gap: '24px' }">
+				<div class="flex items-center flex-nowrap">
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.9)' }"> tx </span>
 					<span :style="{ fontSize: '70px', color: 'rgba(255,255,255, 0.3)' }">('</span>
 					<span :style="{ fontSize: '70px', color: '#FF8351' }">
@@ -76,9 +73,11 @@ const messages = computed(() => [...new Set(props.tx.message_types)])
 				</span>
 			</div>
 
-			<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.4)' }">{{ DateTime.fromISO(tx.time).toFormat("ff") }}</span>
+			<span :style="{ fontSize: '40px', marginBottom: '40px', color: 'rgba(255,255,255, 0.4)' }">{{
+				DateTime.fromISO(tx.time).toFormat("ff")
+			}}</span>
 
-			<div :style="{ display: 'flex', flexDirection: 'column', gap: '24px' }">
+			<div class="flex flex-col" :style="{ gap: '24px' }">
 				<div :style="{ display: 'flex', gap: '12px' }">
 					<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.3)' }">Fee: </span>
 					<span :style="{ fontSize: '40px', color: 'rgba(255,255,255, 0.6)' }">{{ tia(tx.fee) }} </span>

components/OgImage/ValidatorImage.vue

@@ -14,9 +14,6 @@ const props = defineProps({
 const bgStyles = computed(() => {
 	return {
 		style: {
-			position: "absolute",
-			top: "0",
-			left: "0",
 			filter: "grayscale(1)",
 			opacity: "0.05",
 		},
@@ -25,18 +22,18 @@ const bgStyles = computed(() => {
 </script>
 
 <template>
-	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 80px', fontFamily: 'IBM+Plex+Mono' }">
-		<img src="/img/bg.png" v-bind="bgStyles" />
+	<div class="w-full h-full" :style="{ background: '#111111', padding: '100px 50px', fontFamily: 'IBM+Plex+Mono', overflow: 'hidden' }">
+		<img src="/img/bg.png" width="1200" height="600" class="absolute" v-bind="bgStyles" />
 
 		<div :style="{ height: '100%', display: 'flex', flexDirection: 'column', gap: '50px' }">
 			<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>
 

nuxt.config.ts

@@ -1,14 +1,19 @@
 import { nodePolyfills } from "vite-plugin-node-polyfills"
 import wasm from "vite-plugin-wasm"
 import topLevelAwait from "vite-plugin-top-level-await"
+import { updateSiteConfig } from "nuxt-site-config/kit"
 
 import path from "path"
 
 export default defineNuxtConfig({
-	modules: ["@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
+	modules: ["nuxt-site-config", "@pinia/nuxt", "nuxt-og-image", "@nuxtjs/sitemap"],
 
-	site: {
-		url: "https://celenium.io",
+	hooks: {
+		"site-config:resolve": () => {
+			updateSiteConfig({
+				url: process.env.CF_PAGES_URL ?? "https://celenium.io",
+			})
+		},
 	},
 
 	sitemap: {
@@ -149,4 +154,4 @@ export default defineNuxtConfig({
 	},
 
 	compatibilityDate: "2025-04-02",
-})
+})

package.json

@@ -18,7 +18,7 @@
 		"@unhead/vue": "^2.0.0-rc.1",
 		"cross-env": "^7.0.3",
 		"nuxt": "3.16.2",
-		"nuxt-og-image": "5.1.1",
+		"nuxt-og-image": "5.1.3",
 		"sass": "1.66.1",
 		"sass-loader": "13.3.2",
 		"unenv": "^1.9.0",
@@ -45,6 +45,7 @@
 		"lean-qr": "^2.3.2",
 		"long": "^5.2.3",
 		"luxon": "3.4.3",
+		"nuxt-site-config": "^3.1.9",
 		"pinia": "3.0.2",
 		"protobufjs": "^7.2.6",
 		"qrcode": "^1.5.3",

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
 	}`,
@@ -38,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -56,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",

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}`,
 })
 
@@ -44,7 +43,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -62,11 +61,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",

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}`,
 })
 
@@ -38,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -56,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",

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}`,
 })
 
@@ -38,7 +37,7 @@ useHead({
 	link: [
 		{
 			rel: "canonical",
-			href: `https://celenium.io${route.path}`,
+			href: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 	],
 	meta: [
@@ -56,11 +55,7 @@ useHead({
 		},
 		{
 			property: "og:url",
-			content: `https://celenium.io${route.path}`,
-		},
-		{
-			property: "og:image",
-			content: `https://celenium.io${route.path}__og_image__/og.png`,
+			content: `${useRequestURL().origin}${useRequestURL().pathname}`,
 		},
 		{
 			name: "twitter:title",