From aaa5c8e8e40be33aec74c1cf0073ac081cb918fc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Sun, 23 Mar 2025 17:34:14 -0700
Subject: [PATCH] feat: conditional render component

---
 docs/layout-components.md               | 22 ++++++++++++++++++++++
 quartz.layout.ts                        |  5 ++++-
 quartz/build.ts                         |  1 -
 quartz/components/ConditionalRender.tsx | 22 ++++++++++++++++++++++
 quartz/components/index.ts              |  2 ++
 5 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 quartz/components/ConditionalRender.tsx

diff --git a/docs/layout-components.md b/docs/layout-components.md
index 0c148a3..339ace8 100644
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -60,3 +60,25 @@ The `DesktopOnly` component is the counterpart to `MobileOnly`. It makes its chi
 ```typescript
 Component.DesktopOnly(Component.TableOfContents())
 ```
+
+## `ConditionalRender` Component
+
+The `ConditionalRender` component is a wrapper that conditionally renders its child component based on a provided condition function. This is useful for creating dynamic layouts where components should only appear under certain conditions.
+
+```typescript
+type ConditionalRenderConfig = {
+  component: QuartzComponent
+  condition: (props: QuartzComponentProps) => boolean
+}
+```
+
+### Example Usage
+
+```typescript
+Component.ConditionalRender({
+  component: Component.Search(),
+  condition: (props) => props.displayClass !== "fullpage",
+})
+```
+
+This example would only render the Search component when the page is not in fullpage mode.
diff --git a/quartz.layout.ts b/quartz.layout.ts
index 1c601a2..e5c3388 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -17,7 +17,10 @@ export const sharedPageComponents: SharedLayout = {
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    Component.Breadcrumbs(),
+    Component.ConditionalRender({
+      component: Component.Breadcrumbs(),
+      condition: (page) => page.fileData.slug !== "index",
+    }),
     Component.ArticleTitle(),
     Component.ContentMeta(),
     Component.TagList(),
diff --git a/quartz/build.ts b/quartz/build.ts
index 032063f..7cf4405 100644
--- a/quartz/build.ts
+++ b/quartz/build.ts
@@ -21,7 +21,6 @@ import { getStaticResourcesFromPlugins } from "./plugins"
 import { randomIdNonSecure } from "./util/random"
 import { ChangeEvent } from "./plugins/types"
 import { minimatch } from "minimatch"
-import { FileTrieNode } from "./util/fileTrie"
 
 type ContentMap = Map<
   FilePath,
diff --git a/quartz/components/ConditionalRender.tsx b/quartz/components/ConditionalRender.tsx
new file mode 100644
index 0000000..74a4db0
--- /dev/null
+++ b/quartz/components/ConditionalRender.tsx
@@ -0,0 +1,22 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+type ConditionalRenderConfig = {
+  component: QuartzComponent
+  condition: (props: QuartzComponentProps) => boolean
+}
+
+export default ((config: ConditionalRenderConfig) => {
+  const ConditionalRender: QuartzComponent = (props: QuartzComponentProps) => {
+    if (config.condition(props)) {
+      return <config.component {...props} />
+    }
+
+    return null
+  }
+
+  ConditionalRender.afterDOMLoaded = config.component.afterDOMLoaded
+  ConditionalRender.beforeDOMLoaded = config.component.beforeDOMLoaded
+  ConditionalRender.css = config.component.css
+
+  return ConditionalRender
+}) satisfies QuartzComponentConstructor<ConditionalRenderConfig>
diff --git a/quartz/components/index.ts b/quartz/components/index.ts
index 49a3cb6..2b601cd 100644
--- a/quartz/components/index.ts
+++ b/quartz/components/index.ts
@@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import Flex from "./Flex"
+import ConditionalRender from "./ConditionalRender"
 
 export {
   ArticleTitle,
@@ -46,4 +47,5 @@ export {
   Breadcrumbs,
   Comments,
   Flex,
+  ConditionalRender,
 }