Search bar visibility issue on frontend

[aryan7071]

Description

The search bar on the stdlib frontend has very low visual contrast, making it difficult to recognize as a search input. Its light appearance blends into the background, which reduces discoverability and can confuse users who are trying to search for packages or documentation.

Improving the visual contrast (e.g., background color, border, placeholder text, and focus state) would make the search bar more noticeable and improve overall usability and accessibility.

Related Issues

No response

Questions

No.

Demo

No response

Reproduction

1- Open the stdlib frontend in a web browser.

2- Look at the top navigation area where the search bar is located.

3- Notice that the search input blends into the background due to low contrast and is not immediately recognizable as a search field.

Expected Results

1- The search bar should be clearly distinguishable from the background in its default state.

2- The input should have sufficient visual contrast (background, border, and placeholder text) to be immediately recognizable as a search field.

3- Focus and hover states should further improve visibility and clearly indicate interactivity.

Actual Results

The search bar appears very light and blends into the background, making it difficult to recognize as a search input in its default state.

Environments

Other Browser, Chrome

Browser Version

No response

Node.js / npm Version

No response

Platform

No response

Checklist

• Read and understood the Code of Conduct.
• Searched for existing issues and pull requests.

[aryan7071]

@kgryte
Hello! I was in the process of setting up the www repo on my local machine and got a little hung up during the dev setup.

When I go to access the app, I just keep seeing this message:

{
"message": "Route GET:/ not found",
"error": "Not Found",
"statusCode": 404
}

I was thinking this was probably coming from the API docs backend, but I wasn’t entirely sure which scripts were supposed to be run together (frontend vs backend) or what the local URL was that I was supposed to be accessing during development.

Is there a local setup guide for this repo that I should be following? If not, I’d be happy to help contribute to one once I understand what the workflow is supposed to be.

[kgryte]

@aryan7071 See https://github.com/stdlib-js/www/blob/master/docs/build.md for initial tips.

[aryan7071]

Hi, @kgryte

I am following the instructions in build.md to create the documentation website for stdlib-js/www locally.

npm install runs successfully, and make api-docs-app also builds successfully.

However, make pkg-html fails at runtime with the following error message:

TypeError: Cannot read properties of undefined (reading 'substring')
at lib/write.js:75
at @stdlib/_tools/docs/www/readme-fragment-file-tree

This happens during the creation of HTML README fragments in pkg-html.

Also, I could not find any reference in build.md to the location of the @stdlib/_tools utilities and how they are supposed to be accessible during the local build of the www repo.

Please let me know if there are any additional setup steps that need to be performed for pkg-html.

[kgryte]

You should not need to run make pkg-html. You only need to run make api-docs-app in order to rebuild the main application. If you are only changing CSS, you'll also need to run the commands for building and minifying the CSS. Do not run all the commands for building benchmarks, tests, and HTML. That is not necessary for what you want to do.