docs: add example and HTML output screenshot for container scanning #3716
Conversation
|
Hi @another-rex, this PR addresses #3355 by adding an example of container scanning using OSV-Scanner, along with a screenshot of the HTML output. Let me know if anything needs to be improved. Thanks! |
|
Ah, I meant on the osv.dev front page, not the docs. Sorry for the unclear issue! |
|
Hi @another-rex, updated home.html on the osv.dev front page with container scan example and screenshot as requested. Let me know if anything else needs changing. Thanks! |
docs/index.md
Outdated
| OSV.dev. Open source users can query for known vulnerabilities by version number | ||
| or commit hash.](images/diagram.png) | ||
|
|
||
| ## 🐳 Scanning Container Images with OSV-Scanner |
There was a problem hiding this comment.
We can remove it from the docs.
| <md-icon-button class="icon"><md-icon>content_copy</md-icon></md-icon-button> | ||
| </clipboard-copy> | ||
| </div> | ||
| <div class="code-card mdc-layout-grid__cell--span-6 mdc-layout-grid__cell--span-12-tablet"> |
There was a problem hiding this comment.
This should go below, in the same level as the GitHub Workflows section, though it can be above it.
E.g.
Container image scanning
You can use <a href="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/google/osv-scanner">OSV-Scanner</a> to scan your container images for known vulnerabilities.
<code block> (We can just show the --serve version)
osv-scanner scan image --serve alpine:3.12
</code block>
<image>
GitHub Workflows
...
| osv-scanner scan image --serve alpine:3.12 | ||
| </pre> | ||
| <div class="image-container" style="margin-top: 12px;"> | ||
| <img src="/img/container-scan-html.png" alt="Screenshot of container scan HTML output" loading="lazy" style="max-width: 100%; border-radius: 6px; border: 1px solid #ccc;"> |
There was a problem hiding this comment.
image src needs to be /static/img/conta...
AbhishekHerbertSamuel
force-pushed
the
docs/container-scanning
branch
from
d23a270 to
ac0304d
Compare
|
Hi @another-rex — addressed feedback: Moved Container Image Scanning to a top-level section (placed above GitHub Workflows). Fixed image path to /static/img/container-scan-html.png and added the asset under gcp/website/frontend3/static/img/. Removed the container scanning section from docs/index.md. Tested locally with make run-website-emulator; the screenshot loads. I’ve also rebased onto upstream/master. |
|
@another-rex Hi, are there any corrections? If not, is it ready to be merged? |
|
Just been a bit busy recently and haven't had a chance to look at this yet, I'll try to have a look today. |
|
The image size seems way too big, also the darker gray code box seem to be missing, can you match the look of the other boxes? You can use |
|
Hi @another-rex, I'll match the look and reduce the image size, have been using the make run-website-emulator command to run it locally. Will crosscheck with that and then push it here. |
…shot size with GH Workflows, remove top divider
|
Hi @another-rex, have made the changes. Do check the latest commit and let me know if further changes need to be made. |
|
Hi @another-rex, kindly ignore commit 6 (I just merged the changes in the master branch into my local branch). The 5th commit reflects the corrections made. (See the files changed section). Do let me know if its ready for merging or if further changes are necessary. |
| </div> | ||
| {% endblock %} | ||
|
|
||
| <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.webp" alt="Screenshot of OSV-Scanner GitHub Action" loading="lazy"> </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"> This project is <a href="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/google/osv">open source</a>. If you have any ideas or questions, please feel free to reach out by <a href="https://github.com/google/osv/issues/new/choose">creating an issue</a>! </p> <div class="cta"> <a class="cta-primary link-button" href="https://google.github.io/osv.dev/faq/" aria-label="Learn more on our FAQ">Learn more</a> </div> </div> </div> <footer></footer> </div> {% endblock %} |
There was a problem hiding this comment.
This seems to be misformatted? Everything is on one line?
| </div> | ||
|
|
||
| <!-- Big screenshot (same size/markup as GitHub Workflows) --> | ||
| <div class="mdc-layout-grid__inner" style="margin-top: 16px;"> |
There was a problem hiding this comment.
The image is still far too big, it needs a max width of ~1000px or so to look right.
Also, the image seems to have a very noticible black top border, maybe it needs to be cropped by a few pixels at the top.
2 participants
This PR adds a container scanning example using OSV-Scanner for the Alpine 3.12 image,
and includes a screenshot of the HTML output.
Closes #3355