feat(og): add reading time to default, improve logging

Jacky Zhao

2025-03-13 80c3196feeb310020880d322e9690de5f063af5a

feat(og): add reading time to default, improve logging

 quartz.config.ts

@@ -87,6 +87,7 @@
      Plugin.Assets(),
      Plugin.Static(),
      Plugin.NotFoundPage(),
      // Comment out CustomOgImages to speed up build time
      Plugin.CustomOgImages(),
    ],
  },

 quartz/processors/emit.ts

@@ -26,7 +26,7 @@
            if (ctx.argv.verbose) {
              console.log(`[emit:${emitter.name}] ${file}`)
            } else {
              log.updateText(`Emitting output files: ${chalk.gray(file)}`)
              log.updateText(`Emitting output files: ${emitter.name} -> ${chalk.gray(file)}`)
            }
          }
        } else {
@@ -36,7 +36,7 @@
            if (ctx.argv.verbose) {
              console.log(`[emit:${emitter.name}] ${file}`)
            } else {
              log.updateText(`Emitting output files: ${chalk.gray(file)}`)
              log.updateText(`Emitting output files: ${emitter.name} -> ${chalk.gray(file)}`)
            }
          }
        }

 quartz/util/log.ts

@@ -22,7 +22,7 @@
        readline.cursorTo(process.stdout, 0)
        process.stdout.write(`${this.spinnerChars[this.spinnerIndex]} ${this.spinnerText}`)
        this.spinnerIndex = (this.spinnerIndex + 1) % this.spinnerChars.length
      }, 100)
      }, 20)
    }
  }


 quartz/util/og.tsx

@@ -6,8 +6,9 @@
import { FontSpecification, ThemeKey } from "./theme"
import path from "path"
import { QUARTZ } from "./path"
import { formatDate } from "../components/Date"
import { getDate } from "../components/Date"
import { formatDate, getDate } from "../components/Date"
import readingTime from "reading-time"
import { i18n } from "../i18n"

const defaultHeaderWeight = [700]
const defaultBodyWeight = [400]
@@ -183,6 +184,12 @@
  const rawDate = getDate(cfg, fileData)
  const date = rawDate ? formatDate(rawDate, cfg.locale) : null

  // Calculate reading time
  const { minutes } = readingTime(fileData.text ?? "")
  const readingTimeText = i18n(cfg.locale).components.contentMeta.readingTime({
    minutes: Math.ceil(minutes),
  })

  // Get tags if available
  const tags = fileData.frontmatter?.tags ?? []

@@ -287,11 +294,12 @@
          borderTop: `1px solid ${cfg.theme.colors[colorScheme].lightgray}`,
        }}
      >
        {/* Left side - Date */}
        {/* Left side - Date and Reading Time */}
        <div
          style={{
            display: "flex",
            alignItems: "center",
            gap: "2rem",
            color: cfg.theme.colors[colorScheme].gray,
            fontSize: 28,
          }}
@@ -314,6 +322,20 @@
              {date}
            </div>
          )}
          <div style={{ display: "flex", alignItems: "center" }}>
            <svg
              style={{ marginRight: "0.5rem" }}
              width="28"
              height="28"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
            >
              <circle cx="12" cy="12" r="10"></circle>
              <polyline points="12 6 12 12 16 14"></polyline>
            </svg>
            {readingTimeText}
          </div>
        </div>

        {/* Right side - Tags */}