Jacky Zhao
2023-07-01 ba9f243728cab171f86b40b9d50db485af272a39
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
import path from "path"
 
import style from '../styles/listPage.scss'
import { PageList } from "../PageList"
 
function TagContent(props: QuartzComponentProps) {
  const { tree, fileData, allFiles } = props
  const folderSlug = fileData.slug!
  const allPagesInFolder = allFiles.filter(file => {
    const fileSlug = file.slug ?? ""
    const prefixed = fileSlug.startsWith(folderSlug)
    const folderParts = folderSlug.split(path.posix.sep)
    const fileParts = fileSlug.split(path.posix.sep)
    const isDirectChild = fileParts.length === folderParts.length + 1
    return prefixed && isDirectChild
  })
 
  const listProps = {
    ...props,
    allFiles: allPagesInFolder
  }
 
  // @ts-ignore
  const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
  return <div>
    <article>{content}</article>
    <div>
      <PageList {...listProps} /> 
    </div>
  </div>
}
 
TagContent.css = style + PageList.css
export default (() => TagContent) satisfies QuartzComponentConstructor