git.stevedylan.dev

more mods to OG image de267c49

Steve · 2023-02-27 12:15 1 file(s) · +35 −35

src/pages/og-image/[slug].png.ts +35 −35

import { getFormattedDate } from "@/utils";

const monoFontReg = await fetch(
	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
  "https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
);

const monoFontBold = await fetch(
	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
  "https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
);

const ogOptions: SatoriOptions = {
	width: 1200,
	height: 630,
	// debug: true,
	embedFont: true,
	fonts: [
		{
			name: "Roboto Mono",
			data: await monoFontReg.arrayBuffer(),
			weight: 400,
			style: "normal",
		},
		{
			name: "Roboto Mono",
			data: await monoFontBold.arrayBuffer(),
			weight: 700,
			style: "normal",
		},
	],
  width: 1200,
  height: 630,
  // debug: true,
  embedFont: true,
  fonts: [
    {
      name: "Roboto Mono",
      data: await monoFontReg.arrayBuffer(),
      weight: 400,
      style: "normal",
    },
    {
      name: "Roboto Mono",
      data: await monoFontBold.arrayBuffer(),
      weight: 700,
      style: "normal",
    },
  ],
};

const markup = (title: string, pubDate: string) => html`<div
	tw="flex flex-col w-full h-full bg-[#1d1f21] text-[#c9cacc]"
	tw="flex flex-col w-full h-full bg-[#2e3440] text-[#edeff3]"
>
	<div tw="flex flex-col flex-1 w-full p-10 justify-center">
		<p tw="text-2xl mb-6">${pubDate}</p>
		<h1 tw="text-6xl font-bold leading-snug text-white">${title}</h1>
	</div>
	<div tw="flex items-center justify-between w-full p-10 border-t border-[#2bbc89] text-xl">
	<div tw="flex items-center justify-between w-full p-10 border-t border-[#a3be8c] text-xl">
		<div tw="flex items-center">
			<svg height="60" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
<path d="M20.1465 448.094H479L350.926 226.37L311.281 258.273L275.108 232.751L249.573 258.273L215.528 232.751L193.185 258.273L151.291 221.053L20.1465 448.094Z" fill="#88C0D0"/>

</div>`;

export async function get({ params: { slug } }: APIContext) {
	const post = await getEntryBySlug("post", slug!);
	const title = post?.data.title ?? siteConfig.title;
	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
		weekday: "long",
	});
	const svg = await satori(markup(title, postDate), ogOptions);
	const png = new Resvg(svg).render().asPng();
	return {
		body: png,
		encoding: "binary",
	};
  const post = await getEntryBySlug("post", slug!);
  const title = post?.data.title ?? siteConfig.title;
  const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
    weekday: "long",
  });
  const svg = await satori(markup(title, postDate), ogOptions);
  const png = new Resvg(svg).render().asPng();
  return {
    body: png,
    encoding: "binary",
  };
}

export async function getStaticPaths(): Promise<GetStaticPathsResult> {
	const posts = await getCollection("post");
	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
  const posts = await getCollection("post");
  return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
}

7	7		import { getFormattedDate } from "@/utils";
8	8
9	9		const monoFontReg = await fetch(
10		-	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
	10	+	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-400-normal.ttf"
11	11		);
12	12
13	13		const monoFontBold = await fetch(
14		-	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
	14	+	"https://api.fontsource.org/v1/fonts/roboto-mono/latin-700-normal.ttf"
15	15		);
16	16
17	17		const ogOptions: SatoriOptions = {
18		-	width: 1200,
19		-	height: 630,
20		-	// debug: true,
21		-	embedFont: true,
22		-	fonts: [
23		-	{
24		-	name: "Roboto Mono",
25		-	data: await monoFontReg.arrayBuffer(),
26		-	weight: 400,
27		-	style: "normal",
28		-	},
29		-	{
30		-	name: "Roboto Mono",
31		-	data: await monoFontBold.arrayBuffer(),
32		-	weight: 700,
33		-	style: "normal",
34		-	},
35		-	],
	18	+	width: 1200,
	19	+	height: 630,
	20	+	// debug: true,
	21	+	embedFont: true,
	22	+	fonts: [
	23	+	{
	24	+	name: "Roboto Mono",
	25	+	data: await monoFontReg.arrayBuffer(),
	26	+	weight: 400,
	27	+	style: "normal",
	28	+	},
	29	+	{
	30	+	name: "Roboto Mono",
	31	+	data: await monoFontBold.arrayBuffer(),
	32	+	weight: 700,
	33	+	style: "normal",
	34	+	},
	35	+	],
36	36		};
37	37
38	38		const markup = (title: string, pubDate: string) => html`<div
39		-	tw="flex flex-col w-full h-full bg-[#1d1f21] text-[#c9cacc]"
	39	+	tw="flex flex-col w-full h-full bg-[#2e3440] text-[#edeff3]"
40	40		>
41	41		<div tw="flex flex-col flex-1 w-full p-10 justify-center">
42	42		<p tw="text-2xl mb-6">${pubDate}</p>
43	43		<h1 tw="text-6xl font-bold leading-snug text-white">${title}</h1>
44	44		</div>
45		-	<div tw="flex items-center justify-between w-full p-10 border-t border-[#2bbc89] text-xl">
	45	+	<div tw="flex items-center justify-between w-full p-10 border-t border-[#a3be8c] text-xl">
46	46		<div tw="flex items-center">
47	47		<svg height="60" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
48	48		<path d="M20.1465 448.094H479L350.926 226.37L311.281 258.273L275.108 232.751L249.573 258.273L215.528 232.751L193.185 258.273L151.291 221.053L20.1465 448.094Z" fill="#88C0D0"/>

57	57		</div>`;
58	58
59	59		export async function get({ params: { slug } }: APIContext) {
60		-	const post = await getEntryBySlug("post", slug!);
61		-	const title = post?.data.title ?? siteConfig.title;
62		-	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
63		-	weekday: "long",
64		-	});
65		-	const svg = await satori(markup(title, postDate), ogOptions);
66		-	const png = new Resvg(svg).render().asPng();
67		-	return {
68		-	body: png,
69		-	encoding: "binary",
70		-	};
	60	+	const post = await getEntryBySlug("post", slug!);
	61	+	const title = post?.data.title ?? siteConfig.title;
	62	+	const postDate = getFormattedDate(post?.data.publishDate ?? Date.now(), {
	63	+	weekday: "long",
	64	+	});
	65	+	const svg = await satori(markup(title, postDate), ogOptions);
	66	+	const png = new Resvg(svg).render().asPng();
	67	+	return {
	68	+	body: png,
	69	+	encoding: "binary",
	70	+	};
71	71		}
72	72
73	73		export async function getStaticPaths(): Promise<GetStaticPathsResult> {
74		-	const posts = await getCollection("post");
75		-	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
	74	+	const posts = await getCollection("post");
	75	+	return posts.filter(({ data }) => !data.ogImage).map(({ slug }) => ({ params: { slug } }));
76	76		}