An article header
-Some content
+An article header
+Some content
+
Some content
+Some content
My favourite number is {opts.favouriteNumber}
+ const opts = {...userOpts, ...defaultOpts} + function YourComponent(props: QuartzComponentProps) { + if (opts.favouriteNumber < 0) { + return null } - return YourComponent + returnMy favourite number is {opts.favouriteNumber}
+ } + + return YourComponent }) satisfies QuartzComponentConstructor ``` @@ -62,21 +61,21 @@ All Quartz components accept the same set of props: ```tsx title="quartz/components/types.ts" // simplified for sake of demonstration export type QuartzComponentProps = { - fileData: QuartzPluginData - cfg: GlobalConfiguration - tree: NodeExample Component
- } + function YourComponent() { + returnExample Component
+ } - YourComponent.css = ` + YourComponent.css = ` p.red-text { color: red; } ` - return YourComponent + return YourComponent }) satisfies QuartzComponentConstructor ``` @@ -107,17 +106,16 @@ Imported styles, however, can be from SCSS files: import styles from "./styles/YourComponent.scss" export default (() => { - function YourComponent() { - returnExample Component
- } + function YourComponent() { + returnExample Component
+ } - YourComponent.css = styles - return YourComponent + YourComponent.css = styles + return YourComponent }) satisfies QuartzComponentConstructor ``` -> [!warning] -> Quartz does not use CSS modules so any styles you declare here apply _globally_. If you only want it to apply to your component, make sure you use specific class names and selectors. +> [!warning] Quartz does not use CSS modules so any styles you declare here apply _globally_. If you only want it to apply to your component, make sure you use specific class names and selectors. ### Scripts and Interactivity @@ -125,25 +123,24 @@ What about interactivity? Suppose you want to add an-click handler for example. ```tsx title="quartz/components/YourComponent.tsx" export default (() => { - function YourComponent() { - return - } + function YourComponent() { + return + } - YourComponent.beforeDOM = ` + YourComponent.beforeDOM = ` console.log("hello from before the page loads!") ` - YourComponent.afterDOM = ` + YourComponent.afterDOM = ` document.getElementById('btn').onclick = () => { alert('button clicked!') } ` - return YourComponent + return YourComponent }) satisfies QuartzComponentConstructor ``` -> [!hint] -> For those coming from React, Quartz components are different from React components in that it only uses JSX for templating and layout. Hooks like `useEffect`, `useState`, etc. are not rendered and other properties that accept functions like `onClick` handlers will not work. Instead, do it using a regular JS script that modifies the DOM element directly. +> [!hint] For those coming from React, Quartz components are different from React components in that it only uses JSX for templating and layout. Hooks like `useEffect`, `useState`, etc. are not rendered and other properties that accept functions like `onClick` handlers will not work. Instead, do it using a regular JS script that modifies the DOM element directly. As the names suggest, the `.beforeDOMLoaded` scripts are executed _before_ the page is done loading so it doesn't have access to any elements on the page. This is mostly used to prefetch any critical data. @@ -153,16 +150,15 @@ If you need to create an `afterDOMLoaded` script that depends on _page specific_ ```ts document.addEventListener("nav", () => { - // do page specific logic here - // e.g. attach event listeners - const toggleSwitch = document.querySelector("#switch") as HTMLInputElement - toggleSwitch.removeEventListener("change", switchTheme) - toggleSwitch.addEventListener("change", switchTheme, { passive: true }) + // do page specific logic here + // e.g. attach event listeners + const toggleSwitch = document.querySelector("#switch") as HTMLInputElement + toggleSwitch.removeEventListener("change", switchTheme) + toggleSwitch.addEventListener("change", switchTheme, {passive: true}) }) ``` -It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks. -This will get called on page navigation. +It is best practice to track any event handlers via `window.addCleanup` to prevent memory leaks. This will get called on page navigation. #### Importing Code @@ -176,12 +172,12 @@ Quartz supports importing component code through `.inline.ts` files. import script from "./scripts/graph.inline" export default (() => { - function YourComponent() { - return - } + function YourComponent() { + return + } - YourComponent.afterDOM = script - return YourComponent + YourComponent.afterDOM = script + return YourComponent }) satisfies QuartzComponentConstructor ``` @@ -190,7 +186,7 @@ export default (() => { import * as d3 from "d3" document.getElementById("btn").onclick = () => { - alert("button clicked!") + alert("button clicked!") } ``` @@ -206,7 +202,7 @@ import Content from "./pages/Content" import Darkmode from "./Darkmode" import YourComponent from "./YourComponent" -export { ArticleTitle, Content, Darkmode, YourComponent } +export {ArticleTitle, Content, Darkmode, YourComponent} ``` Then, you can use it like any other component in `quartz.layout.ts` via `Component.YourComponent()`. See the [[configuration#Layout|layout]] section for more details. @@ -217,18 +213,17 @@ As Quartz components are just functions that return React components, you can co import YourComponent from "./YourComponent" export default (() => { - function AnotherComponent(props: QuartzComponentProps) { - return ( -It's nested!
-It's nested!
+- {segmentsElements} -
- ) - } else { - return null - } + return ( ++ {segmentsElements} +
+ ) + } else { + return null } + } - ContentMetadata.css = style + ContentMetadata.css = style - return ContentMetadata + return ContentMetadata }) satisfies QuartzComponentConstructor diff --git a/quartz/components/Darkmode.tsx b/quartz/components/Darkmode.tsx index cabf7f63f..54d1eae79 100644 --- a/quartz/components/Darkmode.tsx +++ b/quartz/components/Darkmode.tsx @@ -4,63 +4,57 @@ import darkmodeScript from "./scripts/darkmode.inline" import styles from "./styles/darkmode.scss" import { - QuartzComponent, - QuartzComponentConstructor, - QuartzComponentProps, + QuartzComponent, + QuartzComponentConstructor, + QuartzComponentProps, } from "./types" -import { i18n } from "../i18n" -import { classNames } from "../util/lang" +import {i18n} from "../i18n" +import {classNames} from "../util/lang" const Darkmode: QuartzComponent = ({ - displayClass, - cfg, + displayClass, + cfg, }: QuartzComponentProps) => { - return ( -- - {i18n( - cfg.locale, - ).components.recentNotes.seeRemainingMore({ - remaining, - })} - + return ( +
+ + {i18n(cfg.locale).components.recentNotes.seeRemainingMore({ + remaining, + })} + +
+ )} +Search
*/} - - -Search
*/} + + +{i18n(cfg.locale).pages.error.notFound}
-{i18n(cfg.locale).pages.error.notFound}
+{content}
-- {i18n( - cfg.locale, - ).pages.folderContent.itemsUnderFolder({ - count: allPagesInFolder.length, - })} -
- )} -{content}
++ {i18n(cfg.locale).pages.folderContent.itemsUnderFolder({ + count: allPagesInFolder.length, + })} +
+ )} +{content}
++ {i18n(cfg.locale).pages.tagContent.totalTags({ + count: tags.length, + })} +
+{content}
-- {i18n(cfg.locale).pages.tagContent.totalTags({ - count: tags.length, - })} -
-{content}
} -- {i18n( - cfg.locale, - ).pages.tagContent.itemsUnderTag({ - count: pages.length, - })} - {pages.length > numPages && ( - <> - {" "} - - {i18n( - cfg.locale, - ).pages.tagContent.showingFirst( - { count: numPages }, - )} - - - )} -
-{content}
}- {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ - count: pages.length, - })} -
-+ {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ + count: pages.length, + })} + {pages.length > numPages && ( + <> + {" "} + + {i18n(cfg.locale).pages.tagContent.showingFirst({ + count: numPages, + })} + + + )} +
++ {i18n(cfg.locale).pages.tagContent.itemsUnderTag({ + count: pages.length, + })} +
+#${tag}
#${tag}
${content}
` + }` + itemTile.addEventListener("click", (event) => { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) + return + hideSearch() + }) + + const handler = (event: MouseEvent) => { + if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) + return + hideSearch() } - const formatForDisplay = (term: string, id: number) => { - const slug = idDataMap[id] - return { - id, - slug, - title: - searchType === "tags" - ? data[slug].title - : highlight(term, data[slug].title ?? ""), - content: highlight(term, data[slug].content ?? "", true), - tags: highlightTags(term.substring(1), data[slug].tags), - } + async function onMouseEnter(ev: MouseEvent) { + if (!ev.target) return + const target = ev.target as HTMLInputElement + await displayPreview(target) } - function highlightTags(term: string, tags: string[]) { - if (!tags || searchType !== "tags") { - return [] - } + itemTile.addEventListener("mouseenter", onMouseEnter) + window.addCleanup(() => + itemTile.removeEventListener("mouseenter", onMouseEnter), + ) + itemTile.addEventListener("click", handler) + window.addCleanup(() => itemTile.removeEventListener("click", handler)) - return tags - .map((tag) => { - if (tag.toLowerCase().includes(term.toLowerCase())) { - return `#${tag}
#${tag}
${content}
` - }` - itemTile.addEventListener("click", (event) => { - if ( - event.altKey || - event.ctrlKey || - event.metaKey || - event.shiftKey - ) - return - hideSearch() - }) - - const handler = (event: MouseEvent) => { - if ( - event.altKey || - event.ctrlKey || - event.metaKey || - event.shiftKey - ) - return - hideSearch() - } - - async function onMouseEnter(ev: MouseEvent) { - if (!ev.target) return - const target = ev.target as HTMLInputElement - await displayPreview(target) - } - - itemTile.addEventListener("mouseenter", onMouseEnter) - window.addCleanup(() => - itemTile.removeEventListener("mouseenter", onMouseEnter), - ) - itemTile.addEventListener("click", handler) - window.addCleanup(() => itemTile.removeEventListener("click", handler)) - - return itemTile - } - - async function displayResults(finalResults: Item[]) { - if (!results) return - - removeAllChildren(results) - if (finalResults.length === 0) { - results.innerHTML = ` + removeAllChildren(results) + if (finalResults.length === 0) { + results.innerHTML = `Try another search term?
` - } else { - results.append(...finalResults.map(resultToHTML)) - } - - if (finalResults.length === 0 && preview) { - // no results, clear previous preview - removeAllChildren(preview) - } else { - // focus on first result, then also dispatch preview immediately - const firstChild = results.firstElementChild as HTMLElement - firstChild.classList.add("focus") - currentHover = firstChild as HTMLInputElement - await displayPreview(firstChild) - } + } else { + results.append(...finalResults.map(resultToHTML)) } - async function fetchContent(slug: FullSlug): Promise