Enhance 404 error page by adding search form and loading additional docs tags

[garybadwal]

Closes Issue

• Improve 404 page

This PR improves the 404 error page to enhance user experience and usability. The following changes have been made:

1. Search Form Integration

   • Added a search form directly to the 404 error page header. This allows users to quickly search for relevant content or documentation when they land on the error page.

2. Additional Template Tags

   • Included {% load i18n docs %} to load additional functionality for internationalization and documentation integration.

3. Improved Header Content

   • Modified the header block to include the search form for a cleaner and more interactive design.

File Changes:

• djangoproject/templates/404.html:
  • Updated to include the docs tag in {% load %}.
  • Enhanced the header block by embedding the {% search_form %} tag for improved user interaction.

Benefits:

• User-Friendly Navigation: The search form reduces frustration by allowing users to find relevant content directly from the error page.
• Improved Accessibility: Internationalization support ensures a better experience for non-English-speaking users.
• Cleaner Code: Consolidated header design for better readability and maintainability.

Testing:

• Verified that the 404 error page renders correctly with the new search form.
• Tested the functionality of the search form to ensure it works seamlessly with the rest of the application.

Closes: #1347

[pauloxnet]

Thanks, @garybadwal, for your PR.
Can you check if the form render coherently with other pages and attach a screenshot of it?

[garybadwal]

Thanks, @garybadwal, for your PR. Can you check if the form render coherently with other pages and attach a screenshot of it?

Hi @pauloxnet,
Here I'm attaching the working video of this.

My.items.-.Awesome.Screenshot.mp4

[garybadwal]

Hi @pauloxnet, just curious to check if you gonna throw the video ?

[pauloxnet]

Hi @pauloxnet, just curious to check if you gonna throw the video ?

Thanks for the video.

It seems that it is rendered properly on the 404 page.

I would ask someone from @django/accessibility to give it a look since we're changing the UX here.

I can say that maybe adding the input search only without the information of the version, language etc in the bottom right side can be confusing. What do others think about it?

[garybadwal]

Hi @pauloxnet, just curious to check if you gonna throw the video ?

Thanks for the video.

It seems that it is rendered properly on the 404 page.

I would ask someone from @django/accessibility to give it a look since we're changing the UX here.

I can say that maybe adding the input search only without the information of the version, language etc in the bottom right side can be confusing. What do others think about it?

Hi @pauloxnet, Yes, it might not be very clear. Currently, the information in the box provides good clarity to the user that it will be searching the documentation of the particular version in a specific language.

I've also pushed a new commit where I addressed a scenario I encountered while rigorously testing. It involves any type of exception that leads to a 404 page, and the keys for the version and language information differ in that context. So now that is fixed as well.

[pauloxnet]

Hi @pauloxnet, just curious to check if you gonna throw the video ?
I would ask someone from @django/accessibility to give it a look since we're changing the UX here.
I can say that maybe adding the input search only without the information of the version, language etc in the bottom right side can be confusing. What do others think about it?

Hi @pauloxnet, Yes, it might not be very clear. Currently, the information in the box provides good clarity to the user that it will be searching the documentation of the particular version in a specific language.

I've also pushed a new commit where I addressed a scenario I encountered while rigorously testing. It involves any type of exception that leads to a 404 page, and the keys for the version and language information differ in that context. So now that is fixed as well.

Thanks, for pushing this, but I now realized that we have a blocker. See #1347 (comment)

[garybadwal]

Hi @pauloxnet, just curious to check if you gonna throw the video ?
I would ask someone from @django/accessibility to give it a look since we're changing the UX here.
I can say that maybe adding the input search only without the information of the version, language etc in the bottom right side can be confusing. What do others think about it?

Hi @pauloxnet, Yes, it might not be very clear. Currently, the information in the box provides good clarity to the user that it will be searching the documentation of the particular version in a specific language.
I've also pushed a new commit where I addressed a scenario I encountered while rigorously testing. It involves any type of exception that leads to a 404 page, and the keys for the version and language information differ in that context. So now that is fixed as well.

Thanks, for pushing this, but I now realized that we have a blocker. See #1347 (comment)

Hi @pauloxnet, I got your point, so I implemented the first suggested solution here. I'm checking the subdomain in this and if it matches the docs subdomain only then the search bar is shown.

[Gurpreet-CrossML]

Hi @pauloxnet, just curious to check if you get time to review the PR, I have implemented the first solution you proposed in the comment: #1347 (comment).

Now the search bar is only available on the 404 page shown under docs.djangoproject.com.

[pauloxnet]

Hi @pauloxnet, just curious to check if you get time to review the PR, I have implemented the first solution you proposed in the comment: #1347 (comment).

Please do not tag me directly in every comment, because I try to review PRs in the little free time I have and it is not certain that I can do it every day or week. I am also not the only one on the team @django/djangoproject-com-maintainters here.

Also, as you have seen, I asked for the @django/accessibility team to review before giving an final approval.

To be clear, in my message on the issue I highlighted the problem that the search is only present in the Django documentation, which is reachable in a dedicated domain, but I did not propose as a solution to using the domain as a value directly in the template code.

I was thinking more of a separate 404 page for the documentation, but I didn't have the time to deep dive in the code. I'm honestly not very convinced by the use of the domain in the template, but I would like to read the opinions of others.

We are all volunteers here so it can take time to have feedback on your PR or issues please be patient. 🙂

[Gurpreet-CrossML]

Ok, Thank you for that. I was just was bit excited about it.

[pauloxnet]

Ok, Thank you for that. I was just was bit excited about it.

And thanks again to be excited and proposing this PR, it's that waiting is a great part of open source contributions, don't be discouraged by that, but at the same time it's important to respect other time. ;-)

[sarahboyce]

My suggested next steps would be:

• looking into a custom error view (see https://docs.djangoproject.com/en/5.1/topics/http/views/#customizing-error-views)
• write tests

I agree with Paulo that it might make sense to first implement a site-wise search. I don't think the PR helps the UX of non-documentation related 404s e.g. https://www.djangoproject.com/community/not-found/

[garybadwal]

My suggested next steps would be:

• looking into a custom error view (see https://docs.djangoproject.com/en/5.1/topics/http/views/#customizing-error-views)
• write tests

I agree with Paulo that it might make sense to first implement a site-wise search. I don't think the PR helps the UX of non-documentation related 404s e.g. https://www.djangoproject.com/community/not-found/

Sure, I'll look into this and try making these changes.
By the time can you look into this PR: #1937
This fixes a broken link issue on https://docs.djangoproject.com/ page.