npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@canonical/global-nav

v3.6.4

Published

A script and stylesheet that displays the Canonical global nav across the top of a site

Downloads

8,952

Readme

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>.

  1. Install via yarn or npm
yarn add @canonical/global-nav

...or...

npm install @canonical/global-nav --save
  1. 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;

<script src="/node_modules/@canonical/global-nav/dist/iife.js"></script>
<script>
  canonicalGlobalNav.createNav();
</script>

To import it, simply call it from your site-wide JS file;

import { createNav } from '@canonical/global-nav';
createNav();
  1. You will then need to add the .global-nav class to a ul.p-navigation__items element 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 is 620px, which is meant to reflect the default value of $breakpoint-navigation-threshold in Vanilla (see Vanilla's breakpoint documentation).

  • mobileContainerSelector and desktopContainerSelector: 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 class global-nav should 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:

<script src="/node_modules/@canonical/global-nav/dist/index.js"></script>

<script>
  canonicalGlobalNav.createNav({
    breakpoint: 1036,
    mobileContainerSelector: 'global-nav-mobile',
    desktopContainerSelector: 'global-nav-desktop',
  });
</script>

If you're importing;

import { createNav } from '@canonical/global-nav';
createNav({ breakpoint: 1036 });

Building the Global nav

To build the JS into the /dist folder, run:

./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:

./run

You can also use the dotrun snap, by running:

dotrun

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:

./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.

  1. Shrink the svg as much as possible
  2. Upload it to the asset server for others - OPTIONAL
  3. View it in a browser and grab the source code.
  4. Convert the quotes from double " to single ' - CRITICAL
  5. Encode the svg
  6. 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:

npm 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