renaming site to docs

2020-03-20 13:55:52 -04:00 · 2020-03-20 13:55:52 -04:00 · 90b2929512
parent 8710bebd23
commit 90b2929512
354 changed files with 42 additions and 4127 deletions
--- a/packages/docs/.browserlist
+++ b/packages/docs/.browserlist
@ -0,0 +1 @@
+last 2 versions
--- a/packages/docs/.editorconfig
+++ b/packages/docs/.editorconfig
--- a/packages/docs/.eslintignore
+++ b/packages/docs/.eslintignore
--- a/packages/docs/.eslintrc
+++ b/packages/docs/.eslintrc
--- a/packages/docs/.gitignore
+++ b/packages/docs/.gitignore
@ -1,3 +1,13 @@
-.idea
-.vuepress/dist
-node_modules
+node_modules/
+.vscode/
+phoenix.db
+subspace.db
+TODO
+test.js
+dist/
+lib/
+module/
+/examples/react-example1/src/contract.json
+coverage/
+lerna-debug.log
+.DS_Store
--- a/packages/docs/.prettierrc
+++ b/packages/docs/.prettierrc
--- a/packages/docs/.vuepress/components/code1.vue
+++ b/packages/docs/.vuepress/components/code1.vue
@ -1,268 +0,0 @@
-<template lang="html">
-
-  <div id="intro">
-
-    <div class="code-container">
-      <div class="code-text">
-        <h3>Event Tracking & Event Sourcing</h3>
-        You can track events and react to their values. With Subspace observables doing event sourcing is easy.
-      </div>
-      <div class="code-content">
-
-        <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> $average<span class="token punctuation">,</span> $latest <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@embarklabs/subspace"</span><span class="token punctuation">;</span>
-
-<span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span><span class="token function">Rating</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$latest</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">$average</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">rating</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"average rating of the last 5 events is "</span> <span class="token operator">+</span> rating<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div>
-
-      </div>
-    </div>
-
-    <div class="code-container">
-      <div class="code-text">
-        <h3>Tracking State</h3>
-        You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract.
-      </div>
-      <div class="code-content">
-
-        <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> productTitle$ <span class="token operator">=</span> ProductList<span class="token punctuation">.</span>methods<span class="token punctuation">.</span><span class="token function">products</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"title"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-productTitle$<span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">title</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"product title is "</span> <span class="token operator">+</span> title<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-  </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div>
-
-      </div>
-    </div>
-
-    <div class="code-container">
-      <div class="code-text">
-        <h3>Tracking balances</h3>
-        You can also track changes in both ETH and ERC20 token balances
-      </div>
-      <div class="code-content">
-
-        <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">const</span> address <span class="token operator">=</span> <span class="token string">"0x0001020304050607080900010203040506070809"</span><span class="token punctuation">;</span>
-
-subspace<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span>address<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">balance</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"ETH balance is "</span><span class="token punctuation">,</span> balance<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-subspace<span class="token punctuation">.</span><span class="token function">trackBalance</span><span class="token punctuation">(</span>address, <span class="token string">"0x744d70fdbe2ba4cf95131626614a1763df805b9e"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">subscribe</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">balance</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"SNT balance is "</span><span class="token punctuation">,</span> balance<span class="token punctuation">)</span>
-<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br></div></div>
-
-      </div>
-    </div>
-
-    <div class="code-container">
-      <div class="code-text">
-        <h3>React Integration</h3>
-        Subspace can make any react component compatible with observables so you easily reactive components
-      </div>
-      <div class="code-content">
-
-<div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> observe <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"@embarklabs/subspace/react"</span><span class="token punctuation">;</span>
-
-<span class="token keyword">const</span> <span class="token function-variable function">ProductComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token punctuation">{</span> maxRating<span class="token punctuation">,</span> minRating<span class="token punctuation">,</span> averageRating <span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
-  <span class="token keyword">return</span> <span class="token operator">&lt;</span>ul<span class="token operator">&gt;</span>
-    <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>b<span class="token operator">&gt;</span>minimum rating<span class="token punctuation">:</span> <span class="token operator">&lt;</span><span class="token operator">/</span>b<span class="token operator">&gt;</span> <span class="token punctuation">{</span>minRating<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
-    <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>b<span class="token operator">&gt;</span>maximum rating<span class="token punctuation">:</span> <span class="token operator">&lt;</span><span class="token operator">/</span>b<span class="token operator">&gt;</span> <span class="token punctuation">{</span>maxRating<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
-    <span class="token operator">&lt;</span>li<span class="token operator">&gt;</span><span class="token operator">&lt;</span>b<span class="token operator">&gt;</span>average rating<span class="token punctuation">:</span> <span class="token operator">&lt;</span><span class="token operator">/</span>b<span class="token operator">&gt;</span> <span class="token punctuation">{</span>averageRating<span class="token punctuation">}</span><span class="token operator">&lt;</span><span class="token operator">/</span>li<span class="token operator">&gt;</span>
-  <span class="token operator">&lt;</span><span class="token operator">/</span>ul<span class="token operator">&gt;</span><span class="token punctuation">;</span>
-<span class="token punctuation">}</span><span class="token punctuation">;</span>
-
-<span class="token keyword">const</span> ReactiveProductComponent <span class="token operator">=</span> <span class="token function">observe</span><span class="token punctuation">(</span>ProductComponent<span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">const</span> Product <span class="token operator">=</span> subspace<span class="token punctuation">.</span><span class="token function">contract</span><span class="token punctuation">(</span><span class="token punctuation">{</span>abi<span class="token punctuation">,</span> address<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-<span class="token keyword">const</span> rating$ <span class="token operator">=</span> Product<span class="token punctuation">.</span>events<span class="token punctuation">.</span>Rating<span class="token punctuation">.</span><span class="token function">track</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token string">"rating"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token parameter">x</span> <span class="token operator">=&gt;</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>x<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
-
-ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span>
-  <span class="token operator">&lt;</span>ReactiveProductComponent
-    maxRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$max</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
-    minRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$min</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
-    averageRating<span class="token operator">=</span><span class="token punctuation">{</span>rating$<span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span><span class="token function">$average</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">}</span>
-  <span class="token operator">/</span><span class="token operator">&gt;</span><span class="token punctuation">,</span>
-  document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'hello-example'</span><span class="token punctuation">)</span>
-<span class="token punctuation">)</span><span class="token punctuation">;</span>
-  </code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br></div></div>
-
-      </div>
-    </div>
-
-  </div>
-
-</template>
-
-<script>
-export default {};
-</script>
-
-<style lang="css" scoped>
-.cls-1 {
-  fill: url(#linear-gradient-404);
-}
-
-.cls-2,
-.cls-6 {
-  opacity: 0.65;
-}
-
-.cls-2 {
-  fill: url(#linear-gradient-404-2);
-}
-
-.cls-3 {
-  fill: url(#linear-gradient-404-3);
-}
-
-.cls-4 {
-  fill: url(#linear-gradient-404-4);
-}
-
-.cls-5 {
-  fill: url(#linear-gradient-404-5);
-}
-
-.cls-6 {
-  fill: url(#linear-gradient-404-6);
-}
-
-.cls-7 {
-  fill: url(#linear-gradient-404-7);
-}
-
-.cls-8 {
-  fill: #e2e2e2;
-}
-
-.cls-9 {
-  fill: #cecece;
-}
-
-.cls-10 {
-  fill: #f2f2f2;
-}
-
-.cls-11 {
-  fill: #eaeaea;
-}
-
-.cls-12 {
-  fill: #39b44a;
-}
-
-.cls-13 {
-  fill: #c59b6d;
-}
-
-.cls-14 {
-  fill: #a57c52;
-}
-
-.cls-15 {
-  fill: #009145;
-}
-
-.cls-16 {
-  fill: url(#linear-gradient-404-8);
-}
-
-.cls-17 {
-  fill: url(#linear-gradient-404-9);
-}
-
-.cls-18,
-.cls-19 {
-  fill: #fff;
-}
-
-.cls-18 {
-  opacity: 0.26;
-}
-
-.cls-20 {
-  fill: #282828;
-}
-
-.cls-21 {
-  fill: #2d2d2d;
-}
-
-.cls-22,
-.cls-23,
-.cls-27,
-.cls-28,
-.cls-29 {
-  fill: none;
-}
-
-.cls-22,
-.cls-23 {
-  stroke: #ecf4f8;
-  stroke-linecap: round;
-  stroke-width: 0.96px;
-}
-
-.cls-22 {
-  stroke-linejoin: round;
-}
-
-.cls-23,
-.cls-27,
-.cls-28,
-.cls-29 {
-  stroke-miterlimit: 10;
-}
-
-.cls-24 {
-  fill: #ecf4f8;
-}
-
-.cls-25 {
-  fill: #ff0;
-}
-
-.cls-26 {
-  fill: aqua;
-}
-
-.cls-27 {
-  stroke: #fbed21;
-}
-
-.cls-27,
-.cls-28,
-.cls-29 {
-  stroke-width: 8px;
-}
-
-.cls-28 {
-  stroke: #ec1e79;
-}
-
-.cls-29 {
-  stroke: lime;
-}
-
-.cls-30 {
-  fill: url(#linear-gradient-404-10);
-}
-
-.cls-31 {
-  opacity: 0.12;
-}
-
-.cls-32 {
-  opacity: 0.15;
-}
-
-.cls-33 {
-  opacity: 0.18;
-}
-
-.cls-34 {
-  opacity: 0.33;
-}
-</style>
--- a/packages/docs/.vuepress/config.js
+++ b/packages/docs/.vuepress/config.js
@ -1,56 +0,0 @@
-module.exports = {
-  title: 'SUBSPACE',
-  description: 'Reactive ÐApp Development',
-  base: '/',
-  head: [
-    ['link', { rel: "apple-touch-icon", sizes: "180x180", href: "/assets/img/logo-small.png"}],
-    ['link', { rel: "icon", type: "image/png", sizes: "32x32", href: "/assets/img/logo-small.png"}],
-    ['link', { rel: "icon", type: "image/png", sizes: "16x16", href: "/assets/img/logo-small.png"}],
-    ['link', { rel: "shortcut icon", href: "/assets/img/logo-small.png"}],
-    ['meta', { name: "theme-color", content: "#ffffff"}],
-    // ['link', { rel: "manifest", href: "/assets/favicons/site.webmanifest"}],
-    // ['link', { rel: "mask-icon", href: "/assets/favicons/safari-pinned-tab.svg", color: "#3a0839"}],
-    // ['meta', { name: "msapplication-TileColor", content: "#3a0839"}],
-    // ['meta', { name: "msapplication-config", content: "/assets/favicons/browserconfig.xml"}],
-  ],
-  markdown: {
-    lineNumbers: true
-  },
-  themeConfig: {
-    logo: "/assets/img/logo-small.png",
-    displayAllHeaders: true,
-    search: false,
-    nav: [
-      { text: 'Getting Started', link: '/getting-started/' },
-      { text: 'Integrations', link: '/integrations-overview' },
-      { text: 'API', link: '/api' },
-      { text: 'Github', link: 'https://github.com/embarklabs/subspace' },
-    ],
-    sidebar: [
-      '/',
-      '/how-it-works',
-      '/getting-started',
-      {
-        title: 'Integrations',
-        collapsable: false,
-        children: [
-          ['/integrations-overview', 'Overview'],
-          '/react',
-          '/vue',
-          {
-            title: 'Redux',
-            collapsable: false,
-            children: [
-              '/redux',
-              '/redux-observable'
-            ]
-          },
-          '/reactive-graphql',
-          '/apollo-client'
-        ]
-      },
-      ['/tutorial', 'Tutorial'],
-      '/api'
-    ]
-  },
-};
--- a/packages/docs/.vuepress/public/assets/img/logo-small.png
+++ b/packages/docs/.vuepress/public/assets/img/logo-small.png
--- a/packages/docs/.vuepress/public/assets/img/logo.svg
+++ b/packages/docs/.vuepress/public/assets/img/logo.svg
@ -1,14 +0,0 @@
-<svg width="345" height="80" viewBox="0 0 345 80" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M65.4204 39.604C68.3179 50.3081 65.5648 62.2226 57.161 70.6264C48.7573 79.0301 36.8427 81.7832 26.1387 78.8857C35.655 77.3626 44.7965 72.9332 52.1322 65.5975C59.4678 58.2618 63.8973 49.1204 65.4204 39.604Z" fill="#78BE97"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M55.7624 24.5544C59.0576 36.7277 55.9266 50.2776 46.3695 59.8348C36.8123 69.392 23.2624 72.523 11.0891 69.2278C21.9116 67.4956 32.3078 62.4582 40.6503 54.1157C48.9929 45.7731 54.0302 35.377 55.7624 24.5544Z" fill="#FAB266"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M24.2375 55.4456C20.9423 43.2723 24.0733 29.7224 33.6305 20.1653C43.1876 10.6081 56.7375 7.47708 68.9108 10.7723C58.0883 12.5045 47.6922 17.5418 39.3496 25.8844C31.007 34.2269 25.9697 44.6231 24.2375 55.4456Z" fill="#F1645D"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.839 9.37367C31.2427 0.969937 43.1573 -1.78317 53.8614 1.11433C44.345 2.63746 35.2036 7.06687 27.8679 14.4026C20.5322 21.7383 16.1028 30.8797 14.5797 40.396C11.6822 29.692 14.4353 17.7774 22.839 9.37367Z" fill="#398689"/>
-<path d="M108.349 32.1427C108.152 32.4577 107.942 32.694 107.719 32.8515C107.509 33.009 107.233 33.0877 106.892 33.0877C106.59 33.0877 106.262 32.9959 105.908 32.8121C105.566 32.6152 105.173 32.3987 104.726 32.1624C104.293 31.9262 103.794 31.7162 103.23 31.5324C102.666 31.3356 102.023 31.2371 101.301 31.2371C100.054 31.2371 99.1219 31.5062 98.505 32.0443C97.9013 32.5693 97.5994 33.2846 97.5994 34.1902C97.5994 34.7677 97.7831 35.2468 98.1506 35.6274C98.5181 36.0081 98.9972 36.3362 99.5878 36.6118C100.192 36.8874 100.874 37.1434 101.635 37.3796C102.41 37.6027 103.197 37.8587 103.998 38.1474C104.798 38.4231 105.579 38.7512 106.341 39.1318C107.115 39.5124 107.798 39.9981 108.388 40.5887C108.992 41.1793 109.478 41.9012 109.845 42.7543C110.213 43.5943 110.396 44.6115 110.396 45.8059C110.396 47.1315 110.167 48.3718 109.707 49.5268C109.248 50.6818 108.578 51.6924 107.699 52.5587C106.833 53.4118 105.757 54.0877 104.47 54.5865C103.197 55.0721 101.747 55.3149 100.119 55.3149C99.2269 55.3149 98.3147 55.2231 97.3828 55.0393C96.4641 54.8556 95.5716 54.5996 94.7053 54.2715C93.8391 53.9302 93.0253 53.5299 92.2641 53.0706C91.5028 52.6112 90.84 52.0993 90.2756 51.5349L92.2444 48.4243C92.3888 48.1881 92.5922 47.9977 92.8547 47.8534C93.1172 47.709 93.3994 47.6368 93.7013 47.6368C94.095 47.6368 94.4888 47.7615 94.8825 48.0109C95.2894 48.2602 95.7422 48.5359 96.2409 48.8377C96.7528 49.1396 97.3369 49.4152 97.9931 49.6646C98.6494 49.914 99.4238 50.0387 100.316 50.0387C101.524 50.0387 102.462 49.7762 103.132 49.2512C103.801 48.7131 104.136 47.8665 104.136 46.7115C104.136 46.0421 103.952 45.4974 103.584 45.0774C103.217 44.6574 102.731 44.3096 102.128 44.034C101.537 43.7584 100.861 43.5156 100.1 43.3056C99.3384 43.0956 98.5575 42.8659 97.7569 42.6165C96.9563 42.354 96.1753 42.039 95.4141 41.6715C94.6528 41.2909 93.9703 40.7987 93.3666 40.1949C92.7759 39.5781 92.2969 38.8168 91.9294 37.9112C91.5619 36.9924 91.3781 35.8637 91.3781 34.5249C91.3781 33.4487 91.5947 32.3987 92.0278 31.3749C92.4609 30.3512 93.0975 29.439 93.9375 28.6384C94.7775 27.8377 95.8078 27.2012 97.0284 26.7287C98.2491 26.2431 99.6469 26.0002 101.222 26.0002C102.101 26.0002 102.954 26.0724 103.781 26.2168C104.621 26.3481 105.415 26.5515 106.163 26.8271C106.912 27.0896 107.607 27.4112 108.25 27.7918C108.907 28.1593 109.491 28.5793 110.003 29.0518L108.349 32.1427Z" fill="black"/>
-<path d="M133.857 49.7434C134.75 49.7434 135.544 49.599 136.239 49.3102C136.948 49.0084 137.545 48.5818 138.031 48.0306C138.517 47.4793 138.884 46.8099 139.133 46.0224C139.396 45.2218 139.527 44.3162 139.527 43.3056V26.3152H146.182V43.3056C146.182 45.0643 145.893 46.6787 145.315 48.1487C144.751 49.6187 143.937 50.8852 142.874 51.9484C141.811 53.0115 140.518 53.8384 138.996 54.429C137.473 55.0196 135.76 55.3149 133.857 55.3149C131.941 55.3149 130.222 55.0196 128.699 54.429C127.177 53.8384 125.884 53.0115 124.821 51.9484C123.757 50.8852 122.944 49.6187 122.379 48.1487C121.815 46.6787 121.533 45.0643 121.533 43.3056V26.3152H128.187V43.2859C128.187 44.2965 128.312 45.2021 128.561 46.0027C128.824 46.7902 129.198 47.4662 129.683 48.0306C130.169 48.5818 130.76 49.0084 131.455 49.3102C132.164 49.599 132.965 49.7434 133.857 49.7434Z" fill="black"/>
-<path d="M158.72 54.9999V26.3152H169.272C171.254 26.3152 172.94 26.499 174.332 26.8665C175.723 27.234 176.858 27.7524 177.738 28.4218C178.617 29.0912 179.254 29.9049 179.647 30.8631C180.054 31.8212 180.258 32.8909 180.258 34.0721C180.258 34.7152 180.166 35.3387 179.982 35.9424C179.798 36.5331 179.51 37.0909 179.116 37.6159C178.722 38.1409 178.217 38.6199 177.6 39.0531C176.983 39.4731 176.241 39.8406 175.375 40.1556C177.265 40.6149 178.663 41.3631 179.569 42.3999C180.474 43.4237 180.927 44.7427 180.927 46.3571C180.927 47.5777 180.691 48.7131 180.218 49.7631C179.746 50.8131 179.05 51.7318 178.131 52.5193C177.226 53.2937 176.104 53.904 174.765 54.3502C173.426 54.7834 171.897 54.9999 170.178 54.9999H158.72ZM165.374 42.8331V49.9796H170.06C170.939 49.9796 171.654 49.8681 172.205 49.6449C172.77 49.4218 173.21 49.1331 173.525 48.7787C173.84 48.4243 174.056 48.024 174.174 47.5777C174.292 47.1315 174.351 46.6787 174.351 46.2193C174.351 45.6943 174.279 45.2218 174.135 44.8018C174.004 44.3818 173.767 44.0274 173.426 43.7387C173.098 43.4499 172.658 43.2268 172.107 43.0693C171.556 42.9118 170.86 42.8331 170.02 42.8331H165.374ZM165.374 38.3837H168.839C169.574 38.3837 170.237 38.3312 170.827 38.2262C171.418 38.1212 171.917 37.9374 172.324 37.6749C172.744 37.4124 173.059 37.0515 173.269 36.5921C173.492 36.1327 173.603 35.5552 173.603 34.8596C173.603 34.1771 173.518 33.6127 173.347 33.1665C173.177 32.7071 172.914 32.3396 172.56 32.064C172.205 31.7884 171.753 31.5915 171.201 31.4734C170.663 31.3552 170.02 31.2962 169.272 31.2962H165.374V38.3837Z" fill="black"/>
-<path d="M208.769 32.1427C208.572 32.4577 208.362 32.694 208.139 32.8515C207.929 33.009 207.653 33.0877 207.312 33.0877C207.01 33.0877 206.682 32.9959 206.327 32.8121C205.986 32.6152 205.592 32.3987 205.146 32.1624C204.713 31.9262 204.214 31.7162 203.65 31.5324C203.086 31.3356 202.442 31.2371 201.721 31.2371C200.474 31.2371 199.542 31.5062 198.925 32.0443C198.321 32.5693 198.019 33.2846 198.019 34.1902C198.019 34.7677 198.203 35.2468 198.571 35.6274C198.938 36.0081 199.417 36.3362 200.008 36.6118C200.611 36.8874 201.294 37.1434 202.055 37.3796C202.83 37.6027 203.617 37.8587 204.418 38.1474C205.218 38.4231 205.999 38.7512 206.761 39.1318C207.535 39.5124 208.217 39.9981 208.808 40.5887C209.412 41.1793 209.897 41.9012 210.265 42.7543C210.632 43.5943 210.816 44.6115 210.816 45.8059C210.816 47.1315 210.586 48.3718 210.127 49.5268C209.668 50.6818 208.998 51.6924 208.119 52.5587C207.253 53.4118 206.176 54.0877 204.89 54.5865C203.617 55.0721 202.167 55.3149 200.539 55.3149C199.647 55.3149 198.735 55.2231 197.803 55.0393C196.884 54.8556 195.991 54.5996 195.125 54.2715C194.259 53.9302 193.445 53.5299 192.684 53.0706C191.923 52.6112 191.26 52.0993 190.696 51.5349L192.664 48.4243C192.809 48.1881 193.012 47.9977 193.275 47.8534C193.537 47.709 193.819 47.6368 194.121 47.6368C194.515 47.6368 194.909 47.7615 195.302 48.0109C195.709 48.2602 196.162 48.5359 196.661 48.8377C197.173 49.1396 197.757 49.4152 198.413 49.6646C199.069 49.914 199.844 50.0387 200.736 50.0387C201.944 50.0387 202.882 49.7762 203.551 49.2512C204.221 48.7131 204.556 47.8665 204.556 46.7115C204.556 46.0421 204.372 45.4974 204.004 45.0774C203.637 44.6574 203.151 44.3096 202.547 44.034C201.957 43.7584 201.281 43.5156 200.52 43.3056C199.758 43.0956 198.977 42.8659 198.177 42.6165C197.376 42.354 196.595 42.039 195.834 41.6715C195.073 41.2909 194.39 40.7987 193.786 40.1949C193.196 39.5781 192.717 38.8168 192.349 37.9112C191.982 36.9924 191.798 35.8637 191.798 34.5249C191.798 33.4487 192.015 32.3987 192.448 31.3749C192.881 30.3512 193.517 29.439 194.357 28.6384C195.197 27.8377 196.228 27.2012 197.448 26.7287C198.669 26.2431 200.067 26.0002 201.642 26.0002C202.521 26.0002 203.374 26.0724 204.201 26.2168C205.041 26.3481 205.835 26.5515 206.583 26.8271C207.331 27.0896 208.027 27.4112 208.67 27.7918C209.326 28.1593 209.911 28.5793 210.422 29.0518L208.769 32.1427Z" fill="black"/>
-<path d="M229.001 45.4121V54.9999H222.346V26.3152H232.466C234.487 26.3152 236.22 26.5581 237.663 27.0437C239.12 27.5162 240.315 28.1724 241.246 29.0124C242.191 29.8524 242.887 30.8434 243.333 31.9852C243.78 33.1271 244.003 34.3609 244.003 35.6865C244.003 37.1171 243.773 38.4296 243.314 39.624C242.854 40.8184 242.152 41.8421 241.207 42.6952C240.262 43.5484 239.061 44.2177 237.604 44.7034C236.16 45.1759 234.448 45.4121 232.466 45.4121H229.001ZM229.001 40.3918H232.466C234.198 40.3918 235.445 39.9784 236.206 39.1515C236.968 38.3246 237.348 37.1696 237.348 35.6865C237.348 35.0302 237.25 34.4331 237.053 33.8949C236.856 33.3568 236.554 32.8974 236.147 32.5168C235.754 32.1231 235.248 31.8212 234.631 31.6112C234.028 31.4012 233.306 31.2962 232.466 31.2962H229.001V40.3918Z" fill="black"/>
-<path d="M279.03 54.9999H273.872C273.294 54.9999 272.815 54.8687 272.434 54.6062C272.067 54.3306 271.811 53.9827 271.667 53.5627L269.973 48.5621H259.067L257.373 53.5627C257.242 53.9302 256.986 54.2649 256.606 54.5668C256.225 54.8556 255.759 54.9999 255.208 54.9999H250.01L261.114 26.3152H267.926L279.03 54.9999ZM260.602 44.034H268.438L265.8 36.1787C265.629 35.6799 265.426 35.0959 265.189 34.4265C264.966 33.744 264.743 33.009 264.52 32.2215C264.31 33.0221 264.093 33.7637 263.87 34.4462C263.647 35.1287 263.437 35.7193 263.24 36.2181L260.602 44.034Z" fill="black"/>
-<path d="M307.67 47.5777C307.827 47.5777 307.985 47.6106 308.142 47.6762C308.3 47.7287 308.451 47.8271 308.595 47.9715L311.233 50.7474C310.078 52.2568 308.628 53.3987 306.882 54.1731C305.15 54.9343 303.096 55.3149 300.72 55.3149C298.541 55.3149 296.586 54.9474 294.853 54.2124C293.134 53.4643 291.67 52.4406 290.463 51.1412C289.269 49.8287 288.35 48.2799 287.707 46.4949C287.064 44.6968 286.742 42.7477 286.742 40.6477C286.742 38.5084 287.11 36.5462 287.845 34.7612C288.58 32.9631 289.603 31.4143 290.916 30.1149C292.241 28.8156 293.823 27.8049 295.66 27.0831C297.498 26.3612 299.526 26.0002 301.744 26.0002C302.82 26.0002 303.831 26.0987 304.776 26.2956C305.734 26.4793 306.626 26.7418 307.453 27.0831C308.28 27.4112 309.041 27.8115 309.737 28.284C310.433 28.7434 311.05 29.2552 311.588 29.8196L309.343 32.8318C309.199 33.0156 309.028 33.1862 308.831 33.3437C308.635 33.4881 308.359 33.5602 308.005 33.5602C307.768 33.5602 307.545 33.5077 307.335 33.4027C307.125 33.2977 306.902 33.1731 306.666 33.0287C306.43 32.8712 306.167 32.7071 305.878 32.5365C305.603 32.3527 305.268 32.1887 304.874 32.0443C304.494 31.8868 304.041 31.7556 303.516 31.6506C303.004 31.5456 302.4 31.4931 301.705 31.4931C300.497 31.4931 299.395 31.7096 298.397 32.1427C297.4 32.5627 296.54 33.1731 295.818 33.9737C295.109 34.7612 294.551 35.7193 294.145 36.8481C293.751 37.9768 293.554 39.2434 293.554 40.6477C293.554 42.1177 293.751 43.4237 294.145 44.5656C294.551 45.7074 295.096 46.6721 295.779 47.4596C296.474 48.234 297.281 48.8246 298.2 49.2315C299.119 49.6384 300.103 49.8418 301.153 49.8418C301.757 49.8418 302.308 49.8156 302.807 49.7631C303.306 49.6974 303.765 49.5924 304.185 49.4481C304.618 49.3037 305.025 49.1199 305.406 48.8968C305.8 48.6606 306.193 48.3718 306.587 48.0306C306.745 47.8993 306.915 47.7943 307.099 47.7156C307.283 47.6237 307.473 47.5777 307.67 47.5777Z" fill="black"/>
-<path d="M340.964 26.3152V31.434H329.191V38.1277H338.208V43.0496H329.191V49.8812H340.964V54.9999H322.497V26.3152H340.964Z" fill="black"/>
-</svg>
--- a/packages/docs/.vuepress/public/inter/Inter-Black.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Black.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Black.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Black.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-BlackItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-BlackItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-BlackItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-BlackItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Bold.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Bold.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Bold.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Bold.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-BoldItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-BoldItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-BoldItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-BoldItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraBold.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraBold.woff
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraBold.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraBold.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraBoldItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraBoldItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraBoldItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraBoldItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraLight.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraLight.woff
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraLight.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraLight.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraLightItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraLightItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-ExtraLightItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-ExtraLightItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Italic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Italic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Italic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Italic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Light.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Light.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Light.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Light.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-LightItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-LightItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-LightItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-LightItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Medium.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Medium.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Medium.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Medium.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-MediumItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-MediumItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-MediumItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-MediumItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Regular.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Regular.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Regular.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Regular.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-SemiBold.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-SemiBold.woff
--- a/packages/docs/.vuepress/public/inter/Inter-SemiBold.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-SemiBold.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-SemiBoldItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-SemiBoldItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-SemiBoldItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-SemiBoldItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-Thin.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-Thin.woff
--- a/packages/docs/.vuepress/public/inter/Inter-Thin.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-Thin.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-ThinItalic.woff
+++ b/packages/docs/.vuepress/public/inter/Inter-ThinItalic.woff
--- a/packages/docs/.vuepress/public/inter/Inter-ThinItalic.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-ThinItalic.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-italic.var.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-italic.var.woff2
--- a/packages/docs/.vuepress/public/inter/Inter-upright.var.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter-upright.var.woff2
--- a/packages/docs/.vuepress/public/inter/Inter.var.woff2
+++ b/packages/docs/.vuepress/public/inter/Inter.var.woff2
--- a/packages/docs/.vuepress/public/inter/inter.css
+++ b/packages/docs/.vuepress/public/inter/inter.css
@ -1,184 +0,0 @@
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 100;
-  src: url("Inter-Thin.woff2") format("woff2"),
-       url("Inter-Thin.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 100;
-  src: url("Inter-ThinItalic.woff2") format("woff2"),
-       url("Inter-ThinItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 200;
-  src: url("Inter-ExtraLight.woff2") format("woff2"),
-       url("Inter-ExtraLight.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 200;
-  src: url("Inter-ExtraLightItalic.woff2") format("woff2"),
-       url("Inter-ExtraLightItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 300;
-  src: url("Inter-Light.woff2") format("woff2"),
-       url("Inter-Light.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 300;
-  src: url("Inter-LightItalic.woff2") format("woff2"),
-       url("Inter-LightItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 400;
-  src: url("Inter-Regular.woff2") format("woff2"),
-       url("Inter-Regular.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 400;
-  src: url("Inter-Italic.woff2") format("woff2"),
-       url("Inter-Italic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 500;
-  src: url("Inter-Medium.woff2") format("woff2"),
-       url("Inter-Medium.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 500;
-  src: url("Inter-MediumItalic.woff2") format("woff2"),
-       url("Inter-MediumItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 600;
-  src: url("Inter-SemiBold.woff2") format("woff2"),
-       url("Inter-SemiBold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 600;
-  src: url("Inter-SemiBoldItalic.woff2") format("woff2"),
-       url("Inter-SemiBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 700;
-  src: url("Inter-Bold.woff2") format("woff2"),
-       url("Inter-Bold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 700;
-  src: url("Inter-BoldItalic.woff2") format("woff2"),
-       url("Inter-BoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 800;
-  src: url("Inter-ExtraBold.woff2") format("woff2"),
-       url("Inter-ExtraBold.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 800;
-  src: url("Inter-ExtraBoldItalic.woff2") format("woff2"),
-       url("Inter-ExtraBoldItalic.woff") format("woff");
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style:  normal;
-  font-weight: 900;
-  src: url("Inter-Black.woff2") format("woff2"),
-       url("Inter-Black.woff") format("woff");
-}
-@font-face {
-  font-family: 'Inter';
-  font-style:  italic;
-  font-weight: 900;
-  src: url("Inter-BlackItalic.woff2") format("woff2"),
-       url("Inter-BlackItalic.woff") format("woff");
-}
-
-/* -------------------------------------------------------
-Variable font.
-Usage:
-
-  html { font-family: 'Inter', sans-serif; }
-  @supports (font-variation-settings: normal) {
-    html { font-family: 'Inter var', sans-serif; }
-  }
-*/
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-style: normal;
-  font-named-instance: 'Regular';
-  src: url("Inter-upright.var.woff2") format("woff2 supports variations(gvar)"),
-       url("Inter-upright.var.woff2") format("woff2-variations"),
-       url("Inter-upright.var.woff2") format("woff2");
-}
-@font-face {
-  font-family: 'Inter var';
-  font-weight: 100 900;
-  font-style: italic;
-  font-named-instance: 'Italic';
-  src: url("Inter-italic.var.woff2") format("woff2 supports variations(gvar)"),
-       url("Inter-italic.var.woff2") format("woff2-variations"),
-       url("Inter-italic.var.woff2") format("woff2");
-}
-
-
-/* --------------------------------------------------------------------------
-[EXPERIMENTAL] Multi-axis, single variable font.
-
-Slant axis is not yet widely supported (as of February 2019) and thus this
-multi-axis single variable font is opt-in rather than the default.
-
-When using this, you will probably need to set font-variation-settings
-explicitly, e.g.
-
-  * { font-variation-settings: "slnt" 0deg }
-  .italic { font-variation-settings: "slnt" 10deg }
-
-*/
-@font-face {
-  font-family: 'Inter var experimental';
-  font-weight: 100 900;
-  font-style: oblique 0deg 10deg;
-  src: url("Inter.var.woff2") format("woff2-variations"),
-       url("Inter.var.woff2") format("woff2");
-}
--- a/packages/docs/.vuepress/styles/index.styl
+++ b/packages/docs/.vuepress/styles/index.styl
@ -1,71 +0,0 @@
-@import "/subspace-docs/inter/inter.css";
-
-body {
-  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-
-.theme-default-content:not(.custom) > h2 {
-  margin-top: -1em
-}
-
-.code-container {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 80px;
-}
-
-.code-container + .code-container {
-  margin-top: 80px;
-}
-
-.code-text {
-  display: block;
-  flex-basis: 30%;
-  padding: 13px 4%;
-  padding-left: 0px !important;
-  text-align: justify;
-  color: black;
-  line-height: 29px;
-}
-
-.code-content {
-  display: block;
-  width: 66%;
-  font-size: 16.5px;
-}
-
-@media screen and (max-width: 1000px) {
-  .code-text {
-    flex-basis: 100%;
-    margin-right: 20px;
-    padding-left: 0px !important;
-    line-height: 29px;
-  }
-
-  .code-content {
-    width: 100%;
-  }
-}
-
-.home {
-  max-width: 1220px !important;
-}
-
-#intro {
-  font-size: 17px;
-
-  h3 {
-    font-size: 25px;
-    line-height: 32.5px;
-    margin-top: 0;
-  }
-}
-
-.feature {
-  p {
-    color: black !important;
-    font-size: 17px;
-    font-weight: 400;
-    line-height: 29px;
-  }
-}
--- a/packages/docs/.vuepress/styles/palette.styl
+++ b/packages/docs/.vuepress/styles/palette.styl
--- a/packages/docs/.vuepress/theme/LICENSE
+++ b/packages/docs/.vuepress/theme/LICENSE
@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2018-present, Yuxi (Evan) You
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
--- a/packages/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
+++ b/packages/docs/.vuepress/theme/components/AlgoliaSearchBox.vue
@ -1,167 +0,0 @@
-<template>
-  <form
-    id="search-form"
-    class="algolia-search-wrapper search-box"
-    role="search"
-  >
-    <input
-      id="algolia-search-input"
-      class="search-query"
-      :placeholder="placeholder"
-    >
-  </form>
-</template>
-
-<script>
-export default {
-  props: ['options'],
-
-  data () {
-    return {
-      placeholder: undefined
-    }
-  },
-
-  mounted () {
-    this.initialize(this.options, this.$lang)
-    this.placeholder = this.$site.themeConfig.searchPlaceholder || ''
-  },
-
-  methods: {
-    initialize (userOptions, lang) {
-      Promise.all([
-        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.js'),
-        import(/* webpackChunkName: "docsearch" */ 'docsearch.js/dist/cdn/docsearch.min.css')
-      ]).then(([docsearch]) => {
-        docsearch = docsearch.default
-        const { algoliaOptions = {}} = userOptions
-        docsearch(Object.assign(
-          {},
-          userOptions,
-          {
-            inputSelector: '#algolia-search-input',
-            // #697 Make docsearch work well at i18n mode.
-            algoliaOptions: Object.assign({
-              'facetFilters': [`lang:${lang}`].concat(algoliaOptions.facetFilters || [])
-            }, algoliaOptions),
-            handleSelected: (input, event, suggestion) => {
-              const { pathname, hash } = new URL(suggestion.url)
-              this.$router.push(`${pathname}${hash}`)
-            }
-          }
-        ))
-      })
-    },
-
-    update (options, lang) {
-      this.$el.innerHTML = '<input id="algolia-search-input" class="search-query">'
-      this.initialize(options, lang)
-    }
-  },
-
-  watch: {
-    $lang (newValue) {
-      this.update(this.options, newValue)
-    },
-
-    options (newValue) {
-      this.update(newValue, this.$lang)
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.algolia-search-wrapper
-  & > span
-    vertical-align middle
-  .algolia-autocomplete
-    line-height normal
-    .ds-dropdown-menu
-      background-color #fff
-      border 1px solid #999
-      border-radius 4px
-      font-size 16px
-      margin 6px 0 0
-      padding 4px
-      text-align left
-      &:before
-        border-color #999
-      [class*=ds-dataset-]
-        border none
-        padding 0
-      .ds-suggestions
-        margin-top 0
-      .ds-suggestion
-        border-bottom 1px solid $borderColor
-    .algolia-docsearch-suggestion--highlight
-      color #2c815b
-    .algolia-docsearch-suggestion
-      border-color $borderColor
-      padding 0
-      .algolia-docsearch-suggestion--category-header
-        padding 5px 10px
-        margin-top 0
-        background $accentColor
-        color #fff
-        font-weight 600
-        .algolia-docsearch-suggestion--highlight
-          background rgba(255, 255, 255, 0.6)
-      .algolia-docsearch-suggestion--wrapper
-        padding 0
-      .algolia-docsearch-suggestion--title
-        font-weight 600
-        margin-bottom 0
-        color $textColor
-      .algolia-docsearch-suggestion--subcategory-column
-        vertical-align top
-        padding 5px 7px 5px 5px
-        border-color $borderColor
-        background #f1f3f5
-        &:after
-          display none
-      .algolia-docsearch-suggestion--subcategory-column-text
-        color #555
-    .algolia-docsearch-footer
-      border-color $borderColor
-    .ds-cursor .algolia-docsearch-suggestion--content
-      background-color #e7edf3 !important
-      color $textColor
-
-@media (min-width: $MQMobile)
-  .algolia-search-wrapper
-    .algolia-autocomplete
-      .algolia-docsearch-suggestion
-        .algolia-docsearch-suggestion--subcategory-column
-          float none
-          width 150px
-          min-width 150px
-          display table-cell
-        .algolia-docsearch-suggestion--content
-          float none
-          display table-cell
-          width 100%
-          vertical-align top
-        .ds-dropdown-menu
-          min-width 515px !important
-
-@media (max-width: $MQMobile)
-  .algolia-search-wrapper
-    .ds-dropdown-menu
-      min-width calc(100vw - 4rem) !important
-      max-width calc(100vw - 4rem) !important
-    .algolia-docsearch-suggestion--wrapper
-      padding 5px 7px 5px 5px !important
-    .algolia-docsearch-suggestion--subcategory-column
-      padding 0 !important
-      background white !important
-    .algolia-docsearch-suggestion--subcategory-column-text:after
-      content " > "
-      font-size 10px
-      line-height 14.4px
-      display inline-block
-      width 5px
-      margin -3px 3px 0
-      vertical-align middle
-
-</style>
--- a/packages/docs/.vuepress/theme/components/DropdownLink.vue
+++ b/packages/docs/.vuepress/theme/components/DropdownLink.vue
@ -1,179 +0,0 @@
-<template>
-  <div
-    class="dropdown-wrapper"
-    :class="{ open }"
-  >
-    <a
-      class="dropdown-title"
-      @click="toggle"
-    >
-      <span class="title">{{ item.text }}</span>
-      <span
-        class="arrow"
-        :class="open ? 'down' : 'right'"
-      ></span>
-    </a>
-
-    <DropdownTransition>
-      <ul
-        class="nav-dropdown"
-        v-show="open"
-      >
-        <li
-          class="dropdown-item"
-          :key="subItem.link || index"
-          v-for="(subItem, index) in item.items"
-        >
-          <h4 v-if="subItem.type === 'links'">{{ subItem.text }}</h4>
-
-          <ul
-            class="dropdown-subitem-wrapper"
-            v-if="subItem.type === 'links'"
-          >
-            <li
-              class="dropdown-subitem"
-              :key="childSubItem.link"
-              v-for="childSubItem in subItem.items"
-            >
-              <NavLink :item="childSubItem"/>
-            </li>
-          </ul>
-
-          <NavLink
-            v-else
-            :item="subItem"
-          />
-        </li>
-      </ul>
-    </DropdownTransition>
-  </div>
-</template>
-
-<script>
-import NavLink from '@theme/components/NavLink.vue'
-import DropdownTransition from '@theme/components/DropdownTransition.vue'
-
-export default {
-  components: { NavLink, DropdownTransition },
-
-  data () {
-    return {
-      open: false
-    }
-  },
-
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  methods: {
-    toggle () {
-      this.open = !this.open
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.dropdown-wrapper
-  cursor pointer
-  .dropdown-title
-    display block
-    &:hover
-      border-color transparent
-    .arrow
-      vertical-align middle
-      margin-top -1px
-      margin-left 0.4rem
-  .nav-dropdown
-    .dropdown-item
-      color inherit
-      line-height 1.7rem
-      h4
-        margin 0.45rem 0 0
-        border-top 1px solid #eee
-        padding 0.45rem 1.5rem 0 1.25rem
-      .dropdown-subitem-wrapper
-        padding 0
-        list-style none
-        .dropdown-subitem
-          font-size 0.9em
-      a
-        display block
-        line-height 1.7rem
-        position relative
-        border-bottom none
-        font-weight 400
-        margin-bottom 0
-        padding 0 1.5rem 0 1.25rem
-        &:hover
-          color $accentColor
-        &.router-link-active
-          color $accentColor
-          &::after
-            content ""
-            width 0
-            height 0
-            border-left 5px solid $accentColor
-            border-top 3px solid transparent
-            border-bottom 3px solid transparent
-            position absolute
-            top calc(50% - 2px)
-            left 9px
-      &:first-child h4
-        margin-top 0
-        padding-top 0
-        border-top 0
-
-@media (max-width: $MQMobile)
-  .dropdown-wrapper
-    &.open .dropdown-title
-      margin-bottom 0.5rem
-    .nav-dropdown
-      transition height .1s ease-out
-      overflow hidden
-      .dropdown-item
-        h4
-          border-top 0
-          margin-top 0
-          padding-top 0
-        h4, & > a
-          font-size 15px
-          line-height 2rem
-        .dropdown-subitem
-          font-size 14px
-          padding-left 1rem
-
-@media (min-width: $MQMobile)
-  .dropdown-wrapper
-    height 1.8rem
-    &:hover .nav-dropdown
-      // override the inline style.
-      display block !important
-    .dropdown-title .arrow
-      // make the arrow always down at desktop
-      border-left 4px solid transparent
-      border-right 4px solid transparent
-      border-top 6px solid $arrowBgColor
-      border-bottom 0
-    .nav-dropdown
-      display none
-      // Avoid height shaked by clicking
-      height auto !important
-      box-sizing border-box;
-      max-height calc(100vh - 2.7rem)
-      overflow-y auto
-      position absolute
-      top 100%
-      right 0
-      background-color #fff
-      padding 0.6rem 0
-      border 1px solid #ddd
-      border-bottom-color #ccc
-      text-align left
-      border-radius 0.25rem
-      white-space nowrap
-      margin 0
-</style>
--- a/packages/docs/.vuepress/theme/components/DropdownTransition.vue
+++ b/packages/docs/.vuepress/theme/components/DropdownTransition.vue
@ -1,33 +0,0 @@
-<template>
-  <transition
-    name="dropdown"
-    @enter="setHeight"
-    @after-enter="unsetHeight"
-    @before-leave="setHeight"
-  >
-    <slot/>
-  </transition>
-</template>
-
-<script>
-export default {
-  name: 'DropdownTransition',
-
-  methods: {
-    setHeight (items) {
-      // explicitly set height so that it can be transitioned
-      items.style.height = items.scrollHeight + 'px'
-    },
-
-    unsetHeight (items) {
-      items.style.height = ''
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.dropdown-enter, .dropdown-leave-to
-  height 0 !important
-
-</style>
--- a/packages/docs/.vuepress/theme/components/Home.vue
+++ b/packages/docs/.vuepress/theme/components/Home.vue
@ -1,162 +0,0 @@
-<template>
-  <main class="home" aria-labelledby="main-title">
-    <header class="hero">
-      <img
-        v-if="data.heroImage"
-        :src="$withBase(data.heroImage)"
-        :alt="data.heroAlt || 'hero'"
-      >
-
-      <h1 v-if="data.heroText !== null" id="main-title">{{ data.heroText || $title || 'Hello' }}</h1>
-
-      <p class="description">
-        {{ data.tagline || $description || 'Welcome to your VuePress site' }}
-      </p>
-
-      <p
-        class="action"
-        v-if="data.actionText && data.actionLink"
-      >
-        <NavLink
-          class="action-button"
-          :item="actionLink"
-        />
-      </p>
-    </header>
-
-    <div
-      class="features"
-      v-if="data.features && data.features.length"
-    >
-      <div
-        class="feature"
-        v-for="(feature, index) in data.features"
-        :key="index"
-      >
-        <h2>{{ feature.title }}</h2>
-        <p>{{ feature.details }}</p>
-      </div>
-    </div>
-
-    <Content class="theme-default-content custom"/>
-
-    <div
-      class="footer"
-      v-if="data.footer"
-    >
-      {{ data.footer }}
-    </div>
-  </main>
-</template>
-
-<script>
-import NavLink from '@theme/components/NavLink.vue'
-
-export default {
-  components: { NavLink },
-
-  computed: {
-    data () {
-      return this.$page.frontmatter
-    },
-
-    actionLink () {
-      return {
-        link: this.data.actionLink,
-        text: this.data.actionText
-      }
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.home
-  padding $navbarHeight 2rem 0
-  max-width 960px
-  margin 0px auto
-  display block
-  .hero
-    text-align center
-    img
-      max-width: 100%
-      max-height 280px
-      display block
-      margin 3rem auto 1.5rem
-    h1
-      font-size 3rem
-    h1, .description, .action
-      margin 1.8rem auto
-    .description
-      max-width 35rem
-      font-size 1.6rem
-      line-height 1.3
-      color lighten($textColor, 40%)
-    .action-button
-      display inline-block
-      font-size 1.2rem
-      color #fff
-      background-color $accentColor
-      padding 0.8rem 1.6rem
-      border-radius 4px
-      transition background-color .1s ease
-      box-sizing border-box
-      border-bottom 1px solid darken($accentColor, 10%)
-      &:hover
-        background-color lighten($accentColor, 10%)
-  .features
-    border-top 1px solid $borderColor
-    padding 1.2rem 0
-    margin-top 2.5rem
-    display flex
-    flex-wrap wrap
-    align-items flex-start
-    align-content stretch
-    justify-content space-between
-  .feature
-    flex-grow 1
-    flex-basis 30%
-    max-width 30%
-    h2
-      font-size 1.4rem
-      font-weight 500
-      border-bottom none
-      padding-bottom 0
-      color lighten($textColor, 10%)
-    p
-      color lighten($textColor, 25%)
-  .footer
-    padding 2.5rem
-    border-top 1px solid $borderColor
-    text-align center
-    color lighten($textColor, 25%)
-
-@media (max-width: $MQMobile)
-  .home
-    .features
-      flex-direction column
-    .feature
-      max-width 100%
-      padding 0 2.5rem
-
-@media (max-width: $MQMobileNarrow)
-  .home
-    padding-left 1.5rem
-    padding-right 1.5rem
-    .hero
-      img
-        max-height 210px
-        margin 2rem auto 1.2rem
-      h1
-        font-size 2rem
-      h1, .description, .action
-        margin 1.2rem auto
-      .description
-        font-size 1.2rem
-      .action-button
-        font-size 1rem
-        padding 0.6rem 1.2rem
-    .feature
-      h2
-        font-size 1.25rem
-</style>
--- a/packages/docs/.vuepress/theme/components/NavLink.vue
+++ b/packages/docs/.vuepress/theme/components/NavLink.vue
@ -1,49 +0,0 @@
-<template>
-  <router-link
-    class="nav-link"
-    :to="link"
-    v-if="!isExternal(link)"
-    :exact="exact"
-  >{{ item.text }}</router-link>
-  <a
-    v-else
-    :href="link"
-    class="nav-link external"
-    :target="isMailto(link) || isTel(link) ? null : '_blank'"
-    :rel="isMailto(link) || isTel(link) ? null : 'noopener noreferrer'"
-  >
-    {{ item.text }}
-    <OutboundLink/>
-  </a>
-</template>
-
-<script>
-import { isExternal, isMailto, isTel, ensureExt } from '../util'
-
-export default {
-  props: {
-    item: {
-      required: true
-    }
-  },
-
-  computed: {
-    link () {
-      return ensureExt(this.item.link)
-    },
-
-    exact () {
-      if (this.$site.locales) {
-        return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
-      }
-      return this.link === '/'
-    }
-  },
-
-  methods: {
-    isExternal,
-    isMailto,
-    isTel
-  }
-}
-</script>
--- a/packages/docs/.vuepress/theme/components/NavLinks.vue
+++ b/packages/docs/.vuepress/theme/components/NavLinks.vue
@ -1,149 +0,0 @@
-<template>
-  <nav
-    class="nav-links"
-    v-if="userLinks.length || repoLink"
-  >
-    <!-- user links -->
-    <div
-      class="nav-item"
-      v-for="item in userLinks"
-      :key="item.link"
-    >
-      <DropdownLink
-        v-if="item.type === 'links'"
-        :item="item"
-      />
-      <NavLink
-        v-else
-        :item="item"
-      />
-    </div>
-
-    <!-- repo link -->
-    <a
-      v-if="repoLink"
-      :href="repoLink"
-      class="repo-link"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      {{ repoLabel }}
-      <OutboundLink/>
-    </a>
-  </nav>
-</template>
-
-<script>
-import DropdownLink from '@theme/components/DropdownLink.vue'
-import { resolveNavLinkItem } from '../util'
-import NavLink from '@theme/components/NavLink.vue'
-
-export default {
-  components: { NavLink, DropdownLink },
-
-  computed: {
-    userNav () {
-      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || []
-    },
-
-    nav () {
-      const { locales } = this.$site
-      if (locales && Object.keys(locales).length > 1) {
-        const currentLink = this.$page.path
-        const routes = this.$router.options.routes
-        const themeLocales = this.$site.themeConfig.locales || {}
-        const languageDropdown = {
-          text: this.$themeLocaleConfig.selectText || 'Languages',
-          items: Object.keys(locales).map(path => {
-            const locale = locales[path]
-            const text = themeLocales[path] && themeLocales[path].label || locale.lang
-            let link
-            // Stay on the current page
-            if (locale.lang === this.$lang) {
-              link = currentLink
-            } else {
-              // Try to stay on the same page
-              link = currentLink.replace(this.$localeConfig.path, path)
-              // fallback to homepage
-              if (!routes.some(route => route.path === link)) {
-                link = path
-              }
-            }
-            return { text, link }
-          })
-        }
-        return [...this.userNav, languageDropdown]
-      }
-      return this.userNav
-    },
-
-    userLinks () {
-      return (this.nav || []).map(link => {
-        return Object.assign(resolveNavLinkItem(link), {
-          items: (link.items || []).map(resolveNavLinkItem)
-        })
-      })
-    },
-
-    repoLink () {
-      const { repo } = this.$site.themeConfig
-      if (repo) {
-        return /^https?:/.test(repo)
-          ? repo
-          : `https://github.com/${repo}`
-      }
-    },
-
-    repoLabel () {
-      if (!this.repoLink) return
-      if (this.$site.themeConfig.repoLabel) {
-        return this.$site.themeConfig.repoLabel
-      }
-
-      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0]
-      const platforms = ['GitHub', 'GitLab', 'Bitbucket']
-      for (let i = 0; i < platforms.length; i++) {
-        const platform = platforms[i]
-        if (new RegExp(platform, 'i').test(repoHost)) {
-          return platform
-        }
-      }
-
-      return 'Source'
-    }
-  }
-}
-</script>
-
-<style lang="stylus">
-.nav-links
-  display inline-block
-  a
-    line-height 1.4rem
-    color inherit
-    &:hover, &.router-link-active
-      color $accentColor
-  .nav-item
-    position relative
-    display inline-block
-    margin-left 1.5rem
-    line-height 2rem
-    &:first-child
-      margin-left 0
-  .repo-link
-    margin-left 1.5rem
-
-@media (max-width: $MQMobile)
-  .nav-links
-    .nav-item, .repo-link
-      margin-left 0
-
-@media (min-width: $MQMobile)
-  .nav-links a
-    &:hover, &.router-link-active
-      color $textColor
-  .nav-item > a:not(.external)
-    &:hover, &.router-link-active
-      margin-bottom -2px
-      border-bottom 2px solid lighten($accentColor, 8%)
-</style>
--- a/packages/docs/.vuepress/theme/components/Navbar.vue
+++ b/packages/docs/.vuepress/theme/components/Navbar.vue
@ -1,133 +0,0 @@
-<template>
-  <header class="navbar">
-    <SidebarButton @toggle-sidebar="$emit('toggle-sidebar')"/>
-
-    <router-link
-      :to="$localePath"
-      class="home-link"
-    >
-      <img
-        class="logo"
-        v-if="$site.themeConfig.logo"
-        :src="$withBase($site.themeConfig.logo)"
-        :alt="$siteTitle"
-      >
-      <span
-        ref="siteName"
-        class="site-name"
-        v-if="$siteTitle"
-        :class="{ 'can-hide': $site.themeConfig.logo }"
-      >{{ $siteTitle }}</span>
-    </router-link>
-
-    <div
-      class="links"
-      :style="linksWrapMaxWidth ? {
-        'max-width': linksWrapMaxWidth + 'px'
-      } : {}"
-    >
-      <AlgoliaSearchBox
-        v-if="isAlgoliaSearch"
-        :options="algolia"
-      />
-      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false"/>
-      <NavLinks class="can-hide"/>
-    </div>
-  </header>
-</template>
-
-<script>
-import AlgoliaSearchBox from '@AlgoliaSearchBox'
-import SearchBox from '@SearchBox'
-import SidebarButton from '@theme/components/SidebarButton.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
-
-export default {
-  components: { SidebarButton, NavLinks, SearchBox, AlgoliaSearchBox },
-
-  data () {
-    return {
-      linksWrapMaxWidth: null
-    }
-  },
-
-  mounted () {
-    const MOBILE_DESKTOP_BREAKPOINT = 719 // refer to config.styl
-    const NAVBAR_VERTICAL_PADDING = parseInt(css(this.$el, 'paddingLeft')) + parseInt(css(this.$el, 'paddingRight'))
-    const handleLinksWrapWidth = () => {
-      if (document.documentElement.clientWidth < MOBILE_DESKTOP_BREAKPOINT) {
-        this.linksWrapMaxWidth = null
-      } else {
-        this.linksWrapMaxWidth = this.$el.offsetWidth - NAVBAR_VERTICAL_PADDING
-          - (this.$refs.siteName && this.$refs.siteName.offsetWidth || 0)
-      }
-    }
-    handleLinksWrapWidth()
-    window.addEventListener('resize', handleLinksWrapWidth, false)
-  },
-
-  computed: {
-    algolia () {
-      return this.$themeLocaleConfig.algolia || this.$site.themeConfig.algolia || {}
-    },
-
-    isAlgoliaSearch () {
-      return this.algolia && this.algolia.apiKey && this.algolia.indexName
-    }
-  }
-}
-
-function css (el, property) {
-  // NOTE: Known bug, will return 'auto' if style value is 'auto'
-  const win = el.ownerDocument.defaultView
-  // null means not to return pseudo styles
-  return win.getComputedStyle(el, null)[property]
-}
-</script>
-
-<style lang="stylus">
-$navbar-vertical-padding = 0.7rem
-$navbar-horizontal-padding = 1.5rem
-
-.navbar
-  padding $navbar-vertical-padding $navbar-horizontal-padding
-  line-height $navbarHeight - 1.4rem
-  a, span, img
-    display inline-block
-  .logo
-    height $navbarHeight - 1.4rem
-    min-width $navbarHeight - 1.4rem
-    margin-right 0.8rem
-    vertical-align top
-  .site-name
-    font-size 1.3rem
-    font-weight 600
-    color $textColor
-    position relative
-  .links
-    padding-left 1.5rem
-    box-sizing border-box
-    background-color white
-    white-space nowrap
-    font-size 0.9rem
-    position absolute
-    right $navbar-horizontal-padding
-    top $navbar-vertical-padding
-    display flex
-    .search-box
-      flex: 0 0 auto
-      vertical-align top
-
-@media (max-width: $MQMobile)
-  .navbar
-    padding-left 4rem
-    .can-hide
-      display none
-    .links
-      padding-left 1.5rem
-    .site-name
-      width calc(100vw - 9.4rem)
-      overflow hidden
-      white-space nowrap
-      text-overflow ellipsis
-</style>
--- a/packages/docs/.vuepress/theme/components/Page.vue
+++ b/packages/docs/.vuepress/theme/components/Page.vue
@ -1,31 +0,0 @@
-<template>
-  <main class="page">
-    <slot name="top" />
-
-    <Content class="theme-default-content" />
-    <PageEdit />
-
-    <PageNav v-bind="{ sidebarItems }" />
-
-    <slot name="bottom" />
-  </main>
-</template>
-
-<script>
-import PageEdit from '@theme/components/PageEdit.vue'
-import PageNav from '@theme/components/PageNav.vue'
-
-export default {
-  components: { PageEdit, PageNav },
-  props: ['sidebarItems']
-}
-</script>
-
-<style lang="stylus">
-@require '../styles/wrapper.styl';
-
-.page {
-  padding-bottom: 2rem;
-  display: block;
-}
-</style>
--- a/packages/docs/.vuepress/theme/components/PageEdit.vue
+++ b/packages/docs/.vuepress/theme/components/PageEdit.vue
@ -1,142 +0,0 @@
-<template>
-  <footer class="page-edit">
-    <div class="edit-link" v-if="editLink">
-      <a :href="editLink" target="_blank" rel="noopener noreferrer">{{ editLinkText }}</a>
-      <OutboundLink />
-    </div>
-
-    <div class="last-updated" v-if="lastUpdated">
-      <span class="prefix">{{ lastUpdatedText }}:</span>
-      <span class="time">{{ lastUpdated }}</span>
-    </div>
-  </footer>
-</template>
-<script>
-import { endingSlashRE, outboundRE } from '../util'
-
-export default {
-  name: 'PageEdit',
-  computed: {
-    lastUpdated () {
-      return this.$page.lastUpdated
-    },
-
-    lastUpdatedText () {
-      if (typeof this.$themeLocaleConfig.lastUpdated === 'string') {
-        return this.$themeLocaleConfig.lastUpdated
-      }
-      if (typeof this.$site.themeConfig.lastUpdated === 'string') {
-        return this.$site.themeConfig.lastUpdated
-      }
-      return 'Last Updated'
-    },
-
-    editLink () {
-      if (this.$page.frontmatter.editLink === false) {
-        return
-      }
-      const {
-        repo,
-        editLinks,
-        docsDir = '',
-        docsBranch = 'master',
-        docsRepo = repo
-      } = this.$site.themeConfig
-
-      if (docsRepo && editLinks && this.$page.relativePath) {
-        return this.createEditLink(
-          repo,
-          docsRepo,
-          docsDir,
-          docsBranch,
-          this.$page.relativePath
-        )
-      }
-    },
-
-    editLinkText () {
-      return (
-        this.$themeLocaleConfig.editLinkText
-        || this.$site.themeConfig.editLinkText
-        || `Edit this page`
-      )
-    }
-  },
-
-  methods: {
-    createEditLink (repo, docsRepo, docsDir, docsBranch, path) {
-      const bitbucket = /bitbucket.org/
-      if (bitbucket.test(repo)) {
-        const base = outboundRE.test(docsRepo) ? docsRepo : repo
-        return (
-          base.replace(endingSlashRE, '')
-          + `/src`
-          + `/${docsBranch}/`
-          + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
-          + path
-          + `?mode=edit&spa=0&at=${docsBranch}&fileviewer=file-view-default`
-        )
-      }
-
-      const base = outboundRE.test(docsRepo)
-        ? docsRepo
-        : `https://github.com/${docsRepo}`
-      return (
-        base.replace(endingSlashRE, '')
-        + `/edit`
-        + `/${docsBranch}/`
-        + (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '')
-        + path
-      )
-    }
-  }
-}
-</script>
-<style lang="stylus">
-@require '../styles/wrapper.styl';
-
-.page-edit {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-  overflow: auto;
-
-  .edit-link {
-    display: inline-block;
-
-    a {
-      color: lighten($textColor, 25%);
-      margin-right: 0.25rem;
-    }
-  }
-
-  .last-updated {
-    float: right;
-    font-size: 0.9em;
-
-    .prefix {
-      font-weight: 500;
-      color: lighten($textColor, 25%);
-    }
-
-    .time {
-      font-weight: 400;
-      color: #aaa;
-    }
-  }
-}
-
-@media (max-width: $MQMobile) {
-  .page-edit {
-    .edit-link {
-      margin-bottom: 0.5rem;
-    }
-
-    .last-updated {
-      font-size: 0.8em;
-      float: none;
-      text-align: left;
-    }
-  }
-}
-</style>
--- a/packages/docs/.vuepress/theme/components/PageNav.vue
+++ b/packages/docs/.vuepress/theme/components/PageNav.vue
@ -1,120 +0,0 @@
-<template>
-  <div class="page-nav" v-if="prev || next">
-    <p class="inner">
-      <span v-if="prev" class="prev">
-        ←
-        <router-link v-if="prev" class="prev" :to="prev.path">{{ prev.title || prev.path }}</router-link>
-      </span>
-
-      <span v-if="next" class="next">
-        <router-link v-if="next" :to="next.path">{{ next.title || next.path }}</router-link>→
-      </span>
-    </p>
-  </div>
-</template>
-<script>
-import { resolvePage } from '../util'
-import isString from 'lodash/isString'
-import isNil from 'lodash/isNil'
-
-export default {
-  name: 'PageNav',
-  props: ['sidebarItems'],
-  computed: {
-    prev () {
-      return resolvePageLink(LINK_TYPES.PREV, this)
-    },
-
-    next () {
-      return resolvePageLink(LINK_TYPES.NEXT, this)
-    }
-  }
-}
-
-function resolvePrev (page, items) {
-  return find(page, items, -1)
-}
-
-function resolveNext (page, items) {
-  return find(page, items, 1)
-}
-
-const LINK_TYPES = {
-  NEXT: {
-    resolveLink: resolveNext,
-    getThemeLinkConfig: ({ nextLinks }) => nextLinks,
-    getPageLinkConfig: ({ frontmatter }) => frontmatter.next
-  },
-  PREV: {
-    resolveLink: resolvePrev,
-    getThemeLinkConfig: ({ prevLinks }) => prevLinks,
-    getPageLinkConfig: ({ frontmatter }) => frontmatter.prev
-  }
-}
-
-function resolvePageLink (
-  linkType,
-  { $themeConfig, $page, $route, $site, sidebarItems }
-) {
-  const { resolveLink, getThemeLinkConfig, getPageLinkConfig } = linkType
-
-  // Get link config from theme
-  const themeLinkConfig = getThemeLinkConfig($themeConfig)
-
-  // Get link config from current page
-  const pageLinkConfig = getPageLinkConfig($page)
-
-  // Page link config will overwrite global theme link config if defined
-  const link = isNil(pageLinkConfig) ? themeLinkConfig : pageLinkConfig
-
-  if (link === false) {
-    return
-  } else if (isString(link)) {
-    return resolvePage($site.pages, link, $route.path)
-  } else {
-    return resolveLink($page, sidebarItems)
-  }
-}
-
-function find (page, items, offset) {
-  const res = []
-  flatten(items, res)
-  for (let i = 0; i < res.length; i++) {
-    const cur = res[i]
-    if (cur.type === 'page' && cur.path === decodeURIComponent(page.path)) {
-      return res[i + offset]
-    }
-  }
-}
-
-function flatten (items, res) {
-  for (let i = 0, l = items.length; i < l; i++) {
-    if (items[i].type === 'group') {
-      flatten(items[i].children || [], res)
-    } else {
-      res.push(items[i])
-    }
-  }
-}
-</script>
-<style lang="stylus">
-@require '../styles/wrapper.styl';
-
-.page-nav {
-  @extend $wrapper;
-  padding-top: 1rem;
-  padding-bottom: 0;
-
-  .inner {
-    min-height: 2rem;
-    margin-top: 0;
-    border-top: 1px solid $borderColor;
-    padding-top: 1rem;
-    overflow: auto; // clear float
-  }
-
-  .next {
-    float: right;
-  }
-}
-</style>
--- a/packages/docs/.vuepress/theme/components/Sidebar.vue
+++ b/packages/docs/.vuepress/theme/components/Sidebar.vue
@ -1,59 +0,0 @@
-<template>
-  <aside class="sidebar">
-    <NavLinks/>
-    <slot name="top"/>
-    <SidebarLinks :depth="0" :items="items"/>
-    <slot name="bottom"/>
-  </aside>
-</template>
-
-<script>
-import SidebarLinks from '@theme/components/SidebarLinks.vue'
-import NavLinks from '@theme/components/NavLinks.vue'
-
-export default {
-  name: 'Sidebar',
-
-  components: { SidebarLinks, NavLinks },
-
-  props: ['items']
-}
-</script>
-
-<style lang="stylus">
-.sidebar
-  ul
-    padding 0
-    margin 0
-    list-style-type none
-  a
-    display inline-block
-  .nav-links
-    display none
-    border-bottom 1px solid $borderColor
-    padding 0.5rem 0 0.75rem 0
-    a
-      font-weight 600
-    .nav-item, .repo-link
-      display block
-      line-height 1.25rem
-      font-size 1.1em
-      padding 0.5rem 0 0.5rem 1.5rem
-  & > .sidebar-links
-    padding 1.5rem 0
-    & > li > a.sidebar-link
-      font-size 1.1em
-      line-height 1.7
-      font-weight bold
-    & > li:not(:first-child)
-      margin-top .75rem
-
-@media (max-width: $MQMobile)
-  .sidebar
-    .nav-links
-      display block
-      .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active::after
-        top calc(1rem - 2px)
-    & > .sidebar-links
-      padding 1rem 0
-</style>
--- a/packages/docs/.vuepress/theme/components/SidebarButton.vue
+++ b/packages/docs/.vuepress/theme/components/SidebarButton.vue
@ -1,27 +0,0 @@
-<template>
-  <div class="sidebar-button" @click="$emit('toggle-sidebar')">
-    <svg class="icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512">
-      <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z" class=""></path>
-    </svg>
-  </div>
-</template>
-
-<style lang="stylus">
-.sidebar-button
-  cursor pointer
-  display none
-  width 1.25rem
-  height 1.25rem
-  position absolute
-  padding 0.6rem
-  top 0.6rem
-  left 1rem
-  .icon
-    display block
-    width 1.25rem
-    height 1.25rem
-
-@media (max-width: $MQMobile)
-  .sidebar-button
-    display block
-</style>
--- a/packages/docs/.vuepress/theme/components/SidebarGroup.vue
+++ b/packages/docs/.vuepress/theme/components/SidebarGroup.vue
@ -1,129 +0,0 @@
-<template>
-  <section
-    class="sidebar-group"
-    :class="[
-      {
-        collapsable,
-        'is-sub-group': depth !== 0
-      },
-      `depth-${depth}`
-    ]"
-  >
-    <router-link
-      v-if="item.path"
-      class="sidebar-heading clickable"
-      :class="{
-        open,
-        'active': isActive($route, item.path)
-      }"
-      :to="item.path"
-      @click.native="$emit('toggle')"
-    >
-      <span>{{ item.title }}</span>
-      <span
-        class="arrow"
-        v-if="collapsable"
-        :class="open ? 'down' : 'right'">
-      </span>
-    </router-link>
-
-    <p
-      v-else
-      class="sidebar-heading"
-      :class="{ open }"
-      @click="$emit('toggle')"
-    >
-      <span>{{ item.title }}</span>
-      <span
-        class="arrow"
-        v-if="collapsable"
-        :class="open ? 'down' : 'right'">
-      </span>
-    </p>
-
-    <DropdownTransition>
-      <SidebarLinks
-        class="sidebar-group-items"
-        :items="item.children"
-        v-if="open || !collapsable"
-        :sidebarDepth="item.sidebarDepth"
-        :depth="depth + 1"
-      />
-    </DropdownTransition>
-  </section>
-</template>
-
-<script>
-import { isActive } from '../util'
-import DropdownTransition from '@theme/components/DropdownTransition.vue'
-
-export default {
-  name: 'SidebarGroup',
-  props: ['item', 'open', 'collapsable', 'depth'],
-  components: { DropdownTransition },
-  // ref: https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components
-  beforeCreate () {
-    this.$options.components.SidebarLinks = require('./SidebarLinks.vue').default
-  },
-  methods: { isActive }
-}
-</script>
-
-<style lang="stylus">
-.sidebar-group
-  .sidebar-group
-    padding-left 0.5em
-  &:not(.collapsable)
-    .sidebar-heading:not(.clickable)
-      cursor auto
-      color inherit
-  // refine styles of nested sidebar groups
-  &.is-sub-group
-    padding-left 0
-    & > .sidebar-heading
-      font-size 0.95em
-      line-height 1.4
-      font-weight normal
-      padding-left 2rem
-      &:not(.clickable)
-        opacity 0.5
-    & > .sidebar-group-items
-      padding-left 1rem
-      & > li > .sidebar-link
-        font-size: 0.95em;
-        border-left none
-  &.depth-2
-    & > .sidebar-heading
-      border-left none
-
-.sidebar-heading
-  color $textColor
-  transition color .15s ease
-  cursor pointer
-  font-size 1.1em
-  font-weight bold
-  // text-transform uppercase
-  padding 0.35rem 1.5rem 0.35rem 1.25rem
-  width 100%
-  box-sizing border-box
-  margin 0
-  border-left 0.25rem solid transparent
-  &.open, &:hover
-    color inherit
-  .arrow
-    position relative
-    top -0.12em
-    left 0.5em
-  &.clickable
-    &.active
-      font-weight 600
-      color $accentColor
-      border-left-color $accentColor
-    &:hover
-      color $accentColor
-
-.sidebar-group-items
-  transition height .1s ease-out
-  font-size 0.95em
-  overflow hidden
-</style>
--- a/packages/docs/.vuepress/theme/components/SidebarLink.vue
+++ b/packages/docs/.vuepress/theme/components/SidebarLink.vue
@ -1,125 +0,0 @@
-<script>
-import { isActive, hashRE, groupHeaders } from '../util'
-
-export default {
-  functional: true,
-
-  props: ['item', 'sidebarDepth'],
-
-  render (h,
-    {
-      parent: {
-        $page,
-        $site,
-        $route,
-        $themeConfig,
-        $themeLocaleConfig
-      },
-      props: {
-        item,
-        sidebarDepth
-      }
-    }) {
-    // use custom active class matching logic
-    // due to edge case of paths ending with / + hash
-    const selfActive = isActive($route, item.path)
-    // for sidebar: auto pages, a hash link should be active if one of its child
-    // matches
-    const active = item.type === 'auto'
-      ? selfActive || item.children.some(c => isActive($route, item.basePath + '#' + c.slug))
-      : selfActive
-    const link = item.type === 'external'
-      ? renderExternal(h, item.path, item.title || item.path)
-      : renderLink(h, item.path, item.title || item.path, active)
-
-    const maxDepth = [
-      $page.frontmatter.sidebarDepth,
-      sidebarDepth,
-      $themeLocaleConfig.sidebarDepth,
-      $themeConfig.sidebarDepth,
-      1
-    ].find(depth => depth !== undefined)
-
-    const displayAllHeaders = $themeLocaleConfig.displayAllHeaders
-      || $themeConfig.displayAllHeaders
-
-    if (item.type === 'auto') {
-      return [link, renderChildren(h, item.children, item.basePath, $route, maxDepth)]
-    } else if ((active || displayAllHeaders) && item.headers && !hashRE.test(item.path)) {
-      const children = groupHeaders(item.headers)
-      return [link, renderChildren(h, children, item.path, $route, maxDepth)]
-    } else {
-      return link
-    }
-  }
-}
-
-function renderLink (h, to, text, active) {
-  return h('router-link', {
-    props: {
-      to,
-      activeClass: '',
-      exactActiveClass: ''
-    },
-    class: {
-      active,
-      'sidebar-link': true
-    }
-  }, text)
-}
-
-function renderChildren (h, children, path, route, maxDepth, depth = 1) {
-  if (!children || depth > maxDepth) return null
-  return h('ul', { class: 'sidebar-sub-headers' }, children.map(c => {
-    const active = isActive(route, path + '#' + c.slug)
-    return h('li', { class: 'sidebar-sub-header' }, [
-      renderLink(h, path + '#' + c.slug, c.title, active),
-      renderChildren(h, c.children, path, route, maxDepth, depth + 1)
-    ])
-  }))
-}
-
-function renderExternal (h, to, text) {
-  return h('a', {
-    attrs: {
-      href: to,
-      target: '_blank',
-      rel: 'noopener noreferrer'
-    },
-    class: {
-      'sidebar-link': true
-    }
-  }, [text, h('OutboundLink')])
-}
-</script>
-
-<style lang="stylus">
-.sidebar .sidebar-sub-headers
-  padding-left 1rem
-  font-size 0.95em
-
-a.sidebar-link
-  font-size 1em
-  font-weight 400
-  display inline-block
-  color $textColor
-  border-left 0.25rem solid transparent
-  padding 0.35rem 1rem 0.35rem 1.25rem
-  line-height 1.4
-  width: 100%
-  box-sizing: border-box
-  &:hover
-    color $accentColor
-  &.active
-    font-weight 600
-    color $accentColor
-    border-left-color $accentColor
-  .sidebar-group &
-    padding-left 2rem
-  .sidebar-sub-headers &
-    padding-top 0.25rem
-    padding-bottom 0.25rem
-    border-left none
-    &.active
-      font-weight 500
-</style>
--- a/packages/docs/.vuepress/theme/components/SidebarLinks.vue
+++ b/packages/docs/.vuepress/theme/components/SidebarLinks.vue
@ -1,99 +0,0 @@
-<template>
-  <ul
-    class="sidebar-links"
-    v-if="items.length"
-  >
-    <li v-for="(item, i) in items" :key="i">
-      <SidebarGroup
-        v-if="item.type === 'group'"
-        :item="item"
-        :open="i === openGroupIndex"
-        :collapsable="item.collapsable || item.collapsible"
-        :depth="depth"
-        @toggle="toggleGroup(i)"
-      />
-      <SidebarLink
-        v-else
-        :sidebarDepth="sidebarDepth"
-        :item="item"
-      />
-    </li>
-  </ul>
-</template>
-
-<script>
-import SidebarGroup from '@theme/components/SidebarGroup.vue'
-import SidebarLink from '@theme/components/SidebarLink.vue'
-import { isActive } from '../util'
-
-export default {
-  name: 'SidebarLinks',
-
-  components: { SidebarGroup, SidebarLink },
-
-  props: [
-    'items',
-    'depth',  // depth of current sidebar links
-    'sidebarDepth' // depth of headers to be extracted
-  ],
-
-  data () {
-    return {
-      openGroupIndex: 0
-    }
-  },
-
-  created () {
-    this.refreshIndex()
-  },
-
-  watch: {
-    '$route' () {
-      this.refreshIndex()
-    }
-  },
-
-  methods: {
-    refreshIndex () {
-      const index = resolveOpenGroupIndex(
-        this.$route,
-        this.items
-      )
-      if (index > -1) {
-        this.openGroupIndex = index
-      }
-    },
-
-    toggleGroup (index) {
-      this.openGroupIndex = index === this.openGroupIndex ? -1 : index
-    },
-
-    isActive (page) {
-      return isActive(this.$route, page.regularPath)
-    }
-  }
-}
-
-function resolveOpenGroupIndex (route, items) {
-  for (let i = 0; i < items.length; i++) {
-    const item = items[i]
-    if (descendantIsActive(route, item)) {
-      return i
-    }
-  }
-  return -1
-}
-
-function descendantIsActive (route, item) {
-  if (item.type === 'group') {
-    return item.children.some(child => {
-      if (child.type === 'group') {
-        return descendantIsActive(route, child)
-      } else {
-        return child.type === 'page' && isActive(route, child.path)
-      }
-    })
-  }
-  return false
-}
-</script>
--- a/packages/docs/.vuepress/theme/global-components/Badge.vue
+++ b/packages/docs/.vuepress/theme/global-components/Badge.vue
@ -1,44 +0,0 @@
-<script>
-export default {
-  functional: true,
-  props: {
-    type: {
-      type: String,
-      default: 'tip'
-    },
-    text: String,
-    vertical: {
-      type: String,
-      default: 'top'
-    }
-  },
-  render (h, { props, slots }) {
-    return h('span', {
-      class: ['badge', props.type],
-      style: {
-        verticalAlign: props.vertical
-      }
-    }, props.text || slots().default)
-  }
-}
-</script>
-
-<style lang="stylus" scoped>
-.badge
-  display inline-block
-  font-size 14px
-  height 18px
-  line-height 18px
-  border-radius 3px
-  padding 0 6px
-  color white
-  background-color #42b983
-  &.tip, &.green
-    background-color #42b983
-  &.error
-    background-color #DA5961 //#f66
-  &.warning, &.warn, &.yellow
-    background-color darken(#ffe564, 35%)
-  & + &
-    margin-left 5px
-</style>
--- a/packages/docs/.vuepress/theme/index.js
+++ b/packages/docs/.vuepress/theme/index.js
@ -1,43 +0,0 @@
-const path = require('path')
-
-// Theme API.
-module.exports = (options, ctx) => ({
-  alias () {
-    const { themeConfig, siteConfig } = ctx
-    // resolve algolia
-    const isAlgoliaSearch = (
-      themeConfig.algolia
-      || Object.keys(siteConfig.locales && themeConfig.locales || {})
-        .some(base => themeConfig.locales[base].algolia)
-    )
-    return {
-      '@AlgoliaSearchBox': isAlgoliaSearch
-        ? path.resolve(__dirname, 'components/AlgoliaSearchBox.vue')
-        : path.resolve(__dirname, 'noopModule.js')
-    }
-  },
-
-  plugins: [
-    ['@vuepress/active-header-links', options.activeHeaderLinks],
-    '@vuepress/search',
-    '@vuepress/plugin-nprogress',
-    ['container', {
-      type: 'tip',
-      defaultTitle: {
-        '/zh/': '提示'
-      }
-    }],
-    ['container', {
-      type: 'warning',
-      defaultTitle: {
-        '/zh/': '注意'
-      }
-    }],
-    ['container', {
-      type: 'danger',
-      defaultTitle: {
-        '/zh/': '警告'
-      }
-    }]
-  ]
-})
--- a/packages/docs/.vuepress/theme/layouts/404.vue
+++ b/packages/docs/.vuepress/theme/layouts/404.vue
@ -1,26 +0,0 @@
-<template>
-  <div class="theme-container">
-    <div class="theme-default-content">
-      <h1>404</h1>
-      <blockquote>{{ getMsg() }}</blockquote>
-      <router-link to="/">Take me home.</router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-const msgs = [
-  `There's nothing here.`,
-  `How did we get here?`,
-  `That's a Four-Oh-Four.`,
-  `Looks like we've got some broken links.`
-]
-
-export default {
-  methods: {
-    getMsg () {
-      return msgs[Math.floor(Math.random() * msgs.length)]
-    }
-  }
-}
-</script>
--- a/packages/docs/.vuepress/theme/layouts/Layout.vue
+++ b/packages/docs/.vuepress/theme/layouts/Layout.vue
@ -1,163 +0,0 @@
-<template>
-  <div
-    class="theme-container"
-    :class="pageClasses"
-    @touchstart="onTouchStart"
-    @touchend="onTouchEnd"
-  >
-  <!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
-  <script type="text/javascript">
-  (function(f, a, t, h, o, m){
-      a[h]=a[h]||function(){
-          (a[h].q=a[h].q||[]).push(arguments)
-      };
-      o=f.createElement('script'),
-      m=f.getElementsByTagName('script')[0];
-      o.async=1; o.src=t; o.id='fathom-script';
-      m.parentNode.insertBefore(o,m)
-  })(document, window, '//fathom.status.im/tracker.js', 'fathom');
-  fathom('set', 'siteId', 'DNONS');
-  fathom('trackPageview');
-  </script>
-  <!-- / Fathom -->
-    <Navbar
-      v-if="shouldShowNavbar"
-      @toggle-sidebar="toggleSidebar"
-    />
-
-    <div
-      class="sidebar-mask"
-      @click="toggleSidebar(false)"
-    ></div>
-
-    <Sidebar
-      :items="sidebarItems"
-      @toggle-sidebar="toggleSidebar"
-    >
-      <slot
-        name="sidebar-top"
-        slot="top"
-      />
-      <slot
-        name="sidebar-bottom"
-        slot="bottom"
-      />
-    </Sidebar>
-
-    <Home v-if="$page.frontmatter.home"/>
-
-    <Page
-      v-else
-      :sidebar-items="sidebarItems"
-    >
-      <slot
-        name="page-top"
-        slot="top"
-      />
-      <slot
-        name="page-bottom"
-        slot="bottom"
-      />
-    </Page>
-  </div>
-</template>
-
-<script>
-import Home from '@theme/components/Home.vue'
-import Navbar from '@theme/components/Navbar.vue'
-import Page from '@theme/components/Page.vue'
-import Sidebar from '@theme/components/Sidebar.vue'
-import { resolveSidebarItems } from '../util'
-
-export default {
-  components: { Home, Page, Sidebar, Navbar },
-
-  data () {
-    return {
-      isSidebarOpen: false
-    }
-  },
-
-  computed: {
-    shouldShowNavbar () {
-      const { themeConfig } = this.$site
-      const { frontmatter } = this.$page
-      if (
-        frontmatter.navbar === false
-        || themeConfig.navbar === false) {
-        return false
-      }
-      return (
-        this.$title
-        || themeConfig.logo
-        || themeConfig.repo
-        || themeConfig.nav
-        || this.$themeLocaleConfig.nav
-      )
-    },
-
-    shouldShowSidebar () {
-      const { frontmatter } = this.$page
-      return (
-        !frontmatter.home
-        && frontmatter.sidebar !== false
-        && this.sidebarItems.length
-      )
-    },
-
-    sidebarItems () {
-      return resolveSidebarItems(
-        this.$page,
-        this.$page.regularPath,
-        this.$site,
-        this.$localePath
-      )
-    },
-
-    pageClasses () {
-      const userPageClass = this.$page.frontmatter.pageClass
-      return [
-        {
-          'no-navbar': !this.shouldShowNavbar,
-          'sidebar-open': this.isSidebarOpen,
-          'no-sidebar': !this.shouldShowSidebar
-        },
-        userPageClass
-      ]
-    }
-  },
-
-  mounted () {
-    this.$router.afterEach(() => {
-      this.isSidebarOpen = false
-    })
-  },
-
-  methods: {
-    toggleSidebar (to) {
-      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
-      this.$emit('toggle-sidebar', this.isSidebarOpen)
-    },
-
-    // side swipe
-    onTouchStart (e) {
-      this.touchStart = {
-        x: e.changedTouches[0].clientX,
-        y: e.changedTouches[0].clientY
-      }
-    },
-
-    onTouchEnd (e) {
-      const dx = e.changedTouches[0].clientX - this.touchStart.x
-      const dy = e.changedTouches[0].clientY - this.touchStart.y
-      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
-        if (dx > 0 && this.touchStart.x <= 80) {
-          this.toggleSidebar(true)
-        } else {
-          this.toggleSidebar(false)
-        }
-      }
-    }
-  }
-}
-</script>
--- a/packages/docs/.vuepress/theme/noopModule.js
+++ b/packages/docs/.vuepress/theme/noopModule.js
@ -1 +0,0 @@
-export default {}
--- a/packages/docs/.vuepress/theme/styles/arrow.styl
+++ b/packages/docs/.vuepress/theme/styles/arrow.styl
@ -1,22 +0,0 @@
-@require './config'
-
-.arrow
-  display inline-block
-  width 0
-  height 0
-  &.up
-    border-left 4px solid transparent
-    border-right 4px solid transparent
-    border-bottom 6px solid $arrowBgColor
-  &.down
-    border-left 4px solid transparent
-    border-right 4px solid transparent
-    border-top 6px solid $arrowBgColor
-  &.right
-    border-top 4px solid transparent
-    border-bottom 4px solid transparent
-    border-left 6px solid $arrowBgColor
-  &.left
-    border-top 4px solid transparent
-    border-bottom 4px solid transparent
-    border-right 6px solid $arrowBgColor
--- a/packages/docs/.vuepress/theme/styles/code.styl
+++ b/packages/docs/.vuepress/theme/styles/code.styl
@ -1,137 +0,0 @@
-{$contentClass}
-  code
-    color lighten($textColor, 20%)
-    padding 0.25rem 0.5rem
-    margin 0
-    font-size 0.85em
-    background-color rgba(27,31,35,0.05)
-    border-radius 3px
-    .token
-      &.deleted
-        color #EC5975
-      &.inserted
-        color $accentColor
-
-{$contentClass}
-  pre, pre[class*="language-"]
-    line-height 1.4
-    padding 1.25rem 1.5rem
-    margin 0.85rem 0
-    background-color $codeBgColor
-    border-radius 6px
-    overflow auto
-    code
-      color #fff
-      padding 0
-      background-color transparent
-      border-radius 0
-
-div[class*="language-"]
-  position relative
-  background-color $codeBgColor
-  border-radius 6px
-  .highlight-lines
-    user-select none
-    padding-top 1.3rem
-    position absolute
-    top 0
-    left 0
-    width 100%
-    line-height 1.4
-    .highlighted
-      background-color rgba(0, 0, 0, 66%)
-  pre, pre[class*="language-"]
-    background transparent
-    position relative
-    z-index 1
-  &::before
-    position absolute
-    z-index 3
-    top 0.8em
-    right 1em
-    font-size 0.75rem
-    color rgba(255, 255, 255, 0.4)
-  &:not(.line-numbers-mode)
-    .line-numbers-wrapper
-      display none
-  &.line-numbers-mode
-    .highlight-lines .highlighted
-        position relative
-        &:before
-          content ' '
-          position absolute
-          z-index 3
-          left 0
-          top 0
-          display block
-          width $lineNumbersWrapperWidth
-          height 100%
-          background-color rgba(0, 0, 0, 66%)
-    pre
-      padding-left $lineNumbersWrapperWidth + 1 rem
-      vertical-align middle
-    .line-numbers-wrapper
-      position absolute
-      top 0
-      width $lineNumbersWrapperWidth
-      text-align center
-      color rgba(255, 255, 255, 0.3)
-      padding 1.25rem 0
-      line-height 1.4
-      br
-        user-select none
-      .line-number
-        position relative
-        z-index 4
-        user-select none
-        font-size 0.85em
-    &::after
-      content ''
-      position absolute
-      z-index 2
-      top 0
-      left 0
-      width $lineNumbersWrapperWidth
-      height 100%
-      border-radius 6px 0 0 6px
-      border-right 1px solid rgba(0, 0, 0, 66%)
-      background-color $codeBgColor
-
-
-for lang in $codeLang
-  div{'[class~="language-' + lang + '"]'}
-    &:before
-      content ('' + lang)
-
-div[class~="language-javascript"]
-  &:before
-    content "js"
-
-div[class~="language-typescript"]
-  &:before
-    content "ts"
-
-div[class~="language-markup"]
-  &:before
-    content "html"
-
-div[class~="language-markdown"]
-  &:before
-    content "md"
-
-div[class~="language-json"]:before
-  content "json"
-
-div[class~="language-ruby"]:before
-  content "rb"
-
-div[class~="language-python"]:before
-  content "py"
-
-div[class~="language-bash"]:before
-  content "sh"
-
-div[class~="language-php"]:before
-  content "php"
-
-@import '~prismjs/themes/prism-tomorrow.css'
--- a/packages/docs/.vuepress/theme/styles/config.styl
+++ b/packages/docs/.vuepress/theme/styles/config.styl
@ -1 +0,0 @@
-$contentClass = '.theme-default-content'
--- a/packages/docs/.vuepress/theme/styles/custom-blocks.styl
+++ b/packages/docs/.vuepress/theme/styles/custom-blocks.styl
@ -1,30 +0,0 @@
-.custom-block
-  .custom-block-title
-    font-weight 600
-    margin-bottom -0.4rem
-  &.tip, &.warning, &.danger
-    padding .1rem 1.5rem
-    border-left-width .5rem
-    border-left-style solid
-    margin 1rem 0
-  &.tip
-    background-color #f3f5f7
-    border-color #42b983
-  &.warning
-    background-color rgba(255,229,100,.3)
-    border-color darken(#ffe564, 35%)
-    color darken(#ffe564, 70%)
-    .custom-block-title
-      color darken(#ffe564, 50%)
-    a
-      color $textColor
-  &.danger
-    background-color #ffe6e6
-    border-color darken(red, 20%)
-    color darken(red, 70%)
-    .custom-block-title
-      color darken(red, 40%)
-    a
-      color $textColor
-
-
--- a/packages/docs/.vuepress/theme/styles/index.styl
+++ b/packages/docs/.vuepress/theme/styles/index.styl
@ -1,201 +0,0 @@
-@require './config'
-@require './code'
-@require './custom-blocks'
-@require './arrow'
-@require './wrapper'
-@require './toc'
-
-html, body
-  padding 0
-  margin 0
-  background-color #fff
-
-body
-  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
-  -webkit-font-smoothing antialiased
-  -moz-osx-font-smoothing grayscale
-  font-size 16px
-  color $textColor
-
-.page
-  padding-left $sidebarWidth
-
-.navbar
-  position fixed
-  z-index 20
-  top 0
-  left 0
-  right 0
-  height $navbarHeight
-  background-color #fff
-  box-sizing border-box
-  border-bottom 1px solid $borderColor
-
-.sidebar-mask
-  position fixed
-  z-index 9
-  top 0
-  left 0
-  width 100vw
-  height 100vh
-  display none
-
-.sidebar
-  font-size 16px
-  background-color #fff
-  width $sidebarWidth
-  position fixed
-  z-index 10
-  margin 0
-  top $navbarHeight
-  left 0
-  bottom 0
-  box-sizing border-box
-  border-right 1px solid $borderColor
-  overflow-y auto
-
-{$contentClass}:not(.custom)
-  @extend $wrapper
-  > *:first-child
-    margin-top $navbarHeight
-
-  a:hover
-    text-decoration underline
-
-  p.demo
-    padding 1rem 1.5rem
-    border 1px solid #ddd
-    border-radius 4px
-
-  img
-    max-width 100%
-
-{$contentClass}.custom
-  padding 0
-  margin 0
-
-  img
-    max-width 100%
-
-a
-  font-weight 500
-  color $accentColor
-  text-decoration none
-
-p a code
-  font-weight 400
-  color $accentColor
-
-kbd
-  background #eee
-  border solid 0.15rem #ddd
-  border-bottom solid 0.25rem #ddd
-  border-radius 0.15rem
-  padding 0 0.15em
-
-blockquote
-  font-size 1rem
-  color #999;
-  border-left .2rem solid #dfe2e5
-  margin 1rem 0
-  padding .25rem 0 .25rem 1rem
-
-  & > p
-    margin 0
-
-ul, ol
-  padding-left 1.2em
-
-strong
-  font-weight 600
-
-h1, h2, h3, h4, h5, h6
-  font-weight 600
-  line-height 1.25
-
-  {$contentClass}:not(.custom) > &
-    margin-top (0.5rem - $navbarHeight)
-    padding-top ($navbarHeight + 1rem)
-    margin-bottom 0
-
-    &:first-child
-      margin-top -1.5rem
-      margin-bottom 1rem
-
-      + p, + pre, + .custom-block
-        margin-top 2rem
-
-  &:hover .header-anchor
-    opacity: 1
-
-h1
-  font-size 2.2rem
-
-h2
-  font-size 1.65rem
-  padding-bottom .3rem
-  border-bottom 1px solid $borderColor
-
-h3
-  font-size 1.35rem
-
-a.header-anchor
-  font-size 0.85em
-  float left
-  margin-left -0.87em
-  padding-right 0.23em
-  margin-top 0.125em
-  opacity 0
-
-  &:hover
-    text-decoration none
-
-code, kbd, .line-number
-  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace
-
-p, ul, ol
-  line-height 1.7
-
-hr
-  border 0
-  border-top 1px solid $borderColor
-
-table
-  border-collapse collapse
-  margin 1rem 0
-  display: block
-  overflow-x: auto
-
-tr
-  border-top 1px solid #dfe2e5
-
-  &:nth-child(2n)
-    background-color #f6f8fa
-
-th, td
-  border 1px solid #dfe2e5
-  padding .6em 1em
-
-.theme-container
-  &.sidebar-open
-    .sidebar-mask
-      display: block
-
-  &.no-navbar
-    {$contentClass}:not(.custom) > h1, h2, h3, h4, h5, h6
-      margin-top 1.5rem
-      padding-top 0
-
-    .sidebar
-      top 0
-
-
-@media (min-width: ($MQMobile + 1px))
-  .theme-container.no-sidebar
-    .sidebar
-      display none
-
-    .page
-      padding-left 0
-
-@require 'mobile.styl'
--- a/packages/docs/.vuepress/theme/styles/mobile.styl
+++ b/packages/docs/.vuepress/theme/styles/mobile.styl
@ -1,37 +0,0 @@
-@require './config'
-
-$mobileSidebarWidth = $sidebarWidth * 0.82
-
-// narrow desktop / iPad
-@media (max-width: $MQNarrow)
-  .sidebar
-    font-size 15px
-    width $mobileSidebarWidth
-  .page
-    padding-left $mobileSidebarWidth
-
-// wide mobile
-@media (max-width: $MQMobile)
-  .sidebar
-    top 0
-    padding-top $navbarHeight
-    transform translateX(-100%)
-    transition transform .2s ease
-  .page
-    padding-left 0
-  .theme-container
-    &.sidebar-open
-      .sidebar
-        transform translateX(0)
-    &.no-navbar
-      .sidebar
-        padding-top: 0
-
-// narrow mobile
-@media (max-width: $MQMobileNarrow)
-  h1
-    font-size 1.9rem
-  {$contentClass}
-    div[class*="language-"]
-      margin 0.85rem -1.5rem
-      border-radius 0
--- a/packages/docs/.vuepress/theme/styles/toc.styl
+++ b/packages/docs/.vuepress/theme/styles/toc.styl
@ -1,3 +0,0 @@
-.table-of-contents
-  .badge
-    vertical-align middle
--- a/packages/docs/.vuepress/theme/styles/wrapper.styl
+++ b/packages/docs/.vuepress/theme/styles/wrapper.styl
@ -1,9 +0,0 @@
-$wrapper
-  max-width $contentWidth
-  margin 0 auto
-  padding 2rem 2.5rem
-  @media (max-width: $MQNarrow)
-    padding 2rem
-  @media (max-width: $MQMobileNarrow)
-    padding 1.5rem
-
--- a/packages/docs/.vuepress/theme/util/index.js
+++ b/packages/docs/.vuepress/theme/util/index.js
@ -1,245 +0,0 @@
-export const hashRE = /#.*$/
-export const extRE = /\.(md|html)$/
-export const endingSlashRE = /\/$/
-export const outboundRE = /^[a-z]+:/i
-
-export function normalize (path) {
-  return decodeURI(path)
-    .replace(hashRE, '')
-    .replace(extRE, '')
-}
-
-export function getHash (path) {
-  const match = path.match(hashRE)
-  if (match) {
-    return match[0]
-  }
-}
-
-export function isExternal (path) {
-  return outboundRE.test(path)
-}
-
-export function isMailto (path) {
-  return /^mailto:/.test(path)
-}
-
-export function isTel (path) {
-  return /^tel:/.test(path)
-}
-
-export function ensureExt (path) {
-  if (isExternal(path)) {
-    return path
-  }
-  const hashMatch = path.match(hashRE)
-  const hash = hashMatch ? hashMatch[0] : ''
-  const normalized = normalize(path)
-
-  if (endingSlashRE.test(normalized)) {
-    return path
-  }
-  return normalized + '.html' + hash
-}
-
-export function isActive (route, path) {
-  const routeHash = route.hash
-  const linkHash = getHash(path)
-  if (linkHash && routeHash !== linkHash) {
-    return false
-  }
-  const routePath = normalize(route.path)
-  const pagePath = normalize(path)
-  return routePath === pagePath
-}
-
-export function resolvePage (pages, rawPath, base) {
-  if (isExternal(rawPath)) {
-    return {
-      type: 'external',
-      path: rawPath
-    }
-  }
-  if (base) {
-    rawPath = resolvePath(rawPath, base)
-  }
-  const path = normalize(rawPath)
-  for (let i = 0; i < pages.length; i++) {
-    if (normalize(pages[i].regularPath) === path) {
-      return Object.assign({}, pages[i], {
-        type: 'page',
-        path: ensureExt(pages[i].path)
-      })
-    }
-  }
-  console.error(`[vuepress] No matching page found for sidebar item "${rawPath}"`)
-  return {}
-}
-
-function resolvePath (relative, base, append) {
-  const firstChar = relative.charAt(0)
-  if (firstChar === '/') {
-    return relative
-  }
-
-  if (firstChar === '?' || firstChar === '#') {
-    return base + relative
-  }
-
-  const stack = base.split('/')
-
-  // remove trailing segment if:
-  // - not appending
-  // - appending to trailing slash (last segment is empty)
-  if (!append || !stack[stack.length - 1]) {
-    stack.pop()
-  }
-
-  // resolve relative path
-  const segments = relative.replace(/^\//, '').split('/')
-  for (let i = 0; i < segments.length; i++) {
-    const segment = segments[i]
-    if (segment === '..') {
-      stack.pop()
-    } else if (segment !== '.') {
-      stack.push(segment)
-    }
-  }
-
-  // ensure leading slash
-  if (stack[0] !== '') {
-    stack.unshift('')
-  }
-
-  return stack.join('/')
-}
-
-/**
- * @param { Page } page
- * @param { string } regularPath
- * @param { SiteData } site
- * @param { string } localePath
- * @returns { SidebarGroup }
- */
-export function resolveSidebarItems (page, regularPath, site, localePath) {
-  const { pages, themeConfig } = site
-
-  const localeConfig = localePath && themeConfig.locales
-    ? themeConfig.locales[localePath] || themeConfig
-    : themeConfig
-
-  const pageSidebarConfig = page.frontmatter.sidebar || localeConfig.sidebar || themeConfig.sidebar
-  if (pageSidebarConfig === 'auto') {
-    return resolveHeaders(page)
-  }
-
-  const sidebarConfig = localeConfig.sidebar || themeConfig.sidebar
-  if (!sidebarConfig) {
-    return []
-  } else {
-    const { base, config } = resolveMatchingConfig(regularPath, sidebarConfig)
-    return config
-      ? config.map(item => resolveItem(item, pages, base))
-      : []
-  }
-}
-
-/**
- * @param { Page } page
- * @returns { SidebarGroup }
- */
-function resolveHeaders (page) {
-  const headers = groupHeaders(page.headers || [])
-  return [{
-    type: 'group',
-    collapsable: false,
-    title: page.title,
-    path: null,
-    children: headers.map(h => ({
-      type: 'auto',
-      title: h.title,
-      basePath: page.path,
-      path: page.path + '#' + h.slug,
-      children: h.children || []
-    }))
-  }]
-}
-
-export function groupHeaders (headers) {
-  // group h3s under h2
-  headers = headers.map(h => Object.assign({}, h))
-  let lastH2
-  headers.forEach(h => {
-    if (h.level === 2) {
-      lastH2 = h
-    } else if (lastH2) {
-      (lastH2.children || (lastH2.children = [])).push(h)
-    }
-  })
-  return headers.filter(h => h.level === 2)
-}
-
-export function resolveNavLinkItem (linkItem) {
-  return Object.assign(linkItem, {
-    type: linkItem.items && linkItem.items.length ? 'links' : 'link'
-  })
-}
-
-/**
- * @param { Route } route
- * @param { Array<string|string[]> | Array<SidebarGroup> | [link: string]: SidebarConfig } config
- * @returns { base: string, config: SidebarConfig }
- */
-export function resolveMatchingConfig (regularPath, config) {
-  if (Array.isArray(config)) {
-    return {
-      base: '/',
-      config: config
-    }
-  }
-  for (const base in config) {
-    if (ensureEndingSlash(regularPath).indexOf(encodeURI(base)) === 0) {
-      return {
-        base,
-        config: config[base]
-      }
-    }
-  }
-  return {}
-}
-
-function ensureEndingSlash (path) {
-  return /(\.html|\/)$/.test(path)
-    ? path
-    : path + '/'
-}
-
-function resolveItem (item, pages, base, groupDepth = 1) {
-  if (typeof item === 'string') {
-    return resolvePage(pages, item, base)
-  } else if (Array.isArray(item)) {
-    return Object.assign(resolvePage(pages, item[0], base), {
-      title: item[1]
-    })
-  } else {
-    if (groupDepth > 3) {
-      console.error(
-        '[vuepress] detected a too deep nested sidebar group.'
-      )
-    }
-    const children = item.children || []
-    if (children.length === 0 && item.path) {
-      return Object.assign(resolvePage(pages, item.path, base), {
-        title: item.title
-      })
-    }
-    return {
-      type: 'group',
-      path: item.path,
-      title: item.title,
-      sidebarDepth: item.sidebarDepth,
-      children: children.map(child => resolveItem(child, pages, base, groupDepth + 1)),
-      collapsable: item.collapsable !== false
-    }
-  }
-}
--- a/packages/docs/CNAME
+++ b/packages/docs/CNAME
--- a/packages/docs/README.md
+++ b/packages/docs/README.md
--- a/packages/docs/_config.yml
+++ b/packages/docs/_config.yml
@ -15,7 +15,7 @@ permalink_defaults:
  lang: en
 i18n_dir: :lang

-source_dir: source/packages/docs
+source_dir: src

 # URL
 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
@ -41,8 +41,7 @@ highlight:

 autoprefixer:
  enable: true
-  browsers:
-    - 'last 2 versions'
+  
 node_sass:
  outputStyle: nested
  precision: 5
--- a/packages/docs/api.md
+++ b/packages/docs/api.md
@ -1,154 +0,0 @@
-# API
-
-## General
-
-### `new Subspace(web3 [, options])`
-Constructor. 
-
-**Parameters**
-1. `web3` - `Object`: a `web3.js` object.
-2. `options` - `Object` (optional): Options used to initialize Subspace
-	- `dbFilename` - `String` (optional): Name of the database where the information will be stored (default `'subspace.db'`)
- `callInterval` - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It's only used with HttpProviders (default: `undefined`. Obtains data every block using the average block time as an interval).
-    - `refreshLastNBlocks` - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),
-    - `disableSubscriptions` - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: undefined)
-
-
-### `init()`
-Initializes **Subspace**
-
-**Returns**
-`Promise` that once it's resolved, will mean that **Subspace** is available to use
-
-### `close()`
-Dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by **Subspace** during its normal execution.
-
-### `contract(instance|{abi,address})`
-Adds a `track` method to the web3 contract objects. You can obtain this functionality by passing a `web3.eth.Contract` instance, or the `abi` and `address` of your contract
-
-**Returns**
-`web3.eth.Contract` object enhanced with `.track()` functions for methods and events.
-
-## Contract methods
-
-### `myContract.events.MyEvent.track([options])`
-Track a contract event.
-
-**Parameters**
-1. `options` - `Object` (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
-    - `filter` - `Object` (optional): Lets you filter events by indexed parameters, e.g. `{filter: {myNumber: [12,13]}}` means all events where `"myNumber"` is `12` or `13`.
-    - `fromBlock` - `Number` (optional): The block number from which to get events on.
-    - `toBlock` - `Number` (optional): The block number to get events up to (Defaults to `"latest"`)
-    - `topics` - `Array` (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (`topic[0]`) will not be set automatically.
-
-**Returns**
-`RxJS Observable` which will stream the event `returnValues`.
-
-
-### `myContract.methods.myMethod([param1[, ...]]).track([callOptions])`
-Track a constant function / contract state variable on each block mined, or depending on the `callInterval` option used during **Subspace** initialization.
-
-**Parameters**
-1. `callOptions` - `Object` (optional): The options used for calling.
-    - `from` - `String` (optional): The address the call “transaction” should be made from.
-    - `gasPrice` - `String` (optional): The gas price in wei to use for this call “transaction”.
-    - `gas` - `Number` (optional): The maximum gas provided for this call “transaction” (gas limit).
-
-**Returns**
-`RxJS Observable` which will stream the function / variable values. Data type will depend on the contract function invoked. 
-
-
-### `myContract.trackBalance(address [, tokenAddress])`
-Track a contract's balance changes for an address on each block mined, or depending on the `callInterval` option used during **Subspace** initialization.
-
-**Parameters**
-1. `address` - `String`: The address to get the balance of.
-2. `tokenAddress` - `String` (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.
-
-**Returns**
-`RxJS Observable` which will stream a string containing the address balance.
-
-
-## Blocks, gas price and block time
-
-### `trackBlock()`
-Receive the block information for any new block. It's the reactive equivalent to `web3.eth.getBlock("latest")`.
-
-**Returns**
-`RxJS Observable` which will stream a block object for the latest block received
-
-### `trackBlockNumber()`
-Returns the latest block number. It's the reactive equivalent to `web3.eth.getBlockNumber`.
-
-**Returns**
-`RxJS Observable` with the latest block number
-
-### `trackGasPrice()`
-Returns the current gas price oracle. It's the reactive equivalent to `web3.eth.getGasPrice`.
-
-**Returns**
-`RxJS Observable` with the average gas price in wei.
-
-### `trackAverageBlocktime()`
-Average block time of the last 10 blocks.
-
-**Returns**
-`RxJS Observable` with the moving average block time of the last 10 blocks. The time is returned in milliseconds:
-
-
-## Low level API for data tracking
-
-These are used in case you don't want to decorate your web3 contract objects, or if you want to track the balance for an specific address.
-
-### `trackEvent(contractObject, eventName [, options])`
-Track a contract event.
-
-**Parameters**
-1. `contractObject` - `web3.eth.Contract`: An already initialized contract object pointing to an address and containing a valid ABI.
-2. `eventName` - `String`: The name of the event to subscribe.
-3. `options` - `Object` (optional): web3 filter options object to limit the number of events based on a block number range, or indexed filters
-    - `filter` - `Object` (optional): Lets you filter events by indexed parameters, e.g. `{filter: {myNumber: [12,13]}}` means all events where `"myNumber"` is `12` or `13`.
-    - `fromBlock` - `Number` (optional): The block number from which to get events on.
-    - `toBlock` - `Number` (optional): The block number to get events up to (Defaults to `"latest"`)
-    - `topics` - `Array` (optional): This allows you to manually set the topics for the event filter. If given the filter property and event signature, (`topic[0]`) will not be set automatically.
-
-**Returns**
-`RxJS Observable` which will stream the event `returnValues`.
-
-### `trackProperty(contractObject, functionName [, functionArgs] [, callOptions])`
-Track a constant function / contract state variable on each block mined, or depending on the `callInterval` option used during **Subspace** initialization.
-
-**Parameters**
-1. `contractObject` - `web3.eth.Contract`: An already initialized contract object pointing to an address and containing a valid ABI.
-2. `functionName` - `String`: Name of the function or variable whose values will be tracked.
-3. `functionArgs` - `Array` (optional): Array of arguments that the tracked function receives
-4. `callOptions` - `Object` (optional): The options used for calling.
-    - `from` - `String` (optional): The address the call “transaction” should be made from.
-    - `gasPrice` - `String` (optional): The gas price in wei to use for this call “transaction”.
-    - `gas` - `Number` (optional): The maximum gas provided for this call “transaction” (gas limit).
-
-**Returns**
-`RxJS Observable` which will stream the function / variable values. Data type will depend on the contract function invoked. 
-
-### `trackBalance(address [, tokenAddress])`
-Track balance changes for an address on each block mined, or depending on the `callInterval` option used during **Subspace** initialization.
-
-**Parameters**
-1. `address` - `String`: The address to get the balance of.
-2. `tokenAddress` - `String` (optional): If you want to track the balance for an ERC20 contract, here you can specify the token address. Otherwise, Only ETH balances will be returned.
-
-**Returns**
-`RxJS Observable` which will stream a string containing the address balance.
-
-### `trackLogs(options [, abi])`
-Tracks incoming logs, filtered by the given options.
-
-**Parameters**
-1. `options` - `Object` (optional): web3 filter options object to limit the number of logs
-    - `address` - `String|Array` (optional): An address or a list of addresses to only get logs from particular account(s).
-    - `fromBlock` - `Number` (optional): The block number from which to get events on.
-    - `topics` - `Array` (optional): An array of values which must each appear in the log entries. The order is important, if you want to leave topics out use null, e.g. [null, '0x00...']. You can also pass another array for each topic with options for that topic e.g. [null, ['option1', 'option2']].
-2. `abi` - `Array` (optional): Array containing the ABI for the inputs of the logs received. It will automatically decode the logs using this ABI instead of returning the hexadecimal data.
-
-**Returns**
-`RxJS Observable` which will stream the logs. If the inputs ABI is included in the call, the logs will be automatically decoded.
--- a/packages/docs/apollo-client.md
+++ b/packages/docs/apollo-client.md
@ -1,60 +0,0 @@
-# apollo-client
-To use **Subspace** with `apollo-client`, a `ReactiveSchemaLink` from `apollo-link-reactive-schema` must be used with a custom schema.
-
-```js
-import {InMemoryCache} from "apollo-cache-inmemory";
-import ApolloClient from "apollo-client";
-import {ReactiveSchemaLink} from "apollo-link-reactive-schema";
-
-const schema = makeExecutableSchema({typeDefs, resolvers});
-const client = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: new ReactiveSchemaLink({schema)})
-});
-
-```
-
-### Example
-
-```js{35-45}
-import { ApolloClient } from "apollo-client";
-import { InMemoryCache } from "apollo-cache-inmemory";
-import {ReactiveSchemaLink} from "apollo-link-reactive-schema";
-import Subspace from "@embarklabs/subspace";
-
-// ...
-
-// Initialize Subspace
-const subspace = new Subspace(web3);
-await subspace.init();
-
-const MyContractInstance = ...; // TODO: obtain a web3.eth.Contract instance
-
-const typeDefs = `
-  type MyEvent {
-    someValue: Int
-    anotherValue: String
-  }
-  type Query {
-    myEvents: MyEvent!
-  }
-`;
-
-const resolvers = {
-  Query: {
-    myEvents: () => subspace.trackEvent(MyContractInstance, 'MyEvent', {filter: {}, fromBlock: 1})
-  }
-};
-
-const schema = makeExecutableSchema({ typeDefs, resolvers });
-
-const client = new ApolloClient({
-  cache: new InMemoryCache(),
-  link: new ReactiveSchemaLink({schema)})
-});
-```
-
-
-::: tip Using react-apollo
-A practical example can also be found in `examples/react-apollo`.
-:::
--- a/packages/docs/db.json
+++ b/packages/docs/db.json
--- a/packages/docs/getting-started.md
+++ b/packages/docs/getting-started.md
@ -1,217 +0,0 @@
-# Getting Started
-
-## Installation
-**Subspace** can be used in browser, node and native script environments. To get started install the package `@embarklabs/subspace` using `npm` or `yarn` by executing this command in your project directory:
-```bash
-# Using npm
-npm install --save @embarklabs/subspace
-
-# Using yarn
-yarn add @embarklabs/subspace 
-```
-
-## Importing the library
-
-```js
-// ESM (might require babel / browserify)
-import Subspace from '@embarklabs/subspace';  
-
-// CommonJS
-const Subspace = require('@embarklabs/subspace'); 
-```
-
-
-## Connecting to a web3 provider
-To interact with the EVM, **Subspace** requires a valid Web3 object, connected to a provider
-
-```js
-const subspace = new Subspace(web3);
-await subspace.init();
-```
-
-In addition to the provider, `Subspace` also accepts an `options` object with settings that can change its behavior:
- `dbFilename` - Name of the database where the information will be stored (default `'subspace.db'`)
- `callInterval` - Interval of time in milliseconds to query a contract/address to determine changes in state or balance. It's only used with HttpProviders (default: `undefined`. Obtains data every block using the average block time as an interval).
- `refreshLastNBlocks` - Ignores last N blocks (from current block), stored in the local db and refresh them via a web3 subscription. Useful for possible reorgs (default: 12),
- `disableSubscriptions` - Subspace by default will attempt to use websocket subscriptions if the current provider supports them, otherwise it will use polling because it asumes the provider is an HttpProvider. This functionality can be disabled by passing true to this option. (default: `undefined`)
-
-
-## Enhancing your contract objects
-Subspace provides a method to enhance your web3 Contract objects: `subspace.contract(instance|{abi,address})`. Calling this method will return a new contract object decorated with a `.track()` method for your contract view functions and events.
-
-```js
-const myRxContract = subspace.contract(myContractInstance);
-```
-
-You can also instantiate a contract directly by passing the contract ABI and its address:
-
-```js
-const myRXContract = subspace.contract({abi: ...., address: '0x1234...CDEF'})
-```
-
-## Reacting to data
-Once it's initialized, you can use **Subspace**'s methods to track the contract state, events and balances. These functions return RxJS Observables which you can subscribe to, and obtain and transform the observed data via operators.
-
-::: tip What is an Observable?
-The `Observable` type can be used to model push-based data sources such as DOM events, timer intervals, and sockets. In addition, observables are:
- Compositional: Observables can be composed with higher-order combinators.
- Lazy: Observables do not start emitting data until an observer has subscribed.
-:::
-
-#### Further read
- [RxJS Observables](https://rxjs-dev.firebaseapp.com/guide/observable)
-
-## Tracking state
-You can track changes to a contract state variable, by specifying the view function and arguments to call and query the contract. 
-```js
-const stateObservable$ = Contract.methods.functionName(functionArgs).track();
-```
-
-::: tip Tracking the public variables of a contract
-State variables implicity create a `view` function when they're defined as `public`. The `functionName` would be the same as the variable name, and `functionArgs` will have a value when the type is a `mapping` or `array` (since these require an index value to query them).
-:::
-
-Example:
-
-```js
-const productTitle$ = ProductList.methods.products(0).track().map("title");
-productTitle$.subscribe((title) => console.log("product title is " + title));
-
-
-// Alternative using Subspace low level API
-const producTitle$ = subspace.trackProperty(ProductList, "products", [0], {from: web3.eth.defaultAccount});
-...
-```
-
-The subscription will be triggered whenever the title changes
-
-## Tracking events
-You can track events and react to their returned values.
-```js
-const eventObservable$ = Contract.event.eventName.track();
-```
-
-Example:
-
-```js
-const rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));
-rating$.subscribe((rating) => console.log("rating received: " + rating));
-
-
-// Alternative using Subspace low level API
-const rating$ = subspace.trackEvent(Product, "Rating", {fromBlock: 0});
-...
-```
-
-**Event Sourcing**
-
-You can easily do event sourcing with subspace.
-
-For e.g: if you needed to get the average rating of the last 5 events:
-
-```js
-import { $average, $latest } from "@embarklabs/subspace";
-
-const rating$ = Product.events.Rating.track().map("rating")).pipe(map(x => parseInt(x)));
-
-rating$.pipe($latest(5), $average()).subscribe((rating) => {
-  console.log("average rating of the last 5 events is " + rating)
-});
-```
-
-## Tracking balances
-You can also track changes in both ETH and ERC20 token balances for each mined block or time interval depending on the `callInterval` configured. 
-
-Tracking ETH balance in an address:
-
-```js
-const address = "0x0001020304050607080900010203040506070809";
-
-subspace.trackBalance(address).subscribe((balance) => {
-  console.log("ETH balance is ", balance)
-});
-```
-
-Tracking ETH balance in a Contract:
-
-```js
-Contract.trackBalance().subscribe((balance) => {
-  console.log("ETH balance is ", balance)
-});
-```
-
-Tracking an ERC20 balance in a Contract:
-
-```js
-const tokenAddress = "0x744d70fdbe2ba4cf95131626614a1763df805b9e"; // SNT Address
-
-const myBalanceObservable$ = Contract.trackBalance(tokenAddress);
-```
-
-::: warning 
-Balances are returned as a string containing the value in *wei*.
-:::
-
-
-
-## Getting block data, gas prices and block time
-Subspace also provides a way to always receive the latest block object: 
-```js
-subspace.trackBlock().subscribe(block => {
-  console.log("The latest block data: ", block);
-});
-```
-
-If you don't need all the block information, but just the block number, you can use instead:
-```js
-subspace.trackBlockNumber().subscribe(blockNumber => {
-  console.log("The latest block number: ", blockNumber);
-});
-```
-
-You can also access the average block time. This takes in account only the last 10 blocks:
-
-```js
-subspace.trackAverageBlocktime().subscribe(blocktimeMS => {
-  console.log("The average block time in milliseconds is: ", blocktimeMS);
-});
-```
-
-Finally, if you want to obtain the most up to date median gas price:
-
-```js
-subspace.trackGasPrice().subscribe(gasPrice => {
-  console.log("Gas price in wei", gasPrice);
-});
-```
-
-
-## Subscriptions
-Once you have an `Observable`, you may receive a stream of data by creating a subscription. Subscriptions are triggered each time an observable emits a new value. These subscription receive a callback that must have a parameter which represents the value received from the observable (a contract state variable, an event, or the balance of an address);  and they return an object representing the subscription.
-
-Subscriptions can be disposed by executing the method `unsubscribe()` liberating the resource held by it:
-
-```js
-const myBalanceObservable$ = subspace.trackBalance(address, tokenAddress);
-const subscription = myBalanceObservable$.subscribe(value => { 
-  console.log("The balance is: ", value); 
-});
-
-// ...
-
-subscription.unsubscribe();
-```
-
-#### Further read
- [RxJS Subscriptions](https://rxjs-dev.firebaseapp.com/guide/subscription)
-
-## Cleanup
-If **Subspace** is not needed anymore, you need can invoke `close()` to dispose and perform the cleanup necessary to remove the internal subscriptions and interval timers created by **Subspace** during its normal execution, thus avoiding any potential memory leak.
-
-```
-subspace.close();
-```
-::: warning What about subscriptions created with our observables?
-`close()` will dispose any web3 subscription created when using a Subspace tracking method, however any subscription to an observable must still be unsubscribed manually. The npm package `subsink` can be used to clear all the observables' subscriptions at once.
-:::
-
--- a/packages/docs/package.json
+++ b/packages/docs/package.json
@ -1,15 +1,8 @@
 {
-  "name": "@embarklabs/subspace-docs",
+  "name": "subspace-docs",
  "version": "0.0.1",
  "description": "Subspace Website",
  "main": "index.js",
-  "scripts": {
-    "clean": "rimraf .vuepress/dist",
-    "build": "vuepress build",
-    "push-dir": "push-dir --dir=.vuepress/dist --branch=gh-pages",
-    "publish": "npm-run-all clean build push-dir",
-    "start": "vuepress dev"
-  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/embarklabs/subspace-docs.git"
@ -31,9 +24,29 @@
      "homepage": "https://github.com/richard-ramos"
    }
  ],
-  "homepage": "https://github.com/embarklabs/subspace",
-  "devDependencies": {
-    "push-dir": "^0.4.1",
-    "vuepress": "^1.0.3"
+  "homepage": "https://github.com/embarklabs/subspace-docs#readme",
+  "scripts": {
+    "build": "hexo generate",
+    "clean": "hexo clean",
+    "deploy": "hexo deploy",
+    "server": "hexo server"
+  },
+  "hexo": {
+    "version": "4.2.0"
+  },
+  "dependencies": {
+    "hexo": "^4.0.0",
+    "hexo-autoprefixer": "^2.0.0",
+    "hexo-generator-archive": "^1.0.0",
+    "hexo-generator-category": "^1.0.0",
+    "hexo-generator-i18n": "^0.0.7",
+    "hexo-generator-index": "^1.0.0",
+    "hexo-generator-tag": "^1.0.0",
+    "hexo-prism-plus": "^1.1.0",
+    "hexo-renderer-ejs": "^1.0.0",
+    "hexo-renderer-marked": "^2.0.0",
+    "hexo-renderer-sass": "^0.4.0",
+    "hexo-renderer-stylus": "^1.1.0",
+    "hexo-server": "^1.0.0"
  }
 }
--- a/packages/docs/.vuepress/public/CNAME
+++ b/packages/docs/.vuepress/public/CNAME
--- a/packages/docs/public/api.html
+++ b/packages/docs/public/api.html
--- a/packages/docs/public/apollo-client.html
+++ b/packages/docs/public/apollo-client.html
--- a/packages/docs/public/css/application.css
+++ b/packages/docs/public/css/application.css
--- a/packages/docs/public/css/utilities/text-color.css
+++ b/packages/docs/public/css/utilities/text-color.css
--- a/packages/docs/public/css/utilities/text-size.css
+++ b/packages/docs/public/css/utilities/text-size.css
--- a/packages/docs/public/d1.png
+++ b/packages/docs/public/d1.png
--- a/packages/docs/public/d2.png
+++ b/packages/docs/public/d2.png
--- a/packages/docs/public/d3.png
+++ b/packages/docs/public/d3.png
--- a/packages/docs/public/d4.png
+++ b/packages/docs/public/d4.png
--- a/Show More
+++ b/Show More