Update site content

blog/8/index.html

@@ -2011,8 +2011,7 @@ <h2 class="post__heading">Managing Application and Game State in A-Frame</h2>
 <a href="http://redux.js.org/docs/introduction/ThreePrinciples.html">Redux</a>. Having
 built several non-trivial WebVR applications, we’ll go over how we started to
 bring these ideas of state management into A-Frame’s DOM-based entity-component
-architecture.</p>
-<!--toc--></div>
+architecture.</p></div>
 
 
               <a href="/blog/gamestate/" class="post__more">Read more &hellip;</a>

blog/gamestate/index.html

@@ -1820,8 +1820,6 @@ <h1 class="page__title post__heading">Managing Application and Game State in A-F
 built several non-trivial WebVR applications, we’ll go over how we started to
 bring these ideas of state management into A-Frame’s DOM-based entity-component
 architecture.</p>
-<!--toc-->
-
 <span id="more"></span>
 
 <h2 id="initial-approach-with-redux"><a href="#initial-approach-with-redux" class="headerlink" title="Initial Approach with Redux"></a>Initial Approach with Redux</h2><p><img src="https://camo.githubusercontent.com/af8803571294fe373a54d039be8f9709f15a2ad4/687474703a2f2f6d616b6569746f70656e2e636f6d2f7374617469632f696d616765732f72656475785f666c6f7763686172742e706e67" alt="Redux"></p>

blog/motion-capture/index.html

@@ -1845,8 +1845,6 @@ <h1 class="page__title post__heading">Rapid Motion-Capture-Powered VR Developmen
 actions, on any device from anywhere without a headset.</p>
 <span id="more"></span>
 
-<!--toc-->
-
 <h2 id="motion-capture-makes-vr-developer-lives-easier"><a href="#motion-capture-makes-vr-developer-lives-easier" class="headerlink" title="Motion Capture Makes VR Developer Lives Easier"></a>Motion Capture Makes VR Developer Lives Easier</h2><p><img src="https://cloud.githubusercontent.com/assets/674727/24733615/9cb99dae-1a2d-11e7-85e3-a75d6c06bb91.gif" alt="Rapid Development"></p>
 <p>Below are several real-life use cases of motion capture vastly improving VR
 development ergonomics:</p>

docs/0.3.0/components/geometry.html

@@ -944,7 +944,7 @@ <h1 class="page__title">
 additional properties are used to further define the geometry. A material
 component is usually defined to provide a appearance alongside the
 shape to create a complete mesh.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="base-properties"><a href="#base-properties" class="headerlink" title="Base Properties"></a>Base Properties</h2><p>Every geometry type will have these properties:</p>
 <table>

docs/0.3.0/components/material.html

@@ -943,7 +943,7 @@ <h1 class="page__title">
 component</a> which provides shape.</p>
 <p>Custom materials and shaders can be registered to extend the material component
 in order to provide a wide range of visual effects.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="example"><a href="#example" class="headerlink" title="Example"></a>Example</h2><p>Defining a red material using the default standard material:</p>
 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-entity</span> <span class="attr">geometry</span>=<span class="string">&quot;primitive: box&quot;</span> <span class="attr">material</span>=<span class="string">&quot;color: red&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-entity</span>&gt;</span></span><br></pre></td></tr></table></figure>

docs/0.3.0/core/animations.html

@@ -953,7 +953,7 @@ <h1 class="page__title">
 the animation, and loops indefinitely.</p>
 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-entity</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-entity</span> <span class="attr">position</span>=<span class="string">&quot;5 0 0&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-entity</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-animation</span> <span class="attr">attribute</span>=<span class="string">&quot;rotation&quot;</span></span></span><br><span class="line"><span class="tag">               <span class="attr">dur</span>=<span class="string">&quot;10000&quot;</span></span></span><br><span class="line"><span class="tag">               <span class="attr">fill</span>=<span class="string">&quot;forwards&quot;</span></span></span><br><span class="line"><span class="tag">               <span class="attr">to</span>=<span class="string">&quot;0 360 0&quot;</span></span></span><br><span class="line"><span class="tag">               <span class="attr">repeat</span>=<span class="string">&quot;indefinite&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-animation</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-entity</span>&gt;</span></span><br></pre></td></tr></table></figure>
 
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="attributes"><a href="#attributes" class="headerlink" title="Attributes"></a>Attributes</h2><p>Here is an overview of animation attributes. We’ll go into more detail below.</p>
 <table>

