Most appropriate sections of the p5.js website?
Home
What is your operating system?
Mac OS
Web browser and version
Firefox 149.0.2
Actual Behavior
The search bar directs to a URL without the trailing slash, such as /search?term=..., which results in a 404 page in local development.
Expected Behavior
The search bar should direct to the search page URL with the trailing slash, such as /search/?term=..., so the search results page loads correctly. The deployed site appears to work because the production server likely adds the missing trailing slash automatically, as noted in the project documentation:
|
### Automatic trailing slash addition |
|
While the production webserver _may_ add a trailing slash to a requested URL when it is missing, but this should not be relied upon. |
|
Instead write (or generate) links that follow the rules above. |
Solution
Add a trailing slash here:
|
action={`${currentLocale === "en" ? "" : `/${currentLocale}`}/search`} |
Note on Search Results page
The search bar on the Search Results page works because it does not navigate to a new page. It stays on /search/ and updates the query in place on the client side.
|
const submitInput = () => { |
|
if (inputRef.current) { |
|
onSearchChange(inputRef.current.value); |
|
} |
|
}; |
By contrast, SearchForm submits a normal GET request to /search without the trailing slash. In local development, that can resolve to a 404 instead of the search results page.
Steps to reproduce
main, 2.0 branch both affected.
npm run dev
npm run preview
Put search keyword on the search bar on home page.
Would you like to work on the issue?
Yes
Most appropriate sections of the p5.js website?
Home
What is your operating system?
Mac OS
Web browser and version
Firefox 149.0.2
Actual Behavior
The search bar directs to a URL without the trailing slash, such as
/search?term=..., which results in a 404 page in local development.Expected Behavior
The search bar should direct to the search page URL with the trailing slash, such as
/search/?term=..., so the search results page loads correctly. The deployed site appears to work because the production server likely adds the missing trailing slash automatically, as noted in the project documentation:p5.js-website/docs/url_conventions.md
Lines 33 to 35 in be30227
Solution
Add a trailing slash here:
p5.js-website/src/components/SearchForm/index.astro
Line 10 in 5a2a61d
Note on Search Results page
The search bar on the Search Results page works because it does not navigate to a new page. It stays on
/search/and updates the query in place on the client side.p5.js-website/src/components/SearchResults/index.tsx
Lines 119 to 123 in 5a2a61d
By contrast,
SearchFormsubmits a normal GET request to/searchwithout the trailing slash. In local development, that can resolve to a 404 instead of the search results page.Steps to reproduce
main,2.0branch both affected.Put search keyword on the search bar on home page.
Would you like to work on the issue?
Yes