fix: date ordering in explorer folders (#90)

* fix: date ordering in explorer folders

* fix: DRY

* fix: cut that function and told claude to simplify

quartz.layout.ts

@@ -1,7 +1,7 @@
 import { PageLayout, SharedLayout } from "./quartz/cfg"
-import { SimpleSlug } from "./quartz/util/path"
 import * as Component from "./quartz/components"
 
+
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
@@ -28,34 +28,7 @@ export const defaultContentPageLayout: PageLayout = {
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer({
+    Component.DesktopOnly(Component.Explorer()),
-      sortFn: (a, b) => {
-        if (a.file?.frontmatter?.date && b.file?.frontmatter?.date) {
-          const parseDate = (dateStr: string) => {
-            const [month, day, year] = dateStr.split('.')
-            return new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
-          }
-          const aDate = parseDate(a.file.frontmatter.date as string)
-          const bDate = parseDate(b.file.frontmatter.date as string)
-          if (aDate < bDate) {
-            return 1
-          } else {
-            return -1
-          }
-        }
-        else if ((!a.file && !b.file)) {
-          return a.displayName.localeCompare(b.displayName, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          })
-        }
-        if (a.file && !b.file) {
-          return 1
-        } else {
-          return -1
-        }
-      }
-    })),
   ],
   right: [
     Component.Graph(),
@@ -66,41 +39,12 @@ export const defaultContentPageLayout: PageLayout = {
 // components for pages that display lists of pages (e.g. tags or folders)
 export const defaultListPageLayout: PageLayout = {
   beforeBody: [Component.ArticleTitle()],
-  // left: [],
-  // beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Darkmode(),
-    Component.DesktopOnly(Component.Explorer({
+    Component.DesktopOnly(Component.Explorer()),
-      sortFn: (a, b) => {
-        if (a.file?.frontmatter?.date && b.file?.frontmatter?.date) {
-          const parseDate = (dateStr: string) => {
-            const [month, day, year] = dateStr.split('.')
-            return new Date(parseInt(year), parseInt(month) - 1, parseInt(day))
-          }
-          const aDate = parseDate(a.file.frontmatter.date as string)
-          const bDate = parseDate(b.file.frontmatter.date as string)
-          if (aDate < bDate) {
-            return 1
-          } else {
-            return -1
-          }
-        }
-        else if ((!a.file && !b.file)) {
-          return a.displayName.localeCompare(b.displayName, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          })
-        }
-        if (a.file && !b.file) {
-          return 1
-        } else {
-          return -1
-        }
-      }
-    })),
   ],
   right: [],
 }

quartz/components/Explorer.tsx

@@ -1,6 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import explorerStyle from "./styles/explorer.scss"
-
+import { getDate } from "./Date"
+import { GlobalConfiguration } from "../cfg"
 // @ts-ignore
 import script from "./scripts/explorer.inline"
 import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
@@ -10,62 +11,68 @@ import { i18n } from "../i18n"
 
 // Options interface defined in `ExplorerNode` to avoid circular dependency
 const defaultOptions = {
-  folderClickBehavior: "collapse",
+  folderClickBehavior: "collapse" as const,
-  folderDefaultState: "collapsed",
+  folderDefaultState: "collapsed" as const,
   useSavedState: true,
-  mapFn: (node) => {
+  mapFn: (node: FileNode) => node,
-    return node
+  sortFn: (a: FileNode, b: FileNode) => {
-  },
+    // Folders before files
-  sortFn: (a, b) => {
+    if (!a.file !== !b.file) return a.file ? 1 : -1
-    // Sort order: folders first, then files. Sort folders and files alphabetically
+
-    if ((!a.file && !b.file) || (a.file && b.file)) {
+    // Both are files, try date-based sorting
-      // numeric: true: Whether numeric collation should be used, such that "1" < "2" < "10"
+    if (a.file && b.file) {
-      // sensitivity: "base": Only strings that differ in base letters compare as unequal. Examples: a ≠ b, a = á, a = A
+      const [aDate, bDate] = [a.file, b.file].map(f => 
+        getDate(f.cfg as GlobalConfiguration, f))
+      
+      if (aDate || bDate) return bDate ? (aDate ? bDate.getTime() - aDate.getTime() : 1) : -1
+    }
+    
+    // Fallback to alphabetical
     return a.displayName.localeCompare(b.displayName, undefined, {
       numeric: true,
       sensitivity: "base",
     })
-    }
-
-    if (a.file && !b.file) {
-      return 1
-    } else {
-      return -1
-    }
   },
-  filterFn: (node) => node.name !== "tags",
+  filterFn: (node: FileNode) => node.name !== "tags",
-  order: ["filter", "map", "sort"],
+  order: ["filter", "map", "sort"] as const,
 } satisfies Options
 
 export default ((userOpts?: Partial<Options>) => {
   // Parse config
-  const opts: Options = { ...defaultOptions, ...userOpts }
+  const opts = { ...defaultOptions, ...userOpts }
 
   // memoized
   let fileTree: FileNode
   let jsonTree: string
 
-  function constructFileTree(allFiles: QuartzPluginData[]) {
+  const applyOperation = (tree: FileNode, op: string) => {
+    const operations = {
+      map: () => tree.map(opts.mapFn),
+      sort: () => tree.sort(opts.sortFn),
+      filter: () => tree.filter(opts.filterFn),
+    }
+    operations[op as keyof typeof operations]?.()
+  }
+
+  function constructFileTree(allFiles: QuartzPluginData[], cfg: GlobalConfiguration) {
     if (fileTree) {
       return
     }
 
     // Construct tree from allFiles
     fileTree = new FileNode("")
-    allFiles.forEach((file) => fileTree.add(file))
+    allFiles.forEach((file) => {
+      // Ensure the configuration is passed to each file
+      file.cfg = cfg
+      fileTree.add(file)
+    })
 
-    // Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
+    // Execute all functions (sort, filter, map) that were provided
     if (opts.order) {
       // Order is important, use loop with index instead of order.map()
       for (let i = 0; i < opts.order.length; i++) {
         const functionName = opts.order[i]
-        if (functionName === "map") {
+        applyOperation(fileTree, functionName)
-          fileTree.map(opts.mapFn)
-        } else if (functionName === "sort") {
-          fileTree.sort(opts.sortFn)
-        } else if (functionName === "filter") {
-          fileTree.filter(opts.filterFn)
-        }
       }
     }
 
@@ -81,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
     displayClass,
     fileData,
   }: QuartzComponentProps) => {
-    constructFileTree(allFiles)
+    constructFileTree(allFiles, cfg)
     return (
       <div class={classNames(displayClass, "explorer")}>
         <button