Skip to content

[website] Add a 404 page#40884

Merged
danilo-leal merged 13 commits intomui:masterfrom
danilo-leal:add-a-404-page
Feb 9, 2024
Merged

[website] Add a 404 page#40884
danilo-leal merged 13 commits intomui:masterfrom
danilo-leal:add-a-404-page

Conversation

@danilo-leal
Copy link
Copy Markdown
Collaborator

@danilo-leal danilo-leal commented Feb 1, 2024

Closes #31349

Okay, this is a longstanding and quite simple PR. It adds a slightly better-designed 404 page than our standard one. Having something a little bit thoughtful for this scenario adds a lot to communicating our care for attention to detail and polish!

From what I could test, based on the Next.js docs, simply creating a 404.tsx page is enough to route all of the 404 requests to it. It seems to be working well?! I'd appreciate any insights here if there's more wiring I need to do.

Preview: https://deploy-preview-40884--material-ui.netlify.app/material-ui/api/accordion-detailss/

@danilo-leal danilo-leal added design This is about UI or UX design, please involve a designer. website Pages that are not documentation-related, marketing-focused. labels Feb 1, 2024
@danilo-leal danilo-leal self-assigned this Feb 1, 2024
@danilo-leal danilo-leal requested a review from mnajdova February 1, 2024 03:02
@mui-bot
Copy link
Copy Markdown

mui-bot commented Feb 1, 2024

Netlify deploy preview

https://deploy-preview-40884--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against faaa4af

Copy link
Copy Markdown
Collaborator

@zanivan zanivan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, it looks great! Just left a comment about the box-shadows. I used the values from Joy UI theme, but no strong opinion on that :)

Comment thread docs/src/components/NotFoundHero.tsx Outdated
Comment thread docs/src/components/NotFoundHero.tsx Outdated
@danilo-leal danilo-leal requested a review from zanivan February 1, 2024 17:54
Copy link
Copy Markdown
Collaborator

@zanivan zanivan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀

@mbrookes
Copy link
Copy Markdown
Member

mbrookes commented Feb 3, 2024

Great to see this! My plan to improve this some time ago got rejected on the basis that "we don't have any missing pages" 😅. Even if true, that doesn't mean that an external site can't have an incorrect URL, or someone guesses and mistypes a URL. (I've seen the quoted person do it during a monthly meeting 😉).

Perhaps we could make it a bit more fun/quirky, even if it won't be seen very often? Just to take some of the frustration out of hitting a 404?

Could we perhaps return some links related to the path that might get the user back on track, or show a search box? (That might be scope creep – this already an improvement.)

The border of the "browser window" is hard to see in dark mode. And if I'm being really pedantic, the separation of the window controls is a bit wide compared to the real thing.

And search looks a bit broken:

image

Copy link
Copy Markdown
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice 👍 , I changed the primary tag from website to docs as I believe it will most benefit docs users. It saves time to land on a 404 and to be able to use the website navigation right away, e.g. Algolia search.

From what I could test, based on the Next.js docs, simply creating a 404.tsx page is enough to route all of the 404 requests to it. It seems to be working well?! I'd appreciate any insights here if there's more wiring I need to do.

This is true for Next.js's server (local development). The reason this works in our case is because it outputs a 404.html file that is picked up by Netlify: https://docs.netlify.com/routing/redirects/redirect-options/#custom-404-page-handling.

And search looks a bit broken:

Oh, lol, nice. #40957

Comment thread docs/pages/404.tsx Outdated
Comment thread docs/pages/404.tsx Outdated
Comment thread docs/pages/404.tsx Outdated
@oliviertassinari oliviertassinari added the docs Improvements or additions to the documentation. label Feb 3, 2024
@oliviertassinari oliviertassinari changed the title [website] Add a 404 page [docs] Add a 404 page Feb 3, 2024
@danilo-leal
Copy link
Copy Markdown
Collaborator Author

@oliviertassinari — sweet; thanks for jumping to fix the icons within the search! There's an old issue about that (#33731); can we close it by merging this PR after your changes?

@oliviertassinari
Copy link
Copy Markdown
Member

oliviertassinari commented Feb 5, 2024

There's an old issue about that (#33731);

@danilo-leal Ah, ok, yes, it's the same bug. I'm removing this commit from this PR. It deserves its own.

Comment thread docs/src/components/NotFoundHero.tsx Outdated
@danilo-leal
Copy link
Copy Markdown
Collaborator Author

@oliviertassinari, quick nudge here to see if you have any other comments? :)

Comment thread docs/pages/404.tsx Outdated
Signed-off-by: Olivier Tassinari <olivier.tassinari@gmail.com>
@oliviertassinari
Copy link
Copy Markdown
Member

It looks great 👍

@oliviertassinari
Copy link
Copy Markdown
Member

oliviertassinari commented Feb 9, 2024

In the future, we could have custom 404 per docs area, e.g.

  • website
  • blog
  • docs

But wow, it feels like you need a business of the scale of >200 people for the opportunity cost of this to start to make sense 😄, e.g. https://stripe.com/sefsef vs. https://stripe.com/docs/sefsef is clearly a step up in the UX.

#41042

@danilo-leal danilo-leal merged commit 0074922 into mui:master Feb 9, 2024
@danilo-leal danilo-leal deleted the add-a-404-page branch February 9, 2024 11:15
@oliviertassinari oliviertassinari changed the title [docs] Add a 404 page [website] Add a 404 page Feb 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

design This is about UI or UX design, please involve a designer. docs Improvements or additions to the documentation. website Pages that are not documentation-related, marketing-focused.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[website] Create a custom 404 page

5 participants