How to Add a Search Banner Component to the Custom Homepage in Discourse forum?

General
1

I am trying to add a search banner component to the new custom homepage feature in Discourse. I have followed the instructions to set up the custom homepage and added the plugin outlet, but the search banner does not appear.

Here are the steps I followed:

  1. Custom Homepage Template (home.hbs):
<div class="custom-homepage-content">
  <h1>Welcome to Our Forum</h1>
  {{plugin-outlet name="below-custom-homepage"}}
</div>
  1. Initializer to Insert the Search Banner (add-search-banner.js):
import { withPluginApi } from 'discourse/lib/plugin-api';

export default {
  name: 'add-search-banner',

  initialize() {
    withPluginApi('0.8.26', api => {
      api.decorateWidget('below-custom-homepage:before', helper => {
        return helper.h('search-banner');
      });
    });
  }
};
  1. CSS for Styling (common.scss):frowning: added again but component is already installed so it have all the necessary css)
.custom-homepage-content {
  text-align: center;
  padding: 50px;
}

.custom-search-banner {
  margin: 20px auto;
  width: 50%;
  display: flex;
  justify-content: center;
}

.custom-search-banner .search-input {
  width: 80%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.custom-search-banner .search-button {
  padding: 10px 20px;
  font-size: 16px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  margin-left: 10px;
  cursor: pointer;
}

.custom-search-banner .search-button:hover {
  background-color: #0056b3;
}
  1. about.json Configuration:
{
  "name": "AIR",
  "component": true,
  "modifiers": {
    "custom_homepage": "true",
    "serialize_topic_excerpts": true
  },
  "learn_more": "https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
}

Despite these steps, the search banner does not appear on the custom homepage. Can someone guide me on the correct approach to add the search banner component to the custom homepage?

GitHub PR for Reference: DEV: allow themes to render their own custom homepage by pmusaraj · Pull Request #26291 · discourse/discourse · GitHub

I attempted to add a search banner component to the custom homepage feature in Discourse by following the provided instructions. I expected the search banner to appear on the custom homepage, integrated seamlessly with the existing components. However, despite following the steps outlined in the documentation and implementing the necessary code changes, the search banner did not display on the custom homepage as expected.