Skip to content

Commit

Permalink
Add OSV scanner and GitHub actions to home page (#2136)
Browse files Browse the repository at this point in the history 
This change adds:
- two code boxes to display usage example for `osv-scanner fix` for both
basic(non-interactive) and advanced (interactive) use cases.
- Adds a new section to display information about Github Actions Tools
- Adds a button on top of the Home page to point to the Github Action
section

resolves #2085


https://github.com/google/osv.dev/assets/73332835/13da2482-8ca4-4fea-9644-1e3c8327fd88

<img width="906" alt="Screenshot 2024-04-24 at 8 32 19 pm"
src="https://github.com/google/osv.dev/assets/73332835/9326f6a9-c3c1-45c7-b71c-9f2835013aef">
  • Loading branch information
@zahraaalizadeh
zahraaalizadeh committed May 10, 2024
1 parent 149934b commit 0dad37e
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 5 deletions.
Binary file added gcp/appengine/frontend3/img/github-action-scan-output.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 49 additions & 1 deletion gcp/appengine/frontend3/src/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -895,6 +895,7 @@ dl.vulnerability-details,
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
}

Expand Down Expand Up @@ -1089,6 +1090,53 @@ dl.vulnerability-details,
padding-top: 205px;
}

.github-action {
margin-top: 100px;
display:grid;
justify-items: center;

.heading {
font-size: $osv-heading-size;
text-align: center;
margin-bottom: 32px;
}

@media (max-width: $osv-mobile-breakpoint) {
.heading {
font-size: $osv-heading-size-mobile;
}
}

.description {
font-size: 20px;
line-height: 26px;
margin-bottom: 24px;
margin-left: 8px;
margin-right: 8px;
max-width: 900px;
}

img {
max-width: 900px;
}

.image-container{
display: flex;
width: 100%;
max-width: 900px;
overflow-x: auto;
overflow-y: hidden;
margin-bottom: 24px;
}

.cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
}
}

.usage-examples {
margin-top: 100px;

Expand Down Expand Up @@ -1138,7 +1186,7 @@ dl.vulnerability-details,
margin-bottom: 32px;

.code-card-title {
font-size: 32px;
font-size: 28px;
}

.code-card-content {
Expand Down
56 changes: 52 additions & 4 deletions gcp/appengine/frontend3/src/templates/home.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,11 @@ <h1 class="title">A distributed vulnerability database for Open Source</h1>
<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">Use the API</a>
<a class="cta-primary link-button" href="#use-the-cli">CLI Tools</a>
</div>
<div class="cta">
<a class="cta-primary link-button" href="#use-vulnerability-scanner">Vulnerability Scanner</a>
<a class="cta-primary link-button" href="#use-remediation-tools">Remediation Tools</a>
<a class="cta-primary link-button" href="#use-the-github-workflows">GitHub Workflows</a>
</div>
</div>
<div class="mdc-layout-grid__cell--span-12 ecosystems-section">
Expand Down Expand Up @@ -162,9 +166,9 @@ <h3 class="code-card-title">Query by version number</h3>
</div>
</div>
</div>
<div id="use-the-cli" class="mdc-layout-grid__cell--span-12 usage-examples">
<div id="use-vulnerability-scanner" class="mdc-layout-grid__cell--span-12 usage-examples">
<!-- &#8209; is a non breaking hyphen -->
<h2 class="heading">Command Line Tools (OSV&#8209;Scanner)</h2>
<h2 class="heading">Vulnerability Scanner</h2>
<div class="code-card-container mdc-layout-grid__inner">
<div class="mobile-spacer mdc-layout-grid__cell--span-3"></div>
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
Expand Down Expand Up @@ -199,10 +203,54 @@ <h3 class="code-card-title">Scan directory recursively</h3>
</div>
<div class="mdc-layout-grid__cell--span-12">
<div class="cta">
<a class="cta-primary link-button" href="https://github.com/google/osv-scanner">More details</a>
<a class="cta-primary link-button" href="https://google.github.io/osv-scanner/">More details</a>
</div>
</div>
</div>
<div id="use-remediation-tools" class="mdc-layout-grid__cell--span-12 usage-examples">
<!-- &#8209; is a non breaking hyphen -->
<h2 class="heading">Remediation Tools</h2>
<div class="code-card-container mdc-layout-grid__inner">
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
<h3 class="code-card-title">Guided Remediation (basic)</h3>
<pre class="code-card-content" id="example-guided-remediation-basic">
osv-scanner fix --non-interactive --strategy=in-place -L path/to/package-lock.json
osv-scanner fix --non-interactive --strategy=relock -M path/to/package.json -L path/to/package-lock.json
</pre>
<clipboard-copy class="code-card-copy" for="example-guided-remediation-basic">
<mwc-icon-button class="icon" icon="content_copy"></mwc-icon-button>
</clipboard-copy>
</div>
<div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet">
<h3 class="code-card-title">Guided Remediation (interactive)</h3>
<pre class="code-card-content" id="example-guided-remediation-advanced">
osv-scanner fix -M path/to/package.json -L path/to/package-lock.json
</pre>
<clipboard-copy class="code-card-copy" for="example-guided-remediation-advanced">
<mwc-icon-button class="icon" icon="content_copy"></mwc-icon-button>
</clipboard-copy>
</div>
</div>
<div class="mdc-layout-grid__cell--span-12">
<div class="cta">
<a class="cta-primary link-button" href="https://google.github.io/osv-scanner/experimental/guided-remediation/">More details</a>
</div>
</div>
</div>
<div id="use-the-github-workflows" class="mdc-layout-grid__cell--span-12 github-action">
<h2 class="heading">GitHub Workflows</h2>
<p class="description">
OSV-Scanner also provides reusable GitHub workflows that can be easily integrated into CI/CD pipelines to provide
continuous vulnerability scanning coverage. This can scan newly added dependencies in pull requests for introduced
vulnerabilities, as well as perform regular vulnerability scans for the entire project.</p>
<div class="image-container">
<img src="/static/img/github-action-scan-output.png" alt="Screenshot of OSV-Scanner GitHub Action">
</div>
<div class="cta">
<a class="cta-primary link-button" href="https://google.github.io/osv-scanner/github-action/"
aria-label="Learn more about osv scanner github action">Learn more</a>
</div>
</div>
<div class="mdc-layout-grid__cell--span-12 open-source-banner">
<h2 class="heading">Open source</h2>
<p class="description">
Expand Down

0 comments on commit 0dad37e

Please sign in to comment.