diff --git a/docs/advanced/creating components.md b/docs/advanced/creating components.md index 885acc48d..8e0a0a48b 100644 --- a/docs/advanced/creating components.md +++ b/docs/advanced/creating components.md @@ -169,7 +169,7 @@ document.addEventListener("render", (e) => { // runs when content is rendered or re-rendered // e.detail.htmlElement contains the DOM element that was updated const container = e.detail.htmlElement - + // attach event listeners to elements within this container const toggleSwitch = container.querySelector("#switch") as HTMLInputElement if (toggleSwitch) { diff --git a/docs/advanced/event system.md b/docs/advanced/event system.md index d0f3543bc..d95097a7a 100644 --- a/docs/advanced/event system.md +++ b/docs/advanced/event system.md @@ -15,16 +15,17 @@ document.addEventListener("nav", (e: CustomEventMap["nav"]) => { // Access the current page URL const currentUrl = e.detail.url console.log(`User navigated to: ${currentUrl}`) - + // Good for: // - Analytics tracking - // - URL-dependent state updates + // - URL-dependent state updates // - Setting up page-level event handlers // - Theme/mode initialization }) ``` **When it fires:** + - On initial page load - On client-side navigation (if SPA routing is enabled) - Does NOT fire on content re-renders @@ -37,11 +38,11 @@ The `render` event is fired when content needs to be processed or updated. This document.addEventListener("render", (e: CustomEventMap["render"]) => { // Access the container that was updated const container = e.detail.htmlElement - + // Process elements within this container const codeBlocks = container.querySelectorAll("pre code") codeBlocks.forEach(addSyntaxHighlighting) - + // Good for: // - Setting up event listeners on new content // - Processing dynamic content (syntax highlighting, math rendering, etc.) @@ -50,6 +51,7 @@ document.addEventListener("render", (e: CustomEventMap["render"]) => { ``` **When it fires:** + - On initial page load (with `document.body` as the container) - When popover content is loaded - When search results are displayed @@ -106,10 +108,12 @@ Always clean up event handlers to prevent memory leaks: ```ts addRenderListener((container) => { const buttons = container.querySelectorAll(".my-button") - - const handleClick = (e) => { /* ... */ } - - buttons.forEach(button => { + + const handleClick = (e) => { + /* ... */ + } + + buttons.forEach((button) => { button.addEventListener("click", handleClick) // Clean up when navigating away window.addCleanup(() => { @@ -168,4 +172,4 @@ addRenderListener((container) => { }) ``` -This provides cleaner separation of concerns and better performance. \ No newline at end of file +This provides cleaner separation of concerns and better performance. diff --git a/quartz/components/scripts/explorer.inline.ts b/quartz/components/scripts/explorer.inline.ts index 6361196f3..fbae65e80 100644 --- a/quartz/components/scripts/explorer.inline.ts +++ b/quartz/components/scripts/explorer.inline.ts @@ -291,12 +291,6 @@ document.addEventListener("prenav", async () => { document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { const currentSlug = e.detail.url - const rerender = e.detail.rerender - - // If this is secondary nav call, do not populate explorer again - if (rerender) { - return - } await setupExplorer(currentSlug) diff --git a/quartz/components/scripts/graph.inline.ts b/quartz/components/scripts/graph.inline.ts index 2f75fa218..11f7365dd 100644 --- a/quartz/components/scripts/graph.inline.ts +++ b/quartz/components/scripts/graph.inline.ts @@ -577,9 +577,6 @@ function cleanupGlobalGraphs() { document.addEventListener("nav", async (e: CustomEventMap["nav"]) => { const slug = e.detail.url - // if we are rerendering, we can ignore this event - if (e.detail.rerender) return - addToVisited(simplifySlug(slug)) async function renderLocalGraph() { diff --git a/quartz/components/scripts/popover.inline.ts b/quartz/components/scripts/popover.inline.ts index e5576758c..32757041d 100644 --- a/quartz/components/scripts/popover.inline.ts +++ b/quartz/components/scripts/popover.inline.ts @@ -1,5 +1,5 @@ import { computePosition, flip, inline, shift } from "@floating-ui/dom" -import { FullSlug, normalizeRelativeURLs } from "../../util/path" +import { normalizeRelativeURLs } from "../../util/path" import { fetchCanonical, dispatchRenderEvent, addRenderListener } from "./util" const p = new DOMParser() diff --git a/quartz/components/scripts/spa.inline.ts b/quartz/components/scripts/spa.inline.ts index 230aa874c..e7c4c46f1 100644 --- a/quartz/components/scripts/spa.inline.ts +++ b/quartz/components/scripts/spa.inline.ts @@ -38,7 +38,7 @@ const getOpts = ({ target }: Event): { url: URL; scroll?: boolean } | undefined function notifyNav(url: FullSlug) { const event: CustomEventMap["nav"] = new CustomEvent("nav", { detail: { url } }) document.dispatchEvent(event) - + // Also trigger render event for the whole document body dispatchRenderEvent(document.body) } diff --git a/quartz/components/styles/encrypt.scss b/quartz/components/styles/encrypt.scss index 0fb77d756..dd6e5ba3f 100644 --- a/quartz/components/styles/encrypt.scss +++ b/quartz/components/styles/encrypt.scss @@ -137,7 +137,8 @@ } // Hide the decrypt form when encrypted content appears in popover and search -.search-space, .popover { +.search-space, +.popover { .encrypted-content .encryption-notice .decrypt-form { display: none; }