fix: move ExternalPlugin overrides before loadQuartzConfig in quartz.ts docs

loadQuartzConfig() internally calls loadQuartzLayout() to build the
PageTypeDispatcher, which instantiates components. Plugin option overrides
must be registered before this happens. Updated quartz.ts and all doc
snippets that show the ExternalPlugin override pattern to place calls
before loadQuartzConfig(). Also updated OxHugo and Roam docs from stale
v4 plugins pattern to v5 override pattern.

docs/advanced/making plugins.md

@@ -696,15 +696,15 @@ For options that require JavaScript callback functions (not expressible in YAML)
 ```ts title="quartz.ts (override)"
 import * as ExternalPlugin from "./.quartz/plugins"
 
+// Must be placed before loadQuartzConfig()
 ExternalPlugin.MyPlugin({
-  // callback functions or other non-serializable options
   customFn: (data) => {
     // ...
   },
 })
 ```
 
-Options set via `quartz.ts` are merged with YAML options at instantiation time, with `quartz.ts` overrides taking precedence.
+Options set via `quartz.ts` are merged with YAML options at instantiation time, with `quartz.ts` overrides taking precedence. These calls must be placed **before** `loadQuartzConfig()` in your `quartz.ts`.
 
 ### Development Workflow
 

docs/configuration.md

@@ -242,6 +242,7 @@ plugins:
 > Some plugin options require JavaScript callback functions (e.g. custom sort, filter, or map functions) that can't be expressed in YAML. For these, use the TS override in `quartz.ts`:
 >
 > ```ts title="quartz.ts"
+> import { loadQuartzConfig, loadQuartzLayout } from "./quartz/plugins/loader/config-loader"
 > import * as ExternalPlugin from "./.quartz/plugins"
 >
 > ExternalPlugin.Explorer({
@@ -250,9 +251,13 @@ plugins:
 >     return node
 >   },
 > })
+>
+> const config = await loadQuartzConfig()
+> export default config
+> export const layout = await loadQuartzLayout()
 > ```
 >
-> Options set in `quartz.ts` are merged with YAML options and take precedence. See the plugin-specific documentation for available callback options.
+> Options set in `quartz.ts` are merged with YAML options and take precedence. Plugin overrides must be placed **before** `loadQuartzConfig()` so they are applied when components are instantiated during config loading. See the plugin-specific documentation for available callback options.
 
 You can see a list of all plugins and their configuration options [[tags/plugin|here]].
 

docs/features/OxHugo compatibility.md

@@ -27,18 +27,13 @@ plugins:
     order: 5
 ```
 
-For the TS override approach:
+For the TS override approach, place overrides before `loadQuartzConfig()` in `quartz.ts`:
 
 ```ts title="quartz.ts (override)"
-plugins: {
+import * as ExternalPlugin from "./.quartz/plugins"
-  transformers: [
+
-    ExternalPlugin.FrontMatter({ delims: "+++", language: "toml" }),
+ExternalPlugin.NoteProperties({ delims: "+++", language: "toml" })
-    // ...
+ExternalPlugin.OxHugoFlavouredMarkdown()
-    ExternalPlugin.OxHugoFlavouredMarkdown(),
-    ExternalPlugin.GitHubFlavoredMarkdown(),
-    // ...
-  ],
-}
 ```
 
 > [!note]

docs/features/Roam Research compatibility.md

@@ -19,17 +19,12 @@ plugins:
     order: 30
 ```
 
-For the TS override approach:
+For the TS override approach, place overrides before `loadQuartzConfig()` in `quartz.ts`:
 
 ```ts title="quartz.ts (override)"
-plugins: {
+import * as ExternalPlugin from "./.quartz/plugins"
-  transformers: [
+
-    // ...
+ExternalPlugin.RoamFlavoredMarkdown()
-    ExternalPlugin.RoamFlavoredMarkdown(),
-    ExternalPlugin.ObsidianFlavoredMarkdown(),
-    // ...
-  ],
-}
 ```
 
 > [!warning]

docs/features/breadcrumbs.md

@@ -34,6 +34,7 @@ plugins:
 For the TS override approach:
 
 ```ts title="quartz.ts (override)"
+// Must be placed before loadQuartzConfig()
 ExternalPlugin.Breadcrumbs({
   spacerSymbol: "❯",
   rootName: "Home",

docs/plugins/BasesPage.md

@@ -51,6 +51,7 @@ For custom view renderers, use a TS override in `quartz.ts`:
 ```ts title="quartz.ts (override)"
 import * as ExternalPlugin from "./.quartz/plugins"
 
+// Must be placed before loadQuartzConfig()
 ExternalPlugin.BasesPage({
   defaultViewType: "table",
   customViews: {

docs/plugins/CustomOgImages.md

@@ -43,12 +43,13 @@ For the TS override approach (needed for custom `imageStructure`):
 import * as ExternalPlugin from "./.quartz/plugins"
 import { defaultImage } from "./quartz/plugins/emitters/ogImage"
 
+// Must be placed before loadQuartzConfig()
 ExternalPlugin.CustomOgImages({
   colorScheme: "lightMode",
   width: 1200,
   height: 630,
   excludeRoot: false,
-  imageStructure: defaultImage, // custom JSX component — requires TS
+  imageStructure: defaultImage,
 })
 ```
 

docs/plugins/Explorer.md

@@ -47,6 +47,7 @@ This plugin accepts the following configuration options:
 ```ts title="quartz.ts"
 import * as ExternalPlugin from "./.quartz/plugins"
 
+// Must be placed before loadQuartzConfig()
 ExternalPlugin.Explorer({
   mapFn: (node) => {
     node.displayName = node.displayName.toUpperCase()