Qihan/MyBlog-Next
1
0
Fork 0
mirror of https://github.com/ChenQihan666/MyBlog-Next.git synced 2026-08-14 11:29:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: generate og images in png format (#43)

Browse Source 
* feat: generate og images in png format

In production mode, generate og images from svg to png format.

fix #40

* refactor: update og image format from svg to png

Update OG image format in post detail to png. Update twitter og images to auto-generated dynamic og
images.
This commit is contained in:
Sat Naing
2023-03-01 18:46:42 +06:30
committed by GitHub
parent c40af432a0
commit 27507d1d78
6 changed files with 320 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/Layout.astro
+1 -8
View File
@@ -24,8 +24,6 @@ const socialImageURL = new URL(
ogImage ? ogImage : SITE.ogImage,
Astro.url.origin
).href;
const fallbackImageURL = new URL(SITE.ogImage, Astro.url.origin).href;
---
<!DOCTYPE html>
@@ -54,12 +52,7 @@ const fallbackImageURL = new URL(SITE.ogImage, Astro.url.origin).href;
<meta property="twitter:url" content={canonicalURL} />
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
<meta
property="twitter:image"
content={socialImageURL.endsWith(".svg")
? fallbackImageURL
: socialImageURL}
/>
<meta property="twitter:image" content={socialImageURL} />
<!-- Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
src/layouts/PostDetails.astro
+1 -1
View File
@@ -16,7 +16,7 @@ const { title, author, description, ogImage, pubDatetime, tags } = post.data;
const { Content } = await post.render();
const ogUrl = new URL(ogImage ? ogImage : `${title}.svg`, Astro.url.origin)
const ogUrl = new URL(ogImage ? ogImage : `${title}.png`, Astro.url.origin)
.href;
---
src/utils/generateOgImage.tsx
+18 -2
View File
@@ -1,5 +1,7 @@
import satori, { SatoriOptions } from "satori";
import { SITE } from "@config";
import { writeFile } from "node:fs/promises";
import { Resvg } from "@resvg/resvg-js";
const fetchFonts = async () => {
// Regular Font
@@ -133,7 +135,21 @@ const options: SatoriOptions = {
],
};
const generateOgImage = async (mytext = SITE.title) =>
await satori(ogImage(mytext), options);
const generateOgImage = async (mytext = SITE.title) => {
const svg = await satori(ogImage(mytext), options);
// render png in production mode
if (import.meta.env.MODE === "production") {
const resvg = new Resvg(svg);
const pngData = resvg.render();
const pngBuffer = pngData.asPng();
console.info("Output PNG Image :", `${mytext}.png`);
await writeFile(`./dist/${mytext}.png`, pngBuffer);
}
return svg;
};
export default generateOgImage;