Skip to content
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

Jump to bottom

Add OSV scanner and GitHub actions to home page #2136

Merged
merged 7 commits into from
May 10, 2024
Merged

Add OSV scanner and GitHub actions to home page #2136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f86c69f
Update the link to osv scanner documentations
zahraaalizadeh Apr 24, 2024
40476fe
Update CLI section's title to a more specific one
zahraaalizadeh May 7, 2024
4a0b82c
Add intro sections about guided remediation to Home page
zahraaalizadeh Apr 24, 2024
1307da1
Add osv scanner github action to Home page
zahraaalizadeh Apr 24, 2024
3e92859
Add a button linked to Github Action section
zahraaalizadeh Apr 24, 2024
4d3076c
Rename Github Actions to Github Workflows
zahraaalizadeh May 9, 2024
159d4dc
Display top cta buttons in two rows
zahraaalizadeh May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added gcp/appengine/frontend3/img/github-action-scan-output.png
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -888,6 +888,7 @@ dl.vulnerability-details,
flex-wrap: wrap;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
}

Expand Down Expand Up @@ -1082,6 +1083,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 @@ -1131,7 +1179,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
Open in desktop
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>
oliverchang marked this conversation as resolved.
Show resolved Hide resolved
<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
oliverchang marked this conversation as resolved.
Show resolved Hide resolved
</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