-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
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
base: master
Are you sure you want to change the base?
Beautify 404 page #4827
Conversation
src/invidious/helpers/errors.cr
Outdated
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") |
There was a problem hiding this comment.
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;"> |
There was a problem hiding this comment.
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.
<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;"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same thing here:
<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;"> |
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