Skip to content

v2 Home page improvements. #371

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

Merged
oliverchang merged 2 commits into from
Apr 4, 2022
Merged

v2 Home page improvements. #371

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
10ebf5f
Home page improvements.
oliverchang Apr 4, 2022
ffcf21f
more changes
oliverchang Apr 4, 2022
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
101 changes: 91 additions & 10 deletions gcp/appengine/frontend3/src/styles.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -453,19 +453,28 @@ dl.vulnerability-details,
/** Home page */

.home-page {
.hero {
width: 1000px;
margin: 0 auto;

.cta {
text-align: center;
}
}

.title {
font-size: 60px;
line-height: 70px;
margin-bottom: 12px;
}

.explainer {
font-size: 20px;
}

.google-backed::after {
display: inline;
content: 'google';
font-family: 'Google Material Icons';
p {
margin-bottom: 8px;
}
margin-bottom: 32px;
}

.ecosystem-counts {
Expand All @@ -478,6 +487,8 @@ dl.vulnerability-details,
dt {
position: relative;
top: 210px;
text-align: center;
font-family: $osv-heading-font-family;
}
dd {
position: relative;
Expand All @@ -488,27 +499,97 @@ dl.vulnerability-details,
padding-top: 100%;
}
.ecosystem-count {
position: relative;
font-family: $osv-heading-font-family;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
background: #ddd;
background: #c4c4c4;
color: #000;
border-radius: 999px;
border-radius: 50%;
text-align: center;
z-index: 1;
}
}

.ecosystems-line {
width: 100%;
border-top: 1px dashed #a0a0a0;
position: relative;
z-index: 1;
}

.ecosystems-line-mid {
@extend .ecosystems-line;
top: 105px;
border-top: 1px solid #a0a0a0;
}

.ecosystems-line-0 {
@extend .ecosystems-line;
top: 1px;
}

.ecosystems-line-1 {
@extend .ecosystems-line;
top: 52px;
}

.ecosystems-line-2 {
@extend .ecosystems-line;
top: 157px;
}

.ecosystems-line-3 {
@extend .ecosystems-line;
top: 210px;
}
}

.usage-examples {
margin-top: 130px;
margin-top: 100px;
margin-bottom: 120px;
.heading {
font-size: 60px;
text-align: center;
margin-bottom: 32px;
}
.description {
font-size: 20px;
line-height: 24px;
margin-bottom: 10px;
text-align: center;
}
}

.schema-info {
width: 800px;
margin: 0 auto;
margin-top: 100px;

.heading {
font-size: 60px;
text-align: center;
margin-bottom: 32px;
}
.description {
font-size: 20px;
line-height: 24px;
margin-bottom: 10px;
}

.code {
background: #333;
padding: 32px;
font-size: 12px;
border-radius: 10px;
}

.cta {
margin: 32px 0;
text-align: center;
}
}

.code-card {
Expand All @@ -535,7 +616,7 @@ dl.vulnerability-details,
}
}

