From a03edd8fcdf074b46e54fd412c925ccdb545da0b Mon Sep 17 00:00:00 2001 From: Franklin Koch Date: Thu, 17 Oct 2024 13:00:38 -0600 Subject: [PATCH] Handle frontmatter parts as mdast/frontmatter objects --- packages/common/src/utils.ts | 12 ++++++------ packages/myst-to-react/src/crossReference.tsx | 12 ++++++------ packages/site/src/pages/Article.tsx | 9 ++++++++- packages/site/src/pages/ErrorUnhandled.tsx | 2 +- themes/article/app/components/Article.tsx | 9 ++++++++- themes/book/app/components/ArticlePage.tsx | 9 ++++++++- 6 files changed, 37 insertions(+), 16 deletions(-) diff --git a/packages/common/src/utils.ts b/packages/common/src/utils.ts index 5f56e3516..c2bf336c4 100644 --- a/packages/common/src/utils.ts +++ b/packages/common/src/utils.ts @@ -188,23 +188,23 @@ export function updatePageStaticLinksInplace(data: PageLoader, updateUrl: Update return { ...exp, url: updateUrl(exp.url) }; }); } - const allMdastTrees = [data.mdast, ...Object.values(data.frontmatter?.parts ?? {})]; - allMdastTrees.forEach((tree) => { + const allMdastTrees = [data, ...Object.values(data.frontmatter?.parts ?? {})]; + allMdastTrees.forEach(({ mdast }) => { // Fix all of the images to point to the CDN - const images = selectAll('image', tree) as Image[]; + const images = selectAll('image', mdast) as Image[]; images.forEach((node) => { node.url = updateUrl(node.url); if (node.urlOptimized) { node.urlOptimized = updateUrl(node.urlOptimized); } }); - const links = selectAll('link,linkBlock,card', tree) as Link[]; - const staticLinks = links.filter((node) => node.static); + const links = selectAll('link,linkBlock,card', mdast) as Link[]; + const staticLinks = links?.filter((node) => node.static); staticLinks.forEach((node) => { // These are static links to thinks like PDFs or other referenced files node.url = updateUrl(node.url); }); - const outputs = selectAll('output', tree) as Output[]; + const outputs = selectAll('output', mdast) as Output[]; outputs.forEach((node) => { if (!node.data) return; walkOutputs(node.data, (obj) => { diff --git a/packages/myst-to-react/src/crossReference.tsx b/packages/myst-to-react/src/crossReference.tsx index 07fe07fd2..a7a8c1602 100644 --- a/packages/myst-to-react/src/crossReference.tsx +++ b/packages/myst-to-react/src/crossReference.tsx @@ -13,7 +13,7 @@ import { InlineError } from './inlineError.js'; import { default as useSWR } from 'swr'; import { HoverPopover } from './components/index.js'; import { MyST } from './MyST.js'; -import type { GenericNode } from 'myst-common'; +import type { GenericNode, GenericParent } from 'myst-common'; import { selectMdastNodes } from 'myst-common'; import { scrollToElement } from './hashLink.js'; @@ -106,11 +106,11 @@ function useSelectNodes({ load, identifier }: { load?: boolean; identifier: stri const { remote, url, remoteBaseUrl, dataUrl } = useXRefState(); if (!load) return; const { data, error } = useFetchMdast({ remote, url, remoteBaseUrl, dataUrl }); - const mdast = data ? data.mdast : references?.article; - const parts = data ? data.frontmatter?.parts : frontmatter?.parts; + const mdast = data ? (data.mdast as GenericParent) : references?.article; + const parts = data ? (data.frontmatter?.parts as { mdast: GenericParent }) : frontmatter?.parts; let nodes: GenericNode[] = []; let htmlId: string | undefined; - [mdast, ...Object.values(parts ?? {})].forEach((tree) => { + [{ mdast }, ...Object.values(parts ?? {})].forEach(({ mdast: tree }) => { if (!tree || nodes.length > 0) return; const selected = selectMdastNodes(tree, identifier, 3); nodes = selected.nodes; @@ -141,8 +141,8 @@ export function CrossReferenceHover({ const parent = useXRefState(); const remoteBaseUrl = remoteBaseUrlIn ?? parent.remoteBaseUrl; const remote = !!remoteBaseUrl || parent.remote || remoteIn; - const url = parent.remote ? urlIn ?? parent.url : urlIn; - const dataUrl = parent.remote ? dataUrlIn ?? parent.dataUrl : dataUrlIn; + const url = parent.remote ? (urlIn ?? parent.url) : urlIn; + const dataUrl = parent.remote ? (dataUrlIn ?? parent.dataUrl) : dataUrlIn; const external = !!remoteBaseUrl || (url?.startsWith('http') ?? false); const scroll: React.MouseEventHandler = (e) => { e.preventDefault(); diff --git a/packages/site/src/pages/Article.tsx b/packages/site/src/pages/Article.tsx index 717b9c687..577c92831 100644 --- a/packages/site/src/pages/Article.tsx +++ b/packages/site/src/pages/Article.tsx @@ -42,7 +42,14 @@ export const ArticlePage = React.memo(function ({ const downloads = combineDownloads(manifest?.downloads, article.frontmatter); const tree = copyNode(article.mdast); const keywords = article.frontmatter?.keywords ?? []; - const parts = { ...extractKnownParts(tree), ...article.frontmatter?.parts }; + const parts = { + ...extractKnownParts(tree), + ...Object.fromEntries( + Object.entries(article.frontmatter?.parts ?? {}).map(([k, v]) => { + return [k, v.mdast]; + }), + ), + }; return (

Unexpected Error Occurred

Status: {error.status}

-

{error.data.message}

+

{error.data?.message ?? ''}

); } diff --git a/themes/article/app/components/Article.tsx b/themes/article/app/components/Article.tsx index 7d32c2626..ba85d61f5 100644 --- a/themes/article/app/components/Article.tsx +++ b/themes/article/app/components/Article.tsx @@ -34,7 +34,14 @@ export function Article({ }) { const keywords = article.frontmatter?.keywords ?? []; const tree = copyNode(article.mdast); - const parts = { ...extractKnownParts(tree), ...article.frontmatter?.parts }; + const parts = { + ...extractKnownParts(tree), + ...Object.fromEntries( + Object.entries(article.frontmatter?.parts ?? {}).map(([k, v]) => { + return [k, v.mdast]; + }), + ), + }; const { title, subtitle } = article.frontmatter; const compute = useComputeOptions(); const top = useThemeTop(); diff --git a/themes/book/app/components/ArticlePage.tsx b/themes/book/app/components/ArticlePage.tsx index f7b75658d..a262c6892 100644 --- a/themes/book/app/components/ArticlePage.tsx +++ b/themes/book/app/components/ArticlePage.tsx @@ -74,7 +74,14 @@ export const ArticlePage = React.memo(function ({ const downloads = combineDownloads(manifest?.downloads, article.frontmatter); const tree = copyNode(article.mdast); const keywords = article.frontmatter?.keywords ?? []; - const parts = { ...extractKnownParts(tree), ...article.frontmatter?.parts }; + const parts = { + ...extractKnownParts(tree), + ...Object.fromEntries( + Object.entries(article.frontmatter?.parts ?? {}).map(([k, v]) => { + return [k, v.mdast]; + }), + ), + }; const isOutlineMargin = useMediaQuery('(min-width: 1024px)'); return (