Black Friday Banner for Vuetify

Installation

To show the Vue School banner in your website, please include the following script tag in the <head>:

<script async type="text/javascript" src="https://vueschool.io/banners/main.js"></script>

This external script does the following:

Adds a fixed top <a> to the body and renders the banner inside
Adds a <style> tag to properly style it
Adds two classes to the html
- The .has-bb-banner
- Plus a class name derived of your website host replacing dots by underscores. If your host is example.com, then it adds the class .example_com to the html

Those classes are necesary to push down the content of the website to leave space for the banner. The class .has-bb-banner is removed when the banner is closed.

When a user clicks the banner, the Vue School's site opens in a new tab. The banner is closeable and will not reappear if a user has closed it (key stored in localStorage).

Preview

To preview the banner on the production website, you can follow these steps:

Go to https://vuetifyjs.com
Open the developer toolbar
Run the following:

const script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://vueschool.io/banners/main.js';
document.head.appendChild(script);

That will add the script to the head and give you a live preview of how it will look on production. Please note that the script applies logic based on the domain of the website, meaning the expected style will be visible only in vuetifyjs.com (and not in localhost or similar previews). That's why we recommend, for testing purposes, to run the script following the steps described above.

nicodevs/banner.md