Skip to content
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

Beautify 404 page #4827

Open
wants to merge 10 commits into
base: master
Choose a base branch
from

Conversation

broquemonsieur
Copy link

@broquemonsieur broquemonsieur commented Aug 11, 2024

A classic sign of a hip website is their 404 page. Making them fun or clever has been trending upward since 2010.

This @SamantazFox-approved graphic resembles a Video Input error for Cable TVs to represent a video_id that is not found
outlaw

@broquemonsieur broquemonsieur requested a review from a team as a code owner August 11, 2024 06:04
@broquemonsieur broquemonsieur requested review from SamantazFox and removed request for a team August 11, 2024 06:04
Comment on lines 77 to 78
unfound_tv_box_dark_theme = File.read("assets/404_tv_box_dark_theme.svg")
unfound_tv_box_light_theme = File.read("assets/404_tv_box_light_theme.svg")
Copy link
Member

Choose a reason for hiding this comment

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

Please, don't do that! Instead, put the file URL in the src attribute in the HTML, and let the browser and web server properly handle caching.

If you load the image from disk each time you have to show this error, you'll waste all file descriptors the server can have.

<%= error_message %>
<% if dark_mode == "dark" %>
<div style="width: 100px; height: auto;">
<img src="/404_tv_box_dark_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
Copy link
Contributor

Choose a reason for hiding this comment

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

An empty alt should be used instead unless there's information in the image that should be conveyed to users that use a screenreader.

Suggested change
<img src="/404_tv_box_dark_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
<img src="/404_tv_box_dark_theme.svg" alt="" style="width: 100px; height: auto;">

</div>
<% else %>
<div style="width: 100px; height: auto;">
<img src="/404_tv_box_light_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
Copy link
Contributor

Choose a reason for hiding this comment

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

Same thing here:

Suggested change
<img src="/404_tv_box_light_theme.svg" alt="SVG Image" style="width: 100px; height: auto;">
<img src="/404_tv_box_light_theme.svg" alt="" style="width: 100px; height: auto;">

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants