From c7d3474ba8cb49ab0f1978216d80b08ec2c8e5d7 Mon Sep 17 00:00:00 2001
From: Ben Schlegel <ben5.schlegel@gmail.com>
Date: Sat, 16 Sep 2023 12:40:19 +0200
Subject: [PATCH] feat(explorer): add config to support custom sort fn

---
 quartz/components/Explorer.tsx     | 13 ++++++++++++-
 quartz/components/ExplorerNode.tsx | 21 ++++++++-------------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx
index ce69491e..ee0f96ff 100644
--- a/quartz/components/Explorer.tsx
+++ b/quartz/components/Explorer.tsx
@@ -11,6 +11,17 @@ const defaultOptions = (): Options => ({
   folderClickBehavior: "collapse",
   folderDefaultState: "collapsed",
   useSavedState: true,
+  // Sort order: folders first, then files. Sort folders and files alphabetically
+  sortFn: (a, b) => {
+    if ((!a.file && !b.file) || (a.file && b.file)) {
+      return a.name.localeCompare(b.name)
+    }
+    if (a.file && !b.file) {
+      return 1
+    } else {
+      return -1
+    }
+  },
 })
 export default ((userOpts?: Partial<Options>) => {
   function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
@@ -22,7 +33,7 @@ export default ((userOpts?: Partial<Options>) => {
     allFiles.forEach((file) => fileTree.add(file, 1))
 
     // Sort tree (folders first, then files (alphabetic))
-    fileTree.sort()
+    fileTree.sort(opts.sortFn!)
 
     // Get all folders of tree. Initialize with collapsed state
     const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index 6718ec9f..4d00103d 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -7,6 +7,7 @@ export interface Options {
   folderDefaultState: "collapsed" | "open"
   folderClickBehavior: "collapse" | "link"
   useSavedState: boolean
+  sortFn: (a: FileNode, b: FileNode) => number
 }
 
 type DataWrapper = {
@@ -90,19 +91,13 @@ export class FileNode {
   }
 
   // Sort order: folders first, then files. Sort folders and files alphabetically
-  sort() {
-    this.children = this.children.sort((a, b) => {
-      if ((!a.file && !b.file) || (a.file && b.file)) {
-        return a.name.localeCompare(b.name)
-      }
-      if (a.file && !b.file) {
-        return 1
-      } else {
-        return -1
-      }
-    })
-
-    this.children.forEach((e) => e.sort())
+  /**
+   * Sorts tree according to sort/compare function
+   * @param sortFn compare function used for `.sort()`, also used recursively for children
+   */
+  sort(sortFn: (a: FileNode, b: FileNode) => number) {
+    this.children = this.children.sort(sortFn)
+    this.children.forEach((e) => e.sort(sortFn))
   }
 }