From bce404d415cbdf9aac9d0b179746ff1c67899859 Mon Sep 17 00:00:00 2001 From: saberzero1 Date: Fri, 13 Mar 2026 19:46:11 +0100 Subject: [PATCH] feat: stacked pages --- docs/plugins/StackedPages.md | 55 ++++++++++++++++++++++++++++++ quartz.config.default.yaml | 2 ++ quartz/cli/templates/blog.yaml | 2 ++ quartz/cli/templates/default.yaml | 2 ++ quartz/cli/templates/obsidian.yaml | 2 ++ quartz/cli/templates/ttrpg.yaml | 2 ++ 6 files changed, 65 insertions(+) create mode 100644 docs/plugins/StackedPages.md diff --git a/docs/plugins/StackedPages.md b/docs/plugins/StackedPages.md new file mode 100644 index 000000000..b3b7e4bf5 --- /dev/null +++ b/docs/plugins/StackedPages.md @@ -0,0 +1,55 @@ +--- +title: StackedPages +tags: + - plugin/component +--- + +Andy Matuschak-style stacked pages (sliding panes). Clicking internal links opens pages side by side in a horizontal stack, allowing you to trace your path through your notes. Each pane shows a full page and can be individually scrolled or closed. + +> [!note] +> For information on how to add, remove or configure plugins, see the [[configuration#Plugins|Configuration]] page. + +## Usage + +Once enabled, clicking any internal link on a page opens the linked page as a new pane to the right instead of navigating away. The URL updates with a `#stacked=slug1,slug2` hash encoding your current stack, so you can share or bookmark a specific trail of pages. + +Stacked pages are disabled on mobile by default (below 800px) since horizontal panning doesn't work well on small screens. On mobile, links navigate normally. + +### Interactions + +- **Click a link**: Opens the target page in a new pane to the right. If the maximum number of panes is reached, the leftmost pane is removed. +- **Close a pane**: Click the × button in the pane header to remove it from the stack. +- **Collapsed spines**: When panes overflow the viewport, earlier panes collapse to a thin vertical spine showing the page title. Click a spine to bring that pane back into focus. +- **Browser back/forward**: The full stack state is stored in the URL hash and integrated with browser history, so back/forward navigation works as expected. + +## Configuration + +This plugin accepts the following configuration options: + +- `paneWidth`: Width of each stacked pane in pixels. Defaults to `640`. +- `maxPanes`: Maximum number of panes visible at once. Defaults to `5`. +- `enableOnMobile`: Whether to enable stacked pages on mobile devices. Defaults to `false`. +- `mobileBreakpoint`: Viewport width (in pixels) below which the mobile behavior applies. Matches the Quartz mobile breakpoint. Defaults to `800`. +- `showSpines`: Whether to show collapsed spine headers when panes overflow. Defaults to `true`. +- `animateTransitions`: Whether to animate pane open/close transitions. Defaults to `true`. + +### Default options + +```yaml title="quartz.config.yaml" +- source: github:quartz-community/stacked-pages + enabled: true + options: + paneWidth: 640 + maxPanes: 5 + enableOnMobile: false + mobileBreakpoint: 800 + showSpines: true + animateTransitions: true +``` + +## API + +- Category: Component +- Function name: `ExternalPlugin.StackedPages()`. +- Source: [`quartz-community/stacked-pages`](https://github.com/quartz-community/stacked-pages) +- Install: `npx quartz plugin add github:quartz-community/stacked-pages` diff --git a/quartz.config.default.yaml b/quartz.config.default.yaml index 388e1572d..2fb371630 100644 --- a/quartz.config.default.yaml +++ b/quartz.config.default.yaml @@ -237,6 +237,8 @@ plugins: position: body priority: 100 display: all + - source: github:quartz-community/stacked-pages + enabled: true layout: groups: toolbar: diff --git a/quartz/cli/templates/blog.yaml b/quartz/cli/templates/blog.yaml index bcfe99f1b..c17b455b7 100644 --- a/quartz/cli/templates/blog.yaml +++ b/quartz/cli/templates/blog.yaml @@ -103,6 +103,8 @@ plugins: enabled: false - source: github:quartz-community/encrypted-pages enabled: false + - source: github:quartz-community/stacked-pages + enabled: false - source: github:quartz-community/alias-redirects enabled: true - source: github:quartz-community/content-index diff --git a/quartz/cli/templates/default.yaml b/quartz/cli/templates/default.yaml index daba85839..c537ba033 100644 --- a/quartz/cli/templates/default.yaml +++ b/quartz/cli/templates/default.yaml @@ -103,6 +103,8 @@ plugins: enabled: false - source: github:quartz-community/encrypted-pages enabled: true + - source: github:quartz-community/stacked-pages + enabled: false - source: github:quartz-community/alias-redirects enabled: true - source: github:quartz-community/content-index diff --git a/quartz/cli/templates/obsidian.yaml b/quartz/cli/templates/obsidian.yaml index 140d96c6c..5a3184713 100644 --- a/quartz/cli/templates/obsidian.yaml +++ b/quartz/cli/templates/obsidian.yaml @@ -113,6 +113,8 @@ plugins: enabled: false - source: github:quartz-community/encrypted-pages enabled: true + - source: github:quartz-community/stacked-pages + enabled: false - source: github:quartz-community/alias-redirects enabled: true - source: github:quartz-community/content-index diff --git a/quartz/cli/templates/ttrpg.yaml b/quartz/cli/templates/ttrpg.yaml index 3d30ba516..653cbdf90 100644 --- a/quartz/cli/templates/ttrpg.yaml +++ b/quartz/cli/templates/ttrpg.yaml @@ -113,6 +113,8 @@ plugins: enabled: false - source: github:quartz-community/encrypted-pages enabled: true + - source: github:quartz-community/stacked-pages + enabled: false - source: github:quartz-community/alias-redirects enabled: true - source: github:quartz-community/content-index