| | |
| | | import { formatDate, getDate } from "./Date" |
| | | import { Date, getDate } from "./Date" |
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "./types" |
| | | import readingTime from "reading-time" |
| | | import { classNames } from "../util/lang" |
| | | import { i18n } from "../i18n" |
| | | import { JSX } from "preact" |
| | | import style from "./styles/contentMeta.scss" |
| | | |
| | | interface ContentMetaOptions { |
| | | /** |
| | | * Whether to display reading time |
| | | */ |
| | | showReadingTime: boolean |
| | | showComma: boolean |
| | | } |
| | | |
| | | const defaultOptions: ContentMetaOptions = { |
| | | showReadingTime: true, |
| | | showComma: true, |
| | | } |
| | | |
| | | export default ((opts?: Partial<ContentMetaOptions>) => { |
| | |
| | | const text = fileData.text |
| | | |
| | | if (text) { |
| | | const segments: string[] = [] |
| | | const segments: (string | JSX.Element)[] = [] |
| | | |
| | | if (fileData.dates) { |
| | | segments.push(formatDate(getDate(cfg, fileData)!)) |
| | | segments.push(<Date date={getDate(cfg, fileData)!} locale={cfg.locale} />) |
| | | } |
| | | |
| | | // Display reading time if enabled |
| | | if (options.showReadingTime) { |
| | | const { text: timeTaken, words: _words } = readingTime(text) |
| | | segments.push(timeTaken) |
| | | const { minutes, words: _words } = readingTime(text) |
| | | const displayedTime = i18n(cfg.locale).components.contentMeta.readingTime({ |
| | | minutes: Math.ceil(minutes), |
| | | }) |
| | | segments.push(<span>{displayedTime}</span>) |
| | | } |
| | | |
| | | return <p class={`content-meta ${displayClass ?? ""}`}>{segments.join(", ")}</p> |
| | | return ( |
| | | <p show-comma={options.showComma} class={classNames(displayClass, "content-meta")}> |
| | | {segments} |
| | | </p> |
| | | ) |
| | | } else { |
| | | return null |
| | | } |
| | | } |
| | | |
| | | ContentMetadata.css = ` |
| | | .content-meta { |
| | | margin-top: 0; |
| | | color: var(--gray); |
| | | } |
| | | ` |
| | | ContentMetadata.css = style |
| | | |
| | | return ContentMetadata |
| | | }) satisfies QuartzComponentConstructor |