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>
Darakuu · Jan 29, 2024 · b7152f7 · b7152f7
1 parent 603c181
commit b7152f7
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/quartz/components/pages/FolderContent.tsx b/quartz/components/pages/FolderContent.tsx
@@ -50,11 +50,13 @@ export default ((opts?: Partial<FolderContentOptions>) => {
         <article>
           <p>{content}</p>
         </article>
-        {options.showFolderCount && (
-          <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
-        )}
-        <div>
-          <PageList {...listProps} />
+        <div class="page-listing">
+          {options.showFolderCount && (
+            <p>{pluralize(allPagesInFolder.length, "item")} under this folder.</p>
+          )}
+          <div>
+            <PageList {...listProps} />
+          </div>
         </div>
       </div>
     )

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