This commit is contained in:
Jacky Zhao 2023-06-09 23:06:02 -07:00
parent 3a29f4c86e
commit b8c011410d
21 changed files with 233 additions and 66 deletions

View file

@ -1,19 +1,18 @@
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
import { StaticResources } from "../../resources"
import { EmitCallback, QuartzEmitterPlugin } from "../types"
import { ProcessedContent } from "../vfile"
import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { render } from "preact-render-to-string"
import { GlobalConfiguration } from "../../cfg"
import { QuartzComponent } from "../../components/types"
import { resolveToRoot } from "../../path"
import Header from "../../components/Header"
import { QuartzComponentProps } from "../../components/types"
import Body from "../../components/Body"
interface Options {
head: QuartzComponent
header: QuartzComponent[],
body: QuartzComponent
body: QuartzComponent[]
}
export class ContentPage extends QuartzEmitterPlugin {
@ -26,17 +25,14 @@ export class ContentPage extends QuartzEmitterPlugin {
}
getQuartzComponents(): QuartzComponent[] {
return [this.opts.head, Header, ...this.opts.header, this.opts.body]
return [this.opts.head, Header, ...this.opts.header, ...this.opts.body]
}
async emit(cfg: GlobalConfiguration, content: ProcessedContent[], resources: StaticResources, emit: EmitCallback): Promise<string[]> {
const fps: string[] = []
const { head: Head, header, body: Body } = this.opts
const { head: Head, header, body } = this.opts
for (const [tree, file] of content) {
// @ts-ignore (preact makes it angry)
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
const baseDir = resolveToRoot(file.data.slug!)
const pageResources: StaticResources = {
css: [baseDir + "/index.css", ...resources.css],
@ -51,7 +47,8 @@ export class ContentPage extends QuartzEmitterPlugin {
fileData: file.data,
externalResources: pageResources,
cfg,
children: [content]
children: [],
tree
}
const doc = <html>
@ -59,10 +56,10 @@ export class ContentPage extends QuartzEmitterPlugin {
<body>
<div id="quartz-root" class="page">
<Header {...componentData} >
{header.map(HeaderComponent => <HeaderComponent {...componentData}/>)}
{header.map(HeaderComponent => <HeaderComponent {...componentData} position="header" />)}
</Header>
<Body {...componentData}>
{content}
{body.map(BodyComponent => <BodyComponent {...componentData } position="body" />)}
</Body>
</div>
</body>

View file

@ -15,7 +15,7 @@ export class Description extends QuartzTransformerPlugin {
name = "Description"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}

View file

@ -17,7 +17,7 @@ export class FrontMatter extends QuartzTransformerPlugin {
name = "FrontMatter"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}

View file

@ -19,7 +19,7 @@ export class GitHubFlavoredMarkdown extends QuartzTransformerPlugin {
name = "GitHubFlavoredMarkdown"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}

View file

@ -6,3 +6,4 @@ export { Description } from './description'
export { ResolveLinks } from './links'
export { ObsidianFlavoredMarkdown } from './ofm'
export { SyntaxHighlighting } from './syntax'
export { TableOfContents } from './toc'

View file

@ -16,7 +16,7 @@ export class CreatedModifiedDate extends QuartzTransformerPlugin {
name = "CreatedModifiedDate"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = {
...defaultOptions,

View file

@ -21,7 +21,7 @@ export class ResolveLinks extends QuartzTransformerPlugin {
name = "LinkProcessing"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}

View file

@ -93,7 +93,7 @@ export class ObsidianFlavoredMarkdown extends QuartzTransformerPlugin {
name = "ObsidianFlavoredMarkdown"
opts: Options
constructor(opts?: Options) {
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}

View file

@ -0,0 +1,72 @@
import { PluggableList } from "unified"
import { QuartzTransformerPlugin } from "../types"
import { Root } from "mdast"
import { visit } from "unist-util-visit"
import { toString } from "mdast-util-to-string"
import { slugAnchor } from "../../path"
export interface Options {
maxDepth: 1 | 2 | 3 | 4 | 5 | 6,
minEntries: 1,
showByDefault: boolean
}
const defaultOptions: Options = {
maxDepth: 3,
minEntries: 1,
showByDefault: true,
}
interface TocEntry {
depth: number,
text: string,
slug: string
}
export class TableOfContents extends QuartzTransformerPlugin {
name = "TableOfContents"
opts: Options
constructor(opts?: Partial<Options>) {
super()
this.opts = { ...defaultOptions, ...opts }
}
markdownPlugins(): PluggableList {
return [() => {
return async (tree: Root, file) => {
const display = file.data.frontmatter?.enableToc ?? this.opts.showByDefault
if (display) {
const toc: TocEntry[] = []
let highestDepth: number = this.opts.maxDepth
visit(tree, 'heading', (node) => {
if (node.depth <= this.opts.maxDepth) {
const text = toString(node)
highestDepth = Math.min(highestDepth, node.depth)
toc.push({
depth: node.depth,
text,
slug: slugAnchor.slug(text)
})
}
})
if (toc.length > this.opts.minEntries) {
file.data.toc = toc.map(entry => ({ ...entry, depth: entry.depth - highestDepth }))
}
}
}
}]
}
htmlPlugins(): PluggableList {
return []
}
}
declare module 'vfile' {
interface DataMap {
toc: TocEntry[]
}
}