🎯Bump to 0.2.4

- Separate out js and css for better loading
- Add nav component
- Move aside to be floating
- Improve article css
- Migrate away from underscore
- Default outline points to article
- Outline is default open when the first header is on screen
- Use registerComponent from components
- Remove all references to lit-element underscore
   - they were double counting in the pacakge size.
- Migrate all elements to withRuntime
- Limit languages that are installed with hljs
- Pad code when put back in textContent
  - Imporves formatting
- Add card component
- Improve setup and rendering of math, outline, etc.
- Add theme.css
- Added size analyzers
- Expose shortcut to global window iooxa object.

Author: rowanc1

.gitignore

@@ -1,3 +1,5 @@
 dist/
 node_modules/
 styles/index.css*
+styles/_components.scss
+stats.json

README.md

@@ -1,28 +1,28 @@
-# @iooxa/ink-article
+# @iooxa/article
 
-[![Ink-Basic on npm](https://img.shields.io/npm/v/@iooxa/ink-article.svg)](https://www.npmjs.com/package/@iooxa/ink-article)
-[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/ink-article/blob/master/LICENSE)
+[![iooxa/article on npm](https://img.shields.io/npm/v/@iooxa/article.svg)](https://www.npmjs.com/package/@iooxa/article)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/iooxa/article/blob/master/LICENSE)
 
-The goal of `ink-article` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides the layout and scientific specific parts of [ink-components](https://components.ink) including ways equations, asides.
+The goal of `@iooxa/article` is to provide web-components for interactive scientific writing, reactive documents and [explorable explanations](https://explorabl.es). This library provides the layout and scientific specific parts of [iooxa/article](https://iooxa.dev) including ways equations, asides, callouts, outlines, etc.
 
-The [ink-components](https://components.ink) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!
+The [iooxa/article](https://iooxa.dev/article) project is heavily inspired by [tangle.js](http://worrydream.com/Tangle/guide.html), re-imagined to use [web-components](https://www.webcomponents.org/)!
 This means you can declaratively write your variables and how to display them in `html` markup.
 To get an idea of what that looks like, let's take the canonical example of *Tangled Cookies* - a simple reactive document.
 
 ![How many calories in that cookie?](images/tangle.gif)
 
 ```html
-<ink-var name="cookies" value="3" format=".4"></ink-var>
-<ink-var name="caloriesPerCookie" value="50"></ink-var>
-<ink-var name="dailyCalories" value="2100"></ink-var>
+<r-var name="cookies" value="3" format=".4"></r-var>
+<r-var name="caloriesPerCookie" value="50"></r-var>
+<r-var name="dailyCalories" value="2100"></r-var>
 
-<ink-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></ink-var>
-<ink-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></ink-var>
+<r-var name="calories" :value="cookies * caloriesPerCookie" format=".0f"></r-var>
+<r-var name="dailyPercent" :value="calories / dailyCalories" format=".0%"></r-var>
 
 <p>
-  When you eat <ink-dynamic bind="cookies" min="2" max="100">cookies</ink-dynamic>,
-  you consume <ink-display bind="calories"></ink-display> calories.<br>
-  That's <ink-display bind="dailyPercent"></ink-display> of your recommended daily calories.
+  When you eat <r-dynamic bind="cookies" min="2" max="100">cookies</r-dynamic>,
+  you consume <r-display bind="calories"></r-display> calories.<br>
+  That's <r-display bind="dailyPercent"></r-display> of your recommended daily calories.
 </p>
 ```
 
@@ -32,19 +32,19 @@ Ink is based on web-components, which creates custom HTML tags so that they can
 To get started, copy the built javascript file to the head of your page:
 
 ```html
-<script src="https://unpkg.com/@iooxa/ink-article"></script>
+<script src="https://unpkg.com/@iooxa/article"></script>
 ```
 
-You can also download the [latest release](https://github.com/iooxa/ink-article/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@iooxa/ink-article):
+You can also download the [latest release](https://github.com/iooxa/article/releases) from GitHub. If you are running this without a web server, ensure the script has `charset="utf-8"` in the script tag. You can also [install from npm](https://www.npmjs.com/package/@iooxa/article):
 
 ```bash
->> npm install @iooxa/ink-article
+>> npm install @iooxa/article
 ```
 
-You should then be able to extend ink as you see fit:
+You should then be able to extend the package as you see fit:
 
 ```javascript
-import components from '@iooxa/ink-article';
+import components from '@iooxa/article';
 ```
 
-Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [ink.ts](/ink.ts) file for what the built package does to `setup` the store and `register` the components.
+Note that the npm module does not setup the [@iooxa/runtime](https://github.com/iooxa/runtime) store, nor does it register the components. See the [iooxa.ts](/iooxa.ts) file for what the built package does to `setup` the store and `register` the components.