popovers

Jacky Zhao

2023-06-17 8bfee04c8c6948a88114d53769d4bb89b8ec7bf5

 quartz/components/Content.tsx

@@ -2,10 +2,30 @@
import { Fragment, jsx, jsxs } from 'preact/jsx-runtime'
import { toJsxRuntime } from "hast-util-to-jsx-runtime"

function Content({ tree }: QuartzComponentProps) {
  // @ts-ignore (preact makes it angry)
  const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
  return <article>{content}</article>
// @ts-ignore
import popoverScript from './scripts/popover.inline'
import popoverStyle from './styles/popover.scss'

interface Options {
  enablePopover: boolean
}

export default (() => Content) satisfies QuartzComponentConstructor
const defaultOptions: Options = {
  enablePopover: true
}

export default ((opts?: Partial<Options>) => {
  function Content({ tree }: QuartzComponentProps) {
    // @ts-ignore (preact makes it angry)
    const content = toJsxRuntime(tree, { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' })
    return <article>{content}</article>
  }

  const enablePopover = opts?.enablePopover ?? defaultOptions.enablePopover
  if (enablePopover) {
    Content.afterDOMLoaded = popoverScript
    Content.css = popoverStyle
  }

  return Content
}) satisfies QuartzComponentConstructor