From 7b052e884458f5caeb9574f22186b3736a793de7 Mon Sep 17 00:00:00 2001
From: Sebastian Moser <64004956+c2vi@users.noreply.github.com>
Date: Mon, 02 Jun 2025 05:56:51 +0000
Subject: [PATCH] docs: added note to not forget to add https:// to the plausible-host (for #1337) (#2000)
---
docs/layout-components.md | 31 +++++++++++++++++++++++++++++++
1 files changed, 31 insertions(+), 0 deletions(-)
diff --git a/docs/layout-components.md b/docs/layout-components.md
index 0c148a3..09c2d76 100644
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -60,3 +60,34 @@
```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",
+})
+```
+
+The example above would only render the Search component when the page is not in fullpage mode.
+
+```typescript
+Component.ConditionalRender({
+ component: Component.Breadcrumbs(),
+ condition: (page) => page.fileData.slug !== "index",
+})
+```
+
+The example above would hide breadcrumbs on the root `index.md` page.
--
Gitblit v1.10.0