GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-27 23:04:05 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(layout): fix for review comments

Browse Source 
* aside --> section
* header --> header + pageHeader
This commit is contained in:
vanadium23 2024-11-30 22:56:03 +03:00
parent 799c8c4fc1
commit 57e6af3a34
8 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
quartz.layout.ts
View File

@ -16,6 +16,7 @@ export const sharedPageComponents: SharedLayout = {
// components for pages that display a single page (e.g. a single note) // components for pages that display a single page (e.g. a single note)
export const defaultContentPageLayout: PageLayout = { export const defaultContentPageLayout: PageLayout = {
pageHeader: [],
beforeBody: [ beforeBody: [
Component.Breadcrumbs(), Component.Breadcrumbs(),
Component.ArticleTitle(), Component.ArticleTitle(),
@ -38,6 +39,7 @@ export const defaultContentPageLayout: PageLayout = {
// components for pages that display lists of pages (e.g. tags or folders) // components for pages that display lists of pages (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = { export const defaultListPageLayout: PageLayout = {
pageHeader: [],
beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()], beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
left: [ left: [
Component.PageTitle(), Component.PageTitle(),

3
quartz/cfg.ts
View File

@ -85,6 +85,7 @@ export interface QuartzConfig {
export interface FullPageLayout { export interface FullPageLayout {
head: QuartzComponent head: QuartzComponent
header: QuartzComponent[] header: QuartzComponent[]
pageHeader: QuartzComponent[]
beforeBody: QuartzComponent[] beforeBody: QuartzComponent[]
pageBody: QuartzComponent pageBody: QuartzComponent
afterBody: QuartzComponent[] afterBody: QuartzComponent[]
@ -93,5 +94,5 @@ export interface FullPageLayout {
footer: QuartzComponent footer: QuartzComponent
} }
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right"> export type PageLayout = Pick<FullPageLayout, "pageHeader" | "beforeBody" | "left" | "right">
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody"> export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">

2
quartz/components/Body.tsx
View File

@ -4,7 +4,7 @@ import clipboardStyle from "./styles/clipboard.scss"
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const Body: QuartzComponent = ({ children }: QuartzComponentProps) => { const Body: QuartzComponent = ({ children }: QuartzComponentProps) => {
return <div id="quartz-body">{children}</div> return <main id="quartz-body">{children}</main>
} }
Body.afterDOMLoaded = clipboardScript Body.afterDOMLoaded = clipboardScript

3
quartz/components/Header.tsx
View File

@ -1,7 +1,7 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const Header: QuartzComponent = ({ children }: QuartzComponentProps) => { const Header: QuartzComponent = ({ children }: QuartzComponentProps) => {
return children.length > 0 ? <header>{children}</header> : <header className={"empty"}></header> return children.length > 0 ? <header>{children}</header> : null
} }
Header.css = ` Header.css = `
@ -9,7 +9,6 @@ header {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
justify-content: flex-end;
padding: 1rem 2rem; padding: 1rem 2rem;
gap: 1.5rem; gap: 1.5rem;
} }

19
quartz/components/renderPage.tsx
View File

@ -12,6 +12,7 @@ import { i18n } from "../i18n"
interface RenderComponents { interface RenderComponents {
head: QuartzComponent head: QuartzComponent
header: QuartzComponent[] header: QuartzComponent[]
pageHeader: QuartzComponent[]
beforeBody: QuartzComponent[] beforeBody: QuartzComponent[]
pageBody: QuartzComponent pageBody: QuartzComponent
afterBody: QuartzComponent[] afterBody: QuartzComponent[]
@ -191,6 +192,7 @@ export function renderPage(
const { const {
head: Head, head: Head,
header, header,
pageHeader,
beforeBody, beforeBody,
pageBody: Content, pageBody: Content,
afterBody, afterBody,
@ -202,19 +204,19 @@ export function renderPage(
const Body = BodyConstructor() const Body = BodyConstructor()
const LeftComponent = ( const LeftComponent = (
<aside class="left sidebar"> <section class="left sidebar">
{left.map((BodyComponent) => ( {left.map((BodyComponent) => (
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
))} ))}
</aside> </section>
) )
const RightComponent = ( const RightComponent = (
<aside class="right sidebar"> <section class="right sidebar">
{right.map((BodyComponent) => ( {right.map((BodyComponent) => (
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
))} ))}
</aside> </section>
) )
const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
@ -230,8 +232,13 @@ export function renderPage(
</Header> </Header>
<Body {...componentData}> <Body {...componentData}>
{LeftComponent} {LeftComponent}
<main class="center"> <section class="center">
<div class="page-header"> <div class="page-header">
<Header {...componentData}>
{pageHeader.map((HeaderComponent) => (
<HeaderComponent {...componentData} />
))}
</Header>
<div class="popover-hint"> <div class="popover-hint">
{beforeBody.map((BodyComponent) => ( {beforeBody.map((BodyComponent) => (
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
@ -245,7 +252,7 @@ export function renderPage(
<BodyComponent {...componentData} /> <BodyComponent {...componentData} />
))} ))}
</div> </div>
</main> </section>
{RightComponent} {RightComponent}
<Footer {...componentData} /> <Footer {...componentData} />
</Body> </Body>

1
quartz/plugins/emitters/404.tsx
View File

@ -15,6 +15,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
const opts: FullPageLayout = { const opts: FullPageLayout = {
...sharedPageComponents, ...sharedPageComponents,
pageBody: NotFound(), pageBody: NotFound(),
pageHeader: [],
beforeBody: [], beforeBody: [],
left: [], left: [],
right: [], right: [],

14
quartz/styles/base.scss
View File

@ -123,14 +123,6 @@ a {
.page { .page {
max-width: calc(#{map-get($breakpoints, desktop)} + 300px); max-width: calc(#{map-get($breakpoints, desktop)} + 300px);
margin: 0 auto; margin: 0 auto;
& header {
margin-top: 1rem;
margin-bottom: 1rem;
&.empty {
margin-top: 0;
margin-bottom: $topSpacing;
}
}
& article { & article {
& > h1 { & > h1 {
@ -191,7 +183,7 @@ a {
gap: 2rem; gap: 2rem;
top: 0; top: 0;
box-sizing: border-box; box-sizing: border-box;
padding: 0 2rem 2rem 2rem; padding: $topSpacing 2rem 2rem 2rem;
display: flex; display: flex;
height: 100vh; height: 100vh;
position: sticky; position: sticky;
@ -241,8 +233,8 @@ a {
} }
& .page-header { & .page-header {
grid-area: grid-before-body; grid-area: grid-page-header;
margin: 0 0 0 0; margin: $topSpacing 0 0 0;
@media all and ($mobile) { @media all and ($mobile) {
margin-top: 0; margin-top: 0;
padding: 0; padding: 0;

6
quartz/styles/variables.scss
View File

@ -28,7 +28,7 @@ $mobileGrid: (
columnGap: "5px", columnGap: "5px",
templateAreas: templateAreas:
'"grid-sidebar-left"\ '"grid-sidebar-left"\
"grid-before-body"\ "grid-page-header"\
"grid-center"\ "grid-center"\
"grid-sidebar-right"\ "grid-sidebar-right"\
"grid-footer"', "grid-footer"',
@ -39,7 +39,7 @@ $tabletGrid: (
rowGap: "5px", rowGap: "5px",
columnGap: "5px", columnGap: "5px",
templateAreas: templateAreas:
'"grid-sidebar-left grid-before-body"\ '"grid-sidebar-left grid-page-header"\
"grid-sidebar-left grid-center"\ "grid-sidebar-left grid-center"\
"grid-sidebar-left grid-sidebar-right"\ "grid-sidebar-left grid-sidebar-right"\
"grid-sidebar-left grid-footer"', "grid-sidebar-left grid-footer"',
@ -50,7 +50,7 @@ $desktopGrid: (
rowGap: "5px", rowGap: "5px",
columnGap: "5px", columnGap: "5px",
templateAreas: templateAreas:
'"grid-sidebar-left grid-before-body grid-sidebar-right"\ '"grid-sidebar-left grid-page-header grid-sidebar-right"\
"grid-sidebar-left grid-center grid-sidebar-right"\ "grid-sidebar-left grid-center grid-sidebar-right"\
"grid-sidebar-left grid-footer grid-sidebar-right"', "grid-sidebar-left grid-footer grid-sidebar-right"',
); );