feat: handle og images on routes

messages/en.json

@@ -307,6 +307,8 @@
 	"navigation_votes": "Votes",
 	"no_accounts_found": "No accounts found",
 	"no_supported_funding_methods": "No supported funding methods for this blockchain.",
+	"og_title_default": "Unicove - Your gateway to the EOS Network",
+	"og_description_default": "Stake, Send, Manage Tokens, and Explore EOS – all with ease",
 	"processing_fees": "Processing fees",
 	"ram_available_balance": "RAM Available",
 	"ram_form_buy_amount": "Amount of RAM to buy:",

messages/ko.json

@@ -385,4 +385,4 @@
 	"transaction_page_subtitle": "{date} 에 대한 거래",
 	"unstaking_description": "현재 스테이킹 해제 중인 토큰은 아래와 같이 출시 날짜와 함께 나열되어 있습니다. 이 잔액은 인출될 때까지 계속해서 보상을 받게 됩니다.",
 	"where_eos_can_be_purchased": "EOS는 사용자의 요구와 위치에 따라 다양한 플랫폼을 통해 구매할 수 있습니다. 가장 인기 있는 옵션은 다음과 같습니다."
-}
+}

messages/zh.json

@@ -385,4 +385,4 @@
 	"transaction_page_subtitle": "{date} 的交易",
 	"unstaking_description": "当前正在解质押的代币及其可用日期列在下方。这些代币在提取前将继续赚取奖励。",
 	"where_eos_can_be_purchased": "EOS 可以通过多个平台购买，具体取决于用户需求和所在地。以下是一些最受欢迎的选项。"
-}
+}

src/lib/utils/index.ts

@@ -109,3 +109,18 @@ export function isSameToken(token1?: TokenKeyParams, token2?: TokenKeyParams): b
 export const goto: typeof svelteGoto = (url, opts = {}) => {
 	return svelteGoto(`/${languageTag()}${url}`, opts);
 };
+
+/**
+ * Retrieves the opengraph image for a specified route
+ */
+export function getOgImage(route = 'default'): string {
+	const path = new URL(`../assets/opengraph/${languageTag()}/${route}.png`, import.meta.url)
+		.pathname;
+
+	// if image doesn't exist for the route/lang combo, use the default
+	if (path.includes('undefined')) {
+		return new URL(`../assets/opengraph/${languageTag()}/default.png`, import.meta.url).pathname;
+	}
+
+	return path;
+}

src/routes/+layout.ts

@@ -1,37 +1,18 @@
 import { type SeoConfig } from 'svead';
 import { i18n } from '$lib/i18n';
 import type { LoadEvent } from '@sveltejs/kit';
-import defaultImage from '$lib/assets/opengraph/default.png';
-import enOgImage from '$lib/assets/opengraph/en/default.png';
-import zhOgImage from '$lib/assets/opengraph/zh/default.png';
-import koOgImage from '$lib/assets/opengraph/ko/default.png';
-import { languageTag } from '$lib/paraglide/runtime';
+import * as m from '$lib/paraglide/messages';
+import { getOgImage } from '$lib/utils';
 
 function generateMetadata(url: URL): SeoConfig {
 	const modified = new URL(url);
 	modified.pathname = i18n.route(url.pathname);
 
-	let open_graph_image: string;
-
-	switch (languageTag()) {
-		case 'en':
-			open_graph_image = enOgImage;
-			break;
-		case 'zh':
-			open_graph_image = zhOgImage;
-			break;
-		case 'ko':
-			open_graph_image = koOgImage;
-			break;
-		default:
-			open_graph_image = defaultImage;
-	}
-
 	return {
 		url: String(modified),
-		title: 'Unicove - Your gateway to the EOS Network',
-		description: 'Stake, Send, Manage Tokens, and Explore EOS – all with ease',
-		open_graph_image: open_graph_image
+		title: m.og_title_default(),
+		description: m.og_description_default(),
+		open_graph_image: getOgImage()
 	};
 }
 

src/routes/[network]/(account)/(send)/+layout.ts

@@ -1,5 +1,6 @@
 import type { LayoutLoad } from './$types';
 import * as m from '$lib/paraglide/messages';
+import { getOgImage } from '$lib/utils';
 
 export const load: LayoutLoad = async ({ parent }) => {
 	const { network } = await parent();
@@ -10,7 +11,8 @@ export const load: LayoutLoad = async ({ parent }) => {
 			title: m.common_send_tokens(),
 			description: m.send_page_description({
 				network: network.chain.name
-			})
+			}),
+			open_graph_image: getOgImage('send')
 		}
 	};
 };