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 67cfa8dd4..436ed91fe 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 890755bbc..50507461d 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>