From 16adbd30114bfcc1aaefa851a5a1786787f97a10 Mon Sep 17 00:00:00 2001
From: Mara-Li <lili.simonetti@outlook.fr>
Date: Mon, 29 Jan 2024 07:12:48 +0100
Subject: [PATCH] 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>
---
quartz/components/pages/FolderContent.tsx | 5 +++--
quartz/components/pages/TagContent.tsx | 8 ++++----
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
index 67cfa8d..436ed91 100644
--- a/quartz/components/pages/FolderContent.tsx
+++ b/quartz/components/pages/FolderContent.tsx
@@ -33,7 +33,8 @@ export default ((opts?: Partial<FolderContentOptions>) => {
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,
allFiles: allPagesInFolder,
@@ -45,7 +46,7 @@ export default ((opts?: Partial<FolderContentOptions>) => {
: htmlToJsx(fileData.filePath!, tree)
return (
- <div class="popover-hint">
+ <div class={classes}>
<article>
<p>{content}</p>
</article>
diff --git a/quartz/components/pages/TagContent.tsx b/quartz/components/pages/TagContent.tsx
index 890755b..5050746 100644
--- a/quartz/components/pages/TagContent.tsx
+++ b/quartz/components/pages/TagContent.tsx
@@ -26,7 +26,8 @@ function TagContent(props: QuartzComponentProps) {
(tree as Root).children.length === 0
? fileData.description
: htmlToJsx(fileData.filePath!, tree)
-
+ const cssClasses: string[] = fileData.frontmatter?.cssclasses ?? []
+ const classes = ["popover-hint", ...cssClasses].join(" ")
if (tag === "/") {
const tags = [
...new Set(
@@ -37,9 +38,8 @@ function TagContent(props: QuartzComponentProps) {
for (const tag of tags) {
tagItemMap.set(tag, allPagesWithTag(tag))
}
-
return (
- <div class="popover-hint">
+ <div class={classes}>
<article>
<p>{content}</p>
</article>
@@ -81,7 +81,7 @@ function TagContent(props: QuartzComponentProps) {
}
return (
- <div class="popover-hint">
+ <div class={classes}>
<article>{content}</article>
<p>{pluralize(pages.length, "item")} with this tag.</p>
<div>