dbbc672c67
* fix: alt error mix with height/width More granular detection of alt and resize in image * fix: format * feat: init i18n * feat: add translation * style: prettier for test * fix: build-up the locale to fusion with dateLocale * style: run prettier * remove cursed file * refactor: remove i18n library and use locale way instead * format with prettier * forgot to remove test * prevent merging error * format * format * fix: allow string for locale - Check during translation if valid / existing locale - Allow to use "en" and "en-US" for example - Add fallback directly in the function - Add default key in the function - Add docstring to cfg.ts * forgot item translation * remove unused locale variable * forgot to remove fr-FR testing * format
90 lines
2.9 KiB
TypeScript
90 lines
2.9 KiB
TypeScript
import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
|
|
import { FullSlug, SimpleSlug, resolveRelative } from "../util/path"
|
|
import { QuartzPluginData } from "../plugins/vfile"
|
|
import { byDateAndAlphabetical } from "./PageList"
|
|
import style from "./styles/recentNotes.scss"
|
|
import { Date, getDate } from "./Date"
|
|
import { GlobalConfiguration } from "../cfg"
|
|
import { i18n } from "../i18n/i18next"
|
|
import { classNames } from "../util/lang"
|
|
|
|
interface Options {
|
|
title: string
|
|
limit: number
|
|
linkToMore: SimpleSlug | false
|
|
filter: (f: QuartzPluginData) => boolean
|
|
sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
|
|
}
|
|
|
|
const defaultOptions = (cfg: GlobalConfiguration): Options => ({
|
|
title: "Recent Notes",
|
|
limit: 3,
|
|
linkToMore: false,
|
|
filter: () => true,
|
|
sort: byDateAndAlphabetical(cfg),
|
|
})
|
|
|
|
export default ((userOpts?: Partial<Options>) => {
|
|
function RecentNotes({ allFiles, fileData, displayClass, cfg }: QuartzComponentProps) {
|
|
const opts = { ...defaultOptions(cfg), ...userOpts }
|
|
const pages = allFiles.filter(opts.filter).sort(opts.sort)
|
|
const remaining = Math.max(0, pages.length - opts.limit)
|
|
return (
|
|
<div class={classNames(displayClass, "recent-notes")}>
|
|
<h3>{opts.title}</h3>
|
|
<ul class="recent-ul">
|
|
{pages.slice(0, opts.limit).map((page) => {
|
|
const title = page.frontmatter?.title
|
|
const tags = page.frontmatter?.tags ?? []
|
|
|
|
return (
|
|
<li class="recent-li">
|
|
<div class="section">
|
|
<div class="desc">
|
|
<h3>
|
|
<a href={resolveRelative(fileData.slug!, page.slug!)} class="internal">
|
|
{title}
|
|
</a>
|
|
</h3>
|
|
</div>
|
|
{page.dates && (
|
|
<p class="meta">
|
|
<Date date={getDate(cfg, page)!} locale={cfg.locale} />
|
|
</p>
|
|
)}
|
|
<ul class="tags">
|
|
{tags.map((tag) => (
|
|
<li>
|
|
<a
|
|
class="internal tag-link"
|
|
href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
|
|
>
|
|
#{tag}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
{opts.linkToMore && remaining > 0 && (
|
|
<p>
|
|
<a href={resolveRelative(fileData.slug!, opts.linkToMore)}>
|
|
{" "}
|
|
{i18n(cfg.locale, "recentNotes.seeRemainingMore", {
|
|
remaining: remaining.toString(),
|
|
})}{" "}
|
|
→
|
|
</a>
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
RecentNotes.css = style
|
|
return RecentNotes
|
|
}) satisfies QuartzComponentConstructor
|