GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2025-12-27 14:54: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)
export const defaultContentPageLayout: PageLayout = {
pageHeader: [],
beforeBody: [
Component.Breadcrumbs(),
Component.ArticleTitle(),
@ -38,6 +39,7 @@ export const defaultContentPageLayout: PageLayout = {
// components for pages that display lists of pages (e.g. tags or folders)
export const defaultListPageLayout: PageLayout = {
pageHeader: [],
beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
left: [
Component.PageTitle(),

3
quartz/cfg.ts
View File

@ -85,6 +85,7 @@ export interface QuartzConfig {
export interface FullPageLayout {
head: QuartzComponent
header: QuartzComponent[]
pageHeader: QuartzComponent[]
beforeBody: QuartzComponent[]
pageBody: QuartzComponent
afterBody: QuartzComponent[]
@ -93,5 +94,5 @@ export interface FullPageLayout {
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">

2
quartz/components/Body.tsx
View File

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

3
quartz/components/Header.tsx
View File

@ -1,7 +1,7 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
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 = `
@ -9,7 +9,6 @@ header {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
padding: 1rem 2rem;
gap: 1.5rem;
}

19
quartz/components/renderPage.tsx
View File

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

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

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

14
quartz/styles/base.scss
View File

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

6
quartz/styles/variables.scss
View File

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