quartz-research-note/quartz/components/ContentMeta.tsx

78 lines
2.2 KiB
TypeScript
Raw Normal View History

2023-08-24 15:56:40 +00:00
import { formatDate, getDate } from "./Date"
2023-08-09 04:28:09 +00:00
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
import readingTime from "reading-time"
2024-02-05 10:45:36 +00:00
import { classNames } from "../util/lang"
2024-02-08 14:52:15 +00:00
import { JSX } from "preact/jsx-runtime"
2024-02-05 10:45:36 +00:00
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 }
2023-08-09 04:28:09 +00:00
function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
2023-08-09 04:28:09 +00:00
const text = fileData.text
2024-02-08 14:52:15 +00:00
const filepath = fileData.filePath
if (text && filepath) {
const fileRepoUrl: string = `${cfg.repoUrl}/commits/branch/v4/${filepath}`
const segments: JSX.Element[] = []
// const segments: string[] = []
2023-08-24 15:56:40 +00:00
if (fileData.dates?.created) {
2024-02-08 14:52:15 +00:00
segments.push(<span>created: {formatDate(fileData.dates.created, cfg.locale)}</span>)
}
if (fileData.dates?.modified) {
2024-02-08 14:52:15 +00:00
segments.push(<span> updated: {formatDate(fileData.dates.modified, cfg.locale)}</span>)
2024-02-05 10:45:36 +00:00
}
// Display reading time if enabled
if (options.showReadingTime) {
const { text: timeTaken, words: _words } = readingTime(text)
2024-02-08 14:52:15 +00:00
segments.push(<span>{timeTaken}</span>)
2023-08-09 04:28:09 +00:00
}
2024-02-08 14:52:15 +00:00
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>,
)
2023-08-09 04:28:09 +00:00
2024-02-08 14:52:15 +00:00
return (
<p class={classNames(displayClass, "content-meta")}>
{segments.map((meta, idx) => (
<>
{meta}
</>
))}
</p>
)
2023-08-09 04:28:09 +00:00
} else {
return null
}
}
ContentMetadata.css = `
.content-meta {
margin-top: 0;
color: var(--gray);
}
2024-02-08 14:52:15 +00:00
.content-meta span{
margin-right: 10px;
}
2023-08-09 04:28:09 +00:00
`
return ContentMetadata
}) satisfies QuartzComponentConstructor