feat: div that encapsulate PageList component (#750)

* feat: div that encapsulate PageList component

* change class to follow review

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* apply page-listing div to TagContent

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Mara-Li 2024-01-29 07:52:04 +01:00 committed by GitHub
parent 603c181ad2
commit b7152f743b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 13 deletions

View file

@ -50,6 +50,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
<article> <article>
<p>{content}</p> <p>{content}</p>
</article> </article>
<div class="page-listing">
{options.showFolderCount && ( {options.showFolderCount && (
<p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p> <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
)} )}
@ -57,6 +58,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
<PageList {...listProps} /> <PageList {...listProps} />
</div> </div>
</div> </div>
</div>
) )
} }

View file

@ -62,12 +62,14 @@ function TagContent(props: QuartzComponentProps) {
</a> </a>
</h2> </h2>
{content && <p>{content}</p>} {content && <p>{content}</p>}
<div class="page-listing">
<p> <p>
{pluralize(pages.length, "item")} with this tag.{" "} {pluralize(pages.length, "item")} with this tag.{" "}
{pages.length > numPages && `Showing first ${numPages}.`} {pages.length > numPages && `Showing first ${numPages}.`}
</p> </p>
<PageList limit={numPages} {...listProps} /> <PageList limit={numPages} {...listProps} />
</div> </div>
</div>
) )
})} })}
</div> </div>
@ -83,11 +85,13 @@ function TagContent(props: QuartzComponentProps) {
return ( return (
<div class={classes}> <div class={classes}>
<article>{content}</article> <article>{content}</article>
<div class="page-listing">
<p>{pluralize(pages.length, "item")} with this tag.</p> <p>{pluralize(pages.length, "item")} with this tag.</p>
<div> <div>
<PageList {...listProps} /> <PageList {...listProps} />
</div> </div>
</div> </div>
</div>
) )
} }
} }