Skip to content

Improve 404 page #1347

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adamchainz opened this issue Apr 15, 2023 · 10 comments · May be fixed by #1923
Open

Improve 404 page #1347

adamchainz opened this issue Apr 15, 2023 · 10 comments · May be fixed by #1923
Labels
good first issue Good for newcomers

Comments

@adamchainz
Copy link
Member

Take a broken docs link like: https://docs.djangoproject.com/en/4.2/ref/databasess/ (two "s" chars at the end instead of one).

The 404 page could at least show the docs search bar to make it easy to search for the relevant page.

For bonus points, it could even show search results for the keywords in the URL ("databasess") or show close matches from existing URL's (using e.g. difflib.get_close_matches).

@gautam8404
Copy link

gautam8404 commented Apr 28, 2023

like this?

image

however i don't thinks what i did is a proper way of doing it, i used same search as in documentation page by making some changes in templatetags/docs.py

def search_form(context):
    request = context["request"]
    version = context["version"] if "version" in context else context["DJANGO_VERSION"]
    lang = context["lang"] if "lang" in context else context["LANGUAGE_CODE"]
    release = DocumentRelease.objects.get_by_version_and_lang(
        version,
        lang,
    )
    return {
        "form": DocSearchForm(request.GET, release=release),
        "version": version,
        "lang": lang,
    }

and in 404.html

{% extends 'base_error.html' %}
{% load docs %}

{% block title %}Page not found{% endblock %}
{% block header-classes %}
container--flex container--flex--wrap--mobile
{% endblock %}
{% block header %}
  <h1>404</h1>

  {% search_form %}

{% endblock %}

{% block content %}
<h2>Page not found</h2>

<p>Looks like you followed a bad link. If you think it's our fault, please <a href="https://code.djangoproject.com/">let us know</a>.</p>

<p>Here's a link to the <a href="{% url 'homepage' %}">homepage</a>. You know, just in case.</p>

{% endblock %}

A more proper way would be writing a handler for 404? but maybe i should ask permission for it before

@sabderemane sabderemane added the good first issue Good for newcomers label Nov 25, 2023
@Om15102003
Copy link

@adamchainz I would like to contribute on this issue.

SurajSanap added a commit to SurajSanap/djangoproject.com that referenced this issue Dec 20, 2023
…ealing design.

- Increased the prominence of the "404" header using a mixture of Black (#2b3137) and Green (#2dba4e) colors.
- Styled the search bar to resemble GitHub's design with clear input and button elements.
- Removed the default value from the search box for a cleaner user experience.

Closes: django#1347
@SurajSanap
Copy link

fixed by #1454

@bengali-creates
Copy link

bengali-creates commented Dec 11, 2024

hi i ma new to this project i want to contribute in this project for this problem . Can anyone pls tell me how can i get in contact with the devs

@bmispelon
Copy link
Member

hi i ma new to this project i want to contribute in this project for this problem . Can anyone pls tell me how can i get in contact with the devs

Hi and thanks for offering to contribute! 🎸

The file is there: https://github.com/django/djangoproject.com/blob/main/djangoproject/templates/404.html

For reference, I found it using this command: git ls-files '**/404.html'

@bengali-creates
Copy link

bengali-creates commented Dec 25, 2024

hi i ma new to this project i want to contribute in this project for this problem . Can anyone pls tell me how can i get in contact with the devs

Hi and thanks for offering to contribute! 🎸

The file is there: https://github.com/django/djangoproject.com/blob/main/djangoproject/templates/404.html

For reference, I found it using this command: git ls-files '**/404.html'

Hi and thanks for your time.

i was setting up the environment by using docker but faced the same error though i followed the documentation .
If I could get the solution it would be great help
Screenshot 2024-12-25 211813

svm1048 added a commit to svm1048/djangoproject.com that referenced this issue Dec 28, 2024
Improved 404 page, added a search bar, fixed the font on the 404 page.
@ShivangKeshri
Copy link

Hi! I would love to contribute to this project! Is this issue still prevalent?

@pauloxnet
Copy link
Member

I realize only now that we have a fundamental UX problem that could be blocking.

I believe that the 404 template is used for all 404 errors both on the site (https://www.djangoproject.com) and in the documentation (https://docs.djangoproject.com).

The search is only present in the documentation subdomain, so whoever were to view the 404 page in the domain (https://www.djangoproject.com) would see a search that is actually from the domain (https://docs.djangoproject.com).

The solutions proposed so far therefore I do not think are mergiable.

I see two alternatives:

  1. have a specific 404 template page to be shown in the domain (https://docs.djangoproject.com) with the search and leaving that of the domain (https://www.djangoproject.com)
  2. implement a site-wide search as in this issue Site-wide search #1499

@ShivangKeshri
Copy link

Cool, I will try out the first alternative.

@AhmedNassar7
Copy link

Hi! 👋 I'd love to contribute to this issue. Based on the discussion, it seems like a separate 404 template for the documentation site would be a good approach. I'll share updates soon.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment