fix indexing causing main thread freeze, various polish

This commit is contained in:
Jacky Zhao 2023-07-04 10:08:32 -07:00
parent e0ebee5aa9
commit ab9da02c60
33 changed files with 255 additions and 141 deletions
quartz/components/pages

View file

@ -6,7 +6,7 @@ import path from "path"
import style from '../styles/listPage.scss'
import { PageList } from "../PageList"
function TagContent(props: QuartzComponentProps) {
function FolderContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props
const folderSlug = fileData.slug!
const allPagesInFolder = allFiles.filter(file => {
@ -25,13 +25,15 @@ function TagContent(props: QuartzComponentProps) {
// @ts-ignore
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div>
return <div class="popover-hint">
<article>{content}</article>
<hr/>
<p>{allPagesInFolder.length} items under this folder.</p>
<div>
<PageList {...listProps} />
</div>
</div>
}
TagContent.css = style + PageList.css
export default (() => TagContent) satisfies QuartzComponentConstructor
FolderContent.css = style + PageList.css
export default (() => FolderContent) satisfies QuartzComponentConstructor

View file

@ -3,13 +3,14 @@ import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
import style from '../styles/listPage.scss'
import { PageList } from "../PageList"
import { clientSideSlug } from "../../path"
function TagContent(props: QuartzComponentProps) {
const { tree, fileData, allFiles } = props
const slug = fileData.slug
if (slug?.startsWith("tags/")) {
const tag = slug.slice("tags/".length)
if (slug?.startsWith("tags/")) {
const tag = clientSideSlug(slug.slice("tags/".length))
const allPagesWithTag = allFiles.filter(file => (file.frontmatter?.tags ?? []).includes(tag))
const listProps = {
...props,
@ -18,8 +19,10 @@ function TagContent(props: QuartzComponentProps) {
// @ts-ignore
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
return <div>
return <div class="popover-hint">
<article>{content}</article>
<hr/>
<p>{allPagesWithTag.length} items with this tag.</p>
<div>
<PageList {...listProps} />
</div>