The Trans Directory
fix: catch html to jsx errors (closes #547)
+29
-21
+1
-1
docs/advanced/making plugins.md
+1
-1
docs/advanced/making plugins.md
···
247
247
248
248
- Your component should use `getQuartzComponents` to declare a list of `QuartzComponents` that it uses to construct the page. See the page on [[creating components]] for more information.
249
249
- You can use the `renderPage` function defined in `quartz/components/renderPage.tsx` to render Quartz components into HTML.
250
-
- If you need to render an HTML AST to JSX, you can use the `toJsxRuntime` function from `hast-util-to-jsx-runtime` library. An example of this can be found in `quartz/components/pages/Content.tsx`.
250
+
- If you need to render an HTML AST to JSX, you can use the `htmlToJsx` function from `quartz/util/jsx.ts`. An example of this can be found in `quartz/components/pages/Content.tsx`.
251
251
252
252
For example, the following is a simplified version of the content page plugin that renders every single page.
253
253
+4
-1
quartz/components/TagList.tsx
+4
-1
quartz/components/TagList.tsx
+3
-5
quartz/components/pages/Content.tsx
+3
-5
quartz/components/pages/Content.tsx
···
1
+
import { htmlToJsx } from "../../util/jsx"
1
2
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
2
-
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
3
-
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
4
3
5
-
function Content({ tree }: QuartzComponentProps) {
6
-
// @ts-ignore (preact makes it angry)
7
-
const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
4
+
function Content({ fileData, tree }: QuartzComponentProps) {
5
+
const content = htmlToJsx(fileData.filePath!, tree)
8
6
return <article class="popover-hint">{content}</article>
9
7
}
10
8
+2
-4
quartz/components/pages/FolderContent.tsx
+2
-4
quartz/components/pages/FolderContent.tsx
···
1
1
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
2
-
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
3
-
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
4
2
import path from "path"
5
3
6
4
import style from "../styles/listPage.scss"
···
8
6
import { _stripSlashes, simplifySlug } from "../../util/path"
9
7
import { Root } from "hast"
10
8
import { pluralize } from "../../util/lang"
9
+
import { htmlToJsx } from "../../util/jsx"
11
10
12
11
function FolderContent(props: QuartzComponentProps) {
13
12
const { tree, fileData, allFiles } = props
···
29
28
const content =
30
29
(tree as Root).children.length === 0
31
30
? fileData.description
32
-
: // @ts-ignore
33
-
toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
31
+
: htmlToJsx(fileData.filePath!, tree)
34
32
35
33
return (
36
34
<div class="popover-hint">
+2
-4
quartz/components/pages/TagContent.tsx
+2
-4
quartz/components/pages/TagContent.tsx
···
1
1
import { QuartzComponentConstructor, QuartzComponentProps } from "../types"
2
-
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
3
-
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
4
2
import style from "../styles/listPage.scss"
5
3
import { PageList } from "../PageList"
6
4
import { FullSlug, getAllSegmentPrefixes, simplifySlug } from "../../util/path"
7
5
import { QuartzPluginData } from "../../plugins/vfile"
8
6
import { Root } from "hast"
9
7
import { pluralize } from "../../util/lang"
8
+
import { htmlToJsx } from "../../util/jsx"
10
9
11
10
const numPages = 10
12
11
function TagContent(props: QuartzComponentProps) {
···
26
25
const content =
27
26
(tree as Root).children.length === 0
28
27
? fileData.description
29
-
: // @ts-ignore
30
-
toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
28
+
: htmlToJsx(fileData.filePath!, tree)
31
29
32
30
if (tag === "") {
33
31
const tags = [...new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))]
+15
quartz/util/jsx.ts
+15
quartz/util/jsx.ts
···
1
+
import { toJsxRuntime } from "hast-util-to-jsx-runtime"
2
+
import { QuartzPluginData } from "../plugins/vfile"
3
+
import { Node, Root } from "hast"
4
+
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
5
+
import { trace } from "./trace"
6
+
import { type FilePath } from "./path"
7
+
8
+
export function htmlToJsx(fp: FilePath, tree: Node<QuartzPluginData>) {
9
+
try {
10
+
// @ts-ignore (preact makes it angry)
11
+
return toJsxRuntime(tree as Root, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" })
12
+
} catch (e) {
13
+
trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error)
14
+
}
15
+
}
+2
-6
quartz/util/trace.ts
+2
-6
quartz/util/trace.ts
···
4
4
5
5
const rootFile = /.*at file:/
6
6
export function trace(msg: string, err: Error) {
7
-
const stack = err.stack
7
+
let stack = err.stack ?? ""
8
8
9
9
const lines: string[] = []
10
10
···
12
12
lines.push(
13
13
"\n" +
14
14
chalk.bgRed.black.bold(" ERROR ") +
15
-
"\n" +
15
+
"\n\n" +
16
16
chalk.red(` ${msg}`) +
17
17
(err.message.length > 0 ? `: ${err.message}` : ""),
18
18
)
19
-
20
-
if (!stack) {
21
-
return
22
-
}
23
19
24
20
let reachedEndOfLegibleTrace = false
25
21
for (const line of stack.split("\n").slice(1)) {