Fixed style issues to resolve build failure

This commit is contained in:
Stephen Tse 2024-10-05 14:16:52 -07:00
parent d614d511d7
commit 8221be38e3
5 changed files with 32 additions and 31 deletions

2
package-lock.json generated
View File

@ -209,6 +209,7 @@
}, },
"node_modules/@clack/prompts/node_modules/is-unicode-supported": { "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
"version": "1.3.0", "version": "1.3.0",
"extraneous": true,
"inBundle": true, "inBundle": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@ -4924,6 +4925,7 @@
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz",
"integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==", "integrity": "sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==",
"dev": true, "dev": true,
"license": "MIT",
"bin": { "bin": {
"prettier": "bin/prettier.cjs" "prettier": "bin/prettier.cjs"
}, },

View File

@ -1,11 +1,11 @@
import rehypeImageCaption from "rehype-image-caption"; import rehypeImageCaption from "rehype-image-caption"
import { QuartzTransformerPlugin } from "../types"; import { QuartzTransformerPlugin } from "../types"
export const FigureCaptions: QuartzTransformerPlugin = () => { export const FigureCaptions: QuartzTransformerPlugin = () => {
return { return {
name: "FigureCaptions", name: "FigureCaptions",
htmlPlugins() { htmlPlugins() {
return [[rehypeImageCaption]] return [[rehypeImageCaption]]
}, },
} }
} }

View File

@ -6,11 +6,11 @@ import { Root } from "hast"
// https://github.com/biati-digital/glightbox // https://github.com/biati-digital/glightbox
interface Options { interface Options {
/** Name of the effect on lightbox open. */ /** Name of the effect on lightbox open. */
openEffect: "zoom" | "fade" | "none", openEffect: "zoom" | "fade" | "none"
/** Name of the effect on lightbox close. */ /** Name of the effect on lightbox close. */
closeEffect: "zoom" | "fade" | "none", closeEffect: "zoom" | "fade" | "none"
/** Name of the effect on slide change. */ /** Name of the effect on slide change. */
slideEffect: "slide" | "zoom" | "fade" | "none", slideEffect: "slide" | "zoom" | "fade" | "none"
/** Show or hide the close button. */ /** Show or hide the close button. */
closeButton: boolean closeButton: boolean
} }
@ -19,7 +19,7 @@ const defaultOptions: Options = {
openEffect: "zoom", openEffect: "zoom",
closeEffect: "zoom", closeEffect: "zoom",
slideEffect: "slide", slideEffect: "slide",
closeButton: false closeButton: false,
} }
export const Lightbox: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => { export const Lightbox: QuartzTransformerPlugin<Partial<Options>> = (userOpts) => {
@ -31,26 +31,25 @@ export const Lightbox: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =>
() => { () => {
return (tree: Root, file) => { return (tree: Root, file) => {
visit(tree, "element", (node, _index, _parent) => { visit(tree, "element", (node, _index, _parent) => {
if (node.tagName === "img" && if (
node.tagName === "img" &&
node.properties && node.properties &&
typeof node.properties.src === "string" typeof node.properties.src === "string"
) { ) {
// Add Image Lightbox support // Add Image Lightbox support
const classes = (node.properties.className ?? []) as string[]; const classes = (node.properties.className ?? []) as string[]
classes.push("glightbox"); classes.push("glightbox")
node.properties.className = classes; node.properties.className = classes
} }
}) })
} }
} },
] ]
}, },
externalResources() { externalResources() {
return { return {
css: [ css: ["https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/css/glightbox.min.css"],
"https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/css/glightbox.min.css"
],
js: [ js: [
{ {
src: "https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/js/glightbox.min.js", src: "https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.3.0/js/glightbox.min.js",
@ -60,10 +59,10 @@ export const Lightbox: QuartzTransformerPlugin<Partial<Options>> = (userOpts) =>
{ {
contentType: "inline", contentType: "inline",
loadTime: "afterDOMReady", loadTime: "afterDOMReady",
script: `const lightbox = GLightbox(${JSON.stringify(opts)});` script: `const lightbox = GLightbox(${JSON.stringify(opts)});`,
} },
] ],
} }
} },
} }
} }

View File

@ -600,10 +600,10 @@ figure {
figcaption { figcaption {
text-align: center; text-align: center;
margin-top: .25rem; margin-top: 0.25rem;
font-size: .85rem; font-size: 0.85rem;
line-height: 1.3rem; line-height: 1.3rem;
opacity: .8; opacity: 0.8;
} }
// ==================================== // ====================================