Code Monkey home page Code Monkey logo

gaad-widget's Introduction

Node.js CI

GitLab pipeline status js-semistandard-style GAAD-widget - on Npmjs License Total downloads - on NPMJS Size of Javascript Vulnerability test Accessibility test - GAAD passes gaad-widget - on UNPKG

gaad-widget

Display a banner-link to promote Global Accessibility Awareness Day (GAAD). The banner displays for a configurable period before and after the day, and the emphasis is on easy site-integration, via a CDN.

Global Accessibility Awareness Day

Join us on Thursday, May 16 2019 and mark the eighth Global Accessibility Awareness Day (GAAD). The purpose of GAAD is to get everyone talking, thinking and learning about digital (web, software, mobile, etc.) access/inclusion and people with different disabilities.

Read the blog post. Built on Datejs (API).

Note ~ this is not an official widget!

Original Gist.

Release notes

Features

Install and test

npm i gaad-widget
npm run build
npm test

Usage

Via unpkgbrowse — production CDN:

<div id="id-gaad-widget"></div>

<script src="https://unpkg.com/gaad-widget@^3#"></script>

Local hosting:

<div id="id-gaad-widget"></div>

<script src="dist/gaad-widget.js" ></script>

See the list of default configuration options.

Setting the days_before option:

<div id="id-gaad-widget"></div>

<script src="dist/gaad-widget.js" data-gaad-widget='{ "days_before": 20 }'></script>

Setting several configuration options:

<div id="custom_id"></div>

<script
  src="dist/gaad-widget.js"
  data-gaad-widget='{ "id": "custom_id", "days_after": 10, "theme": "black", "debug": true }'
  ></script>

Analytics

Anonymous usage statistics via Google Analytics is being added for version 3.2+ (> 3.1.0). It will be enabled by default, and can be disabled thus:

<div id="id-gaad-widget"></div>

<script src="dist/gaad-widget.js" data-gaad-widget='{ "analytics": null }'></script>

Translation

Please help with translating gaad-widget into your language!

Français (French):

<div id="id-gaad-widget"></div>

<script src="dist/gaad-widget.js" data-gaad-widget='{ "lang": "fr" }' ></script>

WordPress

A plugin for WordPress.

License

License: MIT.

Twitter: @nfreear, @gbla11yday.

See the related isad-widget.

gaad-widget's People

Contributors

dependabot[bot] avatar nfreear avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar

gaad-widget's Issues

Incorrect message - logic bug; plus 3.2.0 preparations

... The screenshot, captured on 23 February 2018, shows the message that should be shown after the 2018 day (Thursday 17 May) — "Put next year's ..." — incorrect !!

gaad-widget--logic-bug--24-feb-2018

  • — Incorrect message - logic bug (see screenshot);
  • — Display language-specific GAAD string, not English - bug or enhancement;
  • — Re-factor language/locale/ translation/ i18n code;
  • — Cast strings to integers in JSON - parseInt( );
  • — Chinese, Simplified translation;
  • — Spanish translation, maybe ?!
  • CHANGELOG;
  • — ... Release version 3.2.0

...?


[iet:8994834]

Validate `locales/*.json`; `package.json`


bin/nice.js:

#!/usr/bin/env node

const Package = require('nice-package');
const path = require('path');
const pkg = new Package(require(path.join(__dirname, '/../package.json')));

console.log('nice-package? %s', pkg.valid);
console.log(pkg.validationErrors);

process.exit(pkg.valid ? 0 : 1);

bin/lintl.js:

#!/usr/bin/env node

/**
 * Node CLI. Validate the locale JSON files.
 */
const revalidator = require('revalidator');
const path = require('path');
const LOCALE_DIR = path.join(__dirname, '/../locales/');

var result = {};
var allValid = true;

require('fs').readdirSync(LOCALE_DIR).forEach(function (file) {
  var lname = file.replace('.json', '');
  var locale = require(path.join(LOCALE_DIR, file));

  result[ file ] = revalidator.validate(locale, {
    properties: {
      name: {
        type: 'string',
        required: false
      },
      before: {
        type: 'string',
        required: true
      },
      after: {
        type: 'string',
        required: true
      },
      url: {
        type: 'string',
        // format: 'url', ?
        required: false
      }
    }
  });
  result[ file ].file = file;

  allValid = allValid && result[ file ].valid;

  console.dir(result[ file ]);
});

console.log('Locale JSON valid? %s', allValid);
process.exit(allValid ? 0 : 1);

Wishlist

If you want a feature, please vote (+1), or add it below.

Wishlist

  • Full internationalization/ translation into your language, #4,
  • Language switching, #4,
  • Separate stylesheet,
  • Responsive design ~ mobiles/tablets ~ 1.0-beta.3,
  • Easier customization,
  • Better placeholder replacement in template, #4,
  • Minified Javascript ~ IN-progress,
  • Countdown timer,
  • <iframe> embed version?
  • A "copy embed code" function,
  • ?gaadwidget=force URL parameter ~ http://nick.freear.org.uk/?gaadwidget=force
  • ...?

Way-out?

  • WordPress plugin - wrapper - IN-progress, https://gist.github.com/nfreear/e5520adbb930e537ef5fe2e0aab231d1
  • Dynamic content - "tip of the day" or similar,
  • Geo-location based content - "there's an accessibility workshop happening near you",
  • As this year's event completes, show the date for next year's #GAAD ~ via: @srinivasuchakravarthula ,
  • Add an iCalendar (ics) file to the Github repo. with at least the current and next year's dates ~ so users can import into their Google, Outlook or other calendar,
  • Basic 'theming',
  • ...?

Useful icons ~ 💓🇫🇷⌚️📅


Related wish-list ~ nfreear/isad-widget#1

Internationalization, localization, translation

Please help by correcting and adding translations ~ TEMPLATE.

Like any software translation, the TEMPLATE contains a number of placeholders -- places where bits of dynamic/ changeable text will be inserted. Placeholders should not be translated -- instead leave them embedded in your translation in the appropriate place. The placeholders are denoted by curly braces, for example, {y} is for year, {g} is for "Global Accessibility Awareness Day" (or its translation), and so on.

There is also HTML markup, for example, <a {at}>..</a>, which should be preserved intact.

As there only five strings to be translated at present, you can do the work in any software you feel comfortable with (Google Doc, MS Word, a comment in this GitHub issue ...)

Translations

Before

After


Target?

  1. English (en),
  2. español / Spanish (es),
  3. Français / French (fr),
  4. 日本人 / Japanese (jp),
  5. русский / Russian (ru),
  6. português brasileiro / Portugese (Brazilian) (pt-BR).

(Based on the list of translations at the foot of, http://globalaccessibilityawarenessday.org)

Plus:

  1. 简体中文 / Simplified Chinese (zh-CN)‎.

TEMPLATE

Fix `npm audit` security vulnerabilities

  • npm audit
  • npm audit fix
  • Will supercede pull requests: #16 / #17;

MCxxxx8:gaad-widget nXX$ npm audit fix
+ [email protected]
added 32 packages from 9 contributors, removed 35 packages, updated 19 packages and moved 3 packages in 18.14s

2 packages are looking for funding
  run `npm fund` for details

fixed 149 of 151 vulnerabilities in 729 scanned packages
  1 vulnerability required manual review and could not be updated
  1 package update for 1 vulnerability involved breaking changes
  (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

...

MCxxxx8:gaad-widget nXX$

Travis-CI; package.json; README ...

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.