initial commit

Author: Graham Butler

.drone.yml

@@ -1,81 +1,81 @@
-# kind: pipeline
-# name: release
-#
-# steps:
-#   - name: autotag
-#     image: node
-#     environment:
-#       GIT_USER:
-#         from_secret: GITHUB_USERNAME
-#       GIT_SECRET:
-#         from_secret: GITHUB_KEY
-#     commands:
-#       - npm install -g @author.io/cicd-autotag
-#       - autotag --allowInitialNpmPublish
-#     when:
-#       event:
-#         - push
-#   - name: tag_notification
-#     image: plugins/slack
-#     settings:
-#       webhook:
-#         from_secret: SLACK_WEBHOOK
-#       channel: releases
-#       icon_url: https://avatars0.githubusercontent.com/u/46585558?s=32
-#       template: >
-#         <author-{{repo.name}}> autotag on {{build.event}} to {{repo.owner}}/{{repo.name}} failed ({{build.tag}}). See {{build.link}} for details.
-#       icon_emoji: warning
-#     when:
-#       status: [ failure ]
-#       event:
-#         - push
-#   - name: build
-#     image: node
-#     commands:
-#       - npm install
-#       - npm run build
-#     when:
-#       event:
-#         - tag
-#   - name: github_release
-#     image: plugins/github-release
-#     settings:
-#       api_key:
-#         from_secret: GITHUB_TOKEN
-#       files: dist/**/*
-#     when:
-#       event:
-#         - tag
-#   - name: npm_release
-#     image: plugins/npm
-#     settings:
-#       username:
-#         from_secret: NPM_USERNAME
-#       password:
-#         from_secret: NPM_PASSWORD
-#       email:
-#         from_secret: NPM_EMAIL
-#       registry: "https://registry.npmjs.org"
-#     when:
-#       event:
-#         - tag
-#   - name: release_notification
-#     image: plugins/slack
-#     settings:
-#       webhook:
-#         from_secret: SLACK_WEBHOOK
-#       channel: releases
-#       icon_url: https://avatars0.githubusercontent.com/u/46585558?s=32
-#       template: >
-#         <author-{{repo.name}}> {{build.tag}} (build {{build.number}}) {{#success build.status}}released{{else}}failed{{/success}}.
-#         {{build.link}}
-#
-#         {{#success build.status}}
-#         Availability:
-#         - CDN: https://cdn.author.io/{{repo.owner}}/{{repo.name}}/{{build.tag}}/author-{{repo.name}}.js
-#         - npm: `npm install @author.io/element-{{repo.name}}@{{build.tag}}`
-#         - Release: https://github.com/{{repo.owner}}/{{repo.name}}/releases/tag/{{build.tag}}
-#         {{/success}}
-#     when:
-#       event:
-#         - tag
+kind: pipeline
+name: release
+
+steps:
+  - name: autotag
+    image: node
+    environment:
+      GIT_USER:
+        from_secret: GITHUB_USERNAME
+      GIT_SECRET:
+        from_secret: GITHUB_KEY
+    commands:
+      - npm install -g @author.io/cicd-autotag
+      - autotag --allowInitialNpmPublish
+    when:
+      event:
+        - push
+  - name: tag_notification
+    image: plugins/slack
+    settings:
+      webhook:
+        from_secret: SLACK_WEBHOOK
+      channel: releases
+      icon_url: https://avatars0.githubusercontent.com/u/46585558?s=32
+      template: >
+        <author-{{repo.name}}> autotag on {{build.event}} to {{repo.owner}}/{{repo.name}} failed ({{build.tag}}). See {{build.link}} for details.
+      icon_emoji: warning
+    when:
+      status: [ failure ]
+      event:
+        - push
+  - name: build
+    image: node
+    commands:
+      - npm install
+      - npm run build
+    when:
+      event:
+        - tag
+  - name: github_release
+    image: plugins/github-release
+    settings:
+      api_key:
+        from_secret: GITHUB_TOKEN
+      files: dist/**/*
+    when:
+      event:
+        - tag
+  - name: npm_release
+    image: plugins/npm
+    settings:
+      username:
+        from_secret: NPM_USERNAME
+      password:
+        from_secret: NPM_PASSWORD
+      email:
+        from_secret: NPM_EMAIL
+      registry: "https://registry.npmjs.org"
+    when:
+      event:
+        - tag
+  - name: release_notification
+    image: plugins/slack
+    settings:
+      webhook:
+        from_secret: SLACK_WEBHOOK
+      channel: releases
+      icon_url: https://avatars0.githubusercontent.com/u/46585558?s=32
+      template: >
+        <author-{{repo.name}}> {{build.tag}} (build {{build.number}}) {{#success build.status}}released{{else}}failed{{/success}}.
+        {{build.link}}
+
+        {{#success build.status}}
+        Availability:
+        - CDN: https://cdn.author.io/{{repo.owner}}/{{repo.name}}/{{build.tag}}/author-{{repo.name}}.js
+        - npm: `npm install @author.io/element-{{repo.name}}@{{build.tag}}`
+        - Release: https://github.com/{{repo.owner}}/{{repo.name}}/releases/tag/{{build.tag}}
+        {{/success}}
+    when:
+      event:
+        - tag

README.md

@@ -1,21 +1,21 @@
-# __ELEMENT_CLASS-NAME__ [![](https://data.jsdelivr.com/v1/package/npm/@author.io/element-__ELEMENT_NAME__/badge)](https://www.jsdelivr.com/package/npm/@author.io/element-__ELEMENT_NAME__?path=dist) [![Build Status](https://travis-ci.org/author-elements/__ELEMENT_NAME__.svg?branch=master&style=for-the-badge)](https://travis-ci.org/author-elements/__ELEMENT_NAME__)
+# AuthorSliderElement [![](https://data.jsdelivr.com/v1/package/npm/@author.io/element-slider/badge)](https://www.jsdelivr.com/package/npm/@author.io/element-slider?path=dist) [![Build Status](https://travis-ci.org/author-elements/slider.svg?branch=master&style=for-the-badge)](https://travis-ci.org/author-elements/slider)
 
 <!-- TODO: Add description -->
 
-![Source Size](https://img.shields.io/github/size/author-elements/__ELEMENT_NAME__/src/element.js.svg?colorB=%23333333&label=Source&logo=JavaScript&logoColor=%23aaaaaa&style=for-the-badge) ![Deliverable Size](https://img.shields.io/bundlephobia/minzip/@author.io/element-__ELEMENT_NAME__.svg?colorB=%23333333&label=Minified-Gzipped&logo=JavaScript&style=for-the-badge) ![npm](https://img.shields.io/npm/v/@author.io/element-__ELEMENT_NAME__.svg?colorB=%23333&label=%40author.io%2Felement-__ELEMENT_NAME__&logo=npm&style=for-the-badge)
+![Source Size](https://img.shields.io/github/size/author-elements/slider/src/element.js.svg?colorB=%23333333&label=Source&logo=JavaScript&logoColor=%23aaaaaa&style=for-the-badge) ![Deliverable Size](https://img.shields.io/bundlephobia/minzip/@author.io/element-slider.svg?colorB=%23333333&label=Minified-Gzipped&logo=JavaScript&style=for-the-badge) ![npm](https://img.shields.io/npm/v/@author.io/element-slider.svg?colorB=%23333&label=%40author.io%2Felement-slider&logo=npm&style=for-the-badge)
 
 We're using BrowserStack to make sure these components work on the browsers developers care about.
 
-<a href="https://browserstack.com"><img src="https://github.com/author-elements/__ELEMENT_NAME__/raw/master/browserstack.png" height="30px"/></a>
+<a href="https://browserstack.com"><img src="https://github.com/author-elements/slider/raw/master/browserstack.png" height="30px"/></a>
 
 ## Usage
 
 There are 4 versions of this element:
 
-1. *author-__ELEMENT_NAME__.min.js* (ES6 Minified for Production)
-1. _author-__ELEMENT_NAME__.js_ (ES6 Unminified for Debugging)
-1. *author-__ELEMENT_NAME__.es5.min.js* (ES5 Minified for Production)
-1. _author-__ELEMENT_NAME__.es5.js_ (ES5 Unminified for Debugging)
+1. *author-slider.min.js* (ES6 Minified for Production)
+1. _author-slider.js_ (ES6 Unminified for Debugging)
+1. *author-slider.es5.min.js* (ES5 Minified for Production)
+1. _author-slider.es5.js_ (ES5 Unminified for Debugging)
 
 Each version has it's own source map, so it's always possible to trace activity back to a specific code block in the source.
 
@@ -27,7 +27,7 @@ You only need to choose one of these files. If you need to support Internet Expl
 <html>
   <head>
     <script src="https://cdn.author.io/author-elements/base/1.0.0/author-base.min.js"></script>
-    <script src="https://cdn.author.io/author-elements/__ELEMENT_NAME__/x.x.x/author-__ELEMENT_NAME__.min.js"></script>
+    <script src="https://cdn.author.io/author-elements/slider/x.x.x/author-slider.min.js"></script>
   </head>
 </html>
 ```
@@ -38,17 +38,17 @@ If the [base class](https://github.com/author-elements/base) is not yet installe
 
 `npm install @author.io/element-base -S`
 
-Next, install the __ELEMENT_NAME__ module locally:
+Next, install the slider module locally:
 
-`npm install @author.io/element-__ELEMENT_NAME__ -S`
+`npm install @author.io/element-slider -S`
 
 Then include them in your HTML:
 
 ```html
 <html>
   <head>
     <script src="./node_modules/@author.io/element-base/dist/author-base.min.js"></script>
-    <script src="./node_modules/@author.io/element-__ELEMENT_NAME__/dist/author-__ELEMENT_NAME__.min.js"></script>
+    <script src="./node_modules/@author.io/element-slider/dist/author-slider.min.js"></script>
   </head>
 
   <body>

karma.conf.es5.js

@@ -1,4 +1,4 @@
-let customize = require('@author.io/karma-customelements')('test/es5', './dist/author-__ELEMENT_NAME__.es5.js', 'BrowserStack')
+let customize = require('@author.io/karma-customelements')('test/es5', './dist/author-slider.es5.js', 'BrowserStack')
 
 module.exports = config => {
   config.set(Object.assign(customize(config), {

karma.conf.es6-modules.js

@@ -1,4 +1,4 @@
-const customize = require('@author.io/karma-customelements')('test/es6-modules', './dist/author-__ELEMENT_NAME__.js', 'BrowserStack')
+const customize = require('@author.io/karma-customelements')('test/es6-modules', './dist/author-slider.js', 'BrowserStack')
 
 module.exports = config => {
   config.set(Object.assign(customize(config, true, true), {

karma.conf.es6.js

@@ -1,4 +1,4 @@
-const customize = require('@author.io/karma-customelements')('test/es6', './dist/author-__ELEMENT_NAME__.js', 'BrowserStack')
+const customize = require('@author.io/karma-customelements')('test/es6', './dist/author-slider.js', 'BrowserStack')
 
 module.exports = config => {
   config.set(Object.assign(customize(config, true, false), {

package-lock.json

@@ -1,8 +1,8 @@
 {
-  "name": "@author.io/element-__ELEMENT_NAME__",
+  "name": "@author.io/element-slider",
   "version": "1.0.0",
-  "description": "author-__ELEMENT_NAME__ custom element (web component).",
-  "main": "dist/author-__ELEMENT_NAME__.min.js",
+  "description": "author-slider custom element (web component).",
+  "main": "dist/author-slider.min.js",
   "scripts": {
     "build": "npm run clean && rollup -c ./rollup.release.config.js",
     "build-dev": "npm run build && npm run build-showroom",
@@ -25,15 +25,15 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/author-elements/__ELEMENT_NAME__.git"
+    "url": "git+https://github.com/author-elements/slider.git"
   },
   "keywords": [
     "author",
     "web",
     "component",
     "custom",
     "element",
-    "__ELEMENT_NAME__",
+    "slider",
     "chassis",
     "ngn"
   ],
@@ -53,9 +53,9 @@
   ],
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/author-elements/__ELEMENT_NAME__/issues"
+    "url": "https://github.com/author-elements/slider/issues"
   },
-  "homepage": "https://github.com/author-elements/__ELEMENT_NAME__#readme",
+  "homepage": "https://github.com/author-elements/slider#readme",
   "devDependencies": {
     "@author.io/karma-customelements": "^1.1.11",
     "@author.io/rollup-plugin-wcbuilder": "^1.1.4",

package.json

@@ -4,7 +4,7 @@ import {terser} from 'rollup-plugin-terser'
 import wcbuilder from '@author.io/rollup-plugin-wcbuilder'
 
 const input = './src/element.js'
-const outfile = 'author-__ELEMENT_NAME__.js'
+const outfile = 'author-slider.js'
 const outdir = './dist'
 const format = 'iife'
 const pkg = require('./package.json')
@@ -22,7 +22,7 @@ const babelConfig = {
 
 const output = file => {
 	return {
-		name: '__ELEMENT_CLASS-NAME__',
+		name: 'AuthorSliderElement',
 		file: `${outdir}/${outfile.replace(require('path').extname(outfile), '')}${file}`,
 		format,
 		banner,