smyalygames/quartz
Template
1
0
Fork 0
mirror of https://github.com/jackyzha0/quartz.git synced 2025-05-18 14:34:23 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

add highlight class

Browse Source
This commit is contained in:
Jacky Zhao 2025-03-09 09:20:35 -07:00
parent 50efa14bd2
commit 2802aa91f4
4 changed files with 46 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/advanced/creating components.md
View File

@ -167,6 +167,9 @@ You can also add the equivalent of a `beforeunload` event for [[SPA Routing]] vi
document.addEventListener("prenav", () => { document.addEventListener("prenav", () => {
// executed after an SPA navigation is triggered but // executed after an SPA navigation is triggered but
// before the page is replaced // before the page is replaced
// one usage pattern is to store things in sessionStorage
// in the prenav and then conditionally load then in the consequent
// nav
}) })
``` ```

2
quartz/components/Explorer.tsx
View File

@ -22,8 +22,8 @@ export interface Options {
} }
const defaultOptions: Options = { const defaultOptions: Options = {
folderClickBehavior: "collapse",
folderDefaultState: "collapsed", folderDefaultState: "collapsed",
folderClickBehavior: "collapse",
useSavedState: true, useSavedState: true,
mapFn: (node) => { mapFn: (node) => {
return node return node

5
quartz/components/scripts/explorer.inline.ts
View File

@ -81,6 +81,11 @@ function createFileNode(currentSlug: FullSlug, node: FileTrieNode): HTMLLIElemen
a.href = resolveRelative(currentSlug, node.data?.slug!) a.href = resolveRelative(currentSlug, node.data?.slug!)
a.dataset.for = node.data?.slug a.dataset.for = node.data?.slug
a.textContent = node.displayName a.textContent = node.displayName
if (currentSlug === node.data?.slug) {
a.classList.add("active")
}
return li return li
} }

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

@ -62,33 +62,41 @@
display: flex; display: flex;
} }
} }
}
button#mobile-explorer, button#mobile-explorer,
button#desktop-explorer { button#desktop-explorer {
background-color: transparent; background-color: transparent;
border: none; border: none;
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
padding: 0; padding: 0;
color: var(--dark); color: var(--dark);
display: flex; display: flex;
align-items: center; align-items: center;
& h2 { & h2 {
font-size: 1rem; font-size: 1rem;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
}
& .fold {
margin-left: 0.5rem;
transition: transform 0.3s ease;
opacity: 0.8;
}
.explorer.collapsed > & .fold {
transform: rotateZ(-90deg);
}
} }
& .fold { svg {
margin-left: 0.5rem; pointer-events: all;
transition: transform 0.3s ease;
opacity: 0.8;
}
.explorer.collapsed > & .fold { & > polyline {
transform: rotateZ(-90deg); pointer-events: none;
}
} }
} }
@ -96,13 +104,10 @@ button#desktop-explorer {
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
overflow-y: auto; overflow-y: auto;
max-height: 100%;
transition: max-height 0.35s ease;
margin-top: 0.5rem; margin-top: 0.5rem;
.explorer.collapsed > & { .explorer.collapsed > & > ul.overflow {
max-height: 0px; max-height: 0px;
transition: max-height 0.35s ease;
} }
& ul { & ul {
@ -111,18 +116,18 @@ button#desktop-explorer {
padding: 0; padding: 0;
transition: transition:
max-height 0.35s ease, max-height 0.35s ease,
transform 0.35s ease, transform 0.35s ease;
opacity 0.2s ease;
& li > a { & li > a {
color: var(--dark); color: var(--dark);
opacity: 0.75; opacity: 0.75;
pointer-events: all; pointer-events: all;
}
}
> #explorer-ul { &.active {
max-height: none; opacity: 1;
color: var(--tertiary);
}
}
} }
.folder-outer { .folder-outer {
@ -143,14 +148,6 @@ button#desktop-explorer {
} }
} }
svg {
pointer-events: all;
& > polyline {
pointer-events: none;
}
}
.folder-container { .folder-container {
flex-direction: row; flex-direction: row;
display: flex; display: flex;