From 2acfa0fa238f193332db4605a5f1ce666334717b Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Thu, 06 Mar 2025 01:13:19 +0000
Subject: [PATCH] fix(og-image): overflow ellipses in title and description
---
quartz/util/og.tsx | 51 ++++++++++++++++++++++++++++++++++++---------------
quartz/components/Head.tsx | 2 +-
quartz.config.ts | 2 +-
3 files changed, 38 insertions(+), 17 deletions(-)
diff --git a/quartz.config.ts b/quartz.config.ts
index 6c89215..0cd7e94 100644
--- a/quartz.config.ts
+++ b/quartz.config.ts
@@ -19,7 +19,7 @@
baseUrl: "quartz.jzhao.xyz",
ignorePatterns: ["private", "templates", ".obsidian"],
defaultDateType: "created",
- generateSocialImages: false,
+ generateSocialImages: true,
theme: {
fontOrigin: "googleFonts",
cdnCaching: true,
diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx
index 3a4db10..983dc50 100644
--- a/quartz/components/Head.tsx
+++ b/quartz/components/Head.tsx
@@ -98,7 +98,7 @@
if (fileName) {
// Generate social image (happens async)
- generateSocialImage(
+ void generateSocialImage(
{
title,
description,
diff --git a/quartz/util/og.tsx b/quartz/util/og.tsx
index 42b9b27..4d675cb 100644
--- a/quartz/util/og.tsx
+++ b/quartz/util/og.tsx
@@ -143,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={{
@@ -160,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