implement og for all pages

Author: WarningImHack3r

src/routes/[pid=pid]/[org]/[repo]/[id=number]/+page.ts

@@ -1,10 +1,25 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: `Detail of ${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`
+			title: `Detail of ${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", data.item.info.title);
+							ogUrl.searchParams.set(
+								"description",
+								`${data.itemMetadata.org}/${data.itemMetadata.repo}#${data.itemMetadata.id}`
+							);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/devlog/v2/+page.ts

@@ -1,12 +1,20 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load() {
+export function load({ url }) {
 	return {
 		pageMetaTags: Object.freeze({
 			title: "v2 • Devlog",
 			description: "The development blog of Svelte Changelog",
-			twitter: {
-				description: "The development blog of Svelte Changelog"
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", "v2 • Devlog");
+							return ogUrl.href;
+						}
+					}
+				]
 			}
 		}) satisfies MetaTagsProps
 	};

src/routes/package/[...package]/+page.ts

@@ -1,10 +1,25 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: data.currentPackage.pkg.name
+			title: data.currentPackage.pkg.name,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", data.currentPackage.pkg.name);
+							ogUrl.searchParams.set(
+								"description",
+								`${data.currentPackage.repoOwner}/${data.currentPackage.repoName}`
+							);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/packages/+page.ts

@@ -1,10 +1,21 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data }) {
+export function load({ data, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: "All Packages"
+			title: "All Packages",
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", "All packages");
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }

src/routes/tracker/[org]/[repo]/+page.ts

@@ -1,10 +1,21 @@
 import type { MetaTagsProps } from "svelte-meta-tags";
 
-export function load({ data, params }) {
+export function load({ data, params, url }) {
 	return {
 		...data,
 		pageMetaTags: Object.freeze({
-			title: `Tracker for ${params.org}/${params.repo}`
+			title: `Tracker for ${params.org}/${params.repo}`,
+			openGraph: {
+				images: [
+					{
+						get url() {
+							const ogUrl = new URL("og", url.origin);
+							ogUrl.searchParams.set("title", `Tracker • ${params.org}/${params.repo}`);
+							return ogUrl.href;
+						}
+					}
+				]
+			}
 		}) satisfies MetaTagsProps
 	};
 }