explorer/README.md

97 lines
2.3 KiB
Markdown
Raw Normal View History

2026-02-07 01:51:00 +00:00
# @quartz-community/explorer
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
The Explorer component for Quartz - navigate your digital garden with an interactive file tree.
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
## Features
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
- 📁 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
2026-02-07 01:03:54 +00:00
```bash
npx quartz plugin add github:quartz-community/explorer
2026-02-07 01:03:54 +00:00
```
2026-02-07 01:51:00 +00:00
## Usage
2026-02-07 01:03:54 +00:00
```yaml title="quartz.config.yaml"
plugins:
- source: github:quartz-community/explorer
enabled: true
layout:
position: left
priority: 50
2026-02-07 01:03:54 +00:00
```
For advanced use cases, you can override in TypeScript:
2026-02-07 01:03:54 +00:00
```ts title="quartz.ts (override)"
import * as ExternalPlugin from "./.quartz/plugins";
ExternalPlugin.Explorer({
title: "Explorer",
folderDefaultState: "collapsed",
folderClickBehavior: "link",
useSavedState: true,
});
2026-02-07 01:03:54 +00:00
```
2026-02-07 01:51:00 +00:00
## Configuration Options
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
```typescript
interface ExplorerOptions {
/** Title displayed above the explorer */
title?: string;
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Default state for folders: "collapsed" or "open" */
folderDefaultState: "collapsed" | "open";
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Behavior when clicking folders: "collapse" to toggle, "link" to navigate */
folderClickBehavior: "collapse" | "link";
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Whether to persist folder state in localStorage */
useSavedState: boolean;
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Custom sort function for entries */
sortFn?: (a: FileTrieNode, b: FileTrieNode) => number;
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Custom filter function for entries */
filterFn?: (node: FileTrieNode) => boolean;
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Custom map function for transforming entries */
mapFn?: (node: FileTrieNode) => void;
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
/** Order in which to apply filter, map, and sort */
order?: Array<"filter" | "map" | "sort">;
}
```
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
## Default Behavior
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
By default, the Explorer:
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
- 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
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
## Development
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
This is a first-party Quartz community plugin. It serves as both:
2026-02-07 01:03:54 +00:00
2026-02-07 01:51:00 +00:00
1. A production-ready Explorer component
2. A reference implementation for building Quartz community plugins
2026-02-07 01:03:54 +00:00
## Documentation
See the [Quartz documentation](https://quartz.jzhao.xyz/features/explorer) for more information.
2026-02-07 01:03:54 +00:00
## License
MIT