From 405c5b8d3cbfbe9cd6d60e6a5ed22ae63587baf5 Mon Sep 17 00:00:00 2001 From: ArenaDruid Date: Tue, 4 Feb 2025 15:56:18 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=9B=BE=E6=B3=A8=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=20(#9)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added plugin to support image captions * Added plugin to support image lightbox * Fixed style issues to resolve build failure * GLightbox shows close button by default * Fixed GLightbox not reloaded in SPA mode * chore(styles): omit sass deprecation warnings (#1737) update to newer API * chore(deps): bump the production-dependencies group across 1 directory with 3 updates (#1744) Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat(graph): enable radial mode (#1738) * feat(explorer): collapsible mobile explorer (#1471) Co-authored-by: Aaron Pham * 测试效果 --------- Co-authored-by: Stephen Tse Co-authored-by: Anton Bulakh Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Aaron Pham Co-authored-by: Emile Bangma Co-authored-by: Aaron Pham --- content/test.md | 5 +- docs/features/graph view.md | 2 + package-lock.json | 81 ++++++++-- package.json | 7 +- quartz.config.ts | 8 + quartz/components/Explorer.tsx | 38 ++++- quartz/components/Graph.tsx | 5 +- quartz/components/scripts/explorer.inline.ts | 151 ++++++++++++++----- quartz/components/scripts/graph.inline.ts | 11 +- quartz/components/styles/explorer.scss | 150 +++++++++++++++++- quartz/plugins/transformers/figcaptions.ts | 11 ++ quartz/plugins/transformers/index.ts | 2 + quartz/plugins/transformers/lightbox.ts | 75 +++++++++ quartz/styles/base.scss | 56 +++++-- quartz/styles/variables.scss | 10 +- 15 files changed, 522 insertions(+), 90 deletions(-) create mode 100644 quartz/plugins/transformers/figcaptions.ts create mode 100644 quartz/plugins/transformers/lightbox.ts diff --git a/content/test.md b/content/test.md index 52de6be15c7a6..77e37e1090d1b 100644 --- a/content/test.md +++ b/content/test.md @@ -5,4 +5,7 @@ comments: false *纯中文斜体* _中英文混合斜体 Chinese & English_ **粗体 _嵌套斜体_** -`代码块不受影响` \ No newline at end of file +`代码块不受影响` + +![[Pic_20250204.png]] +*This is a caption.* \ No newline at end of file diff --git a/docs/features/graph view.md b/docs/features/graph view.md index 4f905c78d5de0..19f0862866bd9 100644 --- a/docs/features/graph view.md +++ b/docs/features/graph view.md @@ -36,6 +36,7 @@ Component.Graph({ opacityScale: 1, // how quickly do we fade out the labels when zooming out? removeTags: [], // what tags to remove from the graph showTags: true, // whether to show tags in the graph + enableRadial: false, // whether to constrain the graph, similar to Obsidian }, globalGraph: { drag: true, @@ -49,6 +50,7 @@ Component.Graph({ opacityScale: 1, removeTags: [], // what tags to remove from the graph showTags: true, // whether to show tags in the graph + enableRadial: true, // whether to constrain the graph, similar to Obsidian }, }) ``` diff --git a/package-lock.json b/package-lock.json index 5bf7e54bcd3ec..14646da026182 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,7 +34,7 @@ "mdast-util-to-hast": "^13.2.0", "mdast-util-to-string": "^4.0.0", "micromorph": "^0.4.5", - "pixi.js": "^8.6.6", + "pixi.js": "^8.7.3", "preact": "^10.25.4", "preact-render-to-string": "^6.5.13", "pretty-bytes": "^6.1.1", @@ -42,6 +42,7 @@ "reading-time": "^1.5.0", "rehype-autolink-headings": "^7.1.0", "rehype-citation": "^2.2.2", + "rehype-image-caption": "^2.0.10", "rehype-katex": "^7.0.1", "rehype-mathjax": "^6.0.0", "rehype-pretty-code": "^0.14.0", @@ -79,10 +80,10 @@ "@types/d3": "^7.4.3", "@types/hast": "^3.0.4", "@types/js-yaml": "^4.0.9", - "@types/node": "^22.10.6", + "@types/node": "^22.12.0", "@types/pretty-time": "^1.1.5", "@types/source-map-support": "^0.5.10", - "@types/ws": "^8.5.13", + "@types/ws": "^8.5.14", "@types/yargs": "^17.0.33", "esbuild": "^0.24.2", "prettier": "^3.4.2", @@ -1914,10 +1915,11 @@ } }, "node_modules/@types/node": { - "version": "22.10.6", - "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.6.tgz", - "integrity": "sha512-qNiuwC4ZDAUNcY47xgaSuS92cjf8JbSUoaKS77bmLG1rU7MlATVSiw/IlrjtIyyskXBZ8KkNfjK/P5na7rgXbQ==", + "version": "22.12.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-22.12.0.tgz", + "integrity": "sha512-Fll2FZ1riMjNmlmJOdAyY5pUbkftXslB5DgEzlIuNaiWhXd00FhWxVC/r4yV/4wBb9JfImTu+jiSvXTkJ7F/gA==", "dev": true, + "license": "MIT", "dependencies": { "undici-types": "~6.20.0" } @@ -1943,10 +1945,11 @@ "integrity": "sha512-PBjIUxZHOuj0R15/xuwJYjFi+KZdNFrehocChv4g5hu6aFroHue8m0lBP0POdK2nKzbw0cgV1mws8+V/JAcEkQ==" }, "node_modules/@types/ws": { - "version": "8.5.13", - "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.13.tgz", - "integrity": "sha512-osM/gWBTPKgHV8XkTunnegTRIsvF6owmf5w+JtAfOw472dptdm0dlGv4xCt6GwQRcC2XVOvvRE/0bAoQcL2QkA==", + "version": "8.5.14", + "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.14.tgz", + "integrity": "sha512-bd/YFLW+URhBzMXurx7lWByOu+xzU9+kb3RboOteXYDfW+tr+JZa99OyNmPINEGB/ahzKrEuc8rcv4gnpJmxTw==", "dev": true, + "license": "MIT", "dependencies": { "@types/node": "*" } @@ -4561,9 +4564,10 @@ } }, "node_modules/mdast-util-mdx-jsx": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.0.0.tgz", - "integrity": "sha512-XZuPPzQNBPAlaqsTTgRrcJnyFbSOBovSadFgbFu8SnuNgm+6Bdx1K+IWoitsmj6Lq6MNtI+ytOqwN70n//NaBA==", + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz", + "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==", + "license": "MIT", "dependencies": { "@types/estree-jsx": "^1.0.0", "@types/hast": "^3.0.0", @@ -4575,7 +4579,6 @@ "mdast-util-to-markdown": "^2.0.0", "parse-entities": "^4.0.0", "stringify-entities": "^4.0.0", - "unist-util-remove-position": "^5.0.0", "unist-util-stringify-position": "^4.0.0", "vfile-message": "^4.0.0" }, @@ -5583,9 +5586,10 @@ } }, "node_modules/pixi.js": { - "version": "8.6.6", - "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.6.6.tgz", - "integrity": "sha512-o5pw7G2yuIrnBx0G4npBlmFp+XGNcapI/Ufs62rRj/4XKxc1Zo74YJr/BtEXcXTraTKd+pQvYOLvnfxRjxBMvQ==", + "version": "8.7.3", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.7.3.tgz", + "integrity": "sha512-wfWlhJYnGx1s4f2yoouevQjaeacbJ12LTkJGa+n9AIYNIjOnmJylBtZ2mARX7iFk3mr2xv0wuo//XPe2hk5OBw==", + "license": "MIT", "dependencies": { "@pixi/colord": "^2.9.6", "@types/css-font-loading-module": "^0.0.12", @@ -5626,6 +5630,7 @@ "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz", "integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==", "dev": true, + "license": "MIT", "bin": { "prettier": "bin/prettier.cjs" }, @@ -5740,6 +5745,22 @@ "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==" }, + "node_modules/rehype": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/rehype/-/rehype-13.0.2.tgz", + "integrity": "sha512-j31mdaRFrwFRUIlxGeuPXXKWQxet52RBQRvCmzl5eCefn/KGbomK5GMHNMsOJf55fgo3qw5tST5neDuarDYR2A==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "rehype-parse": "^9.0.0", + "rehype-stringify": "^10.0.0", + "unified": "^11.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/rehype-autolink-headings": { "version": "7.1.0", "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-7.1.0.tgz", @@ -5778,6 +5799,19 @@ "unist-util-visit": "^5.0.0" } }, + "node_modules/rehype-image-caption": { + "version": "2.0.10", + "resolved": "https://registry.npmjs.org/rehype-image-caption/-/rehype-image-caption-2.0.10.tgz", + "integrity": "sha512-iwm0gnR6Z3svaM8i34mS8GCHFCNnV9Ot3RCv1zteAPb8m3s0oqcwcZYdyZPLXrfQ3PdMH7eo6k7RJyuPIQrgHA==", + "license": "MIT", + "dependencies": { + "hast-util-is-element": "^3.0.0", + "mdast-util-mdx-jsx": "^3.1.2", + "rehype": "^13.0.1", + "unified": "^11.0.4", + "unist-util-visit": "^5.0.0" + } + }, "node_modules/rehype-katex": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz", @@ -5878,6 +5912,21 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/rehype-stringify": { + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-10.0.1.tgz", + "integrity": "sha512-k9ecfXHmIPuFVI61B9DeLPN0qFHfawM6RsuX48hoqlaKSF61RskNjSm1lI8PhBEM0MRdLxVVm4WmTqJQccH9mA==", + "license": "MIT", + "dependencies": { + "@types/hast": "^3.0.0", + "hast-util-to-html": "^9.0.0", + "unified": "^11.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/remark": { "version": "15.0.1", "resolved": "https://registry.npmjs.org/remark/-/remark-15.0.1.tgz", diff --git a/package.json b/package.json index 726350b3baa5a..56cfb8d0e247d 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "mdast-util-to-hast": "^13.2.0", "mdast-util-to-string": "^4.0.0", "micromorph": "^0.4.5", - "pixi.js": "^8.6.6", + "pixi.js": "^8.7.3", "preact": "^10.25.4", "preact-render-to-string": "^6.5.13", "pretty-bytes": "^6.1.1", @@ -68,6 +68,7 @@ "reading-time": "^1.5.0", "rehype-autolink-headings": "^7.1.0", "rehype-citation": "^2.2.2", + "rehype-image-caption": "^2.0.10", "rehype-katex": "^7.0.1", "rehype-mathjax": "^6.0.0", "rehype-pretty-code": "^0.14.0", @@ -102,10 +103,10 @@ "@types/d3": "^7.4.3", "@types/hast": "^3.0.4", "@types/js-yaml": "^4.0.9", - "@types/node": "^22.10.6", + "@types/node": "^22.12.0", "@types/pretty-time": "^1.1.5", "@types/source-map-support": "^0.5.10", - "@types/ws": "^8.5.13", + "@types/ws": "^8.5.14", "@types/yargs": "^17.0.33", "esbuild": "^0.24.2", "prettier": "^3.4.2", diff --git a/quartz.config.ts b/quartz.config.ts index 82d6228e80f83..3720945d9fa6b 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -71,6 +71,14 @@ const config: QuartzConfig = { Plugin.CrawlLinks({ markdownLinkResolution: "shortest" }), Plugin.Description(), Plugin.Latex({ renderEngine: "katex" }), + // Adds image caption support. Syntax: + // ```md + // ![alt text](image.jpg) + // *caption text* + // ``` + Plugin.FigureCaptions(), + // Adds image lightbox support + Plugin.Lightbox(), ], filters: [Plugin.RemoveDrafts()], emitters: [ diff --git a/quartz/components/Explorer.tsx b/quartz/components/Explorer.tsx index ec7c48ef77b23..ac276a8bccce6 100644 --- a/quartz/components/Explorer.tsx +++ b/quartz/components/Explorer.tsx @@ -1,5 +1,5 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" -import explorerStyle from "./styles/explorer.scss" +import style from "./styles/explorer.scss" // @ts-ignore import script from "./scripts/explorer.inline" @@ -83,18 +83,46 @@ export default ((userOpts?: Partial) => { lastBuildId = ctx.buildId constructFileTree(allFiles) } - return (
+