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/cookie-policy

v3.6.5

Published

A script and style sheet that displays a cookie policy notification

Downloads

15,926

Readme

Canonical cookie policy component

This project contains the scripts and styles to display a cookie policy notification on a web page.

You can use it to display a custom cookies message of your choosing on your own web page.

Usage

This project can be installed via an NPM package.

yarn add @canonical/cookie-policy

...or...

npm install @canonical/cookie-policy

You can then install the library either by directly linking to it or via an ES6 import.

  1. Via direct link

To consume the library directly, add a link to the JS file containing an IIFE and call the lib:

<script src="[ INSERT YOUR LOCAL PATH ]/js/cookie-policy.js"></script>
<script>
  cpNs.cookiePolicy();
</script>
  1. Via ES6 import
import { cookiePolicy } from '@canonical/cookie-policy';

Revoking the cookie policy

If you would like users to change their preferences you can add js-revoke-cookie-manager class to any element that is present in the document to recall the policy manager.

<button class="js-revoke-cookie-manager">Revoke cookie manager</button>

or

<a href="" class="js-revoke-cookie-manager">Revoke cookie manager</a>

Visiting a page with tracker disabled

If you add the query ?cp=hide to any URL the cookie policy will not be rendered. The main use case is to visit the policy page without the modal blocking the content.

Callback hook

You can set up the cookie policy with a callback when a preference is selected.

function callbackFunction() {
  alert('Calling back');
}
cpNs.cookiePolicy(callbackFunction);

Full example via ES6 import

import { cookiePolicy } from '@canonical/cookie-policy';

cookiePolicy();

Cookie groups

Essential cookies are always allowed, unless the user turns them off in their browser. Otherwise, there will be a series of values the _cookies_accepted cookie can contain : | Cookie value | Description | Note | | --- | --- | --- | | all | All cookies accepted by the user. Currently used by the existing widget | Previous value was true. Using the same cookie. | | essential | Essential cookies accepted. | This is used to hide the notification instead of not setting the cookie | | performance | Performance cookies accepted. | - | | functionality | Functionality cookies accepted. | - |

Contributing

If you would like to help improve this project, here is a list of commands to help you get started.

Building the cookie policy

Install the requisite dependencies;

npm install

To build the JS and CSS into the build folder, run:

npm run build

You can view the build files in action by running:

npm run serve

And, visiting http://0.0.0.0:8301/

Hacking

When developing this project you can run the following command to listen to changes in the src/js/*js and src/sass/*scss folders and build them into the /build folder.

npm run watch

Before submitting your pull request, run the linters, which checks both the JS and Sass for errors.

npm run test

Code licensed LGPLv3 by Canonical Ltd.

With ♥ from Canonical