Skip to content

Commit ffe934f

Browse files
sonukapoorsonukapoor
authored
Merge pull request #226 from OWASP/docs/issue-225-owasp-logo
docs: add OWASP logo branding and screenshot showcase
2 parents 743b40d + 8904dc4 commit ffe934f

7 files changed

Lines changed: 259 additions & 45 deletions

File tree

‎README.md‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
[![OWASP Incubator Project](https://img.shields.io/badge/OWASP-Incubator%20Project-F68B1F?logo=owasp)](https://owasp.org/cve-lite-cli)
2+
[![OWASP Incubator Project](https://img.shields.io/badge/OWASP-Incubator%20Project-48A646?logo=owasp)](https://owasp.org/cve-lite-cli)
33
[![npm version](https://img.shields.io/npm/v/cve-lite-cli)](https://www.npmjs.com/package/cve-lite-cli)
44
[![npm downloads](https://img.shields.io/npm/dm/cve-lite-cli)](https://www.npmjs.com/package/cve-lite-cli)
55
[![CI](https://img.shields.io/github/actions/workflow/status/OWASP/cve-lite-cli/ci.yml?branch=main)](https://github.com/OWASP/cve-lite-cli/actions)
@@ -8,7 +8,9 @@
88
[![Protected by CVE Lite CLI](https://img.shields.io/badge/Protected_by-CVE_Lite_CLI-brightgreen)](https://github.com/OWASP/cve-lite-cli)
99

1010
<div align="center">
11-
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/logo-with-title.png" alt="CVE Lite CLI" width="320"/>
11+
<a href="https://owasp.org/cve-lite-cli">
12+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/logos-combined.svg" alt="CVE Lite CLI — An OWASP Foundation Project" width="500"/>
13+
</a>
1214

1315
<h1>CVE Lite CLI</h1>
1416

@@ -92,30 +94,37 @@ For detailed per-tool analysis, see [Comparison with other tools](docs/compariso
9294

9395
## What it looks like
9496

95-
Default output on [OWASP Juice Shop](https://github.com/juice-shop/juice-shop):
96-
97-
```bash
98-
git clone https://github.com/juice-shop/juice-shop.git
99-
cd juice-shop
100-
cve-lite .
101-
```
102-
103-
<p align="center">
104-
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png">
105-
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png" alt="CVE Lite CLI default output" width="600"/>
106-
</a>
107-
</p>
108-
109-
Verbose output — includes the `Copy And Run These Fix Commands` section:
110-
97+
<table>
98+
<tr>
99+
<th align="center">Terminal output</th>
100+
<th align="center">HTML dashboard (<code>--report</code>)</th>
101+
</tr>
102+
<tr>
103+
<td align="center">
104+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png">
105+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png" alt="CVE Lite CLI terminal output" width="440"/>
106+
</a>
107+
</td>
108+
<td align="center">
109+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png">
110+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png" alt="CVE Lite CLI HTML dashboard" width="440"/>
111+
</a>
112+
</td>
113+
</tr>
114+
<tr>
115+
<td align="center"><sub>Default scan output · <a href="docs/how-to-read-verbose-output.md">verbose output guide</a></sub></td>
116+
<td align="center"><sub>Generated with <code>--report</code> · <a href="docs/html-report.md">HTML report guide</a></sub></td>
117+
</tr>
118+
</table>
119+
120+
<details>
121+
<summary>Verbose terminal output — includes the full fix plan</summary>
111122
<p align="center">
112123
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-1.png"><img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-1.png" alt="Verbose output part 1" width="280"/></a>
113124
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-2.png"><img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-2.png" alt="Verbose output part 2" width="280"/></a>
114125
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-3.png"><img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-3.png" alt="Verbose output part 3" width="280"/></a>
115126
</p>
116-
<p align="center"><sub>Click any screenshot to enlarge</sub></p>
117-
118-
For a section-by-section walkthrough, see [How to read verbose output](docs/how-to-read-verbose-output.md).
127+
</details>
119128

120129
## HTML vulnerability report (`--report`)
121130

@@ -126,12 +135,6 @@ cve-lite /path/to/project --report
126135
cve-lite /path/to/project --report ./my-report --no-open
127136
```
128137

129-
<p align="center">
130-
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png">
131-
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png" alt="CVE Lite CLI HTML Report Dashboard" width="700"/>
132-
</a>
133-
</p>
134-
135138
See the [HTML Report guide](docs/html-report.md) for the full option reference and output details.
136139

137140
## Usage
@@ -238,7 +241,7 @@ CVE Lite CLI also uses itself in CI to scan its own dependencies. See [`self-sca
238241

239242
For full CI patterns including offline workflows, git hooks, and scripted automation, see the [CI and Workflow Integration guide](docs/ci-integration.md).
240243

241-
## OWASP project
244+
## Recognized by OWASP
242245

243246
CVE Lite CLI is an [OWASP Incubator Project](https://owasp.org/cve-lite-cli), peer-reviewed and maintained under the Open Web Application Security Project Foundation. Being part of OWASP means:
244247

‎assets/html-report-dashboard.png‎

3.66 KB
Loading

‎assets/logos-combined.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎docs/index.html‎

Lines changed: 61 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
"description": "Free, local-first dependency vulnerability scanner for JavaScript and TypeScript projects. Scans npm, pnpm, Yarn, and Bun lockfiles, provides copy-and-run fix commands, and supports offline advisory DB scanning.",
5252
"url": "https://owasp.org/cve-lite-cli/",
5353
"downloadUrl": "https://www.npmjs.com/package/cve-lite-cli",
54-
"softwareVersion": "1.8.0",
54+
"softwareVersion": "1.9.0",
5555
"license": "https://github.com/OWASP/cve-lite-cli/blob/main/LICENSE",
5656
"releaseNotes": "https://github.com/OWASP/cve-lite-cli/releases",
5757
"codeRepository": "https://github.com/OWASP/cve-lite-cli",
@@ -97,14 +97,22 @@
9797
<section class="container hero">
9898
<div class="hero-copy">
9999
<div class="hero-logo">
100-
<img
101-
src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/logo-with-title-removebg-preview.png"
102-
alt="CVE Lite CLI logo" />
100+
<div class="logo-pair">
101+
<img
102+
src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/logo-with-title-removebg-preview.png"
103+
alt="CVE Lite CLI" />
104+
<span class="logo-plus">+</span>
105+
<a href="https://owasp.org/cve-lite-cli" aria-label="An OWASP Foundation Project">
106+
<img
107+
src="https://policy.owasp.org/assets/images/OWASP_Logo_Black_TM.png"
108+
alt="An OWASP Foundation Project" />
109+
</a>
110+
</div>
103111
</div>
104-
<a class="release-badge" href="https://github.com/OWASP/cve-lite-cli/releases/tag/v1.8.0"
105-
aria-label="Latest release v1.8.0">
112+
<a class="release-badge" href="https://github.com/OWASP/cve-lite-cli/releases/tag/v1.9.0"
113+
aria-label="Latest release v1.9.0">
106114
<span class="release-badge-label">Latest Release</span>
107-
<span class="release-badge-version">v1.8.0</span>
115+
<span class="release-badge-version">v1.9.0</span>
108116
</a>
109117
<p class="eyebrow">JavaScript/TypeScript Dependency Scanner &mdash; <a href="https://owasp.org/cve-lite-cli" style="color:inherit;text-decoration:underline">An OWASP Foundation Project</a></p>
110118
<h1>Scan. Understand. Fix.</h1>
@@ -146,9 +154,40 @@ <h1>Scan. Understand. Fix.</h1>
146154
</div>
147155
</div>
148156
</div>
149-
<div class="hero-art" aria-hidden="true">
150-
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png"
151-
alt="CVE Lite CLI output screenshot" />
157+
<div class="hero-art">
158+
<div class="preview-tabs" role="tablist">
159+
<button class="preview-tab" role="tab" aria-selected="false" data-target="preview-terminal">Terminal</button>
160+
<button class="preview-tab active" role="tab" aria-selected="true" data-target="preview-report">HTML Report</button>
161+
<button class="preview-tab" role="tab" aria-selected="false" data-target="preview-verbose">Verbose</button>
162+
</div>
163+
<div class="preview-panel" id="preview-terminal">
164+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png" target="_blank" rel="noopener" class="preview-link">
165+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/default-output.png"
166+
alt="CVE Lite CLI terminal output" />
167+
</a>
168+
</div>
169+
<div class="preview-panel active" id="preview-report">
170+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png" target="_blank" rel="noopener" class="preview-link">
171+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/html-report-dashboard.png"
172+
alt="CVE Lite CLI HTML report dashboard" />
173+
</a>
174+
</div>
175+
<div class="preview-panel" id="preview-verbose">
176+
<div class="preview-verbose-grid">
177+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-1.png" target="_blank" rel="noopener" class="preview-link">
178+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-1.png"
179+
alt="Verbose output — fix plan" />
180+
</a>
181+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-2.png" target="_blank" rel="noopener" class="preview-link">
182+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-2.png"
183+
alt="Verbose output — findings table" />
184+
</a>
185+
<a href="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-3.png" target="_blank" rel="noopener" class="preview-link">
186+
<img src="https://raw.githubusercontent.com/OWASP/cve-lite-cli/main/assets/verbose-output-3.png"
187+
alt="Verbose output — dependency paths" />
188+
</a>
189+
</div>
190+
</div>
152191
</div>
153192
</section>
154193

@@ -355,7 +394,7 @@ <h3>Trust and support</h3>
355394

356395
<footer class="container site-footer">
357396
<p>CVE Lite CLI is MIT licensed and built in public. <a href="https://owasp.org/cve-lite-cli">An OWASP Foundation Project</a>.</p>
358-
<p>Latest: <a href="https://github.com/OWASP/cve-lite-cli/releases/tag/v1.8.0">v1.8.0</a></p>
397+
<p>Latest: <a href="https://github.com/OWASP/cve-lite-cli/releases/tag/v1.9.0">v1.9.0</a></p>
359398
<p>Developed with love by <a href="https://sonukapoor.com">Sonu Kapoor</a>.</p>
360399
<p>
361400
<a href="https://github.com/OWASP/cve-lite-cli/issues">Open an issue</a>
@@ -366,6 +405,17 @@ <h3>Trust and support</h3>
366405
</p>
367406
</footer>
368407
<script>
408+
document.querySelectorAll(".preview-tab").forEach((tab) => {
409+
tab.addEventListener("click", () => {
410+
document.querySelectorAll(".preview-tab").forEach(t => { t.classList.remove("active"); t.setAttribute("aria-selected", "false"); });
411+
document.querySelectorAll(".preview-panel").forEach(p => p.classList.remove("active"));
412+
tab.classList.add("active");
413+
tab.setAttribute("aria-selected", "true");
414+
const target = tab.getAttribute("data-target");
415+
if (target) document.getElementById(target)?.classList.add("active");
416+
});
417+
});
418+
369419
document.querySelectorAll(".copy-btn").forEach((btn) => {
370420
btn.addEventListener("click", async () => {
371421
const id = btn.getAttribute("data-copy-target");

‎docs/styles.css‎

Lines changed: 138 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,64 @@ nav a:hover {
124124
opacity: 1;
125125
}
126126

127+
.owasp-banner {
128+
background: linear-gradient(90deg, rgba(246, 139, 31, 0.08) 0%, rgba(246, 139, 31, 0.04) 100%);
129+
border-top: 1px solid rgba(246, 139, 31, 0.25);
130+
border-bottom: 1px solid rgba(246, 139, 31, 0.25);
131+
padding: 0.9rem 0;
132+
}
133+
134+
.owasp-banner-inner {
135+
display: flex;
136+
align-items: center;
137+
}
138+
139+
.owasp-banner-link {
140+
display: flex;
141+
align-items: center;
142+
gap: 1.1rem;
143+
text-decoration: none;
144+
width: 100%;
145+
}
146+
147+
.owasp-banner-link:hover .owasp-banner-cta {
148+
color: #F68B1F;
149+
}
150+
151+
.owasp-banner-logo {
152+
height: 32px;
153+
width: auto;
154+
background: white;
155+
border-radius: 5px;
156+
padding: 4px 8px;
157+
flex-shrink: 0;
158+
}
159+
160+
.owasp-banner-text {
161+
display: flex;
162+
flex-direction: column;
163+
gap: 0.1rem;
164+
flex: 1;
165+
}
166+
167+
.owasp-banner-text strong {
168+
font-size: 0.9rem;
169+
color: #F68B1F;
170+
}
171+
172+
.owasp-banner-text span {
173+
font-size: 0.78rem;
174+
color: var(--muted);
175+
}
176+
177+
.owasp-banner-cta {
178+
font-size: 0.78rem;
179+
color: rgba(246, 139, 31, 0.7);
180+
white-space: nowrap;
181+
flex-shrink: 0;
182+
transition: color 0.15s;
183+
}
184+
127185
.hero {
128186
padding: 3.5rem 0 1.5rem;
129187
display: grid;
@@ -136,14 +194,34 @@ nav a:hover {
136194
margin-bottom: 0.7rem;
137195
}
138196

139-
.hero-logo img {
140-
width: min(330px, 88%);
141-
height: auto;
142-
border-radius: 0.9rem;
197+
.logo-pair {
198+
display: inline-flex;
199+
align-items: center;
200+
gap: 14px;
143201
background: white;
202+
border-radius: 0.9rem;
203+
padding: 14px 22px;
144204
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
145205
}
146206

207+
.logo-pair img {
208+
height: 56px;
209+
width: auto;
210+
}
211+
212+
.logo-pair a {
213+
display: flex;
214+
align-items: center;
215+
}
216+
217+
.logo-plus {
218+
font-size: 26px;
219+
font-weight: 700;
220+
color: #94a3b8;
221+
line-height: 1;
222+
user-select: none;
223+
}
224+
147225
.release-badge {
148226
display: inline-flex;
149227
align-items: center;
@@ -271,6 +349,62 @@ p {
271349
box-shadow: var(--shadow);
272350
}
273351

352+
.preview-tabs {
353+
display: flex;
354+
gap: 0.4rem;
355+
margin-bottom: 0.65rem;
356+
}
357+
358+
.preview-tab {
359+
background: transparent;
360+
border: 1px solid rgba(183, 212, 255, 0.2);
361+
border-radius: 6px;
362+
color: #8b949e;
363+
cursor: pointer;
364+
font-size: 0.78rem;
365+
font-weight: 600;
366+
padding: 0.3rem 0.85rem;
367+
transition: color 0.15s, border-color 0.15s, background 0.15s;
368+
}
369+
370+
.preview-tab:hover {
371+
color: #e6edf3;
372+
border-color: rgba(183, 212, 255, 0.45);
373+
}
374+
375+
.preview-tab.active {
376+
background: rgba(87, 245, 159, 0.08);
377+
border-color: #57f59f;
378+
color: #57f59f;
379+
}
380+
381+
.preview-panel {
382+
display: none;
383+
}
384+
385+
.preview-panel.active {
386+
display: block;
387+
}
388+
389+
.preview-verbose-grid {
390+
display: flex;
391+
flex-direction: column;
392+
gap: 6px;
393+
}
394+
395+
.preview-link {
396+
display: block;
397+
cursor: zoom-in;
398+
}
399+
400+
.preview-link img {
401+
transition: opacity 0.15s;
402+
}
403+
404+
.preview-link:hover img {
405+
opacity: 0.88;
406+
}
407+
274408
.grid {
275409
display: grid;
276410
gap: 0.95rem;

0 commit comments

Comments
 (0)