From 50a87d0d8673dbce6ebafef83f71f197df9bc196 Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sat, 11 Nov 2023 19:39:56 +0000
Subject: [PATCH] style: scrollable tables
---
/dev/null | 15 -------
quartz/styles/base.scss | 26 +++++++++----
quartz/util/jsx.tsx | 29 ++++++++++++++
3 files changed, 47 insertions(+), 23 deletions(-)
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
index 51694cb..c729656 100644
--- a/quartz/styles/base.scss
+++ b/quartz/styles/base.scss
@@ -390,23 +390,33 @@
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 {
diff --git a/quartz/util/jsx.ts b/quartz/util/jsx.ts
deleted file mode 100644
index 8cba485..0000000
--- a/quartz/util/jsx.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { 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"
-
-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" })
- } catch (e) {
- trace(`Failed to parse Markdown in \`${fp}\` into JSX`, e as Error)
- }
-}
diff --git a/quartz/util/jsx.tsx b/quartz/util/jsx.tsx
new file mode 100644
index 0000000..e813240
--- /dev/null
+++ b/quartz/util/jsx.tsx
@@ -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)
+ }
+}
--
Gitblit v1.10.0