exokitxr · avaer · Sep 5, 2019 · avaer · Sep 5, 2019 · avaer
diff --git a/_posts/_defaults.md b/_posts/_defaults.md
@@ -0,0 +1,7 @@
+---
+date:
+title:
+categories:
+description:
+type: Document
+---
diff --git a/_posts/development-guide/2019-09-05-reality-tabs-overview.md b/_posts/development-guide/2019-09-05-reality-tabs-overview.md
@@ -0,0 +1,52 @@
+---
+title: Reality Tabs Overview
+description: Learn what reality tabs are from a high-level overview.
+categories:
+  - development-guide
+type: Document
+set: development-guide
+set_order: 16
+---
+
+Reality Tabs are `xr-iframes` which are like `iframes` but will extra spatial attributes like `position`, `scale`, `orientation`.
+
+### iframe
+
+On the 2d web, an `iframe` is basically a window to another webpage, within a webpage. So you could be on a webpage and on that webpage there's an `<iframe>` that points to another webpage.
+
+Example:
+```html
+<html>
+  <body>
+
+  <iframe src="http://google.com" />
+
+  </body>
+</html>
+```
+
+
+### Position
+
+Positioning an `iframe` on a 2d webpage only has 2 ways to move: up and down & left and right. In the 3d web, there is an additional `z` coordinate.
+
+`xr-iframe` has an additional `position` attirbute, which allows creators to set where the `xr-iframe` site is in virtual space.
+
+It looks something like this:
+`xrIframe.positon = [x, y, z]`
+
+### Orientation
+
+`xr-iframe` has an additional `orientation` attirbute, which allows creators to set the rotational direction of the site in virtual space.
+
+It looks something like this using threejs:
+`xrIframe.orientation = new THREE.Quaternion().setFromEuler(new THREE.Euler(1, 1, 1, 'YXZ')).toArray()`
+
+
+
+### Scale
+
+Defining the size and scale of an `xr-iframe` is as simple as defining the `scale` attribute in three numbers for `x`, `y`, and `z`.
+
+It looks something like this:
+`xrIframe.scale = [x, y, z]`
diff --git a/_posts/development-guide/2019-09-05-xr-iframe-api.md b/_posts/development-guide/2019-09-05-xr-iframe-api.md
@@ -0,0 +1,60 @@
+---
+title: xr-iframe API
+description: How to create and manipulate reality tabs.
+categories:
+  - development-guide
+type: Document
+set: development-guide
+set_order: 21
+---
+
+This page will cover how to create and manipulate reality tabs (`xr-iframe`).
+
+## Top-level creation
+```js
+  // Import exokit-web
+  import('https://web.exokit.org/src/index.js'))
+  .then(() => {
+    // Create xr-iframe, define src attribute, and append/place it wherever you want as if it was a normal canvas
+    const xrIframe = document.createElement('xr-iframe');
+    xrIframe.src = 'child.html';
+    document.body.appendChild(xrIframe);
+  });
+```
+
+## xr-iframe manipulation
+
+```js
+  // Set xr-iframe position
+  xrIframe.position = [1, 1, 1];
+  // Set xr-iframe orientation
+  xrIframe.orientation = new THREE.Quaternion().setFromEuler(new THREE.Euler(1, 1, 1, 'YXZ')).toArray();
+  // Set xr-iframe scale
+  xrIframe.scale = [1, 1, 1];
+```
+
+## Child xr-iframe creation
+
+```js
+  // Create WebGL renderer and define layers
+  const renderer = new THREE.WebGLRenderer({
+    antialias: true,
+  });
+  document.body.appendChild(renderer.domElement);
+  const layers = [renderer.domElement];
+
+...
+
+  // Request WebXR session and assign session layers
+  const session = await navigator.xr.requestSession({
+    exclusive: true,
+  });
+  session.layers = layers;
+
+...
+
+  // Create xr-iframe, define src attribute, and push to layers
+  xrIframe = document.createElement('xr-iframe');
+  xrIframe.src = 'childschild.html';
+  layers.push(xrIframe);
+```
diff --git a/_posts/general/faq.md b/_posts/general/faq.md
@@ -0,0 +1,18 @@
+---
+date: 2018-01-01
+title: FAQ
+redirect_from:
+  - /docs/faq
+  - /faq
+  - /docs/frequently-asked-questions
+description: Frequently Asked Questions
+categories:
+  - Exokit
+type: Document
+set: general
+set_order: 1
+---
+
+## How can I visit
+
+still under development
diff --git a/_posts/general/introduction.md b/_posts/general/introduction.md
@@ -0,0 +1,16 @@
+---
+date: 2018-01-01
+title: Introduction
+description: Exokit Engine
+redirect_from:
+  - /introduction
+  - /docs
+  - /docs/
+categories:
+  - Exokit
+type: Document
+set: general
+set_order: 0
+---
+
+3d virtual space
diff --git a/_posts/getting-started/coding-scenes.md b/_posts/getting-started/coding-scenes.md
@@ -0,0 +1,20 @@
+---
+date: 2018-01-01
+title: Coding scenes
+description: This set will help you understand how things work in the SDK.
+redirect_from:
+  - /documentation/introduction/
+  - /docs/sdk-overview/
+  - /docs/command-line-interface/
+  - /docs/sdk-quick-start-guide/
+  - /sdk-reference/introduction/
+categories:
+  - getting-started
+type: Document
+set: getting-started
+set_order: 3
+---
+
+## The development tools
+
+At a very high level, the SDK
diff --git a/_posts/getting-started/installation-guide.md b/_posts/getting-started/installation-guide.md
@@ -0,0 +1,14 @@
+---
+date: 2018-01-01
+title: Installation Guide
+description: Step-by-step guide to installing the SDK
+redirect_from:
+  - /documentation/installation-guide/
+categories:
+  - getting-started
+type: Document
+set: getting-started
+set_order: 2
+---
+
+# Installation go