@johnshopkins/ravejs
v1.0.0
Published
Johns Hopkins University Rave Alert JavaScript integration
Readme
Rave JS
Display Johns Hopkins Rave Alerts on your website.
Usage
Plug & Play
Drop ready-to-use files directly into your HTML.
- Include the CSS within the
<head>tag:<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@johnshopkins/ravejs/dist/main.css" type="text/css" /> - Include the JS just above the closing
<body>tag:<script type="module" src="https://cdn.jsdelivr.net/npm/@johnshopkins/ravejs/dist/main.iife.js"></script>
Default display location
By default, the Rave alert will be added just after the opening <body> tag if there is an active alert. If there is a "skip to main content" element present (identified by the .jhu-skip-to-main class), the alert will be inserted immediately after this element.
Customizing the alert display location
To display the Rave alert in a custom location, add the following element where you want the alert to display:
<div id="jhu-rave-alert"></div>Using the library
If you are using a build system or module bundler, you can use the Rave JS library in your workflow.
- Install the library:
npm install @johnshopkins/ravejs --save - Use the library:
import RaveAlert from '@johnshopkins/ravejs'; new RaveAlert(); - Optionally, define the container that the Rave Alert should be dropped into:
new RaveAlert(document.getElementById('jhu-rave-alert'));
Development
Install dependencies:
yarn installRun the development server:
yarn run devBuild the library:
yarn run buildPreview the build:
yarn run preview