| | |
|---|
| | | import { QuartzComponentConstructor, QuartzComponentProps } from "../types" |
|---|
| | | import { Fragment, jsx, jsxs } from 'preact/jsx-runtime' |
|---|
| | | import { toJsxRuntime } from "hast-util-to-jsx-runtime" |
|---|
| | | import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types" |
|---|
| | | import path from "path" |
|---|
| | | |
|---|
| | | import style from '../styles/listPage.scss' |
|---|
| | | import { PageList } from "../PageList" |
|---|
| | | import { canonicalizeServer } from "../../path" |
|---|
| | | import style from "../styles/listPage.scss" |
|---|
| | | import { PageList, SortFn } from "../PageList" |
|---|
| | | import { stripSlashes, simplifySlug } from "../../util/path" |
|---|
| | | import { Root } from "hast" |
|---|
| | | import { htmlToJsx } from "../../util/jsx" |
|---|
| | | import { i18n } from "../../i18n" |
|---|
| | | |
|---|
| | | function FolderContent(props: QuartzComponentProps) { |
|---|
| | | const { tree, fileData, allFiles } = props |
|---|
| | | const folderSlug = canonicalizeServer(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 class="popover-hint"> |
|---|
| | | <article>{content}</article> |
|---|
| | | <p>{allPagesInFolder.length} items under this folder.</p> |
|---|
| | | <div> |
|---|
| | | <PageList {...listProps} /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | interface FolderContentOptions { |
|---|
| | | /** |
|---|
| | | * Whether to display number of folders |
|---|
| | | */ |
|---|
| | | showFolderCount: boolean |
|---|
| | | sort?: SortFn |
|---|
| | | } |
|---|
| | | |
|---|
| | | FolderContent.css = style + PageList.css |
|---|
| | | export default (() => FolderContent) satisfies QuartzComponentConstructor |
|---|
| | | const defaultOptions: FolderContentOptions = { |
|---|
| | | showFolderCount: true, |
|---|
| | | } |
|---|
| | | |
|---|
| | | export default ((opts?: Partial<FolderContentOptions>) => { |
|---|
| | | const options: FolderContentOptions = { ...defaultOptions, ...opts } |
|---|
| | | |
|---|
| | | const FolderContent: QuartzComponent = (props: QuartzComponentProps) => { |
|---|
| | | const { tree, fileData, allFiles, cfg } = props |
|---|
| | | const folderSlug = stripSlashes(simplifySlug(fileData.slug!)) |
|---|
| | | const allPagesInFolder = allFiles.filter((file) => { |
|---|
| | | const fileSlug = stripSlashes(simplifySlug(file.slug!)) |
|---|
| | | const prefixed = fileSlug.startsWith(folderSlug) && fileSlug !== 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 cssClasses: string[] = fileData.frontmatter?.cssclasses ?? [] |
|---|
| | | const classes = ["popover-hint", ...cssClasses].join(" ") |
|---|
| | | const listProps = { |
|---|
| | | ...props, |
|---|
| | | sort: options.sort, |
|---|
| | | allFiles: allPagesInFolder, |
|---|
| | | } |
|---|
| | | |
|---|
| | | const content = |
|---|
| | | (tree as Root).children.length === 0 |
|---|
| | | ? fileData.description |
|---|
| | | : htmlToJsx(fileData.filePath!, tree) |
|---|
| | | |
|---|
| | | return ( |
|---|
| | | <div class={classes}> |
|---|
| | | <article>{content}</article> |
|---|
| | | <div class="page-listing"> |
|---|
| | | {options.showFolderCount && ( |
|---|
| | | <p> |
|---|
| | | {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({ |
|---|
| | | count: allPagesInFolder.length, |
|---|
| | | })} |
|---|
| | | </p> |
|---|
| | | )} |
|---|
| | | <div> |
|---|
| | | <PageList {...listProps} /> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | ) |
|---|
| | | } |
|---|
| | | |
|---|
| | | FolderContent.css = style + PageList.css |
|---|
| | | return FolderContent |
|---|
| | | }) satisfies QuartzComponentConstructor |
|---|