docs/0.3.0/core/asset-management-system.html

@@ -954,7 +954,7 @@ <h1 class="page__title">
 </ul>
 <p>The scene and all entities will block (i.e., the scene won’t render) until all
 of these types of assets are fetched (or error out) before playing.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="example"><a href="#example" class="headerlink" title="Example"></a>Example</h2><p>We can define all of our assets in <code>&lt;a-assets&gt;</code> and point to those assets from
 our entities using selectors:</p>

docs/0.3.0/core/component.html

@@ -952,7 +952,7 @@ <h1 class="page__title">
 <p>Components are roughly analogous to CSS. Like how CSS rules modify the
 appearance of elements, component properties modify the appearance, behavior,
 and functionality of entities.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="what-a-component-looks-like"><a href="#what-a-component-looks-like" class="headerlink" title="What a Component Looks Like"></a>What a Component Looks Like</h2><p>A component holds a bucket of data in the form of one or more component
 properties. This data is used to modify the entity. Consider an <em>engine</em>

docs/0.3.0/core/entity.html

@@ -946,7 +946,7 @@ <h1 class="page__title">
 and functionality.</p>
 <p>In A-Frame, entities are inherently attached with the <a href="../components/position.md">position</a>,
 <a href="../components/rotation.md">rotation</a>, and <a href="../components/scale.md">scale</a> components.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="example"><a href="#example" class="headerlink" title="Example"></a>Example</h2><p>Consider the entity below. By itself, it has no appearance, behavior, or
 functionality. It does nothing:</p>

docs/0.3.0/core/index.html

@@ -953,7 +953,7 @@ <h1 class="page__title">
 <p>ECS grants developers the key to permissionless innovation. Developers can
 write, share, and plug in components that extend new features or iterate upon
 existing features.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="concept"><a href="#concept" class="headerlink" title="Concept"></a>Concept</h2><p>As an abstract example, imagine a car is an entity:</p>
 <ul>

docs/0.3.0/core/mixins.html

@@ -950,7 +950,7 @@ <h1 class="page__title">
 the entities above expand to:</p>
 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-entity</span> <span class="attr">material</span>=<span class="string">&quot;color: red&quot;</span> <span class="attr">geometry</span>=<span class="string">&quot;primitive: box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-entity</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a-entity</span> <span class="attr">material</span>=<span class="string">&quot;color: blue&quot;</span> <span class="attr">geometry</span>=<span class="string">&quot;primitive: box&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-entity</span>&gt;</span></span><br></pre></td></tr></table></figure>
 
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="merging-component-properties"><a href="#merging-component-properties" class="headerlink" title="Merging Component Properties"></a>Merging Component Properties</h2><p>Properties of a multi-property component will merge if defined by multiple mixins and&#x2F;or the entity. For example:</p>
 <figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;a-scene&gt;</span><br><span class="line">  &lt;a-assets&gt;</span><br><span class="line">    &lt;a-mixin id=&quot;box&quot; geometry=&quot;primitive: box&quot;&gt;&lt;/a-mixin&gt;</span><br><span class="line">    &lt;a-mixin id=&quot;tall&quot; geometry=&quot;height: 10&quot;&gt;&lt;/a-mixin&gt;</span><br><span class="line">    &lt;a-mixin id=&quot;wide&quot; geometry=&quot;width: 10&quot;&gt;&lt;/a-mixin&gt;</span><br><span class="line">  &lt;/a-assets&gt;</span><br><span class="line"></span><br><span class="line">  &lt;a-entity mixin=&quot;wide tall box&quot; geometry=&quot;depth: 2&quot;&gt;&lt;/a-entity&gt;</span><br><span class="line">&lt;/a-scene&gt;</span><br></pre></td></tr></table></figure>