.api-banner {
.open-source-banner {
width: 640px;
margin: 0 auto;

Expand Down
116 changes: 90 additions & 26 deletions gcp/appengine/frontend3/src/templates/home.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,43 +4,111 @@
{% block content %}
<div class="mdc-layout-grid">
<div class="mdc-layout-grid__inner home-page">
<div class="mdc-layout-grid__cell--span-6 hero">
<h1 class="title">A complete picture of vulnerabilities in your open source dependencies.</h1>
<div class="mdc-layout-grid__cell--span-12 hero">
<h1 class="title">A distributed vulnerability database for Open Source</h1>
<div class="explainer">
<p class="google-backed">
An ongoing project backed by Google.
</p>
<p>
OSV captures precise data about a vulnerability's impact, and
automates the process of vulnerability triage and database
maintenance across major open source ecosystems.
</p>
<p>An open, distributed way of managing vulnerabilities for open source.</p>
</div>
<div class="cta">
<a class="cta-primary link-button" href="{{ url_for('frontend_handlers.list_vulnerabilities') }}">Search Vulnerability Database</a>
<a class="cta-primary link-button" href="#">Use the API</a>
<a class="cta-secondary" href="#">Learn more</a>
</div>
</div>
<div class="mdc-layout-grid__cell--span-12 ecosystem-counts">
<h2 class="heading">Our current vulnerability coverage</h2>
<h2 class="heading">Ecosystems</h2>
<div class="ecosystems-line-mid"></div>
<div class="ecosystems-line-0"></div>
<div class="ecosystems-line-1"></div>
<div class="ecosystems-line-2"></div>
<div class="ecosystems-line-3"></div>
<dl class="ecosystems">
{% if ecosystem_counts %}
{% set total = ecosystem_counts.values() | sum %}
{% for ecosystem in ecosystem_counts %}
<dt>{{ ecosystem }}</dt>
<dd>
<span class="ecosystem-count" style="
width: {{ ecosystem_counts[ecosystem] / total * 100 }}%;">
{{ ecosystem_counts[ecosystem] }}
</span>
</dd>
{% if ecosystem_counts[ecosystem] > 30 %}
<dt>{{ ecosystem }}</dt>
<dd>
{% set radius = [(ecosystem_counts[ecosystem] | log) / (total | log) * 100, 30] | max %}
<span class="ecosystem-count" style="
width: {{ radius }}px; height: {{ radius }}px; line-height: {{ radius }}px">
{{ ecosystem_counts[ecosystem] }}
</span>
</dd>
{% endif %}
{% endfor %}
{% endif %}
</dl>
</div>

<div class="mdc-layout-grid__cell--span-12 schema-info">
<h2 class="heading">OSV schema</h2>
<p class="description">
All advisories in this database use the
<a href="https://ossf.github.io/osv-schema/">OpenSSF OSV format</a>, which
was developed in collaboration with many open source communities. This
infrastructure serves as an aggregator of
<a href="https://github.com/ossf/osv-schema#open-source-vulnerability-schema">vulnerability databases</a>
that have adopted this schema.
</p>
<p class="description">
The OSV schema provides a human and machine readable data format to
describe vulnerabilities in a way that precisely map to open source
package versions.
</p>
<pre class="code">
{
"schema_version": "1.3.0",
"id": "GHSA-c3g4-w6cv-6v7h",
"modified": "2022-04-01T13:56:42Z",
"published": "2022-04-01T13:56:42Z",
"aliases": [ "CVE-2022-27651" ],
"summary": "Non-empty default inheritable capabilities for linux container in Buildah",
"details": "A bug was found in Buildah where containers were created ...",
"affected": [
{
"package": {
"ecosystem": "Go",
"name": "github.com/containers/buildah"
},
"ranges": [
{
"type": "ECOSYSTEM",
"events": [
{
"introduced": "0"
},
{
"fixed": "1.25.0"
}
]
}
]
}
],
"references": [
{
"type": "WEB",
"url": "https://github.com/containers/buildah/commit/..."
},
{
"type": "PACKAGE",
"url": "https://github.com/containers/buildah"
}
],
}
</pre>
<div class="cta">
<a class="cta-secondary" href="https://security.googleblog.com/2021/06/announcing-unified-vulnerability-schema.html">Learn more</a>
</div>
</p>
</div>
<div class="mdc-layout-grid__cell--span-12 usage-examples">
<h2 class="heading">Use the API</h2>

<p class="description">
An easy-to-use API is available to query for all known vulnerabilities
by either a commit hash, or a package version.
</p>
<div class="mdc-layout-grid__inner">
<div class="code-card mdc-layout-grid__cell--span-6">
<h3 class="code-card-title">Query by commit hash</h3>
Expand All @@ -63,15 +131,11 @@ <h3 class="code-card-title">Query by version number</h3>
</div>
</div>
</div>
<div class="mdc-layout-grid__cell--span-12 api-banner">
<h2 class="heading">Understand your open source exposure.</h2>
<div class="mdc-layout-grid__cell--span-12 open-source-banner">
<h2 class="heading">Open source</h2>
<p class="description">
Enter a git commit hash or version number and the API
returns a list of vulnerabilities affecting that version.
This project is <a href="https://github.com/google/osv">open source</a>. Contributions are welcome!
</p>
<div class="cta">
<a class="link-button" href="{{ url_for('frontend_handlers.list_vulnerabilities') }}">To the API</a>
</div>
</div>
</div>
</div>
Expand Down
6 changes: 6 additions & 0 deletions gcp/appengine/frontend_handlers.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"""Handlers for the OSV web frontend."""

import os
import math

from flask import abort
from flask import Blueprint
Expand Down Expand Up @@ -288,3 +289,8 @@ def vulnerability_handler():
"""Handle a vulnerability request."""
vuln_id = request.args.get('id')
return jsonify(osv_get_by_id(vuln_id))


@blueprint.app_template_filter('log')
def logarithm(n):
return math.log(n)
1 change: 1 addition & 0 deletions gcp/appengine/main.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ def create_app():
__name__, template_folder='dist', static_folder='dist/static')
flask_app.register_blueprint(handlers.blueprint)
flask_app.register_blueprint(frontend_handlers.blueprint)
flask_app.config["TEMPLATES_AUTO_RELOAD"] = True

return flask_app

Expand Down