feat(layout): fix for review comments

* aside --> section * header --> header + pageHeader
jackyzha0 · Nov 30, 2024 · 232944a · 232944a
1 parent 7c49f58
commit 232944a
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 24 deletions.
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -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(),

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
@@ -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">
diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx
@@ -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

diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx
@@ -1,15 +1,14 @@
 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 = `
 header {
   display: flex;
   flex-direction: row;
   align-items: center;
-  justify-content: flex-end;
   padding: 1rem 2rem;
   gap: 1.5rem;
 }

diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -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>

diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx
@@ -15,6 +15,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
   const opts: FullPageLayout = {
     ...sharedPageComponents,
     pageBody: NotFound(),
+    pageHeader: [],
     beforeBody: [],
     left: [],
     right: [],

diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -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;

diff --git a/quartz/styles/variables.scss b/quartz/styles/variables.scss
@@ -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"',
 );