roadmap/quartz/components/PageList.tsx

88 lines
2.3 KiB
TypeScript
Raw Normal View History

import { FullSlug, resolveRelative } from "../util/path"
2023-07-01 07:03:01 +00:00
import { QuartzPluginData } from "../plugins/vfile"
2023-08-24 15:56:40 +00:00
import { Date, getDate } from "./Date"
2023-07-01 07:03:01 +00:00
import { QuartzComponentProps } from "./types"
2023-08-24 15:56:40 +00:00
import { GlobalConfiguration } from "../cfg"
2023-07-01 07:03:01 +00:00
2023-08-24 15:56:40 +00:00
export function byDateAndAlphabetical(
cfg: GlobalConfiguration,
): (f1: QuartzPluginData, f2: QuartzPluginData) => number {
return (f1, f2) => {
if (f1.dates && f2.dates) {
// sort descending
return getDate(cfg, f2)!.getTime() - getDate(cfg, f1)!.getTime()
} else if (f1.dates && !f2.dates) {
// prioritize files with dates
return -1
} else if (!f1.dates && f2.dates) {
return 1
}
2023-07-01 07:03:01 +00:00
2023-08-24 15:56:40 +00:00
// otherwise, sort lexographically by title
const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
return f1Title.localeCompare(f2Title)
}
2023-07-01 07:03:01 +00:00
}
2023-07-26 04:10:37 +00:00
type Props = {
limit?: number
} & QuartzComponentProps
2023-08-24 15:56:40 +00:00
export function PageList({ cfg, fileData, allFiles, limit }: Props) {
let list = allFiles.sort(byDateAndAlphabetical(cfg))
2023-07-26 04:10:37 +00:00
if (limit) {
list = list.slice(0, limit)
}
2023-07-23 00:27:41 +00:00
return (
<ul class="section-ul">
2023-07-26 04:10:37 +00:00
{list.map((page) => {
2023-07-23 00:27:41 +00:00
const title = page.frontmatter?.title
const tags = page.frontmatter?.tags ?? []
2023-07-23 00:27:41 +00:00
return (
<li class="section-li">
<div class="section">
{page.dates && (
<p class="meta">
2023-08-24 15:56:40 +00:00
<Date date={getDate(cfg, page)!} />
2023-07-23 00:27:41 +00:00
</p>
)}
<div class="desc">
<h3>
<a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
2023-07-23 00:27:41 +00:00
{title}
</a>
</h3>
</div>
<ul class="tags">
{tags.map((tag) => (
<li>
<a
class="internal tag-link"
2023-08-19 23:28:44 +00:00
href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
2023-07-23 00:27:41 +00:00
>
#{tag}
</a>
</li>
))}
</ul>
</div>
</li>
)
})}
</ul>
)
2023-07-01 07:03:01 +00:00
}
PageList.css = `
.section h3 {
margin: 0;
}
.section > .tags {
margin: 0;
}
2023-07-01 07:03:01 +00:00
`