The Trans Directory
feat(og): add reading time to default, improve logging
+29
-6
+1
quartz.config.ts
+1
quartz.config.ts
+2
-2
quartz/processors/emit.ts
+2
-2
quartz/processors/emit.ts
···
26
26
if (ctx.argv.verbose) {
27
27
console.log(`[emit:${emitter.name}] ${file}`)
28
28
} else {
29
-
log.updateText(`Emitting output files: ${chalk.gray(file)}`)
29
+
log.updateText(`Emitting output files: ${emitter.name} -> ${chalk.gray(file)}`)
30
30
}
31
31
}
32
32
} else {
···
36
36
if (ctx.argv.verbose) {
37
37
console.log(`[emit:${emitter.name}] ${file}`)
38
38
} else {
39
-
log.updateText(`Emitting output files: ${chalk.gray(file)}`)
39
+
log.updateText(`Emitting output files: ${emitter.name} -> ${chalk.gray(file)}`)
40
40
}
41
41
}
42
42
}
+1
-1
quartz/util/log.ts
+1
-1
quartz/util/log.ts
+25
-3
quartz/util/og.tsx
+25
-3
quartz/util/og.tsx
···
6
6
import { FontSpecification, ThemeKey } from "./theme"
7
7
import path from "path"
8
8
import { QUARTZ } from "./path"
9
-
import { formatDate } from "../components/Date"
10
-
import { getDate } from "../components/Date"
9
+
import { formatDate, getDate } from "../components/Date"
10
+
import readingTime from "reading-time"
11
+
import { i18n } from "../i18n"
11
12
12
13
const defaultHeaderWeight = [700]
13
14
const defaultBodyWeight = [400]
···
183
184
const rawDate = getDate(cfg, fileData)
184
185
const date = rawDate ? formatDate(rawDate, cfg.locale) : null
185
186
187
+
// Calculate reading time
188
+
const { minutes } = readingTime(fileData.text ?? "")
189
+
const readingTimeText = i18n(cfg.locale).components.contentMeta.readingTime({
190
+
minutes: Math.ceil(minutes),
191
+
})
192
+
186
193
// Get tags if available
187
194
const tags = fileData.frontmatter?.tags ?? []
188
195
···
287
294
borderTop: `1px solid ${cfg.theme.colors[colorScheme].lightgray}`,
288
295
}}
289
296
>
290
-
{/* Left side - Date */}
297
+
{/* Left side - Date and Reading Time */}
291
298
<div
292
299
style={{
293
300
display: "flex",
294
301
alignItems: "center",
302
+
gap: "2rem",
295
303
color: cfg.theme.colors[colorScheme].gray,
296
304
fontSize: 28,
297
305
}}
···
314
322
{date}
315
323
</div>
316
324
)}
325
+
<div style={{ display: "flex", alignItems: "center" }}>
326
+
<svg
327
+
style={{ marginRight: "0.5rem" }}
328
+
width="28"
329
+
height="28"
330
+
viewBox="0 0 24 24"
331
+
fill="none"
332
+
stroke="currentColor"
333
+
>
334
+
<circle cx="12" cy="12" r="10"></circle>
335
+
<polyline points="12 6 12 12 16 14"></polyline>
336
+
</svg>
337
+
{readingTimeText}
338
+
</div>
317
339
</div>
318
340
319
341
{/* Right side - Tags */}