open-index/open-npm huggingface dataset:
npm package: @haxtheweb/journey-theme
Description: Webcomponent journey-theme following hax / open-wc recommendations
Author: haxtheweb
Latest version: 25.0.0

# journey-theme
DDD + Lit web component based on OpenWC toolchain. This is intended to provide the following:
- Look good via DDD, HAX design system
- Simple, easy to read code via Lit
- Great workflow via OpenWC tooling + Vercel for sharing demos
- Simplify contribution to the HAX ecosystem
- Publish and distribute via npmjs.com

## Install dependencies
- `npm install` - installs dependencies so you can work

## Commands
- `npm start` - runs your web component for development, reloading on file changes
- `npm run build` - builds your web component and outputs it in your `dist` directory for placement on web servers in a compiled form. Vercel automatically does this on commit to github.
- `npm run release` - this will build your code, update the version, and publish it to npm for others to use

## Working with your web component
- edit `./journey-theme.js`
- edit your 'demo' by modifying `./index.html`
- add dependencies using `npm install --save @whatever/repo` or editing `./package.json` directly
- if you must reference additional non-JS files, ensure you use the `new URL('./my-file.jpg', import.meta.url).href` syntax so that it builds correctly
- if you add additional `.js` files / web components then place them under `/lib/`
- to improve HAX wiring edit file in `/lib/journey-theme.haxProperties.json`
- for i18n / internationalization efforts, see associated language `.json` files in `/locales/` as well as `/lib/` for haxProperties related translation examples.

## Recommended setup
- Load VS code in 1 window to project root
- Browser open
- Right click -> Inspect and open the Console to see error output

