feat(layout): make header outside of center

* make header above all content * make beforeBody --> pageHeader
jackyzha0 · Dec 1, 2024 · b2423a3 · b2423a3
1 parent 14e9d44
commit b2423a3
Show file tree

Hide file tree

Showing 7 changed files with 10 additions and 21 deletions.
diff --git a/quartz.layout.ts b/quartz.layout.ts
@@ -16,8 +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: [
+  pageHeader: [
     Component.Breadcrumbs(),
     Component.ArticleTitle(),
     Component.ContentMeta(),
@@ -39,8 +38,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()],
+  pageHeader: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()],
   left: [
     Component.PageTitle(),
     Component.MobileOnly(Component.Spacer()),

diff --git a/quartz/cfg.ts b/quartz/cfg.ts
@@ -86,13 +86,12 @@ export interface FullPageLayout {
   head: QuartzComponent
   header: QuartzComponent[]
   pageHeader: QuartzComponent[]
-  beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
   afterBody: QuartzComponent[]
   left: QuartzComponent[]
   right: QuartzComponent[]
   footer: QuartzComponent
 }
 
-export type PageLayout = Pick<FullPageLayout, "pageHeader" | "beforeBody" | "left" | "right">
+export type PageLayout = Pick<FullPageLayout, "pageHeader" | "left" | "right">
 export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -13,7 +13,6 @@ interface RenderComponents {
   head: QuartzComponent
   header: QuartzComponent[]
   pageHeader: QuartzComponent[]
-  beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
   afterBody: QuartzComponent[]
   left: QuartzComponent[]
@@ -193,7 +192,6 @@ export function renderPage(
     head: Head,
     header,
     pageHeader,
-    beforeBody,
     pageBody: Content,
     afterBody,
     left,
@@ -234,13 +232,8 @@ export function renderPage(
             {LeftComponent}
             <section class="center">
               <div class="page-header">
-                <Header {...componentData}>
-                  {pageHeader.map((HeaderComponent) => (
-                    <HeaderComponent {...componentData} />
-                  ))}
-                </Header>
                 <div class="popover-hint">
-                  {beforeBody.map((BodyComponent) => (
+                  {pageHeader.map((BodyComponent) => (
                     <BodyComponent {...componentData} />
                   ))}
                 </div>

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

diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
@@ -59,7 +59,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
+  const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts
   const Header = HeaderConstructor()
   const Body = BodyConstructor()
 
@@ -71,7 +71,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
         Header,
         Body,
         ...header,
-        ...beforeBody,
+        ...pageHeader,
         pageBody,
         ...afterBody,
         ...left,

diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
@@ -33,7 +33,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
+  const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts
   const Header = HeaderConstructor()
   const Body = BodyConstructor()
 
@@ -45,7 +45,7 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
         Header,
         Body,
         ...header,
-        ...beforeBody,
+        ...pageHeader,
         pageBody,
         ...afterBody,
         ...left,

diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
@@ -30,7 +30,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
+  const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts
   const Header = HeaderConstructor()
   const Body = BodyConstructor()
 
@@ -42,7 +42,7 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
         Header,
         Body,
         ...header,
-        ...beforeBody,
+        ...pageHeader,
         pageBody,
         ...afterBody,
         ...left,