Custom layout based on file properties

My goal was to add RecentNotes component to the layout of the home page but not to the all notes. To do so, the steps where following:

1. Add a custom OnlyFor component under: quartz/components/OnlyFor.tsx
2. Export it in: ./quartz/components/types.ts
3. Use it to define layout in ./quartz.layout.ts
4. Add recent_notes : trueproperty to my home page via Obsidian.

Custom OnlyFor component

import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 
interface OnlyForOptions {
  /**
   * The properties to check for
   */
  properties: string[];
}
 
export default ((opts?: Partial<OnlyForOptions>, component?: QuartzComponent) => {
  if (component) {
    const Component = component
 
    function OnlyFor(props: QuartzComponentProps) {
      const hasAllProperties = opts?.properties?.every(
        property => (props.fileData.frontmatter?.[property] === true
          || props.fileData.frontmatter?.[property] === "true")
      );
 
      return hasAllProperties ? <Component {...props} /> : <></>;
    }
 
    OnlyFor.displayName = component.displayName
    OnlyFor.afterDOMLoaded = component.afterDOMLoaded
    OnlyFor.beforeDOMLoaded = component.beforeDOMLoaded
    OnlyFor.css = component.css
    return OnlyFor
  } else {
    return () => <></>
  }
}) satisfies QuartzComponentConstructor

Using OnlyFor component

As I wanted to add RecentNotes component only for only homepage I changed following in the ./quartz.layout.ts

export const sharedPageComponents: SharedLayout = {
  head: Component.Head(),
  header: [],
- afterBody: [],
+ afterBody: [
+   Component.OnlyFor(
+     { properties: ["recent_notes"] },
+     Component.RecentNotes(
+       { showTags: false }
+     )
+   )
+ ],
...
}

And proceeded to add the property in Obsidian, cmd+P and then search for Add file property and add recent_notes property with a value true.