Update Readme with better usage instructions

Author: jbuckner

README.md

@@ -1,25 +1,38 @@
-***UPDATE BADGE URLS BELOW***
+[![Build Status](https://travis-ci.com/internetarchive/iaux-your-webcomponent.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-your-webcomponent) [![codecov](https://codecov.io/gh/internetarchive/iaux-your-webcomponent/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-your-webcomponent)
 
-[![Build Status](https://travis-ci.com/internetarchive/iaux-typescript-wc-template.svg?branch=master)](https://travis-ci.com/internetarchive/iaux-typescript-wc-template)
+# Internet Archive Typescript WebComponent Template
 
-[![codecov](https://codecov.io/gh/internetarchive/iaux-typescript-wc-template/branch/master/graph/badge.svg)](https://codecov.io/gh/internetarchive/iaux-typescript-wc-template)
+This is a base template for creating Typescript WebComponents. It is based off of the [Open WebComponents generator](https://open-wc.org/docs/development/generator/) with some IA-specific customizations and some development niceities.
 
-# \<typescript-template>
+## Usage
+
+1. Click the "Use this Template" button in GitHub to create a new repository based on this one.
+2. Clone your new repo and update the things below:
 
-This webcomponent follows the [open-wc](https://github.com/open-wc/open-wc) recommendation.
+### Things to update in your copy
+1. Remove this section
+2. Search for the strings `your-webcomponent` and `YourWebComponent` and those are most of the spots that need to be updated.
+3. `README.md` (this file). Update the readme in general, but also the badge URLs
+4. `package.json` Update the name and description
+5. Rename the `your-webcomponent.ts` and its associated `.test` file
+6. Update `.travis.yml` with the proper secure key. See the [Travis docs](https://blog.travis-ci.com/2014-03-13-slack-notifications/) for more information.
 
-## Installation
+## Local Demo with `web-dev-server`
 ```bash
-yarn add typescript-template
+yarn start
 ```
+To run a local development server that serves the basic demo located in `demo/index.html`
 
-## Usage
-```html
-<script type="module">
-  import 'typescript-template/typescript-template.js';
-</script>
+## Testing with Web Test Runner
+To run the suite of Web Test Runner tests, run
+```bash
+yarn run test
+```
+
+To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
 
-<typescript-template></typescript-template>
+```bash
+yarn run test:watch
 ```
 
 ## Linting with ESLint, Prettier, and Types
@@ -49,27 +62,8 @@ yarn run format:eslint
 yarn run format:prettier
 ```
 
-## Testing with Web Test Runner
-To run the suite of Web Test Runner tests, run
-```bash
-yarn run test
-```
-
-To run the tests in watch mode (for &lt;abbr title=&#34;test driven development&#34;&gt;TDD&lt;/abbr&gt;, for example), run
-
-```bash
-yarn run test:watch
-```
-
-
 ## Tooling configs
 
 For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.
 
 If you customize the configuration a lot, you can consider moving them to individual files.
-
-## Local Demo with `web-dev-server`
-```bash
-yarn start
-```
-To run a local development server that serves the basic demo located in `demo/index.html`

custom-elements.json

@@ -17,14 +17,16 @@
 
   <script type="module">
     import { html, render } from 'lit-html';
-    import '../dist/typescript-template.js';
+      import '../dist/index.js';
 
     const title = 'Hello owc World!';
     render(
       html`
-        <typescript-template .title=${title}>
-          some more light-dom
-        </typescript-template>
+        <your-webcomponent .title=${title}>
+          <div slot="my-slot">
+            Some lightDOM slotted content
+          </div>
+        </your-webcomponent>
       `,
       document.querySelector('#demo')
     );

demo/index.html

@@ -1 +1 @@
-export { TypescriptTemplate } from './src/typescript-template';
+export { YourWebComponent } from './src/your-webcomponent';

index.ts

@@ -1,8 +1,8 @@
 {
-  "name": "@internetarchive/typescript-wc-template",
+  "name": "@internetarchive/your-webcomponent",
   "version": "0.0.0",
-  "description": "Internet Archive Typescript WebComponent template. It is based on the @open-wc base template.",
-  "author": "typescript-template",
+  "description": "The Internet Archive Typescript WebComponent template. It is based on the @open-wc template.",
+  "author": "Internet Archive",
   "license": "AGPL-3.0-only",
   "main": "dist/index.js",
   "module": "dist/index.js",

package.json

@@ -1,11 +1,12 @@
-import { html, css, LitElement, property } from 'lit-element';
+import { html, css, LitElement, property, customElement } from 'lit-element';
 
-export class TypescriptTemplate extends LitElement {
+@customElement('your-webcomponent')
+export class YourWebComponent extends LitElement {
   static styles = css`
     :host {
       display: block;
       padding: 25px;
-      color: var(--typescript-template-text-color, #000);
+      color: var(--your-webcomponent-text-color, #000);
     }
   `;
 
@@ -19,8 +20,9 @@ export class TypescriptTemplate extends LitElement {
 
   render() {
     return html`
-      <h2>${this.title} Nr. ${this.counter}!</h2>
+      <h2>${this.title}, Number: ${this.counter}!</h2>
       <button @click=${this.__increment}>increment</button>
+      <slot name="my-slot"> </slot>
     `;
   }
 }

src/typescript-template.ts renamed to src/your-webcomponent.ts

@@ -1,38 +1,38 @@
 import { html, fixture, expect } from '@open-wc/testing';
 
-import { TypescriptTemplate } from '../src/typescript-template';
-import '../typescript-template';
+import type { YourWebComponent } from '../src/your-webcomponent';
+import '../src/your-webcomponent';
 
-describe('TypescriptTemplate', () => {
+describe('YourWebComponent', () => {
   it('has a default title "Hey there" and counter 5', async () => {
-    const el = await fixture<TypescriptTemplate>(
-      html`<typescript-template></typescript-template>`
+    const el = await fixture<YourWebComponent>(
+      html`<your-webcomponent></your-webcomponent>`
     );
 
     expect(el.title).to.equal('Hey there');
     expect(el.counter).to.equal(5);
   });
 
   it('increases the counter on button click', async () => {
-    const el = await fixture<TypescriptTemplate>(
-      html`<typescript-template></typescript-template>`
+    const el = await fixture<YourWebComponent>(
+      html`<your-webcomponent></your-webcomponent>`
     );
     el.shadowRoot!.querySelector('button')!.click();
 
     expect(el.counter).to.equal(6);
   });
 
   it('can override the title via attribute', async () => {
-    const el = await fixture<TypescriptTemplate>(
-      html`<typescript-template title="attribute title"></typescript-template>`
+    const el = await fixture<YourWebComponent>(
+      html`<your-webcomponent title="attribute title"></your-webcomponent>`
     );
 
     expect(el.title).to.equal('attribute title');
   });
 
   it('passes the a11y audit', async () => {
-    const el = await fixture<TypescriptTemplate>(
-      html`<typescript-template></typescript-template>`
+    const el = await fixture<YourWebComponent>(
+      html`<your-webcomponent></your-webcomponent>`
     );
 
     await expect(el).shadowDom.to.be.accessible();