Search Box not on start page

[subbiesub]

Hey folks,

i am pretty new here. I have searched a lot but i can't find a suitable answer:
Is it possible, and if so how, to disable the search box on the start page? (e.g. in case of the out of box my-website example)
I still want it on the docs pages, but not on the frontpage.

Any idea?
Kind Regards
subbiesub

[slorber]

This is not possible with config, but you can probably hide it with custom CSS.
Later it may become possible as part of this feature request: #4389

Remember also that you are not forced to use the <Layout> component on your homepage, and you can as well apply your own custom layout to it (but it means more work on your side).

[subbiesub]

Thanks a lot for the hint. I wasn't able to manage it by just adding css to the site, since it was somehow affecting the other pages as well.
But i was able to insert a custom js file into the start page with the following content:

hidesearch.js in subfolder js of static

history.pushState = (f => function pushState() {
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('pushstate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.pushState);

history.replaceState = (f => function replaceState() {
    var ret = f.apply(this, arguments);
    window.dispatchEvent(new Event('replacestate'));
    window.dispatchEvent(new Event('locationchange'));
    return ret;
})(history.replaceState);

window.addEventListener('popstate', () => {
    window.dispatchEvent(new Event('locationchange'))
});

document.addEventListener('readystatechange', event => {
    // When window loaded (
    if (event.target.readyState === "complete") {
        setTimeout(function () {
            if (window.location.pathname == "/<PATH TO PAGE>/") {
                document.getElementsByClassName("dsla-search-wrapper")[0].style.display = "none";
            } else {
                document.getElementsByClassName("dsla-search-wrapper")[0].style.display = "block";
            }
        }, 100)
    }
});

window.addEventListener('locationchange', function () {
    setTimeout(function () {
        if (window.location.pathname == "/<PATH TO PAGE>/") {
            document.getElementsByClassName("dsla-search-wrapper")[0].style.display = "none";
        } else {
            document.getElementsByClassName("dsla-search-wrapper")[0].style.display = "block";
        }
    }, 100)

})

In the index.js of the startpage i added the following (have a look for the script tag):

import useBaseUrl from '@docusaurus/useBaseUrl';

...

export default function Home() {
  const {siteConfig} = useDocusaurusContext();
  return (
    <Layout
      title={`Hello from ${siteConfig.title}`}
	  >
      <script src={useBaseUrl('/js/hidesearch.js')} />
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
	 
    </Layout>
  );
}

[slorber]

That seems very complex for a simple need

You can probably do the following (didn't try):

<Layout pageClassName="homepage">
  ...
</Layout>

.homepage .DocSearch.DocSearch-Button {
  display: none;
}

If you can hide it everywhere with CSS, you should be able to hide it only on the homepage using a selector that only match on the hompage

[subbiesub]

I don't get that working. Problem here is, homepage will be part of a sub-div not the one above:

The css then is not valid for the Searchbutton in the navbar?! Or I am doing it wrong.

[slorber]

Right.

So you could add this class in the div#__docusaurus with an effect (would still render the navbar on the server though, and producing a layout shift), or swizzle the layout component to add that class to the navbar.

All those solutions look simpler to what you currently have

[slorber]

Hi @subbiesub

I found another possible solution using the <Head> component that could be a good fit for your use-case: #5288 (comment)