yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ability to hide tags in the recent notes component (#1147)

Browse Source 
* feat: ability to hide tags in the recent notes component

* docs: recent notes custom parameters in a table

* docs: revert recent notes doc to bullet points

* fix: linter issues

* Update docs/features/recent notes.md

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Yohann Bacha
2024-05-21 18:50:58 +02:00
committed by GitHub
parent cf1b3f270b
commit 81a4e20236
2 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
docs/features/recent notes.md
View File

@@ -9,6 +9,7 @@ Quartz can generate a list of recent notes based on some filtering and sorting c
- Changing the title from "Recent notes": pass in an additional parameter to `Component.RecentNotes({ title: "Recent writing" })` - Changing the title from "Recent notes": pass in an additional parameter to `Component.RecentNotes({ title: "Recent writing" })`
- Changing the number of recent notes: pass in an additional parameter to `Component.RecentNotes({ limit: 5 })` - Changing the number of recent notes: pass in an additional parameter to `Component.RecentNotes({ limit: 5 })`
- Display the note's tags (defaults to true): `Component.RecentNotes({ showTags: false })`
- Show a 'see more' link: pass in an additional parameter to `Component.RecentNotes({ linkToMore: "tags/components" })`. This field should be a full slug to a page that exists. - Show a 'see more' link: pass in an additional parameter to `Component.RecentNotes({ linkToMore: "tags/components" })`. This field should be a full slug to a page that exists.
- Customize filtering: pass in an additional parameter to `Component.RecentNotes({ filter: someFilterFunction })`. The filter function should be a function that has the signature `(f: QuartzPluginData) => boolean`. - Customize filtering: pass in an additional parameter to `Component.RecentNotes({ filter: someFilterFunction })`. The filter function should be a function that has the signature `(f: QuartzPluginData) => boolean`.
- Customize sorting: pass in an additional parameter to `Component.RecentNotes({ sort: someSortFunction })`. By default, Quartz will sort by date and then tie break lexographically. The sort function should be a function that has the signature `(f1: QuartzPluginData, f2: QuartzPluginData) => number`. See `byDateAndAlphabetical` in `quartz/components/PageList.tsx` for an example. - Customize sorting: pass in an additional parameter to `Component.RecentNotes({ sort: someSortFunction })`. By default, Quartz will sort by date and then tie break lexographically. The sort function should be a function that has the signature `(f1: QuartzPluginData, f2: QuartzPluginData) => number`. See `byDateAndAlphabetical` in `quartz/components/PageList.tsx` for an example.

28
quartz/components/RecentNotes.tsx
View File

@@ -12,6 +12,7 @@ interface Options {
title?: string title?: string
limit: number limit: number
linkToMore: SimpleSlug | false linkToMore: SimpleSlug | false
showTags: boolean
filter: (f: QuartzPluginData) => boolean filter: (f: QuartzPluginData) => boolean
sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number sort: (f1: QuartzPluginData, f2: QuartzPluginData) => number
} }
@@ -19,6 +20,7 @@ interface Options {
const defaultOptions = (cfg: GlobalConfiguration): Options => ({ const defaultOptions = (cfg: GlobalConfiguration): Options => ({
limit: 3, limit: 3,
linkToMore: false, linkToMore: false,
showTags: true,
filter: () => true, filter: () => true,
sort: byDateAndAlphabetical(cfg), sort: byDateAndAlphabetical(cfg),
}) })
@@ -56,18 +58,20 @@ export default ((userOpts?: Partial<Options>) => {
<Date date={getDate(cfg, page)!} locale={cfg.locale} /> <Date date={getDate(cfg, page)!} locale={cfg.locale} />
</p> </p>
)} )}
<ul class="tags"> {opts.showTags && (
{tags.map((tag) => ( <ul class="tags">
<li> {tags.map((tag) => (
<a <li>
class="internal tag-link" <a
href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)} class="internal tag-link"
> href={resolveRelative(fileData.slug!, `tags/${tag}` as FullSlug)}
{tag} >
</a> {tag}
</li> </a>
))} </li>
</ul> ))}
</ul>
)}
</div> </div>
</li> </li>
) )