## Recommended Integrated Development Environment (IDE)
- [VSCode](https://code.visualstudio.com/Download)

### Plugins

Name: lit-html
Description: Syntax highlighting and IntelliSense for html inside of JavaScript and TypeScript tagged template strings
Publisher: Matt Bierner
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner.lit-html

Name: lit-plugin
Description: Syntax highlighting, type checking and code completion for lit-html
Publisher: Rune Mehlsen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin

# Credits
A brighter future dreamed and developed by the Penn State [HAXTheWeb](https://hax.psu.edu/) initative.

Never. Stop. innovating.
npm package: @haxtheweb/json-editor
Description: simple JSON blob data binding to a text area
Author: haxtheweb
Latest version: 9.0.1

# &lt;json-editor&gt;

Editor
> simple JSON blob data binding to a text area

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/json-editor/json-editor.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/json-editor/json-editor.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/json-editor/json-editor.js';
  // imperative form
  import {JsonEditor} from '@haxtheweb/json-editor';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/json-editor/json-editor.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/json-editor/json-editor.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Editor  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/json-outline-schema
Description: JS based state management helper for the json outline schema spec
Author: haxtheweb
Latest version: 25.0.0

# &lt;json-outline-schema&gt;

Outline
> 

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/json-outline-schema/json-outline-schema.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/json-outline-schema/json-outline-schema.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Outline

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/jwt-login
Description: JSON Web Token login broker / manager
Author: haxtheweb
Latest version: 25.0.0

# &lt;jwt-login&gt;

Login
> JSON Web Token login broker / manager

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/jwt-login/jwt-login.js';


<script type="module">
  import '@haxtheweb/jwt-login/jwt-login.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Login

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/la-tex
Description: render LaTeX formatted math and science content
Author: btopro
Latest version: 25.0.0

# &lt;la-tex&gt;

Tex
> render LaTeX formatted math and science content

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/la-tex/la-tex.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/la-tex/la-tex.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/layout-builder
Description: A new UI for adding content to layouts
Author: haxtheweb
Latest version: 9.0.1

# &lt;layout-builder&gt;

Builder
> A new UI for adding content to layouts

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/layout-builder/layout-builder.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/layout-builder/layout-builder.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/layout-builder/layout-builder.js';
  // imperative form
  import {LayoutBuilder} from '@haxtheweb/layout-builder';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/layout-builder/layout-builder.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/layout-builder/layout-builder.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Builder  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lazy-image-helpers
Description: helpers for building lazy loading images
Author: haxtheweb
Latest version: 25.0.0

# &lt;lazy-image-helpers&gt;

Image
> helpers for building lazy loading images

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/lazy-image-helpers/lazy-image-helpers.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/lazy-image-helpers/lazy-image-helpers.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Image

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lazy-import-discover
Description: Break people&#39;s brains on simplifying webcomponent integrations
Author: haxtheweb
Latest version: 25.0.0

# &lt;lazy-import-discover&gt;

Import
> Break people&#39;s brains on simplifying webcomponent integrations

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/lazy-import-discover/lazy-import-discover.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/lazy-import-discover/lazy-import-discover.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Import

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/learn-two-theme
Description: Learn2 theme for HAXcms
Author: haxtheweb
Latest version: 25.0.0

# &lt;learn-two-theme&gt;

Two
> Learn2 theme for HAXcms

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/learn-two-theme/learn-two-theme.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/learn-two-theme/learn-two-theme.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Two

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lesson-overview
Description: Clean presentation of what to expect in an upcoming lesson of instruction
Author: haxtheweb
Latest version: 11.0.5

# &lt;lesson-overview&gt;

Overview
> Clean presentation of what to expect in an upcoming lesson of instruction

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/lesson-overview/lesson-overview.js';

/* CDN */
<script type="module" src="https://cdn.hax.cloud/cdn/build/es6/node_modules/@haxtheweb/lesson-overview/lesson-overview.js"></script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
npm start
```


## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Overview

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/license-element
Description: Semantically accurate license for a work
Author: haxtheweb
Latest version: 25.0.0

# &lt;license-element&gt;

Element
> Semantically accurate license for a work

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/license-element/license-element.js';


<script type="module">
  import '@haxtheweb/license-element/license-element.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Element

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lorem-data
Description: Start of lorem-data
Author: haxtheweb
Latest version: 25.0.0

# &lt;lorem-data&gt;

11
> Start of lorem-data

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lorem-data.js';


```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D



## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-assignment
Description: A basic OER schema semantic assignment wrapper
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-assignment&gt;

Assignment
> A basic OER schema semantic assignment wrapper

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-assignment/lrn-assignment.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-assignment/lrn-assignment.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-assignment/lrn-assignment.js';

  import {LrnAssignment} from '@haxtheweb/lrn-assignment/lrn-assignment.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Assignment  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-button
Description: Button element for PolymerElement
Author: haxtheweb
Latest version: 9.0.1

# lrn-button Element

## Dependencies

Make sure you have [Polyserve][polyserve] and [Web Component Tester][web-component-tester] installed.

    yarn install -g polyserve web-component-tester

## Dev

    yarn start

## Test

    yarn run test

## Build

    yarn run build

## Demo

Run `yarn start` and Polyserve will start a server and open your default browser to the demo page of the element.

## Code style

Button (and all RHElements) use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester
npm package: @haxtheweb/lrn-content
Description: Simple content wrapper for OER Schema meta-data
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-content&gt;

Content
> Simple content wrapper for OER Schema meta-data

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-content/lrn-content.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-content/lrn-content.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-content/lrn-content.js';

  import {LrnContent} from '@haxtheweb/lrn-content/lrn-content.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Content  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-css-reset
Description: CSS reset and additional base styles for webcomponents and apps
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-css-reset&gt;

Css
> CSS reset and additional base styles for webcomponents and apps

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/lrn-css-reset/lrn-css-reset.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/lrn-css-reset/lrn-css-reset.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-css-reset/lrn-css-reset.js';
  // imperative form
  import {LrnCssReset} from '@haxtheweb/lrn-css-reset';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/lrn-css-reset/lrn-css-reset.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/lrn-css-reset/lrn-css-reset.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Css  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-gitgraph
Description: Render git data in a graphing tree format
Author: haxtheweb
Latest version: 25.0.0

# &lt;lrn-gitgraph&gt;

Gitgraph
> Render git data in a graphing tree format

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-gitgraph/lrn-gitgraph.js';


<script type="module">
  import '@haxtheweb/lrn-gitgraph/lrn-gitgraph.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Gitgraph

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-icon
Description: Some icons related to education concepts
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-icon&gt;

Icon
> Some icons related to education concepts

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-icon/lrn-icon.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-icon/lrn-icon.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-icon/lrn-icon.js';

  import {LrnIcon} from '@haxtheweb/lrn-icon/lrn-icon.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Icon  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-icons
Description: Some icons related to education concepts
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-icons&gt;

Icons
> Some icons related to education concepts

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-icons/lrn-icons.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-icons/lrn-icons.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-icons/lrn-icons.js';

  import {LrnIcons} from '@haxtheweb/lrn-icons/lrn-icons.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Icons  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-markdown-editor
Description: markdown editor wrapper with preview editor
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-markdown-editor&gt;

Markdown
> markdown editor wrapper with preview editor

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-markdown-editor/lrn-markdown-editor.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-markdown-editor/lrn-markdown-editor.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-markdown-editor/lrn-markdown-editor.js';

  import {LrnMarkdownEditor} from '@haxtheweb/lrn-markdown-editor/lrn-markdown-editor.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Markdown  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-math
Description: MathJAX element with HAX capabilities baked in
Author: haxtheweb
Latest version: 25.0.0

# &lt;lrn-math&gt;

Math
> MathJAX element with HAX capabilities baked in

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-math/lrn-math.js';


<script type="module">
  import '@haxtheweb/lrn-math/lrn-math.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Math

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-page
Description: OER Schema wrapping for a page
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-page&gt;

Page
> OER Schema wrapping for a page

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-page/lrn-page.js';
/* At top of an application */
<script type="module" src="node_modules/@haxtheweb/lrn-page/lrn-page.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-page/lrn-page.js';

  import {LrnPage} from '@haxtheweb/lrn-page/lrn-page.js';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Page  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-shared-styles
Description: a shared set of styles for all @haxtheweb
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrn-shared-styles&gt;

Shared
> a shared set of styles for all @haxtheweb

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-shared-styles.js';
/* At top of an application */
<script type="module" src="lrn-shared-styles.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrn-shared-styles.js';

  import {LrnSharedStyles} from '@haxtheweb/lrn-shared-styles';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Shared  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-table
Description: Accessibly render a HTML table from a csv file
Author: haxtheweb
Latest version: 25.0.0

# &lt;lrn-table&gt;

Table
> Generate a table that can be downloaded by users from a csv file

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-table/lrn-table.js';


<script type="module">
  import '@haxtheweb/lrn-table/lrn-table.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Table

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrn-vocab
Description: A simple vocabulary term highlighted with pop up for more details
Author: haxtheweb
Latest version: 25.0.0

# &lt;lrn-vocab&gt;

Vocab
> A simple vocabulary term highlighted with pop up for more details

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrn-vocab/lrn-vocab.js';


<script type="module">
  import '@haxtheweb/lrn-vocab/lrn-vocab.js';

  
</script>
```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Vocab

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrndesign-avatar
Description: Visualize a user account either with an image, a label, or as abstract art.
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrndesign-avatar&gt;

Avatar
> Visualize a user account either with an image, a label, or as abstract art.

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing JS module / web component */
import '@haxtheweb/lrndesign-avatar/lrndesign-avatar.js';
/* At top of an application with build routine */
<script type="module" src="@haxtheweb/lrndesign-avatar/lrndesign-avatar.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrndesign-avatar/lrndesign-avatar.js';
  // imperative form
  import {LrndesignAvatar} from '@haxtheweb/lrndesign-avatar';
  // if you don't have a build routine and need to reference directly
  import './node_modules/@haxtheweb/lrndesign-avatar/lrndesign-avatar.js';
</script>
// via unpkg CDN (good for testing)
<script type="module" src="https://unpkg.com/@haxtheweb/lrndesign-avatar/lrndesign-avatar.js"></script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Avatar  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrndesign-chart
Description: Automated conversion of lrndesign-chart/
Author: haxtheweb
Latest version: 25.0.0

# &lt;lrndesign-chart&gt;

Chart
> Automated conversion of lrndesign-chart/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrndesign-chart.js';



```

## Develop / Demo
Running `npm start` will start a local development server and open your default browser to display it. It will start watching *.js and lib/*.js files for changes automatically for your demo.
```bash
$ npm start
```


## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

Chart

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrndesign-comment
Description: Automated conversion of lrndesign-comment/
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrndesign-comment&gt;

Comment
> Automated conversion of lrndesign-comment/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrndesign-comment.js';
/* At top of an application */
<script type="module" src="lrndesign-comment.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrndesign-comment.js';

  import {LrndesignComment} from '@haxtheweb/lrndesign-comment';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Comment  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)
npm package: @haxtheweb/lrndesign-contentblock
Description: Automated conversion of lrndesign-contentblock/
Author: haxtheweb
Latest version: 9.0.1

# &lt;lrndesign-contentblock&gt;

Contentblock
> Automated conversion of lrndesign-contentblock/

## Usage
To use this web component in your project you can utilize one of the following styles of syntax.

```js
/* In an existing module / web component */
import '@haxtheweb/lrndesign-contentblock.js';
/* At top of an application */
<script type="module" src="lrndesign-contentblock.js"></script>
/* Alternatives for top of application */
<script type="module">
  import '@haxtheweb/lrndesign-contentblock.js';

  import {LrndesignContentblock} from '@haxtheweb/lrndesign-contentblock';
</script>
```

## Develop / Demo
Run `yarn start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo.
```bash
$ yarn start
```

## Test

```bash
$ yarn run test
```

## Build
Builds ensure that wcfactory can correctly compile your web component project to
work on the maximum number of browsers possible.
```bash
$ yarn run build
```

## Contributing

1. Fork it! `git clone git@github.com/haxtheweb/webcomponents.git`
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -m 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Code style

Contentblock  use [Prettier][prettier] to auto-format JS and JSON.  The style rules get applied when you commit a change.  If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://github.com/prettier/prettier/#editor-integration
[polyserve]: https://github.com/Polymer/polyserve
[web-component-tester]: https://github.com/Polymer/web-component-tester

## License
[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0)