aljaz/pubky-knowledge-base
1
0
Fork 0
mirror of https://github.com/aljazceru/pubky-knowledge-base.git synced 2025-12-17 22:04:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

last changes

Browse Source
This commit is contained in:
flaviomoceri
2024-10-22 10:12:02 +02:00
parent f4436a1fcb
commit 2b5ab82f1a
3 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
quartz/quartz/components/ExplorerNode.tsx
View File

@@ -177,31 +177,46 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
<> <>
{node.file ? ( {node.file ? (
// Single file node // Single file node
<>
{node.displayName === "Readme" && (
<div
style={{
border: "none",
borderTop: "0.1px solid white",
opacity: 0.2,
marginBottom: "20px",
}}
/>
)}
<li key={node.file.slug}> <li key={node.file.slug}>
<a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}> <a href={resolveRelative(fileData.slug!, node.file.slug!)} data-for={node.file.slug}>
{node.displayName} {node.displayName}
</a> </a>
</li>
) : (
<li>
{node.name !== "" && (
// Node with entire folder
// Render svg button + folder name, then children
<div class="folder-container">
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="12" width="12"
height="12" height="12"
viewBox="5 8 14 8" viewBox="5 8 14 8"
fill="none" fill="none"
stroke="currentColor" stroke="grey"
stroke-width="2" stroke-width="2"
stroke-linecap="round" stroke-linecap="round"
stroke-linejoin="round" stroke-linejoin="round"
class="folder-icon" class="folder-icon-fixed"
> >
<polyline points="6 9 12 15 18 9"></polyline> <polyline points="6 9 12 15 18 9"></polyline>
</svg> </svg>
</li>
</>
) : (
<li>
{node.name !== "" && (
// Node with entire folder
// Render svg button + folder name, then children
<div
style={node.displayName === "Explore" ? { marginBottom: "10px" } : {}}
class="folder-container"
>
{/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */} {/* render <a> tag if folderBehavior is "link", otherwise render <button> with collapse click event */}
<div key={node.name} data-folderpath={folderPath}> <div key={node.name} data-folderpath={folderPath}>
{folderBehavior === "link" ? ( {folderBehavior === "link" ? (
@@ -218,6 +233,20 @@ export function ExplorerNode({ node, opts, fullPath, fileData }: ExplorerNodePro
</button> </button>
)} )}
</div> </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> </div>
)} )}
{/* Recursively render children of folder */} {/* Recursively render children of folder */}

2
quartz/quartz/components/Head.tsx
View File

@@ -20,7 +20,7 @@ export default (() => {
return ( return (
<head> <head>
<title>{title}</title> <title>{title} | Pubky Core</title>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
{cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && ( {cfg.theme.cdnCaching && cfg.theme.fontOrigin === "googleFonts" && (
<> <>

27
quartz/quartz/components/styles/explorer.scss
View File

@@ -38,7 +38,7 @@ button#explorer {
grid-template-rows: 1fr; grid-template-rows: 1fr;
} }
.folder-outer>ul { .folder-outer > ul {
overflow: hidden; overflow: hidden;
} }
@@ -49,7 +49,7 @@ button#explorer {
transition: max-height 0.35s ease; transition: max-height 0.35s ease;
margin-top: 0rem; margin-top: 0rem;
&.collapsed>.overflow::after { &.collapsed > .overflow::after {
opacity: 0; opacity: 0;
} }
@@ -70,7 +70,7 @@ button#explorer {
transform 0.35s ease, transform 0.35s ease,
opacity 0.2s ease; opacity 0.2s ease;
& li>a { & li > a {
color: var(--dark); color: var(--dark);
opacity: 0.5; opacity: 0.5;
pointer-events: all; pointer-events: all;
@@ -81,7 +81,7 @@ button#explorer {
svg { svg {
pointer-events: all; pointer-events: all;
&>polyline { & > polyline {
pointer-events: none; pointer-events: none;
} }
} }
@@ -92,7 +92,7 @@ svg {
align-items: center; align-items: center;
user-select: none; user-select: none;
& div>a { & div > a {
color: var(--secondary); color: var(--secondary);
font-family: var(--headerFont); font-family: var(--headerFont);
font-size: 0.95rem; font-size: 0.95rem;
@@ -101,11 +101,11 @@ svg {
display: inline-block; display: inline-block;
} }
& div>a:hover { & div > a:hover {
color: var(--tertiary); color: var(--tertiary);
} }
& div>button { & div > button {
color: var(--dark); color: var(--dark);
background-color: transparent; background-color: transparent;
border: none; border: none;
@@ -132,14 +132,23 @@ svg {
} }
.folder-icon { .folder-icon {
margin-right: 5px; margin-left: 0.5rem;
color: var(--secondary); color: var(--secondary);
cursor: pointer; cursor: pointer;
transition: transform 0.3s ease; transition: transform 0.3s ease;
backface-visibility: visible; 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); transform: rotate(-90deg);
} }