import { formatDate, getDate } from "./Date" import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import readingTime from "reading-time" import { classNames } from "../util/lang" import { JSX } from "preact/jsx-runtime" interface ContentMetaOptions { /** * Whether to display reading time */ showReadingTime: boolean } const defaultOptions: ContentMetaOptions = { showReadingTime: true, } export default ((opts?: Partial<ContentMetaOptions>) => { // Merge options with defaults const options: ContentMetaOptions = { ...defaultOptions, ...opts } function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) { const text = fileData.text const filepath = fileData.filePath if (text && filepath) { const fileRepoUrl: string = `${cfg.repoUrl}/commits/branch/v4/${filepath}` const segments: JSX.Element[] = [] // const segments: string[] = [] if (fileData.dates?.created) { segments.push(<span>created: {formatDate(fileData.dates.created, cfg.locale)}</span>) } if (fileData.dates?.modified) { segments.push(<span> updated: {formatDate(fileData.dates.modified, cfg.locale)}</span>) } // Display reading time if enabled if (options.showReadingTime) { const { text: timeTaken, words: _words } = readingTime(text) segments.push(<span>{timeTaken}</span>) } segments.push( <a href={fileRepoUrl} class="external" target="_blank" > view history <svg class="external-icon" viewBox="0 0 512 512"><path d="M320 0H288V64h32 82.7L201.4 265.4 178.7 288 224 333.3l22.6-22.6L448 109.3V192v32h64V192 32 0H480 320zM32 32H0V64 480v32H32 456h32V480 352 320H424v32 96H64V96h96 32V32H160 32z"></path></svg> </a>, ) return ( <p class={classNames(displayClass, "content-meta")}> {segments.map((meta, idx) => ( <> {meta} </> ))} </p> ) } else { return null } } ContentMetadata.css = ` .content-meta { margin-top: 0; color: var(--gray); } .content-meta span{ margin-right: 10px; } ` return ContentMetadata }) satisfies QuartzComponentConstructor