diff --git a/src/components/NotionBlocks.astro b/src/components/NotionBlocks.astro index a7041bc..60e3210 100644 --- a/src/components/NotionBlocks.astro +++ b/src/components/NotionBlocks.astro @@ -12,6 +12,7 @@ import Heading2 from './notion/Heading2.astro' import Heading3 from './notion/Heading3.astro' import Image from './notion/Image.astro' import LinkToPage from './notion/LinkToPage.astro' +import Equation from './notion/Equation.astro' import NumberedListItems from './notion/NumberedListItems.astro' import Paragraph from './notion/Paragraph.astro' import Quote from './notion/Quote.astro' @@ -88,6 +89,8 @@ const { return case 'table': return + case 'equation': + return case 'column_list': return case 'synced_block': diff --git a/src/components/notion/Equation.astro b/src/components/notion/Equation.astro index d89352a..99e4cdf 100644 --- a/src/components/notion/Equation.astro +++ b/src/components/notion/Equation.astro @@ -17,6 +17,7 @@ if (!block.Equation) { class="equation" set:html={katex.renderToString(block.Equation.Expression, { throwOnError: false, + displayMode: true, })} /> diff --git a/src/lib/data-utils.ts b/src/lib/data-utils.ts index 3e0aeb4..4c4021f 100644 --- a/src/lib/data-utils.ts +++ b/src/lib/data-utils.ts @@ -386,6 +386,7 @@ function parseRichTexts(raw: any): RichText[] { let href: string | undefined let mentionPageId: string | undefined + let equationExpression: string | undefined if (Array.isArray(decorations)) { for (const deco of decorations) { @@ -418,6 +419,16 @@ function parseRichTexts(raw: any): RichText[] { mentionPageId = typeof value === 'object' && value?.id ? value.id : undefined break + case 'e': { + if (typeof value === 'string') { + equationExpression = value + } else if (Array.isArray(value) && typeof value[0] === 'string') { + equationExpression = value[0] + } else if (typeof text === 'string') { + equationExpression = text + } + break + } case 'h': if (typeof value === 'string') { annotation.Color = value @@ -429,6 +440,27 @@ function parseRichTexts(raw: any): RichText[] { } } + if (equationExpression) { + const richText: RichText = { + Equation: { Expression: equationExpression }, + Annotation: { ...annotation }, + PlainText: equationExpression, + } + + if (href) { + richText.Href = href + } + + if (mentionPageId) { + richText.Mention = { + Type: 'page', + Page: { Id: mentionPageId }, + } + } + + return richText + } + const richText = buildText(typeof text === 'string' ? text : '', href, { Color: annotation.Color, Bold: annotation.Bold, @@ -747,6 +779,21 @@ function convertBlock( }, } } + case 'equation': { + const expression = + block.properties?.title?.[0]?.[0]?.toString() || + block.properties?.equation?.[0]?.[0]?.toString() || + '' + + if (!expression) return null + + return { + Id: block.id, + Type: 'equation', + HasChildren: false, + Equation: { Expression: expression }, + } + } case 'tweet': { const url = block.properties?.source?.[0]?.[0] || '' if (!url) return null diff --git a/src/pages/blog/[...id].astro b/src/pages/blog/[...id].astro index 7993329..213a6d9 100644 --- a/src/pages/blog/[...id].astro +++ b/src/pages/blog/[...id].astro @@ -318,15 +318,3 @@ export const prerender = false; }) - - diff --git a/src/styles/global.css b/src/styles/global.css index 719f8dc..c1d50a4 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,4 +1,5 @@ @import 'tailwindcss'; +@import 'katex/dist/katex.min.css'; @custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));