Skip to content

feat: implement HTML template components #455

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

Merged
fraxken merged 1 commit into from
Feb 2, 2025
Merged

feat: implement HTML template components #455

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions bin/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ defaultScannerCommand("from <spec>")
defaultScannerCommand("auto [spec]", { includeOutput: false, strategy: vulnera.strategies.GITHUB_ADVISORY })
.describe(i18n.getTokenSync("cli.commands.auto.desc"))
.option("-k, --keep", i18n.getTokenSync("cli.commands.auto.option_keep"), false)
.option("-d, --developer", i18n.getTokenSync("cli.commands.open.option_developer"), false)
.action(async(spec, options) => {
checkNodeSecureToken();
await commands.scanner.auto(spec, options);
Expand All @@ -71,6 +72,7 @@ prog
.describe(i18n.getTokenSync("cli.commands.open.desc"))
.option("-p, --port", i18n.getTokenSync("cli.commands.open.option_port"), process.env.PORT)
.option("-f, --fresh-start", i18n.getTokenSync("cli.commands.open.option_fresh_start"), process.env.PORT)
.option("-d, --developer", i18n.getTokenSync("cli.commands.open.option_developer"), false)
.action(commands.http.start);

prog
Expand Down
1 change: 1 addition & 0 deletions docs/cli/auto.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,3 +27,4 @@ $ nsecure auto --keep
| `--output` | `-o` | `nsecure-result` | Specify the output file for the results. |
| `--vulnerabilityStrategy` | `-s` | github-advisory | Strategy used to fetch package vulnerabilities (see Vulnera [available strategy](https://github.com/NodeSecure/vulnera?tab=readme-ov-file#available-strategy)). |
| `--keep` | `-k` | `false` | Preserve JSON payload after execution. |
| `--developer` | `-d` | `false` | Launch the server in developer mode, enabling automatic HTML component refresh. |
1 change: 1 addition & 0 deletions docs/cli/open.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,3 +18,4 @@ $ nsecure open [json]
|---|---|---|---|
| `--port` | `-p` | `process.env.PORT` | Specify the port on which the HTTP server should run. |
| `--fresh-start` | `-f` | `false` | Open the UI with no initial package. Also, the app will use a dedicated cache. |
| `--developer` | `-d` | `false` | Launch the server in developer mode, enabling automatic HTML component refresh. |
3 changes: 2 additions & 1 deletion i18n/english.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ const cli = {
open: {
desc: "Run an HTTP Server with a given nsecure JSON file",
option_port: "Define the running port",
option_fresh_start: "Launch the server from scratch, ignoring any existing payload file"
option_fresh_start: "Launch the server from scratch, ignoring any existing payload file",
option_developer: "Launch the server in developer mode, enabling automatic HTML component refresh"
},
verify: {
desc: "Run a complete advanced analysis for a given npm package",
Expand Down
3 changes: 2 additions & 1 deletion i18n/french.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,8 @@ const cli = {
open: {
desc: "Démarre un serveur HTTP avec un fichier .json nsecure donné",
option_port: "Port à utiliser",
option_fresh_start: "Lance le serveur à partir de zéro, en ignorant tout fichier de payload existant"
option_fresh_start: "Lance le serveur à partir de zéro, en ignorant tout fichier de payload existant",
option_developer: "Lance le serveur en mode développeur, permettant le rafraîchissement automatique des composants HTML"
},
verify: {
desc: "Démarre une analyse AST avancée pour un package npm donné",
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
"esbuild": "^0.24.0",
"eslint-plugin-jsdoc": "^50.6.2",
"esmock": "^2.6.7",
"glob": "^11.0.0",
"http-server": "^14.1.1",
"pkg-ok": "^3.0.0",
"pretty-bytes": "^6.1.1",
Expand All @@ -98,8 +97,10 @@
"@topcli/prompts": "^2.0.0",
"@topcli/spinner": "^2.1.2",
"cacache": "^19.0.1",
"chokidar": "^4.0.3",
"dotenv": "^16.4.5",
"filenamify": "^6.0.0",
"glob": "^11.0.1",
"highlightjs-line-numbers.js": "^2.8.0",
"ini": "^5.0.0",
"kleur": "^4.1.5",
Expand Down
216 changes: 216 additions & 0 deletions public/components/package/package.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,216 @@
<template id="package-info-template">
<div class="package-code"></div>
<div class="package-header">
<div class="package-name">
<p class="name"></p>
<p class="version"></p>
<button class="info"></button>
</div>
<p class="description"></p>
<ul class="flags"></ul>
<div class="links"></div>
</div>

<div class="package-navigation">
<span class="container-title">[[=z.token('package_info.navigation.overview')]]</span>

<div class="active" data-menu="info" data-title="[[=z.token('package_info.navigation.overview')]]">
<i class="icon-cube"></i>
</div>
<div data-menu="files" data-title="[[=z.token('package_info.navigation.files')]]">
<i class="icon-docs"></i>
</div>
<div data-menu="dependencies" id="dependencies-nav-menu"
data-title="[[=z.token('package_info.navigation.dependencies')]]">
<i class="icon-sitemap"></i>
<div class="signal"></div>
</div>
<div data-menu="warnings" id="warnings-nav-menu" data-title="[[=z.token('package_info.navigation.warnings')]]">
<i class="icon-warning-empty"></i>
<div class="signal"></div>
</div>
<div data-menu="vulnerabilities" id="vulnerabilities-nav-menu"
data-title="[[=z.token('package_info.navigation.vulnerabilities')]]">
<i class="icon-bell-1"></i>
<div class="signal"></div>
</div>
<div data-menu="licenses" data-title="[[=z.token('package_info.navigation.licenses')]]">
<i class="icon-vcard"></i>
</div>
<div data-menu="scorecard" id="scorecard-menu" data-title="[[=z.token('package_info.title.openSsfScorecard')]]">
<i id="ossf-score"></i>
</div>
</div>

<div class="package-container" id="pan-info">
<!-- package metadata -->
<ul class="fields" style="margin-top: 0px !important;"></ul>

<div class="head-title">
<p>[[=z.token('package_info.title.releases')]]</p>
</div>
<ul class="fields releases"></ul>

<div class="head-title">
<p>[[=z.token('package_info.title.used_by')]]</p>
</div>
<div class="list-item line" id="usedby" style="margin-top: 0px;"></div>

<div class="github-overview">
<div class="head-title">
<p>github</p>
</div>
<div class="bundlephobia" style="margin-bottom: 10px;">
<div>
<b class="github-stars">N/A</b>
<span>STARS</span>
</div>
<div>
<b class="github-issues">N/A</b>
<span>ISSUES</span>
</div>
<div>
<b class="github-forks">N/A</b>
<span>FORKS</span>
</div>
</div>
</div>

<div class="gitlab-overview">
<div class="head-title">
<p>gitlab</p>
</div>
<div class="bundlephobia" style="margin-bottom: 10px;">
<div>
<b class="gitlab-stars">N/A</b>
<span>STARS</span>
</div>
<div>
<b class="gitlab-forks">N/A</b>
<span>FORKS</span>
</div>
</div>
</div>

<div class="head-title">
<p>[[=z.token('package_info.title.maintainers')]]</p>
</div>
<div class="package-maintainers"></div>
</div>

<div class="package-container hidden" id="pan-files">
<div class="head-title no-margin">
<p>[[=z.token('package_info.title.files_extensions')]]</p>
</div>
<div class="list-item" id="extensions"></div>

<div class="head-title no-margin">
<p>[[=z.token('package_info.title.files')]]</p>
</div>
<div class="list-item line" id="tarballfiles"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.required_files')]]</p>
</div>
<div class="list-item line" id="internaldep"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.minified_files')]]</p>
</div>
<div class="list-item line" id="minifiedfiles"></div>

<!-- bundlephobia (package size) -->
<div class="head-title">
<p>bundlephobia</p>
</div>
<div class="bundlephobia">
<div>
<b class="size-min">N/A</b>
<span>MIN</span>
</div>
<div>
<b class="size-gzip">N/A</b>
<span>GZIP</span>
</div>
<div>
<b class="size-full">N/A</b>
<span>FULL</span>
</div>
</div>
</div>

<div class="package-container hidden" id="pan-dependencies">
<div class="head-title no-margin" id="script-title">
<p>npm scripts</p>
</div>
<div class="package-scripts"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.unused_deps')]]</p>
</div>
<div class="list-item line" id="unuseddep"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.missing_deps')]]</p>
</div>
<div class="list-item line" id="missingdep"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.node_deps')]]</p>
</div>
<div class="list-item" id="nodedep"></div>

<div class="head-title">
<p>[[=z.token('package_info.title.third_party_deps')]]</p>
<span id="show-hide-dependency">hide</span>
</div>
<div class="list-item line" id="requireddep"></div>
</div>

<div class="package-container hidden" id="pan-warnings">
<div class="help-dialog">
<i class="icon-info-circled-alt"></i>
<p>[[=z.token('package_info.helpers.warnings')]] <b class="open-wiki">wiki</b></p>
</div>
</div>

<div class="package-container hidden" id="pan-vulnerabilities">
<div class="vuln-strategy">
<div>
<p class="strategy"><i class="icon-info-circled"></i>strategy</p>
</div>
<div>
<img src="sonatype.png" class="logo">
<p class="name">SONATYPE</p>
</div>
</div>
<div class="packages-vuln"></div>
</div>

<div class="package-container hidden" id="pan-licenses">
<div class="help-dialog">
<i class="icon-info-circled-alt"></i>
<p>[[=z.token('package_info.helpers.spdx')]] <a href="https://spdx.dev/about/" target="_blank"
rel="noopener noreferrer">[[=z.token('package_info.helpers.here')]]</a></p>
</div>
</div>

<div class="package-container hidden" id="pan-scorecard">
<div class="package-scorecard">
<div class="help-dialog">
<i class="icon-info-circled-alt"></i>
<p>[[=z.token('package_info.helpers.openSsf')]] <a href="https://github.com/ossf/scorecard" target="_blank"
rel="noopener noreferrer">[[=z.token('package_info.helpers.here')]]</a></p>
</div>
<div class="score-header">
<span class="score-text">SCORE</span>
<span class="score-value">
<span id="head-score"></span>/10
</span>
<span class="visualizer">
<a target="_blank"><img src="ext-link.svg" class="logo"> OpenSSF Scorecard Monitor Visualizer</a>
</span>
</div>
</div>
</div>
</template>
3 changes: 3 additions & 0 deletions public/components/popup/popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<section id="popup--background">
<div class="popup"></div>
</section>
98 changes: 98 additions & 0 deletions public/components/searchbar/searchbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<template id="search_helpers_default">
<div class="line" data-value="version:"><b>version:</b>
<p>semver</p>
</div>
<div class="line" data-value="package:"><b>package:</b>
<p>name</p>
</div>
<div class="line" data-value="license:"><b>license:</b>
<p>name</p>
</div>
<div class="line" data-value="ext:"><b>ext:</b>
<p>file extension</p>
</div>
<div class="line" data-value="builtin:"><b>builtin:</b>
<p>node.js module</p>
</div>
<div class="line" data-value="author:"><b>author:</b>
<p>name/email</p>
</div>
<div class="line" data-value="flag:"><b>flag:</b>
<p>name</p>
</div>
<div class="line" data-value="size:"><b>size:</b>
<p>size</p>
</div>
</template>

<template id="search_helpers_flags">
<div class="line" data-value="hasExternalCapacity">
<p>🌍 hasExternalCapacity</p>
</div>
<div class="line" data-value="hasIndirectDependencies">
<p>🌲 hasIndirectDependencies</p>
</div>
<div class="line" data-value="hasWarnings">
<p>⚠️ hasWarnings</p>
</div>
<div class="line" data-value="hasNoLicense">
<p>📜 hasNoLicense</p>
</div>
<div class="line" data-value="hasMultipleLicenses">
<p>📚 hasMultipleLicenses</p>
</div>
<div class="line" data-value="hasMinifiedCode">
<p>🔬 hasMinifiedCode</p>
</div>
<div class="line" data-value="hasCustomResolver">
<p>💎 hasCustomResolver</p>
</div>
<div class="line" data-value="hasMissingOrUnusedDependency">
<p>👀 hasMissingOrUnusedDependency</p>
</div>
<div class="line" data-value="hasScript">
<p>📦 hasScript</p>
</div>
<div class="line" data-value="hasNativeCode">
<p>🐲 hasNativeCode</p>
</div>
<div class="line" data-value="hasBannedFile">
<p>⚔️ hasBannedFile</p>
</div>
<div class="line" data-value="isGit">
<p>☁️ isGit</p>
</div>
<div class="line" data-value="isDeprecated">
<p>⛔️ isDeprecated</p>
</div>
<div class="line" data-value="isOutdated">
<p>⌚️ isOutdated</p>
</div>
<div class="line" data-value="hasManyPublishers">
<p>👥 hasManyPublishers</p>
</div>
<div class="line" data-value="isDead">
<p>💀 isDead</p>
</div>
<div class="line" data-value="hasVulnerabilities">
<p>🚨 hasVulnerabilities</p>
</div>
<div class="line" data-value="hasDuplicate">
<p>🎭 hasDuplicate</p>
</div>
</template>

<template id="searchbar-content">
<div id="searchbar">
<i class="icon-globe-alt-outline"></i>
<div class="search-items"></div>
<input type="text" placeholder="[[=z.token('searchbar_placeholder')]]" id="search-bar-input" autocomplete="off"
autocorrect="off" autocapitalize="off" spellcheck="false"></input>

<div class="search-result-background">
<div class="search-result-pannel" id="package-list">
<div class="helpers"></div>
</div>
</div>
</div>
</template>
Loading