feat: redesign 404 page with error image and fix GitHub Pages routing#810
feat: redesign 404 page with error image and fix GitHub Pages routing#810
Conversation
…ting Add error illustration and visual improvements to all three language versions of the 404 page. Replace the Hugo alias-based 404.html (which landed under /en/404.html due to defaultContentLanguageInSubdir) with a static/404.html that reliably serves from the root on GitHub Pages. Fixes #717 Fixes #136
|
Hi there! 👋 Thank you for your contribution to the FIP Guide! 🚀 Checklist before merging:
|
lenderom
requested review from
MoritzWeber0 and
therobrob
and removed request for
therobrob
✅ Deploy Preview for fipguide ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
| } | ||
|
|
||
| &--center > figure { | ||
| float: none; |
There was a problem hiding this comment.
So the class .m-float-image—center doesn’t contain any floating? Is this the correct use of BEM?
| --- | ||
|
|
||
| Hoppla! Die gesuchte Seite ist nicht verfügbar oder wurde verschoben. | ||
| {{% float-image |
There was a problem hiding this comment.
Do we have to use the float-image partial here or could we use the normal image partial instead? :)
There was a problem hiding this comment.
Hmm as far as I know there is no way to change the size of an image?
I just wanted to have a centered image which is not 100% size :D
There was a problem hiding this comment.
What do you think of a split view instead? On the left site the image, on the right side the text? Right now, some parts of the text are centered, but the last part is left-aligned.
There was a problem hiding this comment.
On Desktop this could be a good solution. But I guess we would still have the same issue on mobile...
| </noscript> | ||
| <script> | ||
| (() => { | ||
| const supportedLanguages = ["en", "de", "fr"]; |
There was a problem hiding this comment.
Let's not hard-code the languages and iterative over the site languages instead.
There was a problem hiding this comment.
I'm a bit confused this is actually needed, in theory the alias should handle it exactly the same way. It also has a section for 404. There seems to be a regression in hugo that it stopped working, the 404.html is no longer created automatically.
There was a problem hiding this comment.
The regression was in https://github.com/gohugoio/hugo/releases/v0.155.0, where support for multi-language aliases was added.
There was a problem hiding this comment.
It was marked as breaking change, but I overlooked it: https://discourse.gohugo.io/t/alias-paths-in-v0-155-0-and-later/56674
There was a problem hiding this comment.
So looks like the old approach via the alias is no longer supported. We should get rid of the 404 section in the alias then.
There was a problem hiding this comment.
Ok, the handling was just a bit different. This would be a hotfix for it, without too many changes: #831. What do you think of this approach?
There was a problem hiding this comment.
If this works, we can also do this :)
There was a problem hiding this comment.
In the netlify preview it does, so it should also work in GitHub Pages :)
There was a problem hiding this comment.
The contrast of the image in dark mode is pretty bad.
There was a problem hiding this comment.
Feel free to change the image :)
3 participants
Summary
error.webp) and improved layout usingfloat-imageandintersectorshortcodes across all three languages (en, de, fr)404.html(which incorrectly landed under/en/404.htmldue todefaultContentLanguageInSubdir: true) with astatic/404.htmlthat reliably serves from the site rootcenterposition support forfloat-imagein SCSSFixes #717
Fixes #136