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

ckan-embed

v1.0.3

Published

Embed information from CKAN data portals into other websites.

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

lolegloleg

Keywords

ckanportaldatadatasetembed

Readme

ckan-embed

This is a widget for embedding live data searches from CKAN data portals into external websites. Currently only dataset (package) search results are supported, but the module can easily support any calls through the ckan-js library.

For some background on this project, visit the Swiss OGD Handbook.

Usage notes

This script can be used with any CKAN portal. It exposes a ck module which has a datasets function. The first parameter is the DOM container into which the widget should be loaded, the second parameter a fully qualified URL to the target CKAN portal, and the third can be a free text search query (for example, "statistik").

Project dependencies include jQuery, Underscore, ckan.

Installation

(1) Add the ckan-embed script into the <head> of the page:

<script src="https://cdn.jsdelivr.net/gh/opendata-swiss/ckan-embed/dist/ckan-embed.min.js"></script>

This will include non-blocking versions of dependency scripts.

(2) Now place the container somewhere on the page, and add the init code:

<div id="example-1">
	Loading '<a href="https://opendata.swiss">statistik</a>' datasets ...
</div>
...
<script>
CKANembed.datasets('#example-1', 'https://opendata.swiss/', 'statistik');
</script>

Or, if you used previous versions of the script:

<script>
var ck = CKANembed; // backwards compatibility
ck.datasets('#example-1', 'https://opendata.swiss/', 'statistik');
</script>

The widget will then render in the #example-1 container. Some styling possibilities, such as showing the logo of the portal, are explored in test/style.css.

Advanced options

The script may also be initialized with a configuration object, for example in this case to show three datasets tagged 'hospitals', without using JSONP* and instead proxying the requests through to the API at the /ckanproxy/ path:

CKANembed.datasets('#example-2', 'https://opendata.swiss/', {
	fq:       'tags:hospitals',
	rows:     3,
	lang:     'de',
	jsonp:    false,
	proxy:    '/ckanproxy/'
}
  • fq: allows use of filter queries
  • rows: limit the number of results shown
  • sort: custom sorting order (see note below)
  • lang: default language for result links
  • jsonp: toggle the use of JSONP (see note below)
  • proxy: relative or absolute path to API proxy
  • template: an HTML template for the results (see example)

Usage notes

If you are running this script on the same server or using a backend proxy (supported in all web servers) to the CKAN API, it is recommended that you disable JSONP with the jsonp: false option. We have made it to be enabled by default since many CKAN servers can still only be reached through this method.

The default sorting order is name asc (alphabetical name ascending). Besides name, package_count and title are allowed. On multilingual CKAN servers add language suffix e.g. title_string_en. For specifying ascending or descending order append asc or desc.

For more usage examples see the examples folder.

Developer notes

For information on the JavaScript CKAN client see ckan.js, for details of API usage see docs.ckan.org for package_search.

A web server like NGINX can be used to proxy requests and avoid the use of JSONP.

Build Process

To build ckan-embed.js and view the test examples, you must have yarn installed.

  1. Run yarn in the ckan-embed folder to install dependencies.
  2. Run yarn run build (this will invoke browserify to bundle the source files, and then uglify-js to create the minified version).
  3. Run yarn run deploy to do tests and update the distributables.
  4. Start a local webserver (e.g., python3 -m http.server 8000) in the root folder and then point your web browser at the examples directory (e.g., http://localhost:8000/examples/).

Acknowledgments

Developed with support from the Swiss Federal Archives.

This project was initially based on vega-embed.