scapegoat/Docs2.git

			@@ -1,22 +1,32 @@
			import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
			import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
			import explorerStyle from "./styles/explorer.scss"

			// @ts-ignore
			import script from "./scripts/explorer.inline"
			import { ExplorerNode, FileNode, Options } from "./ExplorerNode"
			import { QuartzPluginData } from "../plugins/vfile"
			import { classNames } from "../util/lang"
			import { i18n } from "../i18n"

			// Options interface defined in `ExplorerNode` to avoid circular dependency
			const defaultOptions = {
			title: "Explorer",
			folderClickBehavior: "collapse",
			folderDefaultState: "collapsed",
			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)) {
			return a.displayName.localeCompare(b.displayName)
			// 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",
			})
			}

			if (a.file && !b.file) {
			return 1
			} else {
			@@ -34,54 +44,48 @@
			// memoized
			let fileTree: FileNode
			let jsonTree: string
			let lastBuildId: string = ""

			function constructFileTree(allFiles: QuartzPluginData[]) {
			if (!fileTree) {
			// Construct tree from allFiles
			fileTree = new FileNode("")
			allFiles.forEach((file) => fileTree.add(file, 1))
			// Construct tree from allFiles
			fileTree = new FileNode("")
			allFiles.forEach((file) => fileTree.add(file))

			/**
			* Keys of this object must match corresponding function name of `FileNode`,
			* while values must be the argument that will be passed to the function.
			*
			* e.g. entry for FileNode.sort: `sort: opts.sortFn` (value is sort function from options)
			*/
			const functions = {
			map: opts.mapFn,
			sort: opts.sortFn,
			filter: opts.filterFn,
			}

			// Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
			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 (functions[functionName]) {
			// for every entry in order, call matching function in FileNode and pass matching argument
			// e.g. i = 0; functionName = "filter"
			// converted to: (if opts.filterFn) => fileTree.filter(opts.filterFn)

			// @ts-ignore
			// typescript cant statically check these dynamic references, so manually make sure reference is valid and ignore warning
			fileTree[functionName].call(fileTree, functions[functionName])
			}
			// Execute all functions (sort, filter, map) that were provided (if none were provided, only default "sort" is applied)
			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)
			}
			}

			// Get all folders of tree. Initialize with collapsed state
			const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")

			// Stringify to pass json tree as data attribute ([data-tree])
			jsonTree = JSON.stringify(folders)
			}

			// Get all folders of tree. Initialize with collapsed state
			// Stringify to pass json tree as data attribute ([data-tree])
			const folders = fileTree.getFolderPaths(opts.folderDefaultState === "collapsed")
			jsonTree = JSON.stringify(folders)
			}

			function Explorer({ allFiles, displayClass, fileData }: QuartzComponentProps) {
			constructFileTree(allFiles)
			const Explorer: QuartzComponent = ({
			ctx,
			cfg,
			allFiles,
			displayClass,
			fileData,
			}: QuartzComponentProps) => {
			if (ctx.buildId !== lastBuildId) {
			lastBuildId = ctx.buildId
			constructFileTree(allFiles)
			}

			return (
			<div class={`explorer ${displayClass}`}>
			<div class={classNames(displayClass, "explorer")}>
			<button
			type="button"
			id="explorer"
			@@ -89,8 +93,10 @@
			data-collapsed={opts.folderDefaultState}
			data-savestate={opts.useSavedState}
			data-tree={jsonTree}
			aria-controls="explorer-content"
			aria-expanded={opts.folderDefaultState === "open"}
			>
			<h1>{opts.title}</h1>
			<h2>{opts.title ?? i18n(cfg.locale).components.explorer.title}</h2>
			<svg
			xmlns="http://www.w3.org/2000/svg"
			width="14"
			@@ -115,6 +121,7 @@
			</div>
			)
			}

			Explorer.css = explorerStyle
			Explorer.afterDOMLoaded = script
			return Explorer