From 247625c4f538a113617e553e1ed3c74d94545e62 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Wed, 10 Jul 2024 02:09:31 +0000
Subject: [PATCH] feat(layout): add afterBody
---
quartz/components/Footer.tsx | 1
quartz/styles/base.scss | 12 +++++-
docs/layout.md | 1
quartz/plugins/emitters/tagPage.tsx | 15 ++++++-
quartz/plugins/transformers/ofm.ts | 1
quartz/cfg.ts | 3 +
quartz/components/renderPage.tsx | 8 ++++
quartz/plugins/emitters/folderPage.tsx | 15 ++++++-
quartz/plugins/emitters/contentPage.tsx | 15 ++++++-
docs/images/quartz layout.png | 0
docs/advanced/making plugins.md | 4 +-
quartz.layout.ts | 1
12 files changed, 63 insertions(+), 13 deletions(-)
diff --git a/docs/advanced/making plugins.md b/docs/advanced/making plugins.md
index b2bacf0..0ba2968 100644
--- a/docs/advanced/making plugins.md
+++ b/docs/advanced/making plugins.md
@@ -260,11 +260,11 @@
...defaultContentPageLayout,
pageBody: Content(),
}
- const { head, header, beforeBody, pageBody, left, right, footer } = layout
+ const { head, header, beforeBody, pageBody, afterBody, left, right, footer } = layout
return {
name: "ContentPage",
getQuartzComponents() {
- return [head, ...header, ...beforeBody, pageBody, ...left, ...right, footer]
+ return [head, ...header, ...beforeBody, pageBody, ...afterBody, ...left, ...right, footer]
},
async emit(ctx, content, resources, emit): Promise<FilePath[]> {
const cfg = ctx.cfg.configuration
diff --git a/docs/images/quartz layout.png b/docs/images/quartz layout.png
index 03435f7..71ef3ac 100644
--- a/docs/images/quartz layout.png
+++ b/docs/images/quartz layout.png
Binary files differ
diff --git a/docs/layout.md b/docs/layout.md
index 3fabeb7..686b2f2 100644
--- a/docs/layout.md
+++ b/docs/layout.md
@@ -12,6 +12,7 @@
header: QuartzComponent[] // laid out horizontally
beforeBody: QuartzComponent[] // laid out vertically
pageBody: QuartzComponent // single component
+ afterBody: QuartzComponent[] // laid out vertically
left: QuartzComponent[] // vertical on desktop, horizontal on mobile
right: QuartzComponent[] // vertical on desktop, horizontal on mobile
footer: QuartzComponent // single component
diff --git a/quartz.layout.ts b/quartz.layout.ts
index b5a1639..4a78256 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -5,6 +5,7 @@
export const sharedPageComponents: SharedLayout = {
head: Component.Head(),
header: [],
+ afterBody: [],
footer: Component.Footer({
links: {
GitHub: "https://github.com/jackyzha0/quartz",
diff --git a/quartz/cfg.ts b/quartz/cfg.ts
index 574ceb1..0c344d3 100644
--- a/quartz/cfg.ts
+++ b/quartz/cfg.ts
@@ -77,10 +77,11 @@
header: QuartzComponent[]
beforeBody: QuartzComponent[]
pageBody: QuartzComponent
+ afterBody: QuartzComponent[]
left: QuartzComponent[]
right: QuartzComponent[]
footer: QuartzComponent
}
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
-export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">
+export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">
diff --git a/quartz/components/Footer.tsx b/quartz/components/Footer.tsx
index 076c378..cff28cb 100644
--- a/quartz/components/Footer.tsx
+++ b/quartz/components/Footer.tsx
@@ -13,7 +13,6 @@
const links = opts?.links ?? []
return (
<footer class={`${displayClass ?? ""}`}>
- <hr />
<p>
{i18n(cfg.locale).components.footer.createdWith}{" "}
<a href="https://quartz.jzhao.xyz/">Quartz v{version}</a> © {year}
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
index 251a53f..ec5124f 100644
--- a/quartz/components/renderPage.tsx
+++ b/quartz/components/renderPage.tsx
@@ -14,6 +14,7 @@
header: QuartzComponent[]
beforeBody: QuartzComponent[]
pageBody: QuartzComponent
+ afterBody: QuartzComponent[]
left: QuartzComponent[]
right: QuartzComponent[]
footer: QuartzComponent
@@ -187,6 +188,7 @@
header,
beforeBody,
pageBody: Content,
+ afterBody,
left,
right,
footer: Footer,
@@ -232,6 +234,12 @@
</div>
</div>
<Content {...componentData} />
+ <hr />
+ <div class="page-footer">
+ {afterBody.map((BodyComponent) => (
+ <BodyComponent {...componentData} />
+ ))}
+ </div>
</div>
{RightComponent}
</Body>
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
index f493802..2ac1321 100644
--- a/quartz/plugins/emitters/contentPage.tsx
+++ b/quartz/plugins/emitters/contentPage.tsx
@@ -59,14 +59,25 @@
...userOpts,
}
- const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+ const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
const Header = HeaderConstructor()
const Body = BodyConstructor()
return {
name: "ContentPage",
getQuartzComponents() {
- return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+ return [
+ Head,
+ Header,
+ Body,
+ ...header,
+ ...beforeBody,
+ pageBody,
+ ...afterBody,
+ ...left,
+ ...right,
+ Footer,
+ ]
},
async getDependencyGraph(ctx, content, _resources) {
const graph = new DepGraph<FilePath>()
diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx
index cd154f4..7eebb21 100644
--- a/quartz/plugins/emitters/folderPage.tsx
+++ b/quartz/plugins/emitters/folderPage.tsx
@@ -33,14 +33,25 @@
...userOpts,
}
- const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+ const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
const Header = HeaderConstructor()
const Body = BodyConstructor()
return {
name: "FolderPage",
getQuartzComponents() {
- return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+ return [
+ Head,
+ Header,
+ Body,
+ ...header,
+ ...beforeBody,
+ pageBody,
+ ...afterBody,
+ ...left,
+ ...right,
+ Footer,
+ ]
},
async getDependencyGraph(_ctx, content, _resources) {
// Example graph:
diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx
index 9b727eb..066d4ec 100644
--- a/quartz/plugins/emitters/tagPage.tsx
+++ b/quartz/plugins/emitters/tagPage.tsx
@@ -30,14 +30,25 @@
...userOpts,
}
- const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
+ const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
const Header = HeaderConstructor()
const Body = BodyConstructor()
return {
name: "TagPage",
getQuartzComponents() {
- return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
+ return [
+ Head,
+ Header,
+ Body,
+ ...header,
+ ...beforeBody,
+ pageBody,
+ ...afterBody,
+ ...left,
+ ...right,
+ Footer,
+ ]
},
async getDependencyGraph(ctx, content, _resources) {
const graph = new DepGraph<FilePath>()
diff --git a/quartz/plugins/transformers/ofm.ts b/quartz/plugins/transformers/ofm.ts
index 8fbfd37..5c0a2f2 100644
--- a/quartz/plugins/transformers/ofm.ts
+++ b/quartz/plugins/transformers/ofm.ts
@@ -2,7 +2,6 @@
import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
import { Element, Literal, Root as HtmlRoot } from "hast"
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
-import { slug as slugAnchor } from "github-slugger"
import rehypeRaw from "rehype-raw"
import { SKIP, visit } from "unist-util-visit"
import path from "path"
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 52cd102..8e791db 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -201,11 +201,19 @@
}
}
- & .page-header {
+ & .page-header,
+ & .page-footer {
width: $pageWidth;
- margin: $topSpacing auto 0 auto;
+ margin-top: 1rem;
+
@media all and (max-width: $fullPageWidth) {
width: initial;
+ }
+ }
+
+ & .page-header {
+ margin: $topSpacing auto 0 auto;
+ @media all and (max-width: $fullPageWidth) {
margin-top: 2rem;
}
}
--
Gitblit v1.10.0