From aaa5c8e8e40be33aec74c1cf0073ac081cb918fc Mon Sep 17 00:00:00 2001
From: Jacky Zhao <j.zhao2k19@gmail.com>
Date: Mon, 24 Mar 2025 00:34:14 +0000
Subject: [PATCH] feat: conditional render component
---
quartz/build.ts | 1 -
quartz/components/index.ts | 2 ++
docs/layout-components.md | 22 ++++++++++++++++++++++
quartz.layout.ts | 5 ++++-
quartz/components/ConditionalRender.tsx | 22 ++++++++++++++++++++++
5 files changed, 50 insertions(+), 2 deletions(-)
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 @@
```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 @@
// 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 { 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 Breadcrumbs from "./Breadcrumbs"
import Comments from "./Comments"
import Flex from "./Flex"
+import ConditionalRender from "./ConditionalRender"
export {
ArticleTitle,
@@ -46,4 +47,5 @@
Breadcrumbs,
Comments,
Flex,
+ ConditionalRender,
}
--
Gitblit v1.10.0