toc
This commit is contained in:
		
							parent
							
								
									3a29f4c86e
								
							
						
					
					
						commit
						b8c011410d
					
				
					 21 changed files with 233 additions and 66 deletions
				
			
		| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -6,3 +6,4 @@ export { Description } from './description'
 | 
			
		|||
export { ResolveLinks } from './links'
 | 
			
		||||
export { ObsidianFlavoredMarkdown } from './ofm'
 | 
			
		||||
export { SyntaxHighlighting } from './syntax'
 | 
			
		||||
export { TableOfContents } from './toc'
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -16,7 +16,7 @@ export class CreatedModifiedDate extends QuartzTransformerPlugin {
 | 
			
		|||
  name = "CreatedModifiedDate"
 | 
			
		||||
  opts: Options
 | 
			
		||||
 | 
			
		||||
  constructor(opts?: Options) {
 | 
			
		||||
  constructor(opts?: Partial<Options>) {
 | 
			
		||||
    super()
 | 
			
		||||
    this.opts = {
 | 
			
		||||
      ...defaultOptions,
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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 }
 | 
			
		||||
  }
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
							
								
								
									
										72
									
								
								quartz/plugins/transformers/toc.ts
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										72
									
								
								quartz/plugins/transformers/toc.ts
									
										
									
									
									
										Normal 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[]
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue