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

accessibility-cloud-widget

v3.7.1

Published

First: [Look at our demo!](https://sozialhelden.github.io/accessibility-cloud-js/)

Downloads

1

Readme

accessibility.cloud – JavaScript widget

First: Look at our demo!

This is a small and easy-to-use browser JS library. It…

  • fetches data from accessibility.cloud via its API
  • displays a nice-looking, usable, accessible results list
  • provides detail links to data providers
  • shows distance and an OpenStreetMap link for each PoI
  • handles attribution / credits as required by licenses

It is easy to include in any website or web app. If you have a React.js app, you can use it as a standard React.js component via npm.

Running the example

Right now the sourcecode of the example integration resides on GitHub. To include the widget into your application or website, you have to go through the following steps:

Sign up / in

  • Open https://www.accessibility.cloud
  • Click Sign up or Login

Obtain an API token

  • Create an organization
  • Fill out and submit the organization form and submit. You will be forwared to the organization view.
  • Click "API Clients" in the header
  • Click "Add API client", fill out and submit the form.
  • Copy your API access token. Screenshot of accessibility.cloud API Clients view

Run the client

  • Clone or download the repository.
  • Open index.html with your favorite text editor and replace the API token around line 22 with the one you copied from the API token page.
  • Open index.html in your web-browser. The result should look similar to this: Widget demo screenshot

Comments on the code

build/example/index.html

This is a very short file. Its main purpose is to execute the following script:

<script>
  $(function() {
    var accessibilityCloud = new AccessibilityCloud({
      token: '7f039b60e27a4d02b13c5ad79fbe9d7b', // <-- Replace this token with your own
      locale: 'de' // <-- Replace this with the locale you want to use
    });

    var element = document.querySelector('.ac-results');

    // These parameters are passed to the JSON API's GET /place-infos endpoint.
    // More documentation is here:
    // https://github.com/sozialhelden/accessibility-cloud/blob/master/docs/json-api.md#get-place-infos
    var parameters = {
      latitude: 40.728292,
      longitude: -73.9875852,
      accuracy: 10000,
      limit: 100,
    };

    accessibilityCloud.loadAndRenderPlaces(element, parameters, console.log);
  });
</script>

Note that the script above includes the API token, which you have to replace with the one you get on accessibility.cloud for your own API client. It also includes an example request (in this case for places in Manhattan).

The loadAndRenderPlaces function renders the results in the given element. It optionally accepts a callback in NodeJS function (error, result) { … } style.

For more information on the available parameters, refer to the documentation on the API.

accessibility.cloud.js

This is the library's main file. It includes a few library and is built and minified using webpack.

Building the library yourself

  • Install yarn
  • Set up the build toolchain with yarn install
  • Run yarn start to test the functionality and start developing
  • Run yarn build to create a minified build in the build/ directory
  • Run yarn version [major|minor|patch] to create a new library version
  • This is an ‘ejected’ create-react-app application. Read more about create-react-app to understand the app's structure and internal build processes.

Adding / changing translations

Translation process

Translations are created using transifex.

You can add translations by using c3po's t function in the code.

When you build a new version with yarn build or when you create a new version with yarn version [major|minor|patch], translations are automatically synced with transifex.

How translation syncing works internally

  • Pushing translations: When building with in development, the C3PO library creates a PO template file (src/i18n/translations.pot) with all found strings used as arguments to the t function. This file is pushed to transifex with tx push -s src/i18n/translations.pot.
  • Pulling translations: When all strings are translated there, you can build a new version with yarn build, which runs tx pull -a. This downloads the translations from transifex and stores them as .po-Files in the src/translations/ directory. .po files can be imported using the po-gettext-loader Babel plugin.