From 233d4b2f2c7dda62355382fb02760822c01e9ca2 Mon Sep 17 00:00:00 2001
From: Hydrophobefireman <bhavesh.pareek36@gmail.com>
Date: Thu, 28 Dec 2023 10:20:07 +0000
Subject: [PATCH] fix: fix invalid html output (#642)

---
 docs/features/explorer.md |   52 ++++++++++++++++++++++++++++++++--------------------
 1 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/docs/features/explorer.md b/docs/features/explorer.md
index 76d04c6..fd656a8 100644
--- a/docs/features/explorer.md
+++ b/docs/features/explorer.md
@@ -8,6 +8,8 @@
 
 By default, it shows all folders and files on your page. To display the explorer in a different spot, you can edit the [[layout]].
 
+Display names for folders get determined by the `title` frontmatter field in `folder/index.md` (more detail in [[authoring content | Authoring Content]]). If this file does not exist or does not contain frontmatter, the local folder name will be used instead.
+
 > [!info]
 > The explorer uses local storage by default to save the state of your explorer. This is done to ensure a smooth experience when navigating to different pages.
 >
@@ -29,7 +31,7 @@
   sortFn: (a, b) => {
     ... // default implementation shown later
   },
-  filterFn: undefined,
+  filterFn: filterFn: (node) => node.name !== "tags", // filters out 'tags' folder
   mapFn: undefined,
   // what order to apply functions in
   order: ["filter", "map", "sort"],
@@ -57,7 +59,8 @@
 ```ts title="quartz/components/ExplorerNode.tsx" {2-5}
 export class FileNode {
   children: FileNode[]  // children of current node
-  name: string  // name of node (only useful for folders)
+  name: string  // last part of slug
+  displayName: string // what actually should be displayed in the explorer
   file: QuartzPluginData | null // set if node is a file, see `QuartzPluginData` for more detail
   depth: number // depth of current node
 
@@ -72,7 +75,12 @@
 Component.Explorer({
   sortFn: (a, b) => {
     if ((!a.file && !b.file) || (a.file && b.file)) {
-      return a.name.localeCompare(b.name)
+      // sensitivity: "base": Only strings that differ in base letters compare as unequal. Examples: a ≠ b, a = á, a = A
+      // numeric: true: Whether numeric collation should be used, such that "1" < "2" < "10"
+      return a.displayName.localeCompare(b.displayName, undefined, {
+        numeric: true,
+        sensitivity: "base",
+      })
     }
     if (a.file && !b.file) {
       return 1
@@ -120,7 +128,7 @@
 Component.Explorer({
   sortFn: (a, b) => {
     if ((!a.file && !b.file) || (a.file && b.file)) {
-      return a.name.localeCompare(b.name)
+      return a.displayName.localeCompare(b.displayName)
     }
     if (a.file && !b.file) {
       return -1
@@ -138,32 +146,36 @@
 ```ts title="quartz.layout.ts"
 Component.Explorer({
   mapFn: (node) => {
-    node.name = node.name.toUpperCase()
+    node.displayName = node.displayName.toUpperCase()
   },
 })
 ```
 
 ### Remove list of elements (`filter`)
 
-Using this example, you can remove elements from your explorer by providing a list of folders/files using the `list` array.
+Using this example, you can remove elements from your explorer by providing an array of folders/files using the `omit` set.
 
 ```ts title="quartz.layout.ts"
 Component.Explorer({
   filterFn: (node) => {
-    // list containing names of everything you want to filter out
-    const list = ["authoring content", "building your", "tags", "hosting"]
-
-    for (let listNodeName of list) {
-      if (listNodeName.toLowerCase() === node.name.toLowerCase()) {
-        return false // Found a match, so return false to filter out the node
-      }
-    }
-    return true // No match found, so return true to keep the node
+    // set containing names of everything you want to filter out
+    const omit = new Set(["authoring content", "tags", "hosting"])
+    return !omit.has(node.name.toLowerCase())
   },
 })
 ```
 
-You can customize this by changing the entries of the `list` array. Simply add all folder or file names you want to remove to the array (case insensitive).
+You can customize this by changing the entries of the `omit` set. Simply add all folder or file names you want to remove.
+
+### Show every element in explorer
+
+To override the default filter function that removes the `tags` folder from the explorer, you can set the filter function to `undefined`.
+
+```ts title="quartz.layout.ts"
+Component.Explorer({
+  filterFn: undefined, // apply no filter function, every file and folder will visible
+})
+```
 
 ## Advanced examples
 
@@ -178,13 +190,13 @@
     if (node.depth > 0) {
       // set emoji for file/folder
       if (node.file) {
-        node.name = "📄 " + node.name
+        node.displayName = "📄 " + node.displayName
       } else {
-        node.name = "📁 " + node.name
+        node.displayName = "📁 " + node.displayName
       }
     }
   },
-}})
+})
 ```
 
 ### Putting it all together
@@ -224,7 +236,7 @@
 > You can then import them like this:
 >
 > ```ts title="quartz.layout.ts"
-> import { mapFn, filterFn, sortFn } from "./path/to/your/functions"
+> import { mapFn, filterFn, sortFn } from "./functions.ts"
 > Component.Explorer({
 >   mapFn: mapFn,
 >   filterFn: filterFn,

--
Gitblit v1.10.0