GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-21 21:45:42 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: integrate PageFrame into rendering pipeline

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz/cfg.ts
View File

@ -101,6 +101,8 @@ export interface FullPageLayout {
left: QuartzComponent[] left: QuartzComponent[]
right: QuartzComponent[] right: QuartzComponent[]
footer: 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"> export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">

59
quartz/components/renderPage.tsx
View File

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

4
quartz/plugins/types.ts
View File

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