fix: cssclasses was not applied on folder note (index) (#749)

* docs: improve first-time git setup

* fix: cssClasses was not applied on index page

* refactor: remove vscode files

* fix: format

* fix: cssClasses should be applied on the entire div, not only the article

* feat: support cssClasses for tag-listing

---------

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Mara-Li 2024-01-29 07:12:48 +01:00 committed by GitHub
parent b014d060f3
commit 16adbd3011
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 6 deletions

View file

@ -33,7 +33,8 @@ export default ((opts?: Partial<FolderContentOptions>) => {
const isDirectChild = fileParts.length === folderParts.length + 1 const isDirectChild = fileParts.length === folderParts.length + 1
return prefixed && isDirectChild return prefixed && isDirectChild
}) })
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
const classes = ["popover-hint", ...cssClasses].join(" ")
const listProps = { const listProps = {
...props, ...props,
allFiles: allPagesInFolder, allFiles: allPagesInFolder,
@ -45,7 +46,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
: htmlToJsx(fileData.filePath!, tree) : htmlToJsx(fileData.filePath!, tree)
return ( return (
<div class="popover-hint"> <div class={classes}>
<article> <article>
<p>{content}</p> <p>{content}</p>
</article> </article>

View file

@ -26,7 +26,8 @@ function TagContent(props: QuartzComponentProps) {
(tree as Root).children.length === 0 (tree as Root).children.length === 0
? fileData.description ? fileData.description
: htmlToJsx(fileData.filePath!, tree) : htmlToJsx(fileData.filePath!, tree)
const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
const classes = ["popover-hint", ...cssClasses].join(" ")
if (tag === "/") { if (tag === "/") {
const tags = [ const tags = [
...new Set( ...new Set(
@ -37,9 +38,8 @@ function TagContent(props: QuartzComponentProps) {
for (const tag of tags) { for (const tag of tags) {
tagItemMap.set(tag, allPagesWithTag(tag)) tagItemMap.set(tag, allPagesWithTag(tag))
} }
return ( return (
<div class="popover-hint"> <div class={classes}>
<article> <article>
<p>{content}</p> <p>{content}</p>
</article> </article>
@ -81,7 +81,7 @@ function TagContent(props: QuartzComponentProps) {
} }
return ( return (
<div class="popover-hint"> <div class={classes}>
<article>{content}</article> <article>{content}</article>
<p>{pluralize(pages.length, "item")} with this tag.</p> <p>{pluralize(pages.length, "item")} with this tag.</p>
<div> <div>