From 269d9f25094554fa10ac97cfb344c0d451921c7e Mon Sep 17 00:00:00 2001
From: Alessandro Jean <14254807+alessandrojean@users.noreply.github.com>
Date: Fri, 1 Sep 2023 20:36:17 -0300
Subject: [PATCH] Fix dir alignment and URL for OG images (#12)

---
 .../src/.vitepress/config/hooks/generateMeta.ts   |  8 ++++++--
 .../theme/components/OgImageTemplate.vue          | 15 +++++++++------
 2 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/website/src/.vitepress/config/hooks/generateMeta.ts b/website/src/.vitepress/config/hooks/generateMeta.ts
index cf31312b..6127780f 100644
--- a/website/src/.vitepress/config/hooks/generateMeta.ts
+++ b/website/src/.vitepress/config/hooks/generateMeta.ts
@@ -72,12 +72,16 @@ const generateMeta = (context: TransformContext, hostname: string) => {
 		const url = pageData.filePath
 			.replace("index.md", "")
 			.replace(".md", "");
-		head.push(["meta", { property: "og:image", content: `${hostname}/${url}__og_image__/og.png` }]);
+		const imageUrl = `${url}/__og_image__/og.png`
+			.replace(/\/\//g, "/")
+			.replace(/^\//, "");
+
+		head.push(["meta", { property: "og:image", content: `${hostname}/${imageUrl}` }]);
 		head.push(["meta", { property: "og:image:width", content: "1200" }]);
 		head.push(["meta", { property: "og:image:height", content: "628" }]);
 		head.push(["meta", { property: "og:image:type", content: "image/png" }]);
 		head.push(["meta", { property: "og:image:alt", content: pageData.frontmatter.title }]);
-		head.push(["meta", { name: "twitter:image", content: `${hostname}/${url}__og_image__/og.png` }]);
+		head.push(["meta", { name: "twitter:image", content: `${hostname}/${imageUrl}` }]);
 		head.push(["meta", { name: "twitter:image:width", content: "1200" }]);
 		head.push(["meta", { name: "twitter:image:height", content: "628" }]);
 		head.push(["meta", { name: "twitter:image:alt", content: pageData.frontmatter.title }]);
diff --git a/website/src/.vitepress/theme/components/OgImageTemplate.vue b/website/src/.vitepress/theme/components/OgImageTemplate.vue
index 242eabde..d517ef8a 100644
--- a/website/src/.vitepress/theme/components/OgImageTemplate.vue
+++ b/website/src/.vitepress/theme/components/OgImageTemplate.vue
@@ -3,18 +3,21 @@ defineProps<{ title: string; description?: string; dir?: string }>();
 </script>
 
 <template>
-	<div tw="w-full h-full bg-white flex flex-col" style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.98), rgba(231,230,255,0.92)), url(https://tachiyomi-v3-gridsome.netlify.app/background-dark.png);background-position:50%;">
-		<div tw="py-10 pl-10 pr-64 w-full min-h-0 grow flex flex-col items-center justify-between">
+	<div
+		tw="w-full h-full bg-white flex flex-col"
+		style="background:linear-gradient(0deg, rgba(255, 255, 255, 0.98), rgba(231,230,255,0.92)), url(https://tachiyomi-v3-gridsome.netlify.app/background-dark.png);background-position:50%;"
+	>
+		<div tw="p-10 w-full min-h-0 grow flex flex-col items-center justify-between">
 			<div tw="w-full flex justify-between items-center text-4xl font-medium">
 				<div tw="flex items-center">
 					<svg width="64" height="64" viewBox="0 0 288 288" preserveAspectRatio="xMidYMid meet" fill="#8995FF"><path d="M141.2 36.7l-18.3.3.8 9.8c.4 5.3.8 11.9.8 14.7v5h-41-41l.3 17.9.3 17.9 6.7-.7c15.2-1.4 101.5-1.8 146.2-.7l48 1.6c1.3.4 1.5-2 1.5-17.8V66.5l-38.3.4c-21 .2-39.8 0-41.8-.3l-3.5-.7.3-15c.3-12.8.1-14.9-1.2-14.7-.8.1-9.7.4-19.8.5zm-56.7 76.9c-12.8 5-16 6.7-15.8 8.1.1 1 2.2 7.3 4.7 14 5.8 15.3 12.4 38.4 16.6 57.8l3.5 15.3c.2.2 8.3-2.5 18.2-6l17.9-6.3-1.2-6c-3.5-16.8-24.8-83.6-26.7-83.4-.7.1-8.4 3-17.2 6.5zm93.6 10.1c-10.4 41.7-22.9 83.2-27.1 90.1l-1.9 3.1-17.3.3c-20 .3-91.3-.9-94.3-1.6-1.9-.5-2 0-2 18v18.6l5-.6c2.8-.3 51.8-.9 109-1.2l104-.7v-17.6-17.6l-8.5.7c-4.7.3-19.5.7-32.9.7-19.1.1-24.2-.2-23.8-1.2.3-.6 2.2-5 4.2-9.7 6.5-15.2 29.6-86.3 28.4-87.4-.4-.4-32.6-9.4-36.5-10.3-2-.4-2.4.7-6.3 16.4z"/></svg>
 					<div tw="text-slate-900 ml-2 mt-1 font-semibold">Tachiyomi</div>
 				</div>
-				<div v-if="dir" tw="text-5xl items-center font-bold text-slate-900">{{ dir }}</div>
+				<div v-if="dir" tw="text-4xl items-center font-bold text-slate-900">{{ dir }}</div>
 			</div>
-			<div tw="w-full flex flex-col items-start justify-end">
-				<div tw="text-7xl font-bold text-slate-900">{{ title }}</div>
-				<div v-if="description" tw="mt-2 text-5xl text-slate-500">{{ description }}</div>
+			<div tw="w-full pr-56 flex flex-col items-start justify-end">
+				<div tw="text-6xl font-bold text-slate-900">{{ title }}</div>
+				<div v-if="description" tw="mt-2 text-4xl text-slate-500">{{ description }}</div>
 			</div>
 		</div>
 		<div tw="shrink-0 h-2 w-full flex" style="background-color: #8995FF;" />