style: scrollable tables

Jacky Zhao

2023-11-11 50a87d0d8673dbce6ebafef83f71f197df9bc196

style: scrollable tables

 quartz/styles/base.scss

@@ -390,23 +390,33 @@
  line-height: 1.6rem;
}

table {
.table-container {
  overflow-x: auto;

  & > table {
  margin: 1rem;
  padding: 1.5rem;
  border-collapse: collapse;

    th,
    td {
      min-width: 75px;
    }

  & > * {
    line-height: 2rem;
  }
}
}

th {
  text-align: left;
  padding: 0.4rem 1rem;
  padding: 0.4rem 0.7rem;
  border-bottom: 2px solid var(--gray);
}

td {
  padding: 0.2rem 1rem;
  padding: 0.2rem 0.7rem;
}

tr {

 quartz/util/jsx.ts

File was deleted

 quartz/util/jsx.tsx

New file
@@ -0,0 +1,29 @@
import { Components, toJsxRuntime } from "hast-util-to-jsx-runtime"
import { QuartzPluginData } from "../plugins/vfile"
import { Node, Root } from "hast"
import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
import { trace } from "./trace"
import { type FilePath } from "./path"

const customComponents: Components = {
  table: (props) => (
    <div class="table-container">
      <table {...props} />
    </div>
  ),
}

export function htmlToJsx(fp: FilePath, tree: Node<QuartzPluginData>) {
  try {
    // @ts-ignore (preact makes it angry)
    return toJsxRuntime(tree as Root, {
      Fragment,
      jsx,
      jsxs,
      elementAttributeNameCase: "html",
      components: customComponents,
    })
  } catch (e) {
    trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error)
  }
}