From fc901e1084a05c7264013fd9859a99038344d980 Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sat, 30 Nov 2024 00:01:45 +0300 Subject: [PATCH 1/7] components: make Header as header --- quartz/components/Header.tsx | 5 +++-- quartz/components/renderPage.tsx | 10 +++++----- quartz/styles/base.scss | 15 ++++++++++++--- quartz/styles/variables.scss | 6 +++--- 4 files changed, 23 insertions(+), 13 deletions(-) diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx index eba17ae09..97f091de7 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 ?
{children}
: null + return children.length > 0 ?
{children}
:
} Header.css = ` @@ -9,7 +9,8 @@ header { display: flex; flex-direction: row; align-items: center; - margin: 2rem 0; + justify-content: flex-end; + padding: 1rem 2rem; gap: 1.5rem; } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 9c530967b..0d7115526 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -223,15 +223,15 @@ export function renderPage(
+
+ {header.map((HeaderComponent) => ( + + ))} +
{LeftComponent}
-
- {header.map((HeaderComponent) => ( - - ))} -
{beforeBody.map((BodyComponent) => ( diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss index 512af0dd0..05642852f 100644 --- a/quartz/styles/base.scss +++ b/quartz/styles/base.scss @@ -123,6 +123,15 @@ 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 { font-size: 2rem; @@ -182,7 +191,7 @@ a { gap: 2rem; top: 0; box-sizing: border-box; - padding: $topSpacing 2rem 2rem 2rem; + padding: 0 2rem 2rem 2rem; display: flex; height: 100vh; position: sticky; @@ -232,8 +241,8 @@ a { } & .page-header { - grid-area: grid-header; - margin: $topSpacing 0 0 0; + grid-area: grid-before-body; + margin: 0 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 4a5cea583..56eb1130f 100644 --- a/quartz/styles/variables.scss +++ b/quartz/styles/variables.scss @@ -28,7 +28,7 @@ $mobileGrid: ( columnGap: "5px", templateAreas: '"grid-sidebar-left"\ - "grid-header"\ + "grid-before-body"\ "grid-center"\ "grid-sidebar-right"\ "grid-footer"', @@ -39,7 +39,7 @@ $tabletGrid: ( rowGap: "5px", columnGap: "5px", templateAreas: - '"grid-sidebar-left grid-header"\ + '"grid-sidebar-left grid-before-body"\ "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-header grid-sidebar-right"\ + '"grid-sidebar-left grid-before-body grid-sidebar-right"\ "grid-sidebar-left grid-center grid-sidebar-right"\ "grid-sidebar-left grid-footer grid-sidebar-right"', ); From 799c8c4fc150ae756736000794d8435c1d42b63b Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sat, 30 Nov 2024 00:16:08 +0300 Subject: [PATCH 2/7] components: semantic web for main components --- quartz/components/Explorer.tsx | 4 ++-- quartz/components/renderPage.tsx | 12 ++++++------ 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index ec7c48ef7..156158130 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -112,12 +112,12 @@ export default ((userOpts?: Partial) => { -
+
+
) } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 0d7115526..d1354314e 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -202,19 +202,19 @@ export function renderPage( const Body = BodyConstructor() const LeftComponent = ( -
+
+ ) const RightComponent = ( -
+
+ ) const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" @@ -230,7 +230,7 @@ export function renderPage( {LeftComponent} -
+
{beforeBody.map((BodyComponent) => ( @@ -245,7 +245,7 @@ export function renderPage( ))}
-
+
{RightComponent}
From 57e6af3a343dd5b8280a8189167c61fecc348384 Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sat, 30 Nov 2024 22:56:03 +0300 Subject: [PATCH 3/7] 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 4a78256aa..a1828a9c6 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 135f58499..97a195b39 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 +export type PageLayout = Pick export type SharedLayout = Pick diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx index 96b627883..b2060f8ed 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
{children}
+ return
{children}
} Body.afterDOMLoaded = clipboardScript diff --git a/quartz/components/Header.tsx b/quartz/components/Header.tsx index 97f091de7..c58aecfa2 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 ?
{children}
:
+ return children.length > 0 ?
{children}
: 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 d1354314e..a28fe11dc 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 = ( - + ) const RightComponent = ( - + ) const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" @@ -230,8 +232,13 @@ export function renderPage( {LeftComponent} -
+
+
+ {pageHeader.map((HeaderComponent) => ( + + ))} +
{beforeBody.map((BodyComponent) => ( @@ -245,7 +252,7 @@ export function renderPage( ))}
-
+ {RightComponent}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx index e4605cfcd..e76b793c9 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 05642852f..3a2a00411 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 56eb1130f..aff96183a 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"', ); From fafdb2719aa37bd1bdcdb4869901061dd10dc2cc Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sun, 1 Dec 2024 22:22:24 +0300 Subject: [PATCH 4/7] feat(layout): better tags on components * move Explorer to menu * move Search to search * move sidebars to aside --- quartz/components/ContentMeta.tsx | 4 ++-- quartz/components/Date.tsx | 2 +- quartz/components/Explorer.tsx | 8 ++++---- quartz/components/ExplorerNode.tsx | 4 ++-- quartz/components/Search.tsx | 4 ++-- quartz/components/renderPage.tsx | 8 ++++---- quartz/components/styles/explorer.scss | 4 ++-- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/quartz/components/ContentMeta.tsx b/quartz/components/ContentMeta.tsx index e378bccee..c2d35414c 100644 --- a/quartz/components/ContentMeta.tsx +++ b/quartz/components/ContentMeta.tsx @@ -1,4 +1,4 @@ -import { Date, getDate } from "./Date" +import { formatDate, getDate } from "./Date" import { QuartzComponentConstructor, QuartzComponentProps } from "./types" import readingTime from "reading-time" import { classNames } from "../util/lang" @@ -30,7 +30,7 @@ export default ((opts?: Partial) => { const segments: (string | JSX.Element)[] = [] if (fileData.dates) { - segments.push() + segments.push(formatDate(getDate(cfg, fileData)!)) } // Display reading time if enabled diff --git a/quartz/components/Date.tsx b/quartz/components/Date.tsx index 0a92cc4c3..26b59647c 100644 --- a/quartz/components/Date.tsx +++ b/quartz/components/Date.tsx @@ -27,5 +27,5 @@ export function formatDate(d: Date, locale: ValidLocale = "en-US"): string { } export function Date({ date, locale }: Props) { - return + return <>{formatDate(date, locale)} } diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index 156158130..7f8369f46 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -112,12 +112,12 @@ export default ((userOpts?: Partial) => { - + +
) } diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx index e57d67715..a22da547f 100644 --- a/quartz/components/ExplorerNode.tsx +++ b/quartz/components/ExplorerNode.tsx @@ -216,7 +216,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro )} {/* Recursively render children of folder */}
-
    ))} -
+
)} diff --git a/quartz/components/Search.tsx b/quartz/components/Search.tsx index 8b9755518..e7bb3596d 100644 --- a/quartz/components/Search.tsx +++ b/quartz/components/Search.tsx @@ -18,7 +18,7 @@ export default ((userOpts?: Partial) => { const opts = { ...defaultOptions, ...userOpts } const searchPlaceholder = i18n(cfg.locale).components.search.searchBarPlaceholder return ( -
+
-
+ ) } diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index a28fe11dc..99be1d07f 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -204,19 +204,19 @@ export function renderPage( const Body = BodyConstructor() const LeftComponent = ( -
+
+ ) const RightComponent = ( -
+
+ ) const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en" diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss index 397fd0241..b15e1af9d 100644 --- a/quartz/components/styles/explorer.scss +++ b/quartz/components/styles/explorer.scss @@ -60,7 +60,7 @@ button#explorer { grid-template-rows: 1fr; } -.folder-outer > ul { +.folder-outer > menu { overflow: hidden; } @@ -83,7 +83,7 @@ button#explorer { visibility: hidden; } - & ul { + & menu { list-style: none; margin: 0.08rem 0; padding: 0; From cfcce875a91fa6cb0a98bf24d3889eff7f117af9 Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sun, 1 Dec 2024 22:36:51 +0300 Subject: [PATCH 5/7] feat(layout): make header outside of center * make header above all content * make beforeBody --> pageHeader --- quartz.layout.ts | 6 ++---- quartz/cfg.ts | 3 +-- quartz/components/renderPage.tsx | 9 +-------- quartz/plugins/emitters/404.tsx | 1 - quartz/plugins/emitters/contentPage.tsx | 4 ++-- quartz/plugins/emitters/folderPage.tsx | 4 ++-- quartz/plugins/emitters/tagPage.tsx | 4 ++-- 7 files changed, 10 insertions(+), 21 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index a1828a9c6..c02dae015 100644 --- 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 index 97a195b39..efcae9021 100644 --- a/quartz/cfg.ts +++ b/quartz/cfg.ts @@ -86,7 +86,6 @@ export interface FullPageLayout { head: QuartzComponent header: QuartzComponent[] pageHeader: QuartzComponent[] - beforeBody: QuartzComponent[] pageBody: QuartzComponent afterBody: QuartzComponent[] left: QuartzComponent[] @@ -94,5 +93,5 @@ export interface FullPageLayout { footer: QuartzComponent } -export type PageLayout = Pick +export type PageLayout = Pick export type SharedLayout = Pick diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 99be1d07f..4e03ce3e8 100644 --- 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}
-
- {pageHeader.map((HeaderComponent) => ( - - ))} -
- {beforeBody.map((BodyComponent) => ( + {pageHeader.map((BodyComponent) => ( ))}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx index e76b793c9..b81d01196 100644 --- 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 index 2ac132147..7fc5880fd 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -59,7 +59,7 @@ export const ContentPage: QuartzEmitterPlugin> = (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> = (userOp Header, Body, ...header, - ...beforeBody, + ...pageHeader, pageBody, ...afterBody, ...left, diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx index b6d860272..28e797036 100644 --- a/quartz/plugins/emitters/folderPage.tsx +++ b/quartz/plugins/emitters/folderPage.tsx @@ -33,7 +33,7 @@ export const FolderPage: QuartzEmitterPlugin> = (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> = (user Header, Body, ...header, - ...beforeBody, + ...pageHeader, pageBody, ...afterBody, ...left, diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx index 066d4ec26..651bafa53 100644 --- a/quartz/plugins/emitters/tagPage.tsx +++ b/quartz/plugins/emitters/tagPage.tsx @@ -30,7 +30,7 @@ export const TagPage: QuartzEmitterPlugin> = (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> = (userOpts) Header, Body, ...header, - ...beforeBody, + ...pageHeader, pageBody, ...afterBody, ...left, From e525f859c39e6d6dc8ae879e3c78749edcabb03b Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Mon, 2 Dec 2024 12:27:18 +0300 Subject: [PATCH 6/7] feat(layout): bring back pageHeader --> beforeBody --- quartz.layout.ts | 4 ++-- quartz/cfg.ts | 4 ++-- quartz/components/renderPage.tsx | 6 +++--- quartz/plugins/emitters/404.tsx | 2 +- quartz/plugins/emitters/contentPage.tsx | 4 ++-- quartz/plugins/emitters/folderPage.tsx | 4 ++-- quartz/plugins/emitters/tagPage.tsx | 4 ++-- 7 files changed, 14 insertions(+), 14 deletions(-) diff --git a/quartz.layout.ts b/quartz.layout.ts index c02dae015..4a78256aa 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -16,7 +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(), Component.ContentMeta(), @@ -38,7 +38,7 @@ export const defaultContentPageLayout: PageLayout = { // components for pages that display lists of pages (e.g. tags or folders) export const defaultListPageLayout: PageLayout = { - pageHeader: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()], + beforeBody: [Component.Breadcrumbs(), Component.ArticleTitle(), Component.ContentMeta()], left: [ Component.PageTitle(), Component.MobileOnly(Component.Spacer()), diff --git a/quartz/cfg.ts b/quartz/cfg.ts index efcae9021..135f58499 100644 --- a/quartz/cfg.ts +++ b/quartz/cfg.ts @@ -85,7 +85,7 @@ export interface QuartzConfig { export interface FullPageLayout { head: QuartzComponent header: QuartzComponent[] - pageHeader: QuartzComponent[] + beforeBody: QuartzComponent[] pageBody: QuartzComponent afterBody: QuartzComponent[] left: QuartzComponent[] @@ -93,5 +93,5 @@ export interface FullPageLayout { footer: QuartzComponent } -export type PageLayout = Pick +export type PageLayout = Pick export type SharedLayout = Pick diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 4e03ce3e8..8f5ec4b11 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -12,7 +12,7 @@ import { i18n } from "../i18n" interface RenderComponents { head: QuartzComponent header: QuartzComponent[] - pageHeader: QuartzComponent[] + beforeBody: QuartzComponent[] pageBody: QuartzComponent afterBody: QuartzComponent[] left: QuartzComponent[] @@ -191,7 +191,7 @@ export function renderPage( const { head: Head, header, - pageHeader, + beforeBody, pageBody: Content, afterBody, left, @@ -233,7 +233,7 @@ export function renderPage(
- {pageHeader.map((BodyComponent) => ( + {beforeBody.map((BodyComponent) => ( ))}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx index b81d01196..e4605cfcd 100644 --- a/quartz/plugins/emitters/404.tsx +++ b/quartz/plugins/emitters/404.tsx @@ -15,7 +15,7 @@ export const NotFoundPage: QuartzEmitterPlugin = () => { const opts: FullPageLayout = { ...sharedPageComponents, pageBody: NotFound(), - pageHeader: [], + beforeBody: [], left: [], right: [], } diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index 7fc5880fd..2ac132147 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -59,7 +59,7 @@ export const ContentPage: QuartzEmitterPlugin> = (userOp ...userOpts, } - const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() @@ -71,7 +71,7 @@ export const ContentPage: QuartzEmitterPlugin> = (userOp Header, Body, ...header, - ...pageHeader, + ...beforeBody, pageBody, ...afterBody, ...left, diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx index 28e797036..b6d860272 100644 --- a/quartz/plugins/emitters/folderPage.tsx +++ b/quartz/plugins/emitters/folderPage.tsx @@ -33,7 +33,7 @@ export const FolderPage: QuartzEmitterPlugin> = (user ...userOpts, } - const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() @@ -45,7 +45,7 @@ export const FolderPage: QuartzEmitterPlugin> = (user Header, Body, ...header, - ...pageHeader, + ...beforeBody, pageBody, ...afterBody, ...left, diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx index 651bafa53..066d4ec26 100644 --- a/quartz/plugins/emitters/tagPage.tsx +++ b/quartz/plugins/emitters/tagPage.tsx @@ -30,7 +30,7 @@ export const TagPage: QuartzEmitterPlugin> = (userOpts) ...userOpts, } - const { head: Head, header, pageHeader, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() @@ -42,7 +42,7 @@ export const TagPage: QuartzEmitterPlugin> = (userOpts) Header, Body, ...header, - ...pageHeader, + ...beforeBody, pageBody, ...afterBody, ...left, From 883f4e60684988a9ca6deeb79dc0ea618f3b450f Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Sat, 7 Dec 2024 18:28:05 +0300 Subject: [PATCH 7/7] feat(layout): wrap main around content --- quartz/components/Body.tsx | 2 +- quartz/components/renderPage.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/quartz/components/Body.tsx b/quartz/components/Body.tsx index b2060f8ed..96b627883 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
{children}
+ return
{children}
} Body.afterDOMLoaded = clipboardScript diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 8f5ec4b11..e87edd39d 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -238,7 +238,9 @@ export function renderPage( ))}
- +
+ +
{afterBody.map((BodyComponent) => (