From 232944a164e367339a74bfebae3d463d77e99ddb Mon Sep 17 00:00:00 2001
From: vanadium23 <chernoffivan@gmail.com>
Date: Sat, 30 Nov 2024 22:56:03 +0300
Subject: [PATCH] feat(layout): fix for review comments

* aside --> section
* header --> header + pageHeader
---
 quartz.layout.ts                 |  2 ++
 quartz/cfg.ts                    |  3 ++-
 quartz/components/Body.tsx       |  2 +-
 quartz/components/Header.tsx     |  3 +--
 quartz/components/renderPage.tsx | 19 +++++++++++++------
 quartz/plugins/emitters/404.tsx  |  1 +
 quartz/styles/base.scss          | 14 +++-----------
 quartz/styles/variables.scss     |  6 +++---
 8 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index 4a78256aabda3..a1828a9c69a20 100644
--- 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
index 135f584994a6d..97a195b39ba37 100644
--- 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
index 96b6278831c86..b2060f8ed9b1a 100644
--- 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
index 97f091de7e8df..dbf890f8e486a 100644
--- a/quartz/components/Header.tsx
+++ b/quartz/components/Header.tsx
@@ -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;
 }
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index d1354314e3a4d..a28fe11dcb35e 100644
--- 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
index e4605cfcd2f3e..e76b793c9d556 100644
--- 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
index a69f18253c27e..284386ca50161 100644
--- 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
index 56eb1130fd938..aff96183ae957 100644
--- 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"',
 );