Tomoya Matsuura(MacBookPro)
8455859c72
All checks were successful
Build / build (push) Successful in 1m49s
78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
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
|