diff --git a/docs/features/explorer.md b/docs/features/explorer.md index 3a3c1e1f9..4d1fbfba5 100644 --- a/docs/features/explorer.md +++ b/docs/features/explorer.md @@ -131,7 +131,8 @@ Using this example, the display names of all `FileNodes` (folders + files) will ```ts title="quartz.layout.ts" Component.Explorer({ mapFn: (node) => { - return (node.displayName = node.displayName.toUpperCase()) + node.displayName = node.displayName.toUpperCase() + return node }, }) ``` @@ -145,8 +146,12 @@ Note that this example filters on the title but you can also do it via slug or a Component.Explorer({ filterFn: (node) => { // set containing names of everything you want to filter out - const omit = new Set(["authoring content", "tags", "hosting"]) - return !omit.has(node.data.title.toLowerCase()) + const omit = new Set(["authoring content", "tags", "advanced"]) + + // can also use node.slug or by anything on node.data + // note that node.data is only present for files that exist on disk + // (e.g. implicit folder nodes that have no associated index.md) + return !omit.has(node.displayName.toLowerCase()) }, }) ``` @@ -159,7 +164,7 @@ You can access the tags of a file by `node.data.tags`. Component.Explorer({ filterFn: (node) => { // exclude files with the tag "explorerexclude" - return node.data.tags.includes("explorerexclude") !== true + return node.data.tags?.includes("explorerexclude") !== true }, }) ``` diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx index 2a5f0e055..7bf23829c 100644 --- a/quartz/components/PageList.tsx +++ b/quartz/components/PageList.tsx @@ -7,6 +7,26 @@ import { GlobalConfiguration } from "../cfg" export type SortFn = (f1: QuartzPluginData, f2: QuartzPluginData) => number export function byDateAndAlphabetical(cfg: GlobalConfiguration): SortFn { + return (f1, f2) => { + // Sort by date/alphabetical + 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 + } + + // otherwise, sort lexographically by title + const f1Title = f1.frontmatter?.title.toLowerCase() ?? "" + const f2Title = f2.frontmatter?.title.toLowerCase() ?? "" + return f1Title.localeCompare(f2Title) + } +} + +export function byDateAndAlphabeticalFolderFirst(cfg: GlobalConfiguration): SortFn { return (f1, f2) => { // Sort folders first const f1IsFolder = isFolderPath(f1.slug ?? "") @@ -38,7 +58,7 @@ type Props = { } & QuartzComponentProps export const PageList: QuartzComponent = ({ cfg, fileData, allFiles, limit, sort }: Props) => { - const sorter = sort ?? byDateAndAlphabetical(cfg) + const sorter = sort ?? byDateAndAlphabeticalFolderFirst(cfg) let list = allFiles.sort(sorter) if (limit) { list = list.slice(0, limit) diff --git a/quartz/components/scripts/search.inline.ts b/quartz/components/scripts/search.inline.ts index 1f4c009c9..d95f46816 100644 --- a/quartz/components/scripts/search.inline.ts +++ b/quartz/components/scripts/search.inline.ts @@ -147,8 +147,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data: const container = searchElement.querySelector(".search-container") as HTMLElement if (!container) return - const sidebar = container.closest(".sidebar") as HTMLElement - if (!sidebar) return + const sidebar = container.closest(".sidebar") as HTMLElement | null const searchButton = searchElement.querySelector(".search-button") as HTMLButtonElement if (!searchButton) return @@ -180,7 +179,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data: function hideSearch() { container.classList.remove("active") searchBar.value = "" // clear the input when we dismiss the search - sidebar.style.zIndex = "" + if (sidebar) sidebar.style.zIndex = "" removeAllChildren(results) if (preview) { removeAllChildren(preview) @@ -192,7 +191,7 @@ async function setupSearch(searchElement: Element, currentSlug: FullSlug, data: function showSearch(searchTypeNew: SearchType) { searchType = searchTypeNew - sidebar.style.zIndex = "1" + if (sidebar) sidebar.style.zIndex = "1" container.classList.add("active") searchBar.focus() }