Merge branch 'jackyzha0:v4' into v4

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
   },
 })
 ```

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)

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()
   }