style: scrollable tables

This commit is contained in:
Jacky Zhao 2023-11-11 11:39:56 -08:00
parent 134b6ed582
commit 50a87d0d86
2 changed files with 34 additions and 10 deletions

View File

@ -390,23 +390,33 @@ p {
line-height: 1.6rem; line-height: 1.6rem;
} }
table { .table-container {
overflow-x: auto;
& > table {
margin: 1rem; margin: 1rem;
padding: 1.5rem; padding: 1.5rem;
border-collapse: collapse; border-collapse: collapse;
th,
td {
min-width: 75px;
}
& > * { & > * {
line-height: 2rem; line-height: 2rem;
} }
}
} }
th { th {
text-align: left; text-align: left;
padding: 0.4rem 1rem; padding: 0.4rem 0.7rem;
border-bottom: 2px solid var(--gray); border-bottom: 2px solid var(--gray);
} }
td { td {
padding: 0.2rem 1rem; padding: 0.2rem 0.7rem;
} }
tr { tr {

View File

@ -1,14 +1,28 @@
import { toJsxRuntime } from "hast-util-to-jsx-runtime" import { Components, toJsxRuntime } from "hast-util-to-jsx-runtime"
import { QuartzPluginData } from "../plugins/vfile" import { QuartzPluginData } from "../plugins/vfile"
import { Node, Root } from "hast" import { Node, Root } from "hast"
import { Fragment, jsx, jsxs } from "preact/jsx-runtime" import { Fragment, jsx, jsxs } from "preact/jsx-runtime"
import { trace } from "./trace" import { trace } from "./trace"
import { type FilePath } from "./path" 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>) { export function htmlToJsx(fp: FilePath, tree: Node<QuartzPluginData>) {
try { try {
// @ts-ignore (preact makes it angry) // @ts-ignore (preact makes it angry)
return toJsxRuntime(tree as Root, { Fragment, jsx, jsxs, elementAttributeNameCase: "html" }) return toJsxRuntime(tree as Root, {
Fragment,
jsx,
jsxs,
elementAttributeNameCase: "html",
components: customComponents,
})
} catch (e) { } catch (e) {
trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error) trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error)
} }