StackedPages

summary:

• Andy Matuschak-style stacked sliding panes.
• internal links open horizontally, side-by-side
• panes: scrollable, closable

Note

Plugin add/remove/configuration: Configuration.

Usage

behavior:

• internal_links:
  • open target pane to the right
  • avoid full-page navigation
• url_state:
  • format: #stacked=slug1,slug2
  • preserves stack for sharing/bookmarking
• mobile:
  • viewport < mobileBreakpoint: standard navigation
  • stacked panes disabled

Interactions

interactions:

• link_click:
  • opens page to the right
  • overflow: remove leftmost pane when count exceeds maxTabs
• close_pane:
  • click × in pane header
• collapsed_spines:
  • overflowing panes collapse to vertical title spines
  • click spine to refocus pane
• history:
  • URL hash syncs stack state with browser back/forward

Configuration

options:

• maxTabs:
  • type: number
  • default: 8
  • effect: maximum visible stacked panes
• mobileBreakpoint:
  • type: number
  • default: 800
  • unit: px
  • effect: viewport width below which standard navigation replaces stacked panes
• showSpines:
  • type: boolean
  • default: true
  • effect: show collapsed spine headers on overflow
• animateTransitions:
  • type: boolean
  • default: true
  • effect: animate pane open/close

Default Configuration

quartz.config.yaml

- source: github:quartz-community/stacked-pages
  enabled: true
  layout:
    position: afterBody
    priority: 50
    display: all
  options:
    maxTabs: 8
    mobileBreakpoint: 800
    showSpines: true
    animateTransitions: true

API

api:

• category: Component
• function: ExternalPlugin.StackedPages()
• source: quartz-community/stacked-pages
• install: npx quartz plugin add github:quartz-community/stacked-pages