From 1547c8af0d3fa4dcfe6055ff423d60a4d2ddf184 Mon Sep 17 00:00:00 2001 From: Jacky Zhao Date: Tue, 4 Jul 2023 10:08:32 -0700 Subject: [PATCH] fix indexing causing main thread freeze, various polish --- package-lock.json | 9 ++ package.json | 1 + quartz.config.ts | 4 +- quartz/components/DesktopOnly.tsx | 20 +++ quartz/components/Graph.tsx | 18 +-- quartz/components/Head.tsx | 4 +- quartz/components/MobileOnly.tsx | 20 +++ quartz/components/PageList.tsx | 2 +- quartz/components/ReadingTime.tsx | 3 +- quartz/components/TableOfContents.tsx | 2 +- quartz/components/TagList.tsx | 1 + quartz/components/index.ts | 6 +- quartz/components/pages/FolderContent.tsx | 10 +- quartz/components/pages/TagContent.tsx | 9 +- quartz/components/renderPage.tsx | 2 +- quartz/components/scripts/graph.inline.ts | 18 +-- quartz/components/scripts/popover.inline.ts | 130 ++++++++++---------- quartz/components/scripts/search.inline.ts | 8 +- quartz/components/styles/darkmode.scss | 1 + quartz/components/styles/graph.scss | 2 +- quartz/components/styles/listPage.scss | 6 +- quartz/components/styles/popover.scss | 4 +- quartz/components/styles/search.scss | 4 +- quartz/path.ts | 8 +- quartz/plugins/emitters/contentIndex.ts | 7 +- quartz/plugins/emitters/folderPage.tsx | 3 +- quartz/plugins/emitters/tagPage.tsx | 3 +- quartz/plugins/index.ts | 26 ++-- quartz/processors/emit.ts | 10 +- quartz/resources.tsx | 2 +- quartz/styles/base.scss | 40 +++--- quartz/styles/variables.scss | 5 + quartz/theme.ts | 8 +- 33 files changed, 255 insertions(+), 141 deletions(-) create mode 100644 quartz/components/DesktopOnly.tsx create mode 100644 quartz/components/MobileOnly.tsx create mode 100644 quartz/styles/variables.scss diff --git a/package-lock.json b/package-lock.json index 92e22eb0..fb8f23c7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "mdast-util-find-and-replace": "^2.2.2", "mdast-util-to-string": "^3.2.0", "micromorph": "^0.4.5", + "plausible-tracker": "^0.3.8", "preact": "^10.14.1", "preact-render-to-string": "^6.0.3", "pretty-time": "^1.1.0", @@ -3619,6 +3620,14 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/plausible-tracker": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/plausible-tracker/-/plausible-tracker-0.3.8.tgz", + "integrity": "sha512-lmOWYQ7s9KOUJ1R+YTOR3HrjdbxIS2Z4de0P/Jx2dQPteznJl2eX3tXxKClpvbfyGP59B5bbhW8ftN59HbbFSg==", + "engines": { + "node": ">=10" + } + }, "node_modules/preact": { "version": "10.15.1", "resolved": "https://registry.npmjs.org/preact/-/preact-10.15.1.tgz", diff --git a/package.json b/package.json index 614bb761..689548d8 100644 --- a/package.json +++ b/package.json @@ -41,6 +41,7 @@ "mdast-util-find-and-replace": "^2.2.2", "mdast-util-to-string": "^3.2.0", "micromorph": "^0.4.5", + "plausible-tracker": "^0.3.8", "preact": "^10.14.1", "preact-render-to-string": "^6.0.3", "pretty-time": "^1.1.0", diff --git a/quartz.config.ts b/quartz.config.ts index 58c1d9cd..18f2533e 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -23,8 +23,8 @@ const contentPageLayout: PageLayout = { left: [ Component.PageTitle(), Component.Search(), - Component.TableOfContents(), - Component.Darkmode() + Component.Darkmode(), + Component.DesktopOnly(Component.TableOfContents()), ], right: [ Component.Graph(), diff --git a/quartz/components/DesktopOnly.tsx b/quartz/components/DesktopOnly.tsx new file mode 100644 index 00000000..a1c5dae9 --- /dev/null +++ b/quartz/components/DesktopOnly.tsx @@ -0,0 +1,20 @@ +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" + +export default ((component?: QuartzComponent) => { + if (component) { + const Component = component + function DesktopOnly(props: QuartzComponentProps) { + return
+ +
+ } + + DesktopOnly.displayName = component.displayName + DesktopOnly.afterDOMLoaded = component?.afterDOMLoaded + DesktopOnly.beforeDOMLoaded = component?.beforeDOMLoaded + DesktopOnly.css = component?.css + return DesktopOnly + } else { + return () => <> + } +}) satisfies QuartzComponentConstructor diff --git a/quartz/components/Graph.tsx b/quartz/components/Graph.tsx index 01461882..e7f1df23 100644 --- a/quartz/components/Graph.tsx +++ b/quartz/components/Graph.tsx @@ -25,23 +25,23 @@ const defaultOptions: GraphOptions = { drag: true, zoom: true, depth: 1, - scale: 1.2, - repelForce: 2, - centerForce: 1, + scale: 1.1, + repelForce: 0.5, + centerForce: 0.3, linkDistance: 30, fontSize: 0.6, - opacityScale: 3 + opacityScale: 1 }, globalGraph: { drag: true, zoom: true, depth: -1, - scale: 1.2, - repelForce: 1, - centerForce: 1, + scale: 0.9, + repelForce: 0.5, + centerForce: 0.3, linkDistance: 30, - fontSize: 0.5, - opacityScale: 3 + fontSize: 0.6, + opacityScale: 1 } } diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index f8439a05..bfc7bae2 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -1,10 +1,10 @@ -import { resolveToRoot } from "../path" +import { clientSideSlug, resolveToRoot } from "../path" import { JSResourceToScriptElement } from "../resources" import { QuartzComponentConstructor, QuartzComponentProps } from "./types" export default (() => { function Head({ fileData, externalResources }: QuartzComponentProps) { - const slug = fileData.slug! + const slug = clientSideSlug(fileData.slug!) const title = fileData.frontmatter?.title ?? "Untitled" const description = fileData.description ?? "No description provided" const { css, js } = externalResources diff --git a/quartz/components/MobileOnly.tsx b/quartz/components/MobileOnly.tsx new file mode 100644 index 00000000..b75fd76a --- /dev/null +++ b/quartz/components/MobileOnly.tsx @@ -0,0 +1,20 @@ +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" + +export default ((component?: QuartzComponent) => { + if (component) { + const Component = component + function MobileOnly(props: QuartzComponentProps) { + return
+ +
+ } + + MobileOnly.displayName = component.displayName + MobileOnly.afterDOMLoaded = component?.afterDOMLoaded + MobileOnly.beforeDOMLoaded = component?.beforeDOMLoaded + MobileOnly.css = component?.css + return MobileOnly + } else { + return () => <> + } +}) satisfies QuartzComponentConstructor diff --git a/quartz/components/PageList.tsx b/quartz/components/PageList.tsx index 3c39bee9..b92720de 100644 --- a/quartz/components/PageList.tsx +++ b/quartz/components/PageList.tsx @@ -23,7 +23,7 @@ function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): numb export function PageList({ fileData, allFiles }: QuartzComponentProps) { const slug = fileData.slug! - return