docs/0.3.0/core/scene.html

@@ -951,7 +951,7 @@ <h1 class="page__title">
 <li>Set up webvr-polyfill, VREffect</li>
 <li>Add UI to Enter VR that calls WebVR API</li>
 </ul>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="example"><a href="#example" class="headerlink" title="Example"></a>Example</h2><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-scene</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-assets</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;texture&quot;</span> <span class="attr">src</span>=<span class="string">&quot;texture.png&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">a-assets</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-box</span> <span class="attr">src</span>=<span class="string">&quot;#texture&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-box</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-scene</span>&gt;</span></span><br></pre></td></tr></table></figure>
 

docs/0.3.0/core/systems.html

@@ -945,7 +945,7 @@ <h1 class="page__title">
 scene.</p>
 <p>For example, the camera system manages all entities with the <a href="../components/camera.md">camera
 component</a>, controlling which camera is the active camera.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="registering-a-system"><a href="#registering-a-system" class="headerlink" title="Registering a System"></a>Registering a System</h2><p>A system is registered similarly to a <a href="./component.md">component</a>.</p>
 <p>If the system name matches a component name, then the component will have a

docs/0.3.0/core/utils.html

@@ -939,7 +939,7 @@ <h1 class="page__title">
 
 
       <p>A-Frame’s utility modules are public through <code>AFRAME.utils</code>.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="aframe-utils-coordinates"><a href="#aframe-utils-coordinates" class="headerlink" title="AFRAME.utils.coordinates"></a><code>AFRAME.utils.coordinates</code></h2><p>Module for handling vec3 and vec4 types.</p>
 <h3 id="iscoordinate-value"><a href="#iscoordinate-value" class="headerlink" title=".isCoordinate(value)"></a><code>.isCoordinate(value)</code></h3><p>Tests whether a string is a vec3.</p>

docs/0.3.0/guides/building-with-components.html

@@ -953,7 +953,7 @@ <h1 class="page__title">
 <p>The scene we will build is a <strong>360&deg; image gallery</strong>. There will be three
 panels which the user can click on. Once clicked, the background will fade and
 swap the 360&deg; images.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="skeleton"><a href="#skeleton" class="headerlink" title="Skeleton"></a>Skeleton</h2><p>This is the starting point for our scene:</p>
 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-scene</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-assets</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">audio</span> <span class="attr">id</span>=<span class="string">&quot;click-sound&quot;</span> <span class="attr">src</span>=<span class="string">&quot;audio/click.ogg&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">audio</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">&lt;!-- Images. --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;city&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/city.jpg&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;city-thumb&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/thumb-city.png&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;cubes&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/cubes.jpg&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;cubes-thumb&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/thumb-cubes.png&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;sechelt&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/sechelt.jpg&quot;</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">img</span> <span class="attr">id</span>=<span class="string">&quot;sechelt-thumb&quot;</span> <span class="attr">src</span>=<span class="string">&quot;img/thumb-sechelt.png&quot;</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">a-assets</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- 360-degree image. --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-sky</span> <span class="attr">id</span>=<span class="string">&quot;image-360&quot;</span> <span class="attr">radius</span>=<span class="string">&quot;10&quot;</span> <span class="attr">src</span>=<span class="string">&quot;#city&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-sky</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- Link. --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-plane</span> <span class="attr">class</span>=<span class="string">&quot;link&quot;</span> <span class="attr">height</span>=<span class="string">&quot;1&quot;</span> <span class="attr">width</span>=<span class="string">&quot;1&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-plane</span>&gt;</span></span><br><span class="line"></span><br><span class="line">  <span class="comment">&lt;!-- Camera + Cursor. --&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-camera</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">a-cursor</span> <span class="attr">id</span>=<span class="string">&quot;cursor&quot;</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">a-animation</span> <span class="attr">begin</span>=<span class="string">&quot;click&quot;</span> <span class="attr">easing</span>=<span class="string">&quot;ease-in&quot;</span> <span class="attr">attribute</span>=<span class="string">&quot;scale&quot;</span></span></span><br><span class="line"><span class="tag">                   <span class="attr">fill</span>=<span class="string">&quot;backwards&quot;</span> <span class="attr">from</span>=<span class="string">&quot;0.1 0.1 0.1&quot;</span> <span class="attr">to</span>=<span class="string">&quot;1 1 1&quot;</span> <span class="attr">dur</span>=<span class="string">&quot;150&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-animation</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">a-animation</span> <span class="attr">begin</span>=<span class="string">&quot;cursor-fusing&quot;</span> <span class="attr">easing</span>=<span class="string">&quot;ease-in&quot;</span> <span class="attr">attribute</span>=<span class="string">&quot;scale&quot;</span></span></span><br><span class="line"><span class="tag">                   <span class="attr">from</span>=<span class="string">&quot;1 1 1&quot;</span> <span class="attr">to</span>=<span class="string">&quot;0.1 0.1 0.1&quot;</span> <span class="attr">dur</span>=<span class="string">&quot;1500&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-animation</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">a-cursor</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">a-camera</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-scene</span>&gt;</span></span><br></pre></td></tr></table></figure>

