feat: integrate PageFrame into rendering pipeline

This commit is contained in:
saberzero1 2026-02-28 04:31:17 +01:00
parent daec1d9b6a
commit 995a5986a7
No known key found for this signature in database
3 changed files with 22 additions and 43 deletions

View File

@ -101,6 +101,8 @@ export interface FullPageLayout {
left: QuartzComponent[]
right: QuartzComponent[]
footer: QuartzComponent
/** Page frame name (e.g. "default", "full-width", "minimal"). Defaults to "default". */
frame?: string
}
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">

View File

@ -1,6 +1,5 @@
import { render } from "preact-render-to-string"
import { QuartzComponent, QuartzComponentProps } from "./types"
import HeaderConstructor from "./Header"
import BodyConstructor from "./Body"
import { JSResourceToScriptElement, StaticResources } from "../util/resources"
import { FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
@ -10,6 +9,7 @@ import { Root, Element, ElementContent } from "hast"
import { GlobalConfiguration } from "../cfg"
import { i18n } from "../i18n"
import { styleText } from "util"
import { resolveFrame } from "./frames"
interface RenderComponents {
head: QuartzComponent
@ -20,6 +20,7 @@ interface RenderComponents {
left: QuartzComponent[]
right: QuartzComponent[]
footer: QuartzComponent
frame?: string
}
const headerRegex = new RegExp(/h[1-6]/)
@ -249,25 +250,10 @@ export function renderPage(
left,
right,
footer: Footer,
frame: frameName,
} = components
const Header = HeaderConstructor()
const Body = BodyConstructor()
const LeftComponent = (
<div class="left sidebar">
{left.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
)
const RightComponent = (
<div class="right sidebar">
{right.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
)
const frame = resolveFrame(frameName)
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
const direction = i18n(cfg.locale).direction ?? "ltr"
@ -275,32 +261,19 @@ export function renderPage(
<html lang={lang} dir={direction}>
<Head {...componentData} />
<body data-slug={slug}>
<div id="quartz-root" class="page">
<div id="quartz-root" class="page" data-frame={frame.name}>
<Body {...componentData}>
{LeftComponent}
<div class="center">
<div class="page-header">
<Header {...componentData}>
{header.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<div class="popover-hint">
{beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</div>
<Content {...componentData} />
<hr />
<div class="page-footer">
{afterBody.map((BodyComponent) => (
<BodyComponent {...componentData} />
))}
</div>
</div>
{RightComponent}
<Footer {...componentData} />
{frame.render({
componentData,
head: Head,
header,
beforeBody,
pageBody: Content,
afterBody,
left,
right,
footer: Footer,
})}
</Body>
</div>
</body>

View File

@ -101,6 +101,8 @@ export interface QuartzPageTypePluginInstance {
match: PageMatcher
generate?: PageGenerator
layout: string
/** Optional page frame name (e.g. "default", "full-width", "minimal"). Defaults to "default". */
frame?: string
body: QuartzComponentConstructor
}
@ -117,5 +119,7 @@ export interface PageTypePluginEntry {
match: (...args: never[]) => boolean
generate?: (...args: never[]) => VirtualPage[]
layout: string
/** Optional page frame name (e.g. "default", "full-width", "minimal"). Defaults to "default". */
frame?: string
body: QuartzComponentConstructor
}