From ec00a40aefca73596ab76e3ebe3a8e1129b43688 Mon Sep 17 00:00:00 2001
From: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 27 Jan 2026 18:27:17 +0000
Subject: [PATCH] chore(deps): bump the production-dependencies group with 4 updates (#2289)
---
docs/layout-components.md | 40 ++++++++++++++++++++++++++++++++++++++++
1 files changed, 40 insertions(+), 0 deletions(-)
diff --git a/docs/layout-components.md b/docs/layout-components.md
index 0c148a3..9a0b639 100644
--- a/docs/layout-components.md
+++ b/docs/layout-components.md
@@ -41,6 +41,15 @@
})
```
+> [!note] Overriding behavior
+> Components inside `Flex` get an additional CSS class `flex-component` that add the `display: flex` property. If you want to override this behavior, you can add a `display` property to the component's CSS class in your custom CSS file.
+>
+> ```scss
+> .flex-component {
+> display: block; // or any other display type
+> }
+> ```
+
## `MobileOnly` Component
The `MobileOnly` component is a wrapper that makes its child component only visible on mobile devices. This is useful for creating responsive layouts where certain components should only appear on smaller screens.
@@ -60,3 +69,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