fix(og-image): overflow ellipses in title and description

Jacky Zhao

2025-03-06 2acfa0fa238f193332db4605a5f1ce666334717b

fix(og-image): overflow ellipses in title and description

 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,

 quartz/components/Head.tsx

@@ -98,7 +98,7 @@

      if (fileName) {
        // Generate social image (happens async)
        generateSocialImage(
        void generateSocialImage(
          {
            title,
            description,

 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>
  )
}