Gathering detailed insights and metrics for @canonical/global-nav
Gathering detailed insights and metrics for @canonical/global-nav
Installations
npm install @canonical/global-navDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
Typescript Support
No
Node Version
16.17.1
NPM Version
8.15.0
Statistics
5 Stars
535 Commits
23 Forks
14 Watching
16 Branches
112 Contributors
Updated on 24 Apr 2024
Languages
JavaScript (37.74%)
Shell (27.04%)
HTML (24.81%)
SCSS (9.49%)
Dockerfile (0.92%)
Total Downloads
Cumulative downloads
Total Downloads
515,968
Last day
43.9%
649
Compared to previous day
Last week
17.8%
2,262
Compared to previous week
Last month
-33.5%
8,690
Compared to previous month
Last year
52%
169,238
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
1
Versions
Canonical Global Nav
This project contains the JavaScript and styles to add an "All Canonical" navigation dropdown item to the Vanilla navigation pattern.
The dropdown contains a list of Canonical eco-system websites, giving a user the ability to jump around the core sites easily.
Usage
Use a node package manager to install this component and then link the JS file into the head of your site, with optional settings.
The styles will automatically be injected into the page's <head>.
- Install via yarn or npm
1yarn add @canonical/global-nav 2
...or...
1npm install @canonical/global-nav --save
- You can then install the library either by directly linking to it or via ES6 imports.
To consume the library directly, add a link to the JS file containing an IIFE and run the canonicalGlobalNav.createNav() function;
1<script src="/node_modules/@canonical/global-nav/dist/iife.js"></script> 2<script> 3 canonicalGlobalNav.createNav(); 4</script>
To import it, simply call it from your site-wide JS file;
1import { createNav } from '@canonical/global-nav'; 2createNav();
- You will then need to add the
.global-navclass to aul.p-navigation__itemselement within the navigation pattern. The module will look for this class and add the dropdown as the first item in the list.
Options
The createNav function takes an object of options with the following property:
-
breakpoint: The point, in pixels, at which the navigation switches between desktop and mobile layouts. The default is620px, which is meant to reflect the default value of$breakpoint-navigation-thresholdin Vanilla (see Vanilla's breakpoint documentation). -
mobileContainerSelectoranddesktopContainerSelector: Selectors (can be 'id' or 'class') of where to attach the mobile and desktop views of the global-nav. This will also circumvent the default eventListeners being attached as they are dependent on the default structure, so custom JS will be nessacary. Also in this case, the classglobal-navshould still be used to indicate the position of the 'All Canonical' tab button. If ony one is used it will render the default global nav.
If the $breakpoint-navigation-threshold Vanilla variable is overridden in your project, you will need to set this option on the global nav.
For example, to set the breakpoint to 1036:
1<script src="/node_modules/@canonical/global-nav/dist/index.js"></script>
2
3<script>
4 canonicalGlobalNav.createNav({
5 breakpoint: 1036,
6 mobileContainerSelector: 'global-nav-mobile',
7 desktopContainerSelector: 'global-nav-desktop',
8 });
9</script>If you're importing;
1import { createNav } from '@canonical/global-nav'; 2createNav({ breakpoint: 1036 });
Building the Global nav
To build the JS into the /dist folder, run:
1./run build
Running the project locally
The simplest way to run the site locally is to first install Docker (on Linux you may need to add your user to the docker group), and then use the ./run script:
1./run
You can also use the dotrun snap, by running:
1dotrun
Once the containers are setup, you can visit http://127.0.0.1:8300 in your browser.
Watching changed files
For working on Sass files and JS files , you may want to dynamically watch for changes to rebuild the dist files whenever something changes.
To setup the watcher, open a new terminal window and run:
1./run watch
Before submitting your pull request, run the tests - which checks both the JS and Sass for errors.
./run test
How to add inline svgs
Just because this was a bit of a pain, here is what I did.
- Shrink the svg as much as possible
- Upload it to the asset server for others - OPTIONAL
- View it in a browser and grab the source code.
- Convert the quotes from double
"to single'- CRITICAL - Encode the svg
- Add this with
data:image/svg+xml,in the right place in product-details.js
Vanilla updates
This project uses the Vanilla framework as a dependency in two ways: the SCSS files are imported directly to build the styles of the global-nav itself (via the vanilla-framework npm package, as defined in dependencied in package.json) and for styling the demo page (via direct link in the index.html file).
When updating Vanilla to latest version both dependencies should be updated.
Release process
The package is versioned using semantic versioning and published to the NPM registry.
To cut a new release run:
1npm version [patch|minor|major]
This will trigger the prepublishonly script which will ensure requisite artefacts are built before publishing.
Code licensed LGPLv3 by Canonical Ltd.
With ♥ from Canonical
No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
all changesets reviewed
Reason
no binaries found in the repo
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/pr.yaml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
license file not detected
Details
- Warn: project does not have a license file
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yaml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/canonical/global-nav/pr.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yaml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/canonical/global-nav/pr.yaml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/pr.yaml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/canonical/global-nav/pr.yaml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/pr.yaml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/canonical/global-nav/pr.yaml/main?enable=pin
- Warn: containerImage not pinned by hash: Dockerfile:5
- Warn: containerImage not pinned by hash: Dockerfile:14
- Warn: containerImage not pinned by hash: Dockerfile:20: pin your Docker image by updating ubuntu:focal to ubuntu:focal@sha256:8e5c4f0285ecbb4ead070431d29b576a530d3166df73ec44affc1cd27555141b
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 1 third-party GitHubAction dependencies pinned
- Info: 0 out of 3 containerImage dependencies pinned
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
10 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-jc84-3g44-wf2q
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m / GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Score
3.4
/10
Last Scanned on 2024-11-25
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More