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

chore: format

Browse Source
This commit is contained in:
saberzero1 2026-02-28 04:57:46 +01:00
parent 18d64eecb1
commit 8dcc1522d9
No known key found for this signature in database
2 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
ARCHITECTURE_OVERVIEW.md
View File

@ -651,6 +651,7 @@ The layout builder looks up components by:
7. Serializes to HTML string via `preact-render-to-string` 7. Serializes to HTML string via `preact-render-to-string`
The `data-frame` attribute on `#quartz-root` enables CSS targeting per-frame (see [Page Frames](#page-frames)). The `data-frame` attribute on `#quartz-root` enables CSS targeting per-frame (see [Page Frames](#page-frames)).
### Page Frames ### Page Frames
The PageFrame system allows page types to optionally define completely different inner HTML structures (e.g. with/without sidebars, horizontal layouts, minimal chrome) while the outer shell remains stable for SPA navigation. The PageFrame system allows page types to optionally define completely different inner HTML structures (e.g. with/without sidebars, horizontal layouts, minimal chrome) while the outer shell remains stable for SPA navigation.
@ -679,31 +680,31 @@ The PageFrame system allows page types to optionally define completely different
```typescript ```typescript
interface PageFrame { interface PageFrame {
name: string // e.g. "default", "full-width", "minimal" name: string // e.g. "default", "full-width", "minimal"
render: (props: PageFrameProps) => JSX.Element // Renders the inner page structure render: (props: PageFrameProps) => JSX.Element // Renders the inner page structure
css?: string // Optional frame-specific CSS css?: string // Optional frame-specific CSS
} }
interface PageFrameProps { interface PageFrameProps {
componentData: QuartzComponentProps // Shared props for all components componentData: QuartzComponentProps // Shared props for all components
head: QuartzComponent // Head component (for completeness) head: QuartzComponent // Head component (for completeness)
header: QuartzComponent[] // Header slot header: QuartzComponent[] // Header slot
beforeBody: QuartzComponent[] // Before-body slot beforeBody: QuartzComponent[] // Before-body slot
pageBody: QuartzComponent // Content component (from PageType) pageBody: QuartzComponent // Content component (from PageType)
afterBody: QuartzComponent[] // After-body slot afterBody: QuartzComponent[] // After-body slot
left: QuartzComponent[] // Left sidebar components left: QuartzComponent[] // Left sidebar components
right: QuartzComponent[] // Right sidebar components right: QuartzComponent[] // Right sidebar components
footer: QuartzComponent // Footer component footer: QuartzComponent // Footer component
} }
``` ```
#### Built-in Frames #### Built-in Frames
| Frame | Name | Description | Used By | | Frame | Name | Description | Used By |
| --- | --- | --- | --- | | ------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------- |
| **DefaultFrame** | `"default"` | Original three-column layout: left sidebar + center (header, beforeBody, content, afterBody) + right sidebar + footer | All page types by default | | **DefaultFrame** | `"default"` | Original three-column layout: left sidebar + center (header, beforeBody, content, afterBody) + right sidebar + footer | All page types by default |
| **FullWidthFrame** | `"full-width"` | No sidebars. Single center column spanning full width with header, content, afterBody, and footer | `canvas-page` | | **FullWidthFrame** | `"full-width"` | No sidebars. Single center column spanning full width with header, content, afterBody, and footer | `canvas-page` |
| **MinimalFrame** | `"minimal"` | No sidebars, no header/beforeBody chrome. Only content + footer | `404` page | | **MinimalFrame** | `"minimal"` | No sidebars, no header/beforeBody chrome. Only content + footer | `404` page |
#### Frame Resolution Priority #### Frame Resolution Priority
@ -721,7 +722,7 @@ This means site authors can override any page type's frame via configuration wit
layout: layout:
byPageType: byPageType:
canvas: canvas:
template: minimal # Override canvas pages to use minimal frame template: minimal # Override canvas pages to use minimal frame
``` ```
#### Creating Custom Frames #### Creating Custom Frames
@ -780,13 +781,13 @@ Frame changes between pages are SPA-safe because:
#### Source Files #### Source Files
| File | Purpose | | File | Purpose |
| --- | --- | | --------------------------------------------- | ------------------------------------------- |
| `quartz/components/frames/types.ts` | `PageFrame` and `PageFrameProps` interfaces | | `quartz/components/frames/types.ts` | `PageFrame` and `PageFrameProps` interfaces |
| `quartz/components/frames/DefaultFrame.tsx` | Default three-column layout | | `quartz/components/frames/DefaultFrame.tsx` | Default three-column layout |
| `quartz/components/frames/FullWidthFrame.tsx` | Full-width single-column layout | | `quartz/components/frames/FullWidthFrame.tsx` | Full-width single-column layout |
| `quartz/components/frames/MinimalFrame.tsx` | Minimal content-only layout | | `quartz/components/frames/MinimalFrame.tsx` | Minimal content-only layout |
| `quartz/components/frames/index.ts` | Frame registry and `resolveFrame()` | | `quartz/components/frames/index.ts` | Frame registry and `resolveFrame()` |
### Transclusion ### Transclusion

24
quartz/components/renderPage.tsx
View File

@ -263,17 +263,19 @@ export function renderPage(
<body data-slug={slug}> <body data-slug={slug}>
<div id="quartz-root" class="page" data-frame={frame.name}> <div id="quartz-root" class="page" data-frame={frame.name}>
<Body {...componentData}> <Body {...componentData}>
{[frame.render({ {[
componentData, frame.render({
head: Head, componentData,
header, head: Head,
beforeBody, header,
pageBody: Content, beforeBody,
afterBody, pageBody: Content,
left, afterBody,
right, left,
footer: Footer, right,
})]} footer: Footer,
}),
]}
</Body> </Body>
</div> </div>
</body> </body>