docs/0.3.0/guides/building-with-magicavoxel.html

@@ -942,7 +942,7 @@ <h1 class="page__title">
 3D scenes and models using <em>voxels</em> (i.e., blocks). MagicaVoxel makes modeling super
 easy, similar to building in Minecraft.</p>
 <p><img src="https://i.imgur.com/XYYXjIn.jpg" alt="magicavoxel"></p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="installation"><a href="#installation" class="headerlink" title="Installation"></a>Installation</h2><p>MagicaVoxel works on Windows and OS X. On the <a href="https://ephtracy.github.io/">MagicaVoxel
 homepage</a>, click the <em>Download</em> button and install the application:</p>

docs/0.3.0/guides/index.html

@@ -940,7 +940,7 @@ <h1 class="page__title">
 
       <p>Let’s build a scene using A-Frame’s basic <a href="../primitives/">primitive</a> HTML
 building blocks!</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="adding-a-box"><a href="#adding-a-box" class="headerlink" title="Adding a Box"></a>Adding a Box</h2><p>This sample <em>Hello World</em> scene starts with a box:</p>
 <figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a-scene</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">a-box</span> <span class="attr">color</span>=<span class="string">&quot;#6173F4&quot;</span> <span class="attr">width</span>=<span class="string">&quot;4&quot;</span> <span class="attr">height</span>=<span class="string">&quot;10&quot;</span> <span class="attr">depth</span>=<span class="string">&quot;2&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">a-box</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">a-scene</span>&gt;</span></span><br></pre></td></tr></table></figure>

docs/0.3.0/introduction/device-and-platform-support.html

@@ -942,7 +942,7 @@ <h1 class="page__title">
 devices and APIs. A-Frame supports both flat (3D on a normal screen) and WebVR
 experiences, though its focus is heavily VR. We will break up support into two
 categories: flat and VR.</p>
-<!--toc-->
+<div id="toc"></div>
 
 <h2 id="support-for-flat-experiences"><a href="#support-for-flat-experiences" class="headerlink" title="Support for Flat Experiences"></a>Support for Flat Experiences</h2><p>Support for flat experiences primarily depends on a browser’s WebGL support.
 We can see which browsers support WebGL at <a href="http://caniuse.com/#feat=webgl">Can I use WebGL?</a>.</p>

docs/0.3.0/introduction/faq.html

@@ -938,7 +938,7 @@ <h1 class="page__title">
 
 
 
-      <!--toc-->
+      <div id="toc"></div>
 
 <h2 id="what-is-a-frame"><a href="#what-is-a-frame" class="headerlink" title="What is A-Frame?"></a>What is A-Frame?</h2><p>A-Frame is an open-source web framework for building virtual reality
 experiences. We can build VR web pages that we can walk inside with just HTML.