From c538c151c7462ad0395ff2c15c5e11e89e362aa8 Mon Sep 17 00:00:00 2001
From: Striven <sg.striven@cutecat.club>
Date: Sat, 04 Apr 2026 19:47:16 +0000
Subject: [PATCH] Initial commit
---
quartz/util/og.tsx | 63 +++++++++++++++----------------
1 files changed, 30 insertions(+), 33 deletions(-)
diff --git a/quartz/util/og.tsx b/quartz/util/og.tsx
index f912b8a..2afd606 100644
--- a/quartz/util/og.tsx
+++ b/quartz/util/og.tsx
@@ -9,10 +9,11 @@
import { formatDate, getDate } from "../components/Date"
import readingTime from "reading-time"
import { i18n } from "../i18n"
-import chalk from "chalk"
+import { styleText } from "util"
const defaultHeaderWeight = [700]
const defaultBodyWeight = [400]
+
export async function getSatoriFonts(headerFont: FontSpecification, bodyFont: FontSpecification) {
// Get all weights for header and body fonts
const headerWeights: FontWeight[] = (
@@ -99,7 +100,8 @@
if (!match) {
console.log(
- chalk.yellow(
+ styleText(
+ "yellow",
`\nWarning: Failed to fetch font ${rawFontName} with weight ${weight}, got ${cssResponse.statusText}`,
),
)
@@ -134,21 +136,12 @@
excludeRoot: boolean
/**
* JSX to use for generating image. See satori docs for more info (https://github.com/vercel/satori)
- * @param cfg global quartz config
- * @param userOpts options that can be set by user
- * @param title title of current page
- * @param description description of current page
- * @param fonts global font that can be used for styling
- * @param fileData full fileData of current page
- * @returns prepared jsx to be used for generating image
*/
imageStructure: (
- cfg: GlobalConfiguration,
- userOpts: UserOpts,
- title: string,
- description: string,
- fonts: SatoriOptions["fonts"],
- fileData: QuartzPluginData,
+ options: ImageOptions & {
+ userOpts: UserOpts
+ iconBase64?: string
+ },
) => JSXInternal.Element
}
@@ -178,17 +171,17 @@
}
// This is the default template for generated social image.
-export const defaultImage: SocialImageOptions["imageStructure"] = (
- cfg: GlobalConfiguration,
- { colorScheme }: UserOpts,
- title: string,
- description: string,
- _fonts: SatoriOptions["fonts"],
- fileData: QuartzPluginData,
-) => {
+export const defaultImage: SocialImageOptions["imageStructure"] = ({
+ cfg,
+ userOpts,
+ title,
+ description,
+ fileData,
+ iconBase64,
+}) => {
+ const { colorScheme } = userOpts
const fontBreakPoint = 32
const useSmallerFont = title.length > fontBreakPoint
- const iconPath = `https://${cfg.baseUrl}/static/icon.png`
// Format date if available
const rawDate = getDate(cfg, fileData)
@@ -226,14 +219,16 @@
marginBottom: "0.5rem",
}}
>
- <img
- src={iconPath}
- width={56}
- height={56}
- style={{
- borderRadius: "50%",
- }}
- />
+ {iconBase64 && (
+ <img
+ src={iconBase64}
+ width={56}
+ height={56}
+ style={{
+ borderRadius: "50%",
+ }}
+ />
+ )}
<div
style={{
display: "flex",
@@ -266,6 +261,7 @@
WebkitBoxOrient: "vertical",
WebkitLineClamp: 2,
overflow: "hidden",
+ textOverflow: "ellipsis",
}}
>
{title}
@@ -287,8 +283,9 @@
margin: 0,
display: "-webkit-box",
WebkitBoxOrient: "vertical",
- WebkitLineClamp: 4,
+ WebkitLineClamp: 5,
overflow: "hidden",
+ textOverflow: "ellipsis",
}}
>
{description}
--
Gitblit v1.10.0