fix: fix invalid html output (#642)

Hydrophobefireman

2023-12-28 233d4b2f2c7dda62355382fb02760822c01e9ca2

fix: fix invalid html output (#642)

* fix: fix invalid html output

* fix: HTML structure w/ nested <li>

 quartz/components/Darkmode.tsx

@@ -18,7 +18,7 @@
          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 @@
          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>

 quartz/components/ExplorerNode.tsx

@@ -174,7 +174,7 @@
  }

  return (
    <li>
    <>
      {node.file ? (
        // Single file node
        <li key={node.file.slug}>
@@ -183,7 +183,7 @@
          </a>
        </li>
      ) : (
        <div>
        <li>
          {node.name !== "" && (
            // Node with entire folder
            // Render svg button + folder name, then children
@@ -214,7 +214,7 @@
                  </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 @@
              ))}
            </ul>
          </div>
        </div>
        </li>
      )}
    </li>
    </>
  )
}

 quartz/components/styles/explorer.scss

@@ -106,7 +106,7 @@
    align-items: center;
    font-family: var(--headerFont);

    & p {
    & span {
      font-size: 0.95rem;
      display: inline-block;
      color: var(--secondary);