Skip to content

Commit a21142f

Browse files
rzhwpull[bot]
rzhw
authored and
pull[bot]
committed
Initial v2 homepage primary components (#366)
* skeleton of clipboard-copiable snippets adds github clipboard element dependency, vendors.js increases to 880 KB from 875 KB * making progress on home * fixing ecosystem counts it's still sorta broken but let's save the state we have today * lint
1 parent b92aed7 commit a21142f

File tree

6 files changed

+185
-40
lines changed

6 files changed

+185
-40
lines changed

‎gcp/appengine/frontend3/package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gcp/appengine/frontend3/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"build": "webpack"
99
},
1010
"dependencies": {
11+
"@github/clipboard-copy-element": "^1.1.2",
1112
"@github/time-elements": "^3.1.2",
1213
"@hotwired/turbo": "^7.1.0",
1314
"@material/data-table": "^13.0.0",

‎gcp/appengine/frontend3/src/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import './styles.scss';
2+
import '@github/clipboard-copy-element';
23
import '@github/time-elements';
34
import '@material/mwc-circular-progress';
45
import '@material/mwc-icon';

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

Lines changed: 121 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -84,8 +84,11 @@ a:not([href^="https://osv.dev"]):not([href^="/"])::after {
8484
}
8585

8686
h1,
87+
h2,
88+
h3,
8789
pre {
8890
font-family: $osv-heading-font-family;
91+
font-weight: normal;
8992
}
9093

9194
.link-button {
@@ -153,45 +156,45 @@ pre {
153156
font-size: 20px;
154157
}
155158

156-
// Hide the submit button.
157-
.search input[type=submit] {
158-
display: none;
159-
}
160-
}
161-
162-
.ecosystems {
163-
margin-top: 20px;
164-
display: flex;
165-
flex-wrap: wrap;
166-
gap: 10px;
167-
align-items: center;
168-
169-
.ecosystem-label {
159+
.ecosystems {
160+
margin-top: 20px;
170161
display: flex;
171-
gap: 16px;
172-
font-family: $osv-heading-font-family;
173-
padding: 10px 20px;
174-
background: #696969;
175-
border-radius: 999px;
176-
177-
.ecosystem-count {
178-
font-weight: bold;
162+
flex-wrap: wrap;
163+
gap: 10px;
164+
align-items: center;
165+
166+
.ecosystem-label {
167+
display: flex;
168+
gap: 16px;
169+
font-family: $osv-heading-font-family;
170+
padding: 10px 20px;
171+
background: #696969;
172+
border-radius: 999px;
173+
174+
.ecosystem-count {
175+
font-weight: bold;
176+
}
177+
}
178+
179+
.ecosystems-divider {
180+
display: block;
181+
margin: 0 10px;
182+
height: 30px;
183+
border-right: 1px solid $osv-grey-600;
184+
}
185+
186+
input[type=radio]:checked + .ecosystem-label {
187+
background: $osv-text-color;
188+
color: $osv-accent-color;
189+
}
190+
191+
input[type=radio] {
192+
display: none;
179193
}
180194
}
181195

182-
.ecosystems-divider {
183-
display: block;
184-
margin: 0 10px;
185-
height: 30px;
186-
border-right: 1px solid $osv-grey-600;
187-
}
188-
189-
input[type=radio]:checked + .ecosystem-label {
190-
background: $osv-text-color;
191-
color: $osv-accent-color;
192-
}
193-
194-
input[type=radio] {
196+
// Hide the submit button.
197+
.search input[type=submit] {
195198
display: none;
196199
}
197200
}
@@ -465,8 +468,88 @@ dl.vulnerability-details,
465468
font-family: 'Google Material Icons';
466469
}
467470

468-
.usage-examples .heading {
469-
font-size: 60px;
470-
text-align: center;
471+
.ecosystem-counts {
472+
margin-top: 130px;
473+
474+
.ecosystems {
475+
display: grid;
476+
grid-template-rows: 30px 210px;
477+
grid-auto-flow: column;
478+
dt {
479+
position: relative;
480+
top: 210px;
481+
}
482+
dd {
483+
position: relative;
484+
top: -30px;
485+
background: #333;
486+
height: 100%;
487+
// Keep 1:1 ratio of child element.
488+
padding-top: 100%;
489+
}
490+
.ecosystem-count {
491+
position: relative;
492+
left: 50%;
493+
top: 50%;
494+
transform: translateX(-50%) translateY(-50%);
495+
display: block;
496+
background: #ddd;
497+
color: #000;
498+
border-radius: 999px;
499+
text-align: center;
500+
}
501+
}
502+
}
503+
504+
.usage-examples {
505+
margin-top: 130px;
506+
margin-bottom: 120px;
507+
.heading {
508+
font-size: 60px;
509+
text-align: center;
510+
margin-bottom: 32px;
511+
}
512+
}
513+
514+
.code-card {
515+
position: relative;
516+
background: #d46d59;
517+
border-radius: 10px;
518+
padding: 32px;
519+
520+
.code-card-title {
521+
font-size: 32px;
522+
}
523+
524+
.code-card-copy {
525+
position: absolute;
526+
left: 50%;
527+
bottom: 0;
528+
transform: translateX(-50%) translateY(50%);
529+
530+
.icon {
531+
background: #fff;
532+
border-radius: 999px;
533+
color: #d46d59;
534+
}
535+
}
536+
}
537+
538+
.api-banner {
539+
width: 640px;
540+
margin: 0 auto;
541+
542+
.heading {
543+
font-size: 28px;
544+
line-height: 54px;
545+
}
546+
.description {
547+
font-size: 20px;
548+
line-height: 24px;
549+
}
550+
.cta {
551+
margin: 32px 0;
552+
text-align: center;
553+
}
471554
}
472555
}

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

Lines changed: 49 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,57 @@ <h1 class="title">A complete picture of vulnerabilities in your open source depe
2121
<a class="cta-secondary" href="#">Learn more</a>
2222
</div>
2323
</div>
24+
<div class="mdc-layout-grid__cell--span-12 ecosystem-counts">
25+
<h2 class="heading">Our current vulnerability coverage</h2>
26+
<dl class="ecosystems">
27+
{% if ecosystem_counts %}
28+
{% set total = ecosystem_counts.values() | sum %}
29+
{% for ecosystem in ecosystem_counts %}
30+
<dt>{{ ecosystem }}</dt>
31+
<dd>
32+
<span class="ecosystem-count" style="
33+
width: {{ ecosystem_counts[ecosystem] / total * 100 }}%;">
34+
{{ ecosystem_counts[ecosystem] }}
35+
</span>
36+
</dd>
37+
{% endfor %}
38+
{% endif %}
39+
</dl>
40+
</div>
2441
<div class="mdc-layout-grid__cell--span-12 usage-examples">
2542
<h2 class="heading">Use the API</h2>
26-
...
43+
44+
<div class="mdc-layout-grid__inner">
45+
<div class="code-card mdc-layout-grid__cell--span-6">
46+
<h3 class="code-card-title">Query by commit hash</h3>
47+
<pre id="example-commit-hash">curl -X POST -d \
48+
'{"commit": "6879efc2c1596d11a6a6ad296f80063b558d5e0f"}' \
49+
"https://api.osv.dev/v1/query"</pre>
50+
<clipboard-copy class="code-card-copy" for="example-commit-hash">
51+
<mwc-icon-button class="icon" icon="content_copy"></mwc-icon-button>
52+
</clipboard-copy>
53+
</div>
54+
<div class="code-card mdc-layout-grid__cell--span-6">
55+
<h3 class="code-card-title">Query by version number</h3>
56+
<pre id="example-version-number">curl -X POST -d \
57+
'{"version": "2.4.1",
58+
"package": {"name": "jinja2", "ecosystem": "PyPI"}}' \
59+
"https://api.osv.dev/v1/query"</pre>
60+
<clipboard-copy class="code-card-copy" for="example-version-number">
61+
<mwc-icon-button class="icon" icon="content_copy"></mwc-icon-button>
62+
</clipboard-copy>
63+
</div>
64+
</div>
65+
</div>
66+
<div class="mdc-layout-grid__cell--span-12 api-banner">
67+
<h2 class="heading">Understand your open source exposure.</h2>
68+
<p class="description">
69+
Enter a git commit hash or version number and the API
70+
returns a list of vulnerabilities affecting that version.
71+
</p>
72+
<div class="cta">
73+
<a class="link-button" href="{{ url_for('frontend_handlers.list_vulnerabilities') }}">To the API</a>
74+
</div>
2775
</div>
2876
</div>
2977
</div>

‎gcp/appengine/frontend_handlers.py

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,8 @@ def index():
7676

7777
@blueprint.route('/v2/')
7878
def index_v2():
79-
return render_template('home.html')
79+
return render_template(
80+
'home.html', ecosystem_counts=osv_get_ecosystem_counts())
8081

8182

8283
@blueprint.route('/v2/list')

0 commit comments

Comments
 (0)