mirror of
https://github.com/jackyzha0/quartz.git
synced 2025-12-19 10:54:06 -06:00
fix: date ordering in explorer folders (#90)
* fix: date ordering in explorer folders * fix: DRY * fix: cut that function and told claude to simplify
This commit is contained in:
vintro
GitHub
parent
5bfa8293b5
commit
6aa1314e13
@ -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({
|
||||
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
|
||||
}
|
||||
}
|
||||
})),
|
||||
Component.DesktopOnly(Component.Explorer()),
|
||||
],
|
||||
right: [
|
||||
Component.Graph(),
|
||||
@ -63,44 +36,15 @@ export const defaultContentPageLayout: PageLayout = {
|
||||
],
|
||||
}
|
||||
|
||||
// components for pages that display lists of pages (e.g. tags or folders)
|
||||
// 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({
|
||||
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
|
||||
}
|
||||
}
|
||||
})),
|
||||
Component.DesktopOnly(Component.Explorer()),
|
||||
],
|
||||
right: [],
|
||||
}
|
||||
|
||||
@ -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",
|
||||
folderDefaultState: "collapsed",
|
||||
folderClickBehavior: "collapse" as const,
|
||||
folderDefaultState: "collapsed" as const,
|
||||
useSavedState: true,
|
||||
mapFn: (node) => {
|
||||
return node
|
||||
},
|
||||
sortFn: (a, b) => {
|
||||
// Sort order: folders first, then files. Sort folders and files alphabetically
|
||||
if ((!a.file && !b.file) || (a.file && b.file)) {
|
||||
// numeric: true: Whether numeric collation should be used, such that "1" < "2" < "10"
|
||||
// sensitivity: "base": Only strings that differ in base letters compare as unequal. Examples: a ≠ b, a = á, a = A
|
||||
return a.displayName.localeCompare(b.displayName, undefined, {
|
||||
numeric: true,
|
||||
sensitivity: "base",
|
||||
})
|
||||
}
|
||||
mapFn: (node: FileNode) => node,
|
||||
sortFn: (a: FileNode, b: FileNode) => {
|
||||
// Folders before files
|
||||
if (!a.file !== !b.file) return a.file ? 1 : -1
|
||||
|
||||
if (a.file && !b.file) {
|
||||
return 1
|
||||
} else {
|
||||
return -1
|
||||
// Both are files, try date-based sorting
|
||||
if (a.file && b.file) {
|
||||
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",
|
||||
})
|
||||
},
|
||||
filterFn: (node) => node.name !== "tags",
|
||||
order: ["filter", "map", "sort"],
|
||||
filterFn: (node: FileNode) => node.name !== "tags",
|
||||
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") {
|
||||
fileTree.map(opts.mapFn)
|
||||
} else if (functionName === "sort") {
|
||||
fileTree.sort(opts.sortFn)
|
||||
} else if (functionName === "filter") {
|
||||
fileTree.filter(opts.filterFn)
|
||||
}
|
||||
applyOperation(fileTree, functionName)
|
||||
}
|
||||
}
|
||||
|
||||
@ -81,7 +88,7 @@ export default ((userOpts?: Partial<Options>) => {
|
||||
displayClass,
|
||||
fileData,
|
||||
}: QuartzComponentProps) => {
|
||||
constructFileTree(allFiles)
|
||||
constructFileTree(allFiles, cfg)
|
||||
return (
|
||||
<div class={classNames(displayClass, "explorer")}>
|
||||
<button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user