From 23df17233da3f16db5166cf8a05b2089bd1f006a Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 10 Mar 2025 18:39:08 +0000
Subject: [PATCH] fix(graph): make graph non-singleton, proper cleanup, fix radial
---
quartz/util/og.tsx | 55 +++++++++++++++++++++++++++++++++++++++----------------
1 files changed, 39 insertions(+), 16 deletions(-)
diff --git a/quartz/util/og.tsx b/quartz/util/og.tsx
index 0430a26..4d675cb 100644
--- a/quartz/util/og.tsx
+++ b/quartz/util/og.tsx
@@ -35,7 +35,9 @@
async function fetchTtf(fontName: string, weight: FontWeight): Promise<ArrayBuffer> {
try {
// Get css file from google fonts
- const cssResponse = await fetch(`https://fonts.googleapis.com/css?family=${fontName}:${weight}`)
+ const cssResponse = await fetch(
+ `https://fonts.googleapis.com/css2?family=${fontName}:wght@${weight}`,
+ )
const css = await cssResponse.text()
// Extract .ttf url from css file
@@ -141,12 +143,10 @@
fonts: SatoriOptions["fonts"],
_fileData: QuartzPluginData,
) => {
- // How many characters are allowed before switching to smaller font
const fontBreakPoint = 22
const useSmallerFont = title.length > fontBreakPoint
-
- // Setup to access image
const iconPath = `https://${cfg.baseUrl}/static/icon.png`
+
return (
<div
style={{
@@ -158,43 +158,66 @@
width: "100%",
backgroundColor: cfg.theme.colors[colorScheme].light,
gap: "2rem",
- paddingTop: "1.5rem",
- paddingBottom: "1.5rem",
- paddingLeft: "5rem",
- paddingRight: "5rem",
+ padding: "1.5rem 5rem",
}}
>
<div
style={{
display: "flex",
alignItems: "center",
- justifyContent: "flex-start",
width: "100%",
flexDirection: "row",
gap: "2.5rem",
}}
>
<img src={iconPath} width={135} height={135} />
- <p
+ <div
style={{
+ display: "flex",
color: cfg.theme.colors[colorScheme].dark,
fontSize: useSmallerFont ? 70 : 82,
fontFamily: fonts[0].name,
+ maxWidth: "70%",
+ overflow: "hidden",
+ textOverflow: "ellipsis",
}}
>
- {title}
- </p>
+ <p
+ style={{
+ margin: 0,
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ whiteSpace: "nowrap",
+ }}
+ >
+ {title}
+ </p>
+ </div>
</div>
- <p
+ <div
style={{
+ display: "flex",
color: cfg.theme.colors[colorScheme].dark,
fontSize: 44,
- lineClamp: 3,
fontFamily: fonts[1].name,
+ maxWidth: "100%",
+ maxHeight: "40%",
+ overflow: "hidden",
}}
>
- {description}
- </p>
+ <p
+ style={{
+ margin: 0,
+ display: "-webkit-box",
+ WebkitBoxOrient: "vertical",
+ WebkitLineClamp: 3,
+ overflow: "hidden",
+ textOverflow: "ellipsis",
+ }}
+ >
+ {description}
+ </p>
+ </div>
</div>
)
}
--
Gitblit v1.10.0