Page Variables

The Page Variables system allows you to toggle different UI elements of a User Page via settings defined in the page itself or its parent contexts. These variables are stored in a page's metadata under userVariables.

Available System Variables

Variable	Type	Default	Description
`showTitle`	`boolean`	`true`	Toggles the display of the main page title block.
`showAuthor`	`boolean`	`true`	Toggles the display of the author's name.
`showDate`	`boolean`	`true`	Toggles the display of the publish date.
`showCategories`	`boolean`	`true`	Toggles the display of the category paths.
`showActions`	`boolean`	`true`	Toggles the display of the top-right page actions menu.
`showParent`	`boolean`	`true`	Toggles the display of the parent page path above the title.
`showToc`	`boolean`	`true`	Toggles the display of the side table of contents and mobile TOC.
`showLastUpdated`	`boolean`	`true`	Toggles the display of the "Last updated" footer at the bottom of the page.
`showFooter`	`boolean`	`true`	Toggles the display of the global app footer site-wide.

Implementation References

Here is how the Page Variables system is structured and implemented across the codebase:

1. Variables Definition & Defaults

src/lib/page-variables.ts Defines globalVariables which sets the default fallbacks (e.g. showTitle: true, showFooter: true). Also provides the utility mergePageVariables() which resolves variable inheritance from a page's parent paths (organizations/categories).

2. Editor & Schema

src/components/variables/VariablesEditor.tsx The editor component that allows users to toggle these settings. It defines the SYSTEM_VARIABLE_SCHEMA mapping keys like showToc and showLastUpdated to human-readable labels and descriptions.

3. Usage in Page Rendering

src/modules/pages/UserPage.tsx Retrieves the resolved contextVariables using mergePageVariables() and uses them to determine high-level layout elements.
- Determines showToc and hasTocContent for toggling the Sidebar and Mobile Table of Contents.
- Determines showLastUpdated for rendering the footer details.
- Computes showFooter and passes it to the global Zustand AppStore to toggle the global application footer.
src/modules/pages/editor/UserPageDetails.tsx Retrieves various variables (showTitle, showAuthor, showDate, showCategories, showActions, showParent) and conditionally renders those blocks. If all are false and the page is not in edit mode, it avoids rendering the details wrapper entirely via an early return block.

4. Global State (e.g., Global Footer)

src/store/appStore.ts A simple Zustand store containing showGlobalFooter and setShowGlobalFooter. Used as a communication bridge.
src/App.tsx Reads showGlobalFooter from useAppStore() and decides whether to render the <Footer /> component in the main application layout wrapper.

3.2 KiB Raw Blame History