mirror of
https://github.com/quartz-community/explorer.git
synced 2026-07-22 02:50:24 +00:00
No description
fd4fb4c52b
On page load the explorer reveals the active item with
`activeElement.scrollIntoView({ behavior: "smooth" })`. `scrollIntoView`
scrolls *every* scrollable ancestor, including the document, so when SPA
routing is disabled (each navigation is a full page load) the window gets
dragged down to wherever the active item sits in the sidebar — the reader
lands partway down the new page instead of at the top.
Use `explorerUl.scrollTo(...)`, which only moves the explorer's own scroll
container, to center the active item without ever scrolling the window.
The smooth animation is preserved.
|
||
|---|---|---|
| .github/workflows | ||
| dist | ||
| src | ||
| test | ||
| types | ||
| .eslintrc.json | ||
| .gitignore | ||
| .prettierignore | ||
| .prettierrc | ||
| CHANGELOG.md | ||
| LICENSE | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| tsconfig.build.json | ||
| tsconfig.json | ||
| tsup.config.ts | ||
| vitest.config.ts | ||
@quartz-community/explorer
The Explorer component for Quartz - navigate your digital garden with an interactive file tree.
Features
- 📁 Interactive folder tree with collapse/expand functionality
- 📱 Mobile-friendly slide-out navigation
- 💾 Persistent state (remembers open/closed folders)
- 🔗 Configurable folder click behavior (link or collapse)
- ⚡ Built-in search and overflow handling
Installation
npx quartz plugin add github:quartz-community/explorer
Usage
plugins:
- source: github:quartz-community/explorer
enabled: true
layout:
position: left
priority: 50
For advanced use cases, you can override in TypeScript:
import * as ExternalPlugin from "./.quartz/plugins";
ExternalPlugin.Explorer({
title: "Explorer",
folderDefaultState: "collapsed",
folderClickBehavior: "link",
useSavedState: true,
});
Configuration Options
interface ExplorerOptions {
/** Title displayed above the explorer */
title?: string;
/** Default state for folders: "collapsed" or "open" */
folderDefaultState: "collapsed" | "open";
/** Behavior when clicking folders: "collapse" to toggle, "link" to navigate */
folderClickBehavior: "collapse" | "link";
/** Whether to persist folder state in localStorage */
useSavedState: boolean;
/** Custom sort function for entries */
sortFn?: (a: FileTrieNode, b: FileTrieNode) => number;
/** Custom filter function for entries */
filterFn?: (node: FileTrieNode) => boolean;
/** Custom map function for transforming entries */
mapFn?: (node: FileTrieNode) => void;
/** Order in which to apply filter, map, and sort */
order?: Array<"filter" | "map" | "sort">;
}
Default Behavior
By default, the Explorer:
- Shows folders in a collapsed state
- Opens folders when clicked (navigates to index page)
- Saves folder states between sessions
- Excludes the "tags" folder from the tree
- Sorts folders first, then files alphabetically
Development
This is a first-party Quartz community plugin. It serves as both:
- A production-ready Explorer component
- A reference implementation for building Quartz community plugins
Documentation
See the Quartz documentation for more information.
License
MIT