Repository: camunda/camunda-docs
Pull request #5052: Landing page search
Author: login: mesellings
Labels: name: kind/enhancement
description: Issues related with enhancing existing documentation or the documentation structure (nice to have)
name: component:docs
description: Documentation improvements, including new or updated content
name: dx
description: Documentation infrastructure typically handled by the Camunda DX team
name: target:8.7
description: Issues included in the 8.7 release
name: low prio
description: There is no urgency with this change.
Created: 2025-02-21T12:13:29Z | Merged: 2025-03-17T10:43:19Z

## Description

As per https://github.com/camunda/camunda-docs/issues/4061, it would help users if we add a search box to the docs home page.

This is a quick win, low-effort PR that:

- Adds a search box, centred and styled on the landing page.
- Changes the placeholder text from plain "search" text (NB currently done with CSS to avoid swizzling the component, unless we can change this somewhere?) Is this the right text? Should it be something else?

🤔 Should the box be more rounded to match the current search box?

![image](https://github.com/user-attachments/assets/15077859-1e72-4288-a8ca-593e4d3fa9ff)

Tested in Chrome, Firefox, Safari.

This closes https://github.com/camunda/camunda-docs/issues/4061.

<!-- Provide an overview of what to expect in the PR. -->
<!-- Relate or link the associated epic or task. -->
<!-- Add `@camunda/tech-writers` as reviewer to pull in a tech writer, or add your embedded tech writer. -->

## When should this change go live?

<!-- PRs merged go to stage.docs.camunda.io first and must be manually released to docs.camunda.io. -->

- [ ] This is a bug fix, security concern, or something that needs **urgent release support**. (add `bug` or `support` label)
- [ ] This is already available but undocumented and should be released within a week. (add `available & undocumented` label)
- [ ] This is on a **specific schedule** and the assignee will coordinate a release with the DevEx team. (create draft PR and/or add `hold` label)
- [ ] This is part of a scheduled **alpha or minor**. (add alpha or minor label)
- [X] There is **no urgency** with this change (add `low prio` label)

## PR Checklist

<!-- Camunda maintains 18 months of minor versions. Backporting your change to multiple versions is common. -->

- [ ] My changes are for **an upcoming minor release** and:
  - [ ] are in the `/docs` directory (version 8.8).
  - [ ] are in the `/versioned_docs/version-8.7/` directory (version 8.7).
- [ ] My changes are for an **already released minor** and are in a `/versioned_docs` directory.

<!-- UNCOMMENT THIS SECTION IF APPLICABLE. Adding or removing pages requires extra steps.
- [ ] I included my new page in the sidebar file(s).
- [ ] I added a redirect for a renamed or deleted page to the .htaccess file.
-->

- [ ] I added a DRI, team, or delegate as a reviewer for technical accuracy and grammar/style:
  - [ ] [Engineering team review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process)
  - [X] [Technical writer review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process) via `@camunda/tech-writers` unless working with an embedded writer.

<!-- UNCOMMENT THIS SECTION IF APPLICABLE. Changes to **docs infra**, including updates to workflows and adding new npm packages, must be first discussed via issue or #ask-c8-documentation and linked for context.
- [ ] My changes require a [docs infrastructure review](https://github.com/camunda/camunda-docs/blob/main/howtos/documentation-guidelines.md#review-process). (add `dx` label) -->



Diff:
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 0b77695b53a..2d20e38858a 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -13,7 +13,7 @@ module.exports = {
   },
   title: "Camunda 8 Docs",
   tagline:
-    "Start orchestrating your processes with Camunda 8 SaaS or Self-Managed.",
+    "Start orchestrating your processes with Camunda 8 SaaS or Self-Managed",
   // url: "https://camunda-cloud.github.io",
   url: docsSiteUrl,
   // baseUrl: "/camunda-cloud-documentation/",
@@ -488,6 +488,7 @@ module.exports = {
       apiKey: "d701d38126d1a43866047d3ab97680d1",
       appId: "6KYF3VMCXZ",
       indexName: "camunda",
+      placeholder: "Search Camunda 8 docs",
     },
     languageTabs: [
       {
diff --git a/src/css/custom.css b/src/css/custom.css
index 4cddc6aab35..8d33b19c9da 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -382,6 +382,56 @@ body {
   color: #000;
 }
 
+/* Landing page search bar */
+
+.homeSearch {
+  margin: auto;
+  max-width: 1000px;
+  padding: 15px 20px 20px 20px;
+}
+
+.homeSearch .DocSearch-Button {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+}
+.homeSearch .DocSearch-Button:hover {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+.homeSearch .DocSearch-Button-Placeholder::after {
+  content: " Camunda 8 docs";
+}
+
+@media (max-width: 768px) {
+  .homeSearch .DocSearch-Button-Placeholder {
+    display: inline;
+  }
+}
+[data-theme="dark"] .homeSearch .DocSearch-Button {
+  background-color: transparent;
+  border: 2px solid rgb(40, 40, 40);
+}
+
+[data-theme="dark"] .homeSearch .DocSearch-Button:hover {
+  background-color: transparent;
+  border: 2px solid var(--ifm-color-primary);
+  box-shadow: 0px 8px 16px 4px #78a9ff33;
+}
+
+.table-of-contents__link .callout {
+  display: none;
+}
+
 /* style PushFeedback widget */
 .feedback-widget {
   padding-top: 2rem;
@@ -959,10 +1009,6 @@ ul ol {
   }
 }
 
-.table-of-contents__link .callout {
-  display: none;
-}
-
 /* Green tick list and orange cross list */
 .list-tick {
   list-style-image: url("/static/img/icon-list-tick.png");
diff --git a/src/pages/index.js b/src/pages/index.js
index 3295c26f9d7..8ab81481546 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -5,6 +5,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
+import AlgoliaSearchBox from "@theme/SearchBar";
 
 const features = [
   {
@@ -92,6 +93,9 @@ function Home() {
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className="homeSearch">
+            <AlgoliaSearchBox />
+          </div>
           <div className={clsx("row", styles.buttonsWrapper)}>
             <div className={clsx("", styles.buttons)}>
               <Link


Reviews:
user: login: github-actions[bot]
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-02-21T12:19:45Z
user: login: pepopowitz
body: I don't have any feedback that would block a merge, but my comment about adding content through CSS is important, and should be considered here or in a followup.

This is fantastic, though!!!
state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-02-24T16:01:28Z
user: login: mesellings
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-04T10:03:54Z
user: login: mesellings
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-04T10:07:02Z
user: login: mesellings
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-03-04T10:09:31Z
user: login: christinaausley
body: This gets my thumbs up 👍 
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-10T12:23:49Z

Review comments:
diff_hunk: @@ -959,6 +959,25 @@ ul ol {
   }
 }
 
+.homeSearch {
+  margin: auto;
+  max-width: 1000px;
+  padding: 20px;
+}
+
+.homeSearch .DocSearch-Button {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+.homeSearch .DocSearch-Button-Placeholder::after {
path: src/css/custom.css
user: login: github-actions[bot]
body: 🚫 **[prettier]** <sub>reported by [reviewdog](https://github.com/reviewdog/reviewdog) :dog:</sub><br>SyntaxError: CssSyntaxError: Unclosed block
created_at: 2025-02-21T12:19:45Z
author_association: CONTRIBUTOR
diff_hunk: @@ -382,6 +382,46 @@ body {
   color: #000;
 }
 
+/* Landing page search bar */
+
+.homeSearch {
+  margin: auto;
+  max-width: 1000px;
+  padding: 20px;
+}
+
+.homeSearch .DocSearch-Button {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+}
+.homeSearch .DocSearch-Button:hover {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+.homeSearch .DocSearch-Button-Placeholder::after {
+  content: " Camunda 8 docs";
path: src/css/custom.css
user: login: pepopowitz
body: This should at best be a temporary solution, with a quick followup to emit it as markup. If the content is important visually, then it should also be available to assisted users, and [we can't reliably depend on assistive technology to emit this content](https://developer.mozilla.org/en-US/docs/Web/CSS/::after#accessibility).
created_at: 2025-02-24T15:54:08Z
author_association: CONTRIBUTOR
diff_hunk: @@ -92,6 +93,9 @@ function Home() {
         <div className="container">
           <h1 className="hero__title">{siteConfig.title}</h1>
           <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className="homeSearch">
+            <AlgoliaSearchBox /> {/* Add the search box here */}
path: src/pages/index.js
user: login: pepopowitz
body: nit, non-blocking: redundant comment

```suggestion
            <AlgoliaSearchBox />
```
created_at: 2025-02-24T15:56:13Z
author_association: CONTRIBUTOR
path: src/css/custom.css
user: login: pepopowitz
body: non-blocking, but probably worth looking into as part of this or a followup: 

I don't think it's anything you specifically added, but it appears that the text "label" disappears on small screens. 

<img width="488" alt="image" src="https://github.com/user-attachments/assets/3178dec9-e629-4276-b1e1-23643365daed" />

created_at: 2025-02-24T16:00:18Z
author_association: CONTRIBUTOR
path: src/css/custom.css
user: login: mesellings
body: This is an inherent style on screens under 768px, but I've overridden it for now to avoid this for the home page search and tested 👍 
created_at: 2025-03-04T10:03:54Z
author_association: COLLABORATOR
diff_hunk: @@ -382,6 +382,46 @@ body {
   color: #000;
 }
 
+/* Landing page search bar */
+
+.homeSearch {
+  margin: auto;
+  max-width: 1000px;
+  padding: 20px;
+}
+
+.homeSearch .DocSearch-Button {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+}
+.homeSearch .DocSearch-Button:hover {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+.homeSearch .DocSearch-Button-Placeholder::after {
+  content: " Camunda 8 docs";
path: src/css/custom.css
user: login: mesellings
body: Great point - as mentioned this is a temporary solution - looks like this is a common thing with a rather hacky resolution suggested by docusaurus being to use translation i18n as a way to change the main search bar placeholder text (as opposed to the popup search box placeholder text).

See:
- https://docusaurus.io/docs/i18n/tutorial
- https://github.com/cmfcmf/docusaurus-search-local/pull/34

I will create an issue to resolve this long-term, but for now the temporary solution allows us to at least have something more verbose than just "search".
created_at: 2025-03-04T10:07:02Z
author_association: COLLABORATOR
diff_hunk: @@ -382,6 +382,46 @@ body {
   color: #000;
 }
 
+/* Landing page search bar */
+
+.homeSearch {
+  margin: auto;
+  max-width: 1000px;
+  padding: 20px;
+}
+
+.homeSearch .DocSearch-Button {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+}
+.homeSearch .DocSearch-Button:hover {
+  height: 55px;
+  width: 100%;
+  border-radius: 8px;
+  background: white;
+  color: var(--docsearch-muted-color);
+}
+
+.DocSearch-Button-Keys {
+  display: none !important;
+}
+
+.homeSearch .DocSearch-Button-Placeholder::after {
+  content: " Camunda 8 docs";
path: src/css/custom.css
user: login: mesellings
body: To fix in https://github.com/camunda/camunda-docs/issues/5138
created_at: 2025-03-04T10:09:31Z
author_association: COLLABORATOR

PR comments:
user: login: mesellings
created_at: 2025-02-21T12:28:05Z
body: @pepopowitz I was inspired by your comment in our chat yesterday to just get this out quickly - I can't see any reason why we shouldn't - it only enhances the user experience for the docs site, don't think there are any negatives tbh?
author_association: COLLABORATOR
user: login: christinaausley
created_at: 2025-02-21T13:47:16Z
body: > This is a quick win, low-effort PR

Ok, but this is also EPIC!

> Should the box be more rounded to match the current search box?

I actually think with the style of this page and the other icons (rounded square nails 💅) that how you have it makes the most sense. I worry too many different edges/shapes wouldn't look as clean.

I can click on the search bar on deploy, but I can't actually type anything. I assume this is based on the functionality of our deploy label here?

Maybe I'm the only one here, but does the capitalization of "Docs" in "Search Camunda 8 Docs" feel weird given sentence case everywhere except the page header? Maybe "What are you looking for?" or "Search our docs"? Idk. Might need to brainstorm a little more on my end here.
author_association: CONTRIBUTOR
user: login: mesellings
created_at: 2025-02-21T14:03:04Z
body: > > This is a quick win, low-effort PR
> 
> Ok, but this is also EPIC!
> 
> > Should the box be more rounded to match the current search box?
> 
> I actually think with the style of this page and the other icons (rounded square nails 💅) that how you have it makes the most sense. I worry too many different edges/shapes wouldn't look as clean.
> 
> I can click on the search bar on deploy, but I can't actually type anything. I assume this is based on the functionality of our deploy label here?
> 
> Maybe I'm the only one here, but does the capitalization of "Docs" in "Search Camunda 8 Docs" feel weird given sentence case everywhere except the page header? Maybe "What are you looking for?" or "Search our docs"? Idk. Might need to brainstorm a little more on my end here.

Looks like there is some kind of deploy environment bug - if you go to another page and search, then back again it starts working - no idea why (run locally it has no issues like this?).

Agreed about rounded edges - I prefer the less rounded edges.

Placeholder text we can certainly change (as long as it begins with "Search" unless we swizzle the Algolia component or find this setting somewhere) - agreed about **D**ocs - I've changed to "Search Camunda 8 docs" for now, but be good to see what others think?
author_association: COLLABORATOR
user: login: akeller
created_at: 2025-03-03T16:03:23Z
body: @mesellings are you targeting to launch this with the March alphas or the April minor? Can you bring it to the team meeting to discuss any remaining questions/actions? 
author_association: CONTRIBUTOR
user: login: mesellings
created_at: 2025-03-03T16:17:43Z
body: @akeller It's currently low-priority on my list as an unexpected bonus, but I guess it could be good to have it out this week - I just wanted to take a look at the placeholder text and see if there's a way to resolve that easily/quickly without swizzling anything, but it's non-blocking anyway. We can discuss at the team meeting as you suggest 👍 
author_association: COLLABORATOR
user: login: mesellings
created_at: 2025-03-05T16:54:52Z
body: @mesellings to investigate the search issue (do a local build and serve) in the preview site further, and aim to push to this out between the alpha and the 8.7 release.
author_association: COLLABORATOR
user: login: mesellings
created_at: 2025-03-10T11:10:03Z
body: Followed up with a local build and serve and it works as expected without that search bug, so I'm 99% sure this a preview environment issue and if we want to we can go ahead and merge this in some iteration 🥳 
author_association: COLLABORATOR
user: login: github-actions[bot]
created_at: 2025-03-17T10:30:15Z
body: <!-- add-pr-comment:add-pr-comment -->

:broom: Preview environment for this PR has been torn down.
author_association: CONTRIBUTOR