64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import type {
|
|
APIRoute,
|
|
GetStaticPaths,
|
|
GetStaticPathsItem,
|
|
InferGetStaticPropsType,
|
|
} from "astro";
|
|
import { html } from "satori-html";
|
|
import { getAllPages, getAllPosts, getSettings, invariant } from "../../../api";
|
|
import satoriOG from "../satori";
|
|
|
|
export const getStaticPaths: GetStaticPaths = async () => {
|
|
const result: GetStaticPathsItem[] = [];
|
|
const [posts, pages, settings] = await Promise.all([
|
|
getAllPosts(),
|
|
await getAllPages(),
|
|
await getSettings(),
|
|
]);
|
|
const allPosts = [...posts, ...pages];
|
|
invariant(settings, "Settings are required");
|
|
|
|
allPosts.map((allPosts) => {
|
|
result.push({
|
|
params: { slug: allPosts.slug },
|
|
props: {
|
|
title: allPosts.title,
|
|
image: allPosts.feature_image,
|
|
},
|
|
});
|
|
});
|
|
return result;
|
|
};
|
|
export type Props = InferGetStaticPropsType<typeof getStaticPaths>;
|
|
|
|
export const GET: APIRoute = async ({ props, site }) => {
|
|
const settings = await getSettings();
|
|
invariant(settings, "Settings are required");
|
|
const fontFile = await fetch(
|
|
"https://og-playground.vercel.app/inter-latin-ext-700-normal.woff",
|
|
);
|
|
const fontData: ArrayBuffer = await fontFile.arrayBuffer();
|
|
|
|
return await satoriOG({
|
|
template: html`<div style="display: flex; height: 100%; width: 100%; alignItems: center; justifyContent: center; letterSpacing: -.02em; fontWeight: 700; background: white;"> <div style="left: 24; top: 24; position: absolute; display: flex; alignItems: center;"> <img src=${
|
|
settings.icon
|
|
} width="82"/> <span style="marginLeft: 8; fontSize: 48;">${
|
|
settings.title
|
|
} - Authors</span> </div> <div style=" display: flex; flexWrap: wrap; justifyContent: center; padding: 20px 50px; margin: 0 42px; fontSize: 40; width: 1700; height: 850; textAlign: center; backgroundColor: black; color: white; lineHeight: 1.4;"> <img src=${
|
|
settings.cover_image ? settings.cover_image : settings.twitter_image
|
|
} width="100%" height="100%"/> </div> <div style="left: 24; bottom: 24; position: absolute; display: flex; alignItems: center;"> <span style="marginLeft: 8; fontSize: 48;">${site}</span> </div> </div>`,
|
|
width: 1920,
|
|
height: 1080,
|
|
}).toResponse({
|
|
satori: {
|
|
fonts: [
|
|
{
|
|
name: "Inter Latin",
|
|
data: fontData,
|
|
style: "normal",
|
|
},
|
|
],
|
|
},
|
|
});
|
|
};
|