last changes

flaviomoceri · flaviomoceri · commit 2b5ab82f1a3e · 2024-10-22T10:12:02.000+02:00
diff --git a/quartz/quartz/components/ExplorerNode.tsx b/quartz/quartz/components/ExplorerNode.tsx
@@ -177,31 +177,46 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
     <>
       {node.file ? (
         // Single file node
-        <li key={node.file.slug}>
-          <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
-            {node.displayName}
-          </a>
-        </li>
+        <>
+          {node.displayName === "Readme" && (
+            <div
+              style={{
+                border: "none",
+                borderTop: "0.1px solid white",
+                opacity: 0.2,
+                marginBottom: "20px",
+              }}
+            />
+          )}
+          <li key={node.file.slug}>
+            <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
+              {node.displayName}
+            </a>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="12"
+              height="12"
+              viewBox="5 8 14 8"
+              fill="none"
+              stroke="grey"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              class="folder-icon-fixed"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </li>
+        </>
       ) : (
         <li>
           {node.name !== "" && (
             // Node with entire folder
             // Render svg button + folder name, then children
-            <div class="folder-container">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="12"
-                height="12"
-                viewBox="5 8 14 8"
-                fill="none"
-                stroke="currentColor"
-                stroke-width="2"
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                class="folder-icon"
-              >
-                <polyline points="6 9 12 15 18 9"></polyline>
-              </svg>
+            <div
+              style={node.displayName === "Explore" ? { marginBottom: "10px" } : {}}
+              class="folder-container"
+            >
               {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
               <div key={node.name} data-folderpath={folderPath}>
                 {folderBehavior === "link" ? (
@@ -218,6 +233,20 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
                   </button>
                 )}
               </div>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="12"
+                height="12"
+                viewBox="5 8 14 8"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                class="folder-icon"
+              >
+                <polyline points="6 9 12 15 18 9"></polyline>
+              </svg>
             </div>
           )}
           {/* Recursively render children of folder */}
diff --git a/quartz/quartz/components/Head.tsx b/quartz/quartz/components/Head.tsx
@@ -20,7 +20,7 @@ export default (() => {
 
     return (
       <head>
-        <title>{title}</title>
+        <title>{title} | Pubky Core</title>
         <meta charSet="utf-8" />
         {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
           <>
diff --git a/quartz/quartz/components/styles/explorer.scss b/quartz/quartz/components/styles/explorer.scss
@@ -38,7 +38,7 @@ button#explorer {
   grid-template-rows: 1fr;
 }
 
-.folder-outer>ul {
+.folder-outer > ul {
   overflow: hidden;
 }
 
@@ -49,7 +49,7 @@ button#explorer {
   transition: max-height 0.35s ease;
   margin-top: 0rem;
 
-  &.collapsed>.overflow::after {
+  &.collapsed > .overflow::after {
     opacity: 0;
   }
 
@@ -70,7 +70,7 @@ button#explorer {
       transform 0.35s ease,
       opacity 0.2s ease;
 
-    & li>a {
+    & li > a {
       color: var(--dark);
       opacity: 0.5;
       pointer-events: all;
@@ -81,7 +81,7 @@ button#explorer {
 svg {
   pointer-events: all;
 
-  &>polyline {
+  & > polyline {
     pointer-events: none;
   }
 }
@@ -92,7 +92,7 @@ svg {
   align-items: center;
   user-select: none;
 
-  & div>a {
+  & div > a {
     color: var(--secondary);
     font-family: var(--headerFont);
     font-size: 0.95rem;
@@ -101,11 +101,11 @@ svg {
     display: inline-block;
   }
 
-  & div>a:hover {
+  & div > a:hover {
     color: var(--tertiary);
   }
 
-  & div>button {
+  & div > button {
     color: var(--dark);
     background-color: transparent;
     border: none;
@@ -132,14 +132,23 @@ svg {
 }
 
 .folder-icon {
-  margin-right: 5px;
+  margin-left: 0.5rem;
   color: var(--secondary);
   cursor: pointer;
   transition: transform 0.3s ease;
   backface-visibility: visible;
 }
 
-li:has(> .folder-outer:not(.open))>.folder-container>svg {
+.folder-icon-fixed {
+  margin-left: 0.5rem;
+  color: var(--secondary);
+  cursor: pointer;
+  transition: transform 0.3s ease;
+  backface-visibility: visible;
+  transform: rotate(-90deg);
+}
+
+li:has(> .folder-outer:not(.open)) > .folder-container > svg {
   transform: rotate(-90deg);
 }
 
@@ -156,4 +165,4 @@ li:has(> .folder-outer:not(.open))>.folder-container>svg {
   height: 4px;
   // remove default margin from li
   margin: 0;
-}
+}
