Skip to content

feat: redesign 404 page with error image and fix GitHub Pages routing #810

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.

Sign up for GitHub

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
lenderom wants to merge 2 commits into
base: main
Choose a base branch
from
Open

feat: redesign 404 page with error image and fix GitHub Pages routing #810

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f9d42b
feat: redesign 404 page with error image and fix GitHub Pages 404 rou…
lenderom Apr 5, 2026
da30879
Merge branch 'main' into feat/404-page
MoritzWeber0 Apr 12, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/sass/floatImage.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,10 @@
float: left;
margin-right: 2rem;
}

&--center > figure {
float: none;
Copy link
Copy Markdown
Member

@therobrob therobrob Apr 5, 2026

Choose a reason for hiding this comment

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

So the class .m-float-image—center doesn’t contain any floating? Is this the correct use of BEM?

margin-left: auto;
margin-right: auto;
}
}
Binary file added content/404/error.webp
View file
Open in desktop
Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

The contrast of the image in dark mode is pretty bad.

Copy link
Copy Markdown
Member Author

@lenderom lenderom Apr 10, 2026

Choose a reason for hiding this comment

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

Feel free to change the image :)

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 10 additions & 2 deletions content/404/index.de.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,20 @@ params:
pagefind_ignore: true
---

Hoppla! Die gesuchte Seite ist nicht verfügbar oder wurde verschoben.
{{% float-image
Copy link
Copy Markdown
Member

@therobrob therobrob Apr 5, 2026

Choose a reason for hiding this comment

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

Do we have to use the float-image partial here or could we use the normal image partial instead? :)

Copy link
Copy Markdown
Member Author

@lenderom lenderom Apr 9, 2026

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

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.

Image

Copy link
Copy Markdown
Member Author

@lenderom lenderom Apr 10, 2026

Choose a reason for hiding this comment

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

On Desktop this could be a good solution. But I guess we would still have the same issue on mobile...

src="error.webp"
height="50%"
position="center"
/%}}

<p style="text-align: center;">Hoppla! Die gesuchte Seite ist nicht verfügbar oder wurde verschoben.</p>

{{% intersector %}}

Probiere folgende Dinge:

- **URL überprüfen:** Stelle sicher, dass die Adresse keine Tippfehler enthält.
- **Zur Startseite:** Kehre zur Startseite zurück und navigiere von dort aus.
- **Zur Startseite:** Kehre zur [Startseite](/) zurück und navigiere von dort aus.
- **Navigation nutzen:** Nutze das Menü oder die Suchfunktion.
- **Kontaktiere uns:** Bei Fragen oder Problemen kannst du dich gerne an uns wenden: [nextstop@fipguide.org](mailto:nextstop@fipguide.org)

Expand Down
14 changes: 10 additions & 4 deletions content/404/index.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,23 @@
---
title: "404 – Page not found"
aliases:
- /404.html
params:
pagefind_ignore: true
---

Oops! The page you’re looking for is unavailable or has been moved.
{{% float-image
src="error.webp"
height="50%"
position="center"
/%}}

<p style="text-align: center;">Oops! The page you're looking for is unavailable or has been moved.</p>

{{% intersector %}}

Here's what you can do next:

- **Double-check the URL:** Make sure there are no typos in the address.
- **Go to the homepage:** Return to the home page and navigate from there.
- **Go to the homepage:** Return to the [homepage](/) and navigate from there.
- **Use the navigation:** Try browsing via the menu or using the search function.
- **Contact us:** If you need assistance, feel free to reach out: [nextstop@fipguide.org](mailto:nextstop@fipguide.org)

Expand Down
22 changes: 15 additions & 7 deletions content/404/index.fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,21 @@ params:
pagefind_ignore: true
---

Oups ! La page que vous recherchez est indisponible ou a été déplacée.
{{% float-image
src="error.webp"
height="50%"
position="center"
/%}}

Voici ce que vous pouvez faire ensuite :
<p style="text-align: center;">Oups ! La page que vous recherchez est indisponible ou a été déplacée.</p>

- **Vérifiez l’URL :** Assurez-vous qu’il n’y a pas de faute de frappe dans l’adresse.
- **Accédez à la page d’accueil :** Retournez à la page d’accueil et naviguez à partir de là.
- **Utilisez la navigation :** Essayez de naviguer via le menu ou d’utiliser la fonction de recherche.
- **Contactez-nous :** Si vous avez besoin d’aide, n’hésitez pas à nous contacter : [nextstop@fipguide.org](mailto:nextstop@fipguide.org)
{{% intersector %}}

Nous sommes là pour vous aider !
Voici ce que vous pouvez faire ensuite :

- **Vérifiez l'URL :** Assurez-vous qu'il n'y a pas de faute de frappe dans l'adresse.
- **Accédez à la page d'accueil :** Retournez à la [page d'accueil](/) et naviguez à partir de là.
- **Utilisez la navigation :** Essayez de naviguer via le menu ou d'utiliser la fonction de recherche.
- **Contactez-nous :** Si vous avez besoin d'aide, n'hésitez pas à nous contacter : [nextstop@fipguide.org](mailto:nextstop@fipguide.org)

Nous sommes là pour vous aider !
42 changes: 42 additions & 0 deletions static/404.html
View file
Open in desktop
Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

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.

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

The regression was in https://github.com/gohugoio/hugo/releases/v0.155.0, where support for multi-language aliases was added.

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

It was marked as breaking change, but I overlooked it: https://discourse.gohugo.io/t/alias-paths-in-v0-155-0-and-later/56674

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

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.

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026

Choose a reason for hiding this comment

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

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?

Copy link
Copy Markdown
Member Author

@lenderom lenderom Apr 10, 2026

Choose a reason for hiding this comment

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

If this works, we can also do this :)

Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

In the netlify preview it does, so it should also work in GitHub Pages :)

Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<!doctype html>
<html>
<head>
<title>404 – Page not found</title>
<meta name="robots" content="noindex" />
<meta charset="utf-8" />
<noscript>
<meta http-equiv="refresh" content="0; url=/en/404/" />
</noscript>
<script>
(() => {
const supportedLanguages = ["en", "de", "fr"];
Copy link
Copy Markdown
Member

@MoritzWeber0 MoritzWeber0 Apr 10, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

Let's not hard-code the languages and iterative over the site languages instead.

const defaultLanguage = "en";

const getTargetLanguage = () => {
const nav = window.navigator;
if (!Array.isArray(nav.languages)) {
return defaultLanguage;
}

for (const language of nav.languages) {
for (const lang of supportedLanguages) {
if (language.toLowerCase().includes(lang)) {
return lang;
}
}
}
return defaultLanguage;
};

window.location.replace(`/${getTargetLanguage()}/404/`);
})();
</script>
</head>
<body>
<h1>Rerouting</h1>
<p>
You should be rerouted in a second, if not,
<a href="/en/404/">click here</a>.
</p>
</body>
</html>
Loading