Skip to content

Commit b0320cf

Browse files
MasssiveJuice08saberzero1aarnphmdependabot[bot]
authoredJan 27, 2025··
Quartz-67e1bee (#109)
* feat(comments): support custom giscus themes (#1526) Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com> Co-authored-by: Aaron Pham <contact@aarnphm.xyz> * fix(grid): $desktop variable (#1511) * Feat(filters): Support "true" as valid for draft and publish frontmatter values (b3a02909ba74fff08cd3675707d1f4d782a24e98) * Merge pull request #1543 from saberzero1/draft-publish-string feat(filters): support "true" as valid for frontmatter filters * chore(deps): bump the production-dependencies group across 1 directory with 7 updates (#1540) --------- Co-authored-by: Emile Bangma <github@emilebangma.com> Co-authored-by: Aaron Pham <Aaronpham0103@gmail.com> Co-authored-by: Aaron Pham <contact@aarnphm.xyz> Co-authored-by: Emile Bangma <ewjbangma@hotmail.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
1 parent ce66337 commit b0320cf

File tree

14 files changed

+285
-67
lines changed

14 files changed

+285
-67
lines changed
 

‎package-lock.json

+32-46
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
"globby": "^14.0.2",
5151
"gray-matter": "^4.0.3",
5252
"hast-util-to-html": "^9.0.3",
53-
"hast-util-to-jsx-runtime": "^2.3.0",
53+
"hast-util-to-jsx-runtime": "^2.3.2",
5454
"hast-util-to-string": "^3.0.1",
5555
"is-absolute-url": "^4.0.1",
5656
"js-yaml": "^4.1.0",
@@ -59,14 +59,14 @@
5959
"mdast-util-to-hast": "^13.2.0",
6060
"mdast-util-to-string": "^4.0.0",
6161
"micromorph": "^0.4.5",
62-
"pixi.js": "^8.4.1",
63-
"preact": "^10.24.2",
62+
"pixi.js": "^8.5.1",
63+
"preact": "^10.24.3",
6464
"preact-render-to-string": "^6.5.11",
6565
"pretty-bytes": "^6.1.1",
6666
"pretty-time": "^1.1.0",
6767
"reading-time": "^1.5.0",
6868
"rehype-autolink-headings": "^7.1.0",
69-
"rehype-citation": "^2.1.2",
69+
"rehype-citation": "^2.2.0",
7070
"rehype-katex": "^7.0.1",
7171
"rehype-mathjax": "^6.0.0",
7272
"rehype-pretty-code": "^0.14.0",
@@ -82,15 +82,15 @@
8282
"remark-smartypants": "^3.0.2",
8383
"rfdc": "^1.4.1",
8484
"rimraf": "^6.0.1",
85-
"serve-handler": "^6.1.5",
85+
"serve-handler": "^6.1.6",
8686
"shiki": "^1.22.0",
8787
"source-map-support": "^0.5.21",
8888
"to-vfile": "^8.0.0",
8989
"toml": "^3.0.0",
9090
"unified": "^11.0.5",
9191
"unist-util-visit": "^5.0.0",
9292
"vfile": "^6.0.3",
93-
"workerpool": "^9.1.3",
93+
"workerpool": "^9.2.0",
9494
"ws": "^8.18.0",
9595
"yargs": "^17.7.2"
9696
},
@@ -99,7 +99,7 @@
9999
"@types/d3": "^7.4.3",
100100
"@types/hast": "^3.0.4",
101101
"@types/js-yaml": "^4.0.9",
102-
"@types/node": "^22.7.5",
102+
"@types/node": "^22.7.7",
103103
"@types/pretty-time": "^1.1.5",
104104
"@types/source-map-support": "^0.5.10",
105105
"@types/ws": "^8.5.12",

‎quartz/components/Comments.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ type Options = {
1010
repoId: string
1111
category: string
1212
categoryId: string
13+
themeUrl?: string
14+
lightTheme?: string
15+
darkTheme?: string
1316
mapping?: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
1417
strict?: boolean
1518
reactionsEnabled?: boolean
@@ -34,6 +37,11 @@ export default ((opts: Options) => {
3437
data-strict={boolToStringBool(opts.options.strict ?? true)}
3538
data-reactions-enabled={boolToStringBool(opts.options.reactionsEnabled ?? true)}
3639
data-input-position={opts.options.inputPosition ?? "bottom"}
40+
data-light-theme={opts.options.lightTheme ?? "light"}
41+
data-dark-theme={opts.options.darkTheme ?? "dark"}
42+
data-theme-url={
43+
opts.options.themeUrl ?? `https://${cfg.baseUrl ?? "example.com"}/static/giscus`
44+
}
3745
></div>
3846
)
3947
}

‎quartz/components/scripts/comments.inline.ts

+26-2
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,44 @@ const changeTheme = (e: CustomEventMap["themechange"]) => {
1313
{
1414
giscus: {
1515
setConfig: {
16-
theme: theme,
16+
theme: getThemeUrl(getThemeName(theme)),
1717
},
1818
},
1919
},
2020
"https://giscus.app",
2121
)
2222
}
2323

24+
const getThemeName = (theme: string) => {
25+
if (theme !== "dark" && theme !== "light") {
26+
return theme
27+
}
28+
const giscusContainer = document.querySelector(".giscus") as GiscusElement
29+
if (!giscusContainer) {
30+
return theme
31+
}
32+
const darkGiscus = giscusContainer.dataset.darkTheme ?? "dark"
33+
const lightGiscus = giscusContainer.dataset.lightTheme ?? "light"
34+
return theme === "dark" ? darkGiscus : lightGiscus
35+
}
36+
37+
const getThemeUrl = (theme: string) => {
38+
const giscusContainer = document.querySelector(".giscus") as GiscusElement
39+
if (!giscusContainer) {
40+
return `https://giscus.app/themes/${theme}.css`
41+
}
42+
return `${giscusContainer.dataset.themeUrl ?? "https://giscus.app/themes"}/${theme}.css`
43+
}
44+
2445
type GiscusElement = Omit<HTMLElement, "dataset"> & {
2546
dataset: DOMStringMap & {
2647
repo: `${string}/${string}`
2748
repoId: string
2849
category: string
2950
categoryId: string
51+
themeUrl: string
52+
lightTheme: string
53+
darkTheme: string
3054
mapping: "url" | "title" | "og:title" | "specific" | "number" | "pathname"
3155
strict: string
3256
reactionsEnabled: string
@@ -57,7 +81,7 @@ document.addEventListener("nav", () => {
5781

5882
const theme = document.documentElement.getAttribute("saved-theme")
5983
if (theme) {
60-
giscusScript.setAttribute("data-theme", theme)
84+
giscusScript.setAttribute("data-theme", getThemeUrl(getThemeName(theme)))
6185
}
6286

6387
giscusContainer.appendChild(giscusScript)

‎quartz/components/styles/backlinks.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
display: none;
3838
}
3939
height: auto;
40-
@media all and ($desktop) {
40+
@media all and not ($desktop) {
4141
height: 250px;
4242
}
4343
}

‎quartz/components/styles/graph.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
height: 80vh;
6666
width: 80vw;
6767

68-
@media all and ($desktop) {
68+
@media all and not ($desktop) {
6969
width: 90%;
7070
}
7171
}

‎quartz/components/styles/search.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@
6464
margin-left: auto;
6565
margin-right: auto;
6666

67-
@media all and ($desktop) {
67+
@media all and not ($desktop) {
6868
width: 90%;
6969
}
7070

‎quartz/plugins/filters/draft.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { QuartzFilterPlugin } from "../types"
33
export const RemoveDrafts: QuartzFilterPlugin<{}> = () => ({
44
name: "RemoveDrafts",
55
shouldPublish(_ctx, [_tree, vfile]) {
6-
const draftFlag: boolean = vfile.data?.frontmatter?.draft === true
6+
const draftFlag: boolean =
7+
vfile.data?.frontmatter?.draft === true || vfile.data?.frontmatter?.draft === "true"
78
return !draftFlag
89
},
910
})

‎quartz/plugins/filters/explicit.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@ import { QuartzFilterPlugin } from "../types"
33
export const ExplicitPublish: QuartzFilterPlugin = () => ({
44
name: "ExplicitPublish",
55
shouldPublish(_ctx, [_tree, vfile]) {
6-
return vfile.data?.frontmatter?.publish === true
6+
return vfile.data?.frontmatter?.publish === true || vfile.data?.frontmatter?.publish === "true"
77
},
88
})

‎quartz/plugins/transformers/frontmatter.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ declare module "vfile" {
8888
tags: string[]
8989
aliases: string[]
9090
description: string
91-
publish: boolean
92-
draft: boolean
91+
publish: boolean | string
92+
draft: boolean | string
9393
lang: string
9494
enableToc: string
9595
cssclasses: string[]

‎quartz/static/giscus/dark.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*! MIT License
2+
* Copyright (c) 2018 GitHub Inc.
3+
* https://github.com/primer/primitives/blob/main/LICENSE
4+
*/
5+
6+
main {
7+
--color-prettylights-syntax-comment: #8b949e;
8+
--color-prettylights-syntax-constant: #79c0ff;
9+
--color-prettylights-syntax-entity: #d2a8ff;
10+
--color-prettylights-syntax-storage-modifier-import: #c9d1d9;
11+
--color-prettylights-syntax-entity-tag: #7ee787;
12+
--color-prettylights-syntax-keyword: #ff7b72;
13+
--color-prettylights-syntax-string: #a5d6ff;
14+
--color-prettylights-syntax-variable: #ffa657;
15+
--color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
16+
--color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
17+
--color-prettylights-syntax-invalid-illegal-bg: #8e1519;
18+
--color-prettylights-syntax-carriage-return-text: #f0f6fc;
19+
--color-prettylights-syntax-carriage-return-bg: #b62324;
20+
--color-prettylights-syntax-string-regexp: #7ee787;
21+
--color-prettylights-syntax-markup-list: #f2cc60;
22+
--color-prettylights-syntax-markup-heading: #1f6feb;
23+
--color-prettylights-syntax-markup-italic: #c9d1d9;
24+
--color-prettylights-syntax-markup-bold: #c9d1d9;
25+
--color-prettylights-syntax-markup-deleted-text: #ffdcd7;
26+
--color-prettylights-syntax-markup-deleted-bg: #67060c;
27+
--color-prettylights-syntax-markup-inserted-text: #aff5b4;
28+
--color-prettylights-syntax-markup-inserted-bg: #033a16;
29+
--color-prettylights-syntax-markup-changed-text: #ffdfb6;
30+
--color-prettylights-syntax-markup-changed-bg: #5a1e02;
31+
--color-prettylights-syntax-markup-ignored-text: #c9d1d9;
32+
--color-prettylights-syntax-markup-ignored-bg: #1158c7;
33+
--color-prettylights-syntax-meta-diff-range: #d2a8ff;
34+
--color-prettylights-syntax-brackethighlighter-angle: #8b949e;
35+
--color-prettylights-syntax-sublimelinter-gutter-mark: #484f58;
36+
--color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
37+
--color-btn-text: #d4d4d4; /* --darkgray */
38+
--color-btn-bg: #161618; /* --light */
39+
--color-btn-border: rgb(240, 246, 252 / 10%); /* --dark */
40+
--color-btn-shadow: 0 0 transparent;
41+
--color-btn-inset-shadow: 0 0 transparent;
42+
--color-btn-hover-bg: #30363d;
43+
--color-btn-hover-border: #8b949e;
44+
--color-btn-active-bg: hsl(212deg 12% 18% / 100%);
45+
--color-btn-active-border: #6e7681;
46+
--color-btn-selected-bg: #161b22;
47+
--color-btn-primary-text: #fff;
48+
--color-btn-primary-bg: #84a59d; /* --tertiary */
49+
--color-btn-primary-border: rgb(240, 246, 252 / 10%); /* --dark */
50+
--color-btn-primary-shadow: 0 0 transparent;
51+
--color-btn-primary-inset-shadow: 0 0 transparent;
52+
--color-btn-primary-hover-bg: #7b97aa; /* --secondary */
53+
--color-btn-primary-hover-border: rgb(240, 246, 252 / 10%); /* --dark */
54+
--color-btn-primary-selected-bg: #7b97aa; /* --secondary */
55+
--color-btn-primary-selected-shadow: 0 0 transparent;
56+
--color-btn-primary-disabled-text: rgba(33, 32, 32, 0.5);
57+
--color-btn-primary-disabled-bg: rgb(35 134 54 / 60%);
58+
--color-btn-primary-disabled-border: rgb(240 246 252 / 10%);
59+
--color-action-list-item-default-hover-bg: rgb(177 186 196 / 12%);
60+
--color-segmented-control-bg: rgb(110 118 129 / 10%);
61+
--color-segmented-control-button-bg: #0d1117;
62+
--color-segmented-control-button-selected-border: #6e7681;
63+
--color-fg-default: #ebebec; /* --dark */
64+
--color-fg-muted: #d4d4d4; /* --darkgray */
65+
--color-fg-subtle: #d4d4d4; /* --darkgray */
66+
--color-canvas-default: #0d1117;
67+
--color-canvas-overlay: #161b22;
68+
--color-canvas-inset: #010409;
69+
--color-canvas-subtle: #161b22;
70+
--color-border-default: #30363d;
71+
--color-border-muted: #21262d;
72+
--color-neutral-muted: rgb(110 118 129 / 40%);
73+
--color-accent-fg: #2f81f7;
74+
--color-accent-emphasis: #1f6feb;
75+
--color-accent-muted: rgb(56 139 253 / 40%);
76+
--color-accent-subtle: rgb(56 139 253 / 10%);
77+
--color-success-fg: #3fb950;
78+
--color-attention-fg: #d29922;
79+
--color-attention-muted: rgb(187 128 9 / 40%);
80+
--color-attention-subtle: rgb(187 128 9 / 15%);
81+
--color-danger-fg: #f85149;
82+
--color-danger-muted: rgb(248 81 73 / 40%);
83+
--color-danger-subtle: rgb(248 81 73 / 10%);
84+
--color-primer-shadow-inset: 0 0 transparent;
85+
--color-scale-gray-7: #21262d;
86+
--color-scale-blue-8: #0c2d6b;
87+
88+
/*! Extensions from @primer/css/alerts/flash.scss */
89+
--color-social-reaction-bg-hover: var(--color-scale-gray-7);
90+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-8);
91+
}
92+
93+
main .pagination-loader-container {
94+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line-dark.svg");
95+
}
96+
97+
main .gsc-loading-image {
98+
background-image: url("https://github.githubassets.com/images/mona-loading-dark.gif");
99+
}

‎quartz/static/giscus/light.css

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
/*! MIT License
2+
* Copyright (c) 2018 GitHub Inc.
3+
* https://github.com/primer/primitives/blob/main/LICENSE
4+
*/
5+
6+
main {
7+
--color-prettylights-syntax-comment: #6e7781;
8+
--color-prettylights-syntax-constant: #0550ae;
9+
--color-prettylights-syntax-entity: #8250df;
10+
--color-prettylights-syntax-storage-modifier-import: #24292f;
11+
--color-prettylights-syntax-entity-tag: #116329;
12+
--color-prettylights-syntax-keyword: #cf222e;
13+
--color-prettylights-syntax-string: #0a3069;
14+
--color-prettylights-syntax-variable: #953800;
15+
--color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
16+
--color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
17+
--color-prettylights-syntax-invalid-illegal-bg: #82071e;
18+
--color-prettylights-syntax-carriage-return-text: #f6f8fa;
19+
--color-prettylights-syntax-carriage-return-bg: #cf222e;
20+
--color-prettylights-syntax-string-regexp: #116329;
21+
--color-prettylights-syntax-markup-list: #3b2300;
22+
--color-prettylights-syntax-markup-heading: #0550ae;
23+
--color-prettylights-syntax-markup-italic: #24292f;
24+
--color-prettylights-syntax-markup-bold: #24292f;
25+
--color-prettylights-syntax-markup-deleted-text: #82071e;
26+
--color-prettylights-syntax-markup-deleted-bg: #ffebe9;
27+
--color-prettylights-syntax-markup-inserted-text: #116329;
28+
--color-prettylights-syntax-markup-inserted-bg: #dafbe1;
29+
--color-prettylights-syntax-markup-changed-text: #953800;
30+
--color-prettylights-syntax-markup-changed-bg: #ffd8b5;
31+
--color-prettylights-syntax-markup-ignored-text: #eaeef2;
32+
--color-prettylights-syntax-markup-ignored-bg: #0550ae;
33+
--color-prettylights-syntax-meta-diff-range: #8250df;
34+
--color-prettylights-syntax-brackethighlighter-angle: #57606a;
35+
--color-prettylights-syntax-sublimelinter-gutter-mark: #8c959f;
36+
--color-prettylights-syntax-constant-other-reference-link: #0a3069;
37+
--color-btn-text: #4e4e4e; /* --darkgray */
38+
--color-btn-bg: #faf8f8; /* --light */
39+
--color-btn-border: rgb(43, 43, 43 / 15%); /* --dark */
40+
--color-btn-shadow: 0 1px 0 rgb(31 35 40 / 4%);
41+
--color-btn-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 25%);
42+
--color-btn-hover-bg: #f3f4f6;
43+
--color-btn-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
44+
--color-btn-active-bg: hsl(220deg 14% 93% / 100%);
45+
--color-btn-active-border: rgb(31 35 40 / 15%);
46+
--color-btn-selected-bg: hsl(220deg 14% 94% / 100%);
47+
--color-btn-primary-text: #fff;
48+
--color-btn-primary-bg: #84a59d; /* --tertiary */
49+
--color-btn-primary-border: rgb(43, 43, 43 / 15%); /* --dark */
50+
--color-btn-primary-shadow: 0 1px 0 rgb(31 35 40 / 10%);
51+
--color-btn-primary-inset-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
52+
--color-btn-primary-hover-bg: #284b63; /* --secondary */
53+
--color-btn-primary-hover-border: rgb(43, 43, 43 / 15%); /* --dark */
54+
--color-btn-primary-selected-bg: #284b63; /* --secondary */
55+
--color-btn-primary-selected-shadow: inset 0 1px 0 rgb(0 45 17 / 20%);
56+
--color-btn-primary-disabled-text: rgb(255 255 255 / 80%);
57+
--color-btn-primary-disabled-bg: #94d3a2;
58+
--color-btn-primary-disabled-border: rgb(31 35 40 / 15%);
59+
--color-action-list-item-default-hover-bg: rgb(208 215 222 / 32%);
60+
--color-segmented-control-bg: #eaeef2;
61+
--color-segmented-control-button-bg: #fff;
62+
--color-segmented-control-button-selected-border: #8c959f;
63+
--color-fg-default: #2b2b2b; /* --dark */
64+
--color-fg-muted: #4e4e4e; /* --darkgray */
65+
--color-fg-subtle: #4e4e4e; /* --darkgray */
66+
--color-canvas-default: #fff;
67+
--color-canvas-overlay: #fff;
68+
--color-canvas-inset: #f6f8fa;
69+
--color-canvas-subtle: #f6f8fa;
70+
--color-border-default: #d0d7de;
71+
--color-border-muted: hsl(210deg 18% 87% / 100%);
72+
--color-neutral-muted: rgb(175 184 193 / 20%);
73+
--color-accent-fg: #0969da;
74+
--color-accent-emphasis: #0969da;
75+
--color-accent-muted: rgb(84 174 255 / 40%);
76+
--color-accent-subtle: #ddf4ff;
77+
--color-success-fg: #1a7f37;
78+
--color-attention-fg: #9a6700;
79+
--color-attention-muted: rgb(212 167 44 / 40%);
80+
--color-attention-subtle: #fff8c5;
81+
--color-danger-fg: #d1242f;
82+
--color-danger-muted: rgb(255 129 130 / 40%);
83+
--color-danger-subtle: #ffebe9;
84+
--color-primer-shadow-inset: inset 0 1px 0 rgb(208 215 222 / 20%);
85+
--color-scale-gray-1: #eaeef2;
86+
--color-scale-blue-1: #b6e3ff;
87+
88+
/*! Extensions from @primer/css/alerts/flash.scss */
89+
--color-social-reaction-bg-hover: var(--color-scale-gray-1);
90+
--color-social-reaction-bg-reacted-hover: var(--color-scale-blue-1);
91+
}
92+
93+
main .pagination-loader-container {
94+
background-image: url("https://github.com/images/modules/pulls/progressive-disclosure-line.svg");
95+
}
96+
97+
main .gsc-loading-image {
98+
background-image: url("https://github.githubassets.com/images/mona-loading-default.gif");
99+
}

‎quartz/styles/base.scss

+5-4
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,7 @@ a {
156156
column-gap: #{map-get($desktopGrid, columnGap)};
157157
row-gap: #{map-get($desktopGrid, rowGap)};
158158
grid-template-areas: #{map-get($desktopGrid, templateAreas)};
159-
@media all and ($desktop) {
159+
@media all and ($tablet) {
160160
grid-template-columns: #{map-get($tabletGrid, templateColumns)};
161161
grid-template-rows: #{map-get($tabletGrid, templateRows)};
162162
column-gap: #{map-get($tabletGrid, columnGap)};
@@ -171,7 +171,7 @@ a {
171171
grid-template-areas: #{map-get($mobileGrid, templateAreas)};
172172
}
173173

174-
@media all and ($desktop) {
174+
@media all and not ($desktop) {
175175
padding: 0 1rem;
176176
}
177177
@media all and ($mobile) {
@@ -212,7 +212,7 @@ a {
212212
margin-left: inherit;
213213
margin-right: inherit;
214214
}
215-
@media all and ($desktop) {
215+
@media all and not ($desktop) {
216216
position: initial;
217217
height: unset;
218218
width: 100%;
@@ -254,10 +254,11 @@ a {
254254
min-width: 100%;
255255
margin-left: auto;
256256
margin-right: auto;
257-
@media all and ($desktop) {
257+
@media all and ($tablet) {
258258
margin-right: 0;
259259
}
260260
@media all and ($mobile) {
261+
margin-right: 0;
261262
margin-left: 0;
262263
}
263264
}

‎quartz/styles/variables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ $breakpoints: (
1212

1313
$mobile: "(max-width: #{map-get($breakpoints, mobile)})";
1414
$tablet: "(min-width: #{map-get($breakpoints, mobile)}) and (max-width: #{map-get($breakpoints, desktop)})";
15-
$desktop: "(max-width: #{map-get($breakpoints, desktop)})";
15+
$desktop: "(min-width: #{map-get($breakpoints, desktop)})";
1616

1717
$pageWidth: #{map-get($breakpoints, mobile)};
1818
$sidePanelWidth: 320px; //380px;

0 commit comments

Comments
 (0)
Please sign in to comment.