Skip to content

Commit d8d7095

Browse files
zahraaalizadehCharlyReux
zahraaalizadeh
authored and
CharlyReux
committed
Add 404 template (#2114)
This change, adds a custom 404 page. The new template extends the existing base template and uses the existing styles. issue: #1556 Here is how it looks: **On desktop screen** <img width="1310" alt="Screenshot 2024-04-17 at 4 30 14 pm" src="https://github.com/google/osv.dev/assets/73332835/753f16b5-e7ec-4a6b-a9e7-f2b5b3234dad"> **On mobile/tablet screen** <img width="572" alt="Screenshot 2024-04-17 at 4 30 50 pm" src="https://github.com/google/osv.dev/assets/73332835/e1734a9e-9fb5-4363-9ce6-fefc95eb6cb8"> <img width="566" alt="Screenshot 2024-04-17 at 4 31 22 pm" src="https://github.com/google/osv.dev/assets/73332835/6a33452b-fe39-49c4-907b-5909ef013957"> <img width="522" alt="Screenshot 2024-04-17 at 4 31 45 pm" src="https://github.com/google/osv.dev/assets/73332835/71aacb04-3cac-414c-a5eb-5f39b71ec2bf">
1 parent 187c846 commit d8d7095

File tree

4 files changed

+110
-1
lines changed

4 files changed

+110
-1
lines changed

‎gcp/appengine/frontend3/src/base.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525
<body>
2626
<div class="wrapper {{'decorated' if active_section == 'home'}}">
27+
{% block top_bar %}
2728
<header class="top-bar">
2829
<div class="logo">
2930
<a href="{{ url_for('frontend_handlers.index') }}" aria-label="Home page">
@@ -63,6 +64,7 @@
6364
</li>
6465
</ul>
6566
</header>
67+
{% endblock %}
6668
{% block content %}{% endblock %}
6769
</div>
6870
<link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">

‎gcp/appengine/frontend3/src/styles.scss‎

Lines changed: 77 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $osv-accent-color-hover: #c5221fb2;
77
$osv-red-300: #ec928e;
88
$osv-grey-600: #80868b;
99
$osv-grey-800: #3C4043;
10+
$osv-cyan-300: #C9F5F7;
1011
$osv-body-font-family: string.unquote('Overpass, sans-serif');
1112
$osv-heading-font-family: string.unquote('"Overpass Mono", monospace');
1213
$osv-heading-size: 60px;
@@ -1271,7 +1272,7 @@ div.highlight {
12711272
}
12721273

12731274
a {
1274-
color: #C9F5F7
1275+
color: $osv-cyan-300
12751276
}
12761277

12771278
.author {
@@ -1289,4 +1290,79 @@ div.highlight {
12891290
margin: 0 auto;
12901291
font-size: 16px;
12911292
}
1293+
}
1294+
1295+
/** 404 page */
1296+
.not-found-page {
1297+
height: 100%;
1298+
margin: 0;
1299+
align-items: center;
1300+
justify-content: center;
1301+
font-family: $osv-heading-font-family;
1302+
color: $osv-text-color;
1303+
font-size: 15px;
1304+
max-width: 1200px;
1305+
margin: 0 auto;
1306+
1307+
.mdc-layout-grid__cell--span-12 {
1308+
margin: 0 24px;
1309+
}
1310+
1311+
.text-info {
1312+
max-width: 900px;
1313+
margin: 20px auto 0;
1314+
1315+
.heading {
1316+
font-size: $osv-heading-size;
1317+
text-align: center;
1318+
margin-bottom: 32px;
1319+
}
1320+
1321+
@media (max-width: $osv-mobile-breakpoint) {
1322+
.heading {
1323+
font-size: $osv-heading-size-mobile;
1324+
}
1325+
}
1326+
1327+
.description {
1328+
font-size: 20px;
1329+
line-height: 26px;
1330+
margin-bottom: 24px;
1331+
margin-left: 8px;
1332+
margin-right: 8px;
1333+
text-align: center;
1334+
}
1335+
1336+
.cta {
1337+
margin: 32px 0;
1338+
display: flex;
1339+
flex-wrap: wrap;
1340+
justify-content: center;
1341+
gap: 4px;
1342+
}
1343+
1344+
h2,h3,h4 {
1345+
line-height: 1.1;
1346+
font-weight: 300;
1347+
margin-top: 3rem;
1348+
margin-bottom: 1.5rem;
1349+
}
1350+
1351+
p {
1352+
margin-bottom: 16px;
1353+
line-height: 1.6;
1354+
}
1355+
1356+
a {
1357+
color: $osv-cyan-300;
1358+
}
1359+
}
1360+
1361+
footer {
1362+
background: url('/static/img/footer-decoration.png');
1363+
background-repeat: no-repeat;
1364+
background-position: center;
1365+
min-height: 500px;
1366+
width: 100%;
1367+
}
12921368
}

‎gcp/appengine/frontend3/src/templates/404.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% extends 'base.html' %}
2+
3+
{% block top_bar %} {% endblock %}
4+
5+
{% block content %}
6+
<div class="mdc-layout-grid not-found-page">
7+
<div class="mdc-layout-grid__inner">
8+
<div class="mdc-layout-grid__cell--span-12 text-info">
9+
<h2 class="heading">Oops! Page Not Found!</h2>
10+
<p class="description">
11+
While you're here, why not check out our
12+
<a href="https://google.github.io/osv.dev/">documentation</a> or
13+
<a href="https://google.github.io/osv.dev/faq/">FAQ</a>?
14+
</p>
15+
<div class="cta">
16+
<a class="cta-primary link-button" href="{{ url_for('frontend_handlers.index') }}"
17+
aria-label="Get me back Home!">Back to Home</a>
18+
</div>
19+
</div>
20+
</div>
21+
<footer></footer>
22+
</div>
23+
{% endblock %}

‎gcp/appengine/frontend_handlers.py‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import os
1818
import math
1919
import re
20+
import logging
2021

2122
from flask import abort
2223
from flask import current_app
@@ -38,6 +39,7 @@
3839
import rate_limiter
3940
import source_mapper
4041
import utils
42+
from werkzeug import exceptions
4143

4244
blueprint = Blueprint('frontend_handlers', __name__)
4345

@@ -590,3 +592,9 @@ def list_packages(vuln_affected: list[dict]):
590592
packages.append(parsed_scheme)
591593

592594
return packages
595+
596+
597+
@blueprint.app_errorhandler(404)
598+
def not_found_error(error: exceptions.HTTPException):
599+
logging.info('Handled %s - Path attempted: %s', error, request.path)
600+
return render_template('404.html'), 404

0 commit comments

Comments
 (0)