The Trans Directory
feat(layout): add afterBody
+63
-13
+2
-2
docs/advanced/making plugins.md
+2
-2
docs/advanced/making plugins.md
···
260
260
...defaultContentPageLayout,
261
261
pageBody: Content(),
262
262
}
263
-
const { head, header, beforeBody, pageBody, left, right, footer } = layout
263
+
const { head, header, beforeBody, pageBody, afterBody, left, right, footer } = layout
264
264
return {
265
265
name: "ContentPage",
266
266
getQuartzComponents() {
267
-
return [head, ...header, ...beforeBody, pageBody, ...left, ...right, footer]
267
+
return [head, ...header, ...beforeBody, pageBody, ...afterBody, ...left, ...right, footer]
268
268
},
269
269
async emit(ctx, content, resources, emit): Promise<FilePath[]> {
270
270
const cfg = ctx.cfg.configuration
docs/images/quartz layout.png
docs/images/quartz layout.png
This is a binary file and will not be displayed.
+1
docs/layout.md
+1
docs/layout.md
···
12
12
header: QuartzComponent[] // laid out horizontally
13
13
beforeBody: QuartzComponent[] // laid out vertically
14
14
pageBody: QuartzComponent // single component
15
+
afterBody: QuartzComponent[] // laid out vertically
15
16
left: QuartzComponent[] // vertical on desktop, horizontal on mobile
16
17
right: QuartzComponent[] // vertical on desktop, horizontal on mobile
17
18
footer: QuartzComponent // single component
+1
quartz.layout.ts
+1
quartz.layout.ts
+2
-1
quartz/cfg.ts
+2
-1
quartz/cfg.ts
···
77
77
header: QuartzComponent[]
78
78
beforeBody: QuartzComponent[]
79
79
pageBody: QuartzComponent
80
+
afterBody: QuartzComponent[]
80
81
left: QuartzComponent[]
81
82
right: QuartzComponent[]
82
83
footer: QuartzComponent
83
84
}
84
85
85
86
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
86
-
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer">
87
+
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody">
+8
quartz/components/renderPage.tsx
+8
quartz/components/renderPage.tsx
···
14
14
header: QuartzComponent[]
15
15
beforeBody: QuartzComponent[]
16
16
pageBody: QuartzComponent
17
+
afterBody: QuartzComponent[]
17
18
left: QuartzComponent[]
18
19
right: QuartzComponent[]
19
20
footer: QuartzComponent
···
187
188
header,
188
189
beforeBody,
189
190
pageBody: Content,
191
+
afterBody,
190
192
left,
191
193
right,
192
194
footer: Footer,
···
232
234
</div>
233
235
</div>
234
236
<Content {...componentData} />
237
+
<hr />
238
+
<div class="page-footer">
239
+
{afterBody.map((BodyComponent) => (
240
+
<BodyComponent {...componentData} />
241
+
))}
242
+
</div>
235
243
</div>
236
244
{RightComponent}
237
245
</Body>
+13
-2
quartz/plugins/emitters/contentPage.tsx
+13
-2
quartz/plugins/emitters/contentPage.tsx
···
59
59
...userOpts,
60
60
}
61
61
62
-
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
62
+
const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
63
63
const Header = HeaderConstructor()
64
64
const Body = BodyConstructor()
65
65
66
66
return {
67
67
name: "ContentPage",
68
68
getQuartzComponents() {
69
-
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
69
+
return [
70
+
Head,
71
+
Header,
72
+
Body,
73
+
...header,
74
+
...beforeBody,
75
+
pageBody,
76
+
...afterBody,
77
+
...left,
78
+
...right,
79
+
Footer,
80
+
]
70
81
},
71
82
async getDependencyGraph(ctx, content, _resources) {
72
83
const graph = new DepGraph<FilePath>()
+13
-2
quartz/plugins/emitters/folderPage.tsx
+13
-2
quartz/plugins/emitters/folderPage.tsx
···
33
33
...userOpts,
34
34
}
35
35
36
-
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
36
+
const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
37
37
const Header = HeaderConstructor()
38
38
const Body = BodyConstructor()
39
39
40
40
return {
41
41
name: "FolderPage",
42
42
getQuartzComponents() {
43
-
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
43
+
return [
44
+
Head,
45
+
Header,
46
+
Body,
47
+
...header,
48
+
...beforeBody,
49
+
pageBody,
50
+
...afterBody,
51
+
...left,
52
+
...right,
53
+
Footer,
54
+
]
44
55
},
45
56
async getDependencyGraph(_ctx, content, _resources) {
46
57
// Example graph:
+13
-2
quartz/plugins/emitters/tagPage.tsx
+13
-2
quartz/plugins/emitters/tagPage.tsx
···
30
30
...userOpts,
31
31
}
32
32
33
-
const { head: Head, header, beforeBody, pageBody, left, right, footer: Footer } = opts
33
+
const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
34
34
const Header = HeaderConstructor()
35
35
const Body = BodyConstructor()
36
36
37
37
return {
38
38
name: "TagPage",
39
39
getQuartzComponents() {
40
-
return [Head, Header, Body, ...header, ...beforeBody, pageBody, ...left, ...right, Footer]
40
+
return [
41
+
Head,
42
+
Header,
43
+
Body,
44
+
...header,
45
+
...beforeBody,
46
+
pageBody,
47
+
...afterBody,
48
+
...left,
49
+
...right,
50
+
Footer,
51
+
]
41
52
},
42
53
async getDependencyGraph(ctx, content, _resources) {
43
54
const graph = new DepGraph<FilePath>()
-1
quartz/plugins/transformers/ofm.ts
-1
quartz/plugins/transformers/ofm.ts
···
2
2
import { Root, Html, BlockContent, DefinitionContent, Paragraph, Code } from "mdast"
3
3
import { Element, Literal, Root as HtmlRoot } from "hast"
4
4
import { ReplaceFunction, findAndReplace as mdastFindReplace } from "mdast-util-find-and-replace"
5
-
import { slug as slugAnchor } from "github-slugger"
6
5
import rehypeRaw from "rehype-raw"
7
6
import { SKIP, visit } from "unist-util-visit"
8
7
import path from "path"
+10
-2
quartz/styles/base.scss
+10
-2
quartz/styles/base.scss
···
201
201
}
202
202
}
203
203
204
-
& .page-header {
204
+
& .page-header,
205
+
& .page-footer {
205
206
width: $pageWidth;
206
-
margin: $topSpacing auto 0 auto;
207
+
margin-top: 1rem;
208
+
207
209
@media all and (max-width: $fullPageWidth) {
208
210
width: initial;
211
+
}
212
+
}
213
+
214
+
& .page-header {
215
+
margin: $topSpacing auto 0 auto;
216
+
@media all and (max-width: $fullPageWidth) {
209
217
margin-top: 2rem;
210
218
}
211
219
}