style: scrollable tables

This commit is contained in:
Jacky Zhao 2023-11-11 11:39:56 -08:00
parent 14f8287257
commit 5da1be1b18
2 changed files with 34 additions and 10 deletions

View File

@ -390,23 +390,33 @@ p {
line-height: 1.6rem;
}
table {
margin: 1rem;
padding: 1.5rem;
border-collapse: collapse;
& > * {
line-height: 2rem;
.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 {

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 { 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" })
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)
}