Skip to content

Commit 9fdc028

Browse files
codeyomacodeyoma
committed
Quartz sync: May 23, 2025, 11:11 AM
1 parent f62b763 commit 9fdc028

File tree

4 files changed

+101
-52
lines changed

4 files changed

+101
-52
lines changed

‎quartz.layout.ts‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ export const sharedPageComponents: SharedLayout = {
2727
Home: "/",
2828
About: "/About",
2929
"Blog source": "https://github.com/codeyoma/codeyoma.github.io",
30-
// GitHub: "https://github.com/codeyoma",
31-
// LinkedIn: "https://www.linkedin.com/in/codeyoma",
3230
},
3331
}),
3432
}
@@ -53,11 +51,15 @@ export const defaultContentPageLayout: PageLayout = {
5351
Component: Component.Search(),
5452
grow: true,
5553
},
54+
{
55+
Component: Component.DesktopOnly(Component.ReaderMode()),
56+
desktopOnly: true,
57+
},
5658
{ Component: Component.Darkmode() },
5759
{ Component: Component.MarkmapViewer() },
58-
{ Component: Component.DesktopOnly(Component.ReaderMode()) },
5960
],
60-
}),
61+
},
62+
),
6163
Component.Explorer({
6264
folderClickBehavior: "link",
6365
useSavedState: false,
@@ -81,11 +83,6 @@ export const defaultContentPageLayout: PageLayout = {
8183
return -1
8284
}
8385
},
84-
// mapFn: (node) => {
85-
// if (node.isFolder) {
86-
// node.displayName = "📁 " + node.displayName
87-
// }
88-
// },
8986
}),
9087
// Component.RecentNotes({ limit: 5}),
9188
],

‎quartz/components/Flex.tsx‎

Lines changed: 49 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,62 @@
11
import { concatenateResources } from "../util/resources"
2+
import DesktopOnly from './DesktopOnly'
23
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
34

45
type FlexConfig = {
5-
components: {
6-
Component: QuartzComponent
7-
grow?: boolean
8-
shrink?: boolean
9-
basis?: string
10-
order?: number
11-
align?: "start" | "end" | "center" | "stretch"
12-
justify?: "start" | "end" | "center" | "between" | "around"
13-
}[]
14-
direction?: "row" | "row-reverse" | "column" | "column-reverse"
15-
wrap?: "nowrap" | "wrap" | "wrap-reverse"
16-
gap?: string
6+
components: {
7+
Component: QuartzComponent
8+
grow?: boolean
9+
shrink?: boolean
10+
basis?: string
11+
order?: number
12+
align?: "start" | "end" | "center" | "stretch"
13+
justify?: "start" | "end" | "center" | "between" | "around"
14+
desktopOnly?: boolean
15+
}[]
16+
direction?: "row" | "row-reverse" | "column" | "column-reverse"
17+
wrap?: "nowrap" | "wrap" | "wrap-reverse"
18+
gap?: string
1719
}
1820

1921
export default ((config: FlexConfig) => {
20-
const Flex: QuartzComponent = (props: QuartzComponentProps) => {
21-
const direction = config.direction ?? "row"
22-
const wrap = config.wrap ?? "nowrap"
23-
const gap = config.gap ?? "1rem"
22+
const Flex: QuartzComponent = (props: QuartzComponentProps) => {
23+
const direction = config.direction ?? "row"
24+
const wrap = config.wrap ?? "nowrap"
25+
const gap = config.gap ?? "1rem"
2426

25-
return (
26-
<div style={`display: flex; flex-direction: ${direction}; flex-wrap: ${wrap}; gap: ${gap};`}>
27-
{config.components.map((c) => {
28-
const grow = c.grow ? 1 : 0
29-
const shrink = (c.shrink ?? true) ? 1 : 0
30-
const basis = c.basis ?? "auto"
31-
const order = c.order ?? 0
32-
const align = c.align ?? "center"
33-
const justify = c.justify ?? "center"
34-
35-
return (
27+
return (
3628
<div
37-
style={`flex-grow: ${grow}; flex-shrink: ${shrink}; flex-basis: ${basis}; order: ${order}; align-self: ${align}; justify-self: ${justify};`}
29+
class="flex-container"
30+
// style={`display: flex; flex-direction: ${direction}; gap: ${gap};`}
3831
>
39-
<c.Component {...props} />
32+
{config.components.map((c, i) => {
33+
const grow = c.grow ? 1 : 0
34+
const shrink = (c.shrink ?? true) ? 1 : 0
35+
const basis = c.basis ?? "auto"
36+
const order = c.order ?? 0
37+
const align = c.align ?? "center"
38+
const justify = c.justify ?? "end"
39+
const desktopOnly = c.desktopOnly ?? false
40+
41+
return (
42+
<div
43+
class={`flex-child ${i === 0 ? "first-child" : "other-child"} ${desktopOnly ? "flex-desktop-only" : ""}`}
44+
// style={`flex-grow: ${grow}; flex-shrink: ${shrink}; order: ${order}; align-self: ${align}; justify-self: ${justify};`}
45+
>
46+
<c.Component {...props} />
47+
</div>
48+
)
49+
})}
4050
</div>
41-
)
42-
})}
43-
</div>
44-
)
45-
}
51+
)
52+
}
4653

47-
Flex.afterDOMLoaded = concatenateResources(
48-
...config.components.map((c) => c.Component.afterDOMLoaded),
49-
)
50-
Flex.beforeDOMLoaded = concatenateResources(
51-
...config.components.map((c) => c.Component.beforeDOMLoaded),
52-
)
53-
Flex.css = concatenateResources(...config.components.map((c) => c.Component.css))
54-
return Flex
54+
Flex.afterDOMLoaded = concatenateResources(
55+
...config.components.map((c) => c.Component.afterDOMLoaded),
56+
)
57+
Flex.beforeDOMLoaded = concatenateResources(
58+
...config.components.map((c) => c.Component.beforeDOMLoaded),
59+
)
60+
Flex.css = concatenateResources(...config.components.map((c) => c.Component.css))
61+
return Flex
5562
}) satisfies QuartzComponentConstructor<FlexConfig>

‎quartz/components/styles/search.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
.search {
44
min-width: fit-content;
5-
max-width: 14rem;
5+
// max-width: 14rem;
66

77
@media all and ($mobile) {
88
flex-grow: 0.3;

‎quartz/styles/custom.scss‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,3 +210,48 @@ footer {
210210
strong {
211211
color: var(--tertiary);
212212
}
213+
214+
em {
215+
padding-right: 0.2em;
216+
}
217+
218+
.flex-container {
219+
display: flex;
220+
flex-direction: row;
221+
flex-wrap: nowrap;
222+
gap: 1rem;
223+
justify-content: flex-end;
224+
}
225+
226+
.flex-child {
227+
flex-grow: 0;
228+
flex-shrink: 1;
229+
flex-basis: auto;
230+
align-self: center;
231+
}
232+
233+
.flex-child.flex-desktop-only {
234+
display: none;
235+
}
236+
237+
238+
@media (min-width: 1025px) {
239+
.flex-container {
240+
flex-wrap: wrap;
241+
}
242+
243+
.flex-child.first-child {
244+
flex-grow: 1;
245+
flex-basis: 100%;
246+
order: 42;
247+
}
248+
249+
.flex-child.other-child {
250+
flex-basis: auto;
251+
}
252+
253+
.flex-child.flex-desktop-only {
254+
display: block;
255+
}
256+
257+
}

0 commit comments

Comments
 (0)