From 233d4b2f2c7dda62355382fb02760822c01e9ca2 Mon Sep 17 00:00:00 2001
From: Hydrophobefireman <bhavesh.pareek36@gmail.com>
Date: Thu, 28 Dec 2023 05:20:07 -0500
Subject: [PATCH] fix: fix invalid html output (#642)

* fix: fix invalid html output

* fix: HTML structure w/ nested <li>
---
 quartz/components/Darkmode.tsx         |  4 ++--
 quartz/components/ExplorerNode.tsx     | 10 +++++-----
 quartz/components/styles/explorer.scss |  2 +-
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx
index a668c5b9..f1a7d080 100644
--- a/quartz/components/Darkmode.tsx
+++ b/quartz/components/Darkmode.tsx
@@ -18,7 +18,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           x="0px"
           y="0px"
           viewBox="0 0 35 35"
-          style="enable-background:new 0 0 35 35;"
+          style="enable-background:new 0 0 35 35"
           xmlSpace="preserve"
         >
           <title>Light mode</title>
@@ -34,7 +34,7 @@ function Darkmode({ displayClass }: QuartzComponentProps) {
           x="0px"
           y="0px"
           viewBox="0 0 100 100"
-          style="enable-background='new 0 0 100 100'"
+          style="enable-background:new 0 0 100 100"
           xmlSpace="preserve"
         >
           <title>Dark mode</title>
diff --git a/quartz/components/ExplorerNode.tsx b/quartz/components/ExplorerNode.tsx
index 118f25b6..60966b3b 100644
--- a/quartz/components/ExplorerNode.tsx
+++ b/quartz/components/ExplorerNode.tsx
@@ -174,7 +174,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
   }
 
   return (
-    <li>
+    <>
       {node.file ? (
         // Single file node
         <li key={node.file.slug}>
@@ -183,7 +183,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
           </a>
         </li>
       ) : (
-        <div>
+        <li>
           {node.name !== "" && (
             // Node with entire folder
             // Render svg button + folder name, then children
@@ -214,7 +214,7 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                   </a>
                 ) : (
                   <button class="folder-button">
-                    <p class="folder-title">{node.displayName}</p>
+                    <span class="folder-title">{node.displayName}</span>
                   </button>
                 )}
               </div>
@@ -241,8 +241,8 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
               ))}
             </ul>
           </div>
-        </div>
+        </li>
       )}
-    </li>
+    </>
   )
 }
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 28e9f9bb..ff046a66 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -106,7 +106,7 @@ svg {
     align-items: center;
     font-family: var(--headerFont);
 
-    & p {
+    & span {
       font-size: 0.95rem;
       display: inline-block;
       color: var(--secondary);