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

refactor: og templates

Browse Source
This commit is contained in:
tanishqmanuja
2023-09-20 15:06:58 +05:30
committed by Sat Naing
parent 35bb517d3a
commit 4380a7b290
2 changed files with 97 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/generateOgImages.tsx
+2 -96
View File
@@ -1,8 +1,8 @@
import satori, { type SatoriOptions } from "satori"; import satori, { type SatoriOptions } from "satori";
import { SITE } from "@config";
import { writeFile } from "node:fs/promises"; import { writeFile } from "node:fs/promises";
import { Resvg } from "@resvg/resvg-js"; import { Resvg } from "@resvg/resvg-js";
import { getCollection } from "astro:content"; import { getCollection } from "astro:content";
import postOgImage from "./og-templates/post";
const fetchFonts = async () => { const fetchFonts = async () => {
// Regular Font // Regular Font
@@ -22,100 +22,6 @@ const fetchFonts = async () => {
const { fontRegular, fontBold } = await fetchFonts(); const { fontRegular, fontBold } = await fetchFonts();
const ogImage = (text: string) => {
return (
<div
style={{
background: "#fefbfb",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<div
style={{
position: "absolute",
top: "-1px",
right: "-1px",
border: "4px solid #000",
background: "#ecebeb",
opacity: "0.9",
borderRadius: "4px",
display: "flex",
justifyContent: "center",
margin: "2.5rem",
width: "88%",
height: "80%",
}}
/>
<div
style={{
border: "4px solid #000",
background: "#fefbfb",
borderRadius: "4px",
display: "flex",
justifyContent: "center",
margin: "2rem",
width: "88%",
height: "80%",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
margin: "20px",
width: "90%",
height: "90%",
}}
>
<p
style={{
fontSize: 72,
fontWeight: "bold",
maxHeight: "84%",
overflow: "hidden",
}}
>
{text}
</p>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
marginBottom: "8px",
fontSize: 28,
}}
>
<span>
by{" "}
<span
style={{
color: "transparent",
}}
>
"
</span>
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
{SITE.author}
</span>
</span>
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
{SITE.title}
</span>
</div>
</div>
</div>
</div>
);
};
const options: SatoriOptions = { const options: SatoriOptions = {
width: 1200, width: 1200,
height: 630, height: 630,
@@ -146,7 +52,7 @@ const generateOgImages = async () => {
); );
const imageGenerationPromises = posts.map(async post => { const imageGenerationPromises = posts.map(async post => {
const svg = await satori(ogImage(post.data.title), options); const svg = await satori(postOgImage(post.data.title), options);
// render png in production mode // render png in production mode
if (import.meta.env.MODE === "production") { if (import.meta.env.MODE === "production") {
src/utils/og-templates/post.tsx
+95
View File
@@ -0,0 +1,95 @@
import { SITE } from "@config";
export default (text: string) => {
return (
<div
style={{
background: "#fefbfb",
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
<div
style={{
position: "absolute",
top: "-1px",
right: "-1px",
border: "4px solid #000",
background: "#ecebeb",
opacity: "0.9",
borderRadius: "4px",
display: "flex",
justifyContent: "center",
margin: "2.5rem",
width: "88%",
height: "80%",
}}
/>
<div
style={{
border: "4px solid #000",
background: "#fefbfb",
borderRadius: "4px",
display: "flex",
justifyContent: "center",
margin: "2rem",
width: "88%",
height: "80%",
}}
>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
margin: "20px",
width: "90%",
height: "90%",
}}
>
<p
style={{
fontSize: 72,
fontWeight: "bold",
maxHeight: "84%",
overflow: "hidden",
}}
>
{text}
</p>
<div
style={{
display: "flex",
justifyContent: "space-between",
width: "100%",
marginBottom: "8px",
fontSize: 28,
}}
>
<span>
by{" "}
<span
style={{
color: "transparent",
}}
>
"
</span>
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
{SITE.author}
</span>
</span>
<span style={{ overflow: "hidden", fontWeight: "bold" }}>
{SITE.title}
</span>
</div>
</div>
</div>
</div>
);
};