diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000000..89b2bf46f94c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+# Logs
+logs
+*.log
+
+# Cache
+.cache
+
+# Node
+node_modules
+
+# Build
+public
+
+# IDE specific
+.idea/
+.vscode/
+*.sw*
+
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 000000000000..7e964c1ee5f4
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,14 @@
+The BSD Zero Clause License (0BSD)
+
+Copyright (c) 2020 Gatsby Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
diff --git a/README.md b/README.md
index 49b87c7c1c18..9bd59511e53d 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,7 @@
# draft-docs
-This repo is a place to draft docs and test doc things.
+## Installation & Local Development
+
+Clone this repo, install nvm, make sure you are using v12.14.1
+
+`gatsby develop`
diff --git a/gatsby-config.js b/gatsby-config.js
new file mode 100644
index 000000000000..910c0d80c088
--- /dev/null
+++ b/gatsby-config.js
@@ -0,0 +1,28 @@
+/**
+ * Configure your Gatsby site with this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/gatsby-config/
+ */
+
+module.exports = {
+ /* Your site config here */
+ plugins: [
+ {
+ resolve: `gatsby-transformer-asciidoc`,
+ options: {
+ safe: 'server',
+ attributes: {
+ showtitle: true,
+ imagesdir: `/images`,
+ },
+ },
+ },
+ {
+ resolve: `gatsby-source-filesystem`,
+ options: {
+ name: `pages`,
+ path: `${__dirname}/src`,
+ },
+ },
+ ],
+}
diff --git a/gatsby-node.js b/gatsby-node.js
new file mode 100644
index 000000000000..fa36e9311414
--- /dev/null
+++ b/gatsby-node.js
@@ -0,0 +1,42 @@
+exports.createPages = async ({ actions, graphql, reporter }) => {
+ const { createPage } = actions
+
+ const articleTemplate = require.resolve(`./src/templates/article.js`)
+
+ const result = await graphql(`
+ query {
+ allAsciidoc {
+ edges {
+ node {
+ id
+ html
+ document {
+ title
+ }
+ pageAttributes {
+ slug
+ }
+ }
+ }
+ }
+ }
+ `)
+
+ // Handle errors
+ if (result.errors) {
+ reporter.panicOnBuild(`Error while running GraphQL query.`)
+ return
+ }
+
+ result.data.allAsciidoc.edges.forEach(({ node }) => {
+ createPage({
+ path: node.pageAttributes.slug,
+ component: articleTemplate,
+ context: {
+ id: node.id,
+ // additional data can be passed via context
+ slug: node.pageAttributes.slug,
+ },
+ })
+ })
+}
\ No newline at end of file
diff --git a/markdown/developer.md b/markdown/developer.md
deleted file mode 100644
index 5690b33dd683..000000000000
--- a/markdown/developer.md
+++ /dev/null
@@ -1,24 +0,0 @@
-# Koji Developer Portal
-
-## About Koji
-
-Koji is a platform that enables anyone, including non-techies, to quickly create interactive content, such as selfies, memes, games, and utilities. Kojis can be shared via a link on social media and messengers as well as in an embedded iframe on a website.
-
-As a developer, you can build web applications on Koji, called “templates,” that enable users to customize, or “remix,” them without coding. At their core, Koji templates are embeddable, mini-web applications written in modern JavaScript. They are designed to be responsive, so that they can run on any browser and every device. They also enable non-technical users to quickly edit elements, such as images, text, and sounds, to create a custom version that they can share anywhere on the web.
-
-On Koji, you can develop templates that will be used and shared by millions of users across the world. You can also monetize your work through licensing, asset packs, and other developer compensation programs. With the ability to create and share remixable, interactive content, the opportunities for creative new applications and experiences are countless. We can’t wait to see what YOU make!
-
-
-
-## Getting Started
-
-For some great resources to help you start developing templates on Koji, see:
-
-* [Quickstart guide](https://withkoji.com/developer/quickstart) – Step-by-step instructions on how to create a remixable web application and publish it as a template on Koji.
-* [Starter course](https://withkoji.com/developer/getting-started) – Video tutorial of how to start developing applications on Koji.
-
-## Staying in Touch
-
-Join the [Koji community](https://discord.gg/eQuMJF6) on Discord to connect with other developers, makers, and the Koji team. The community is the best place to share tips and tricks, provide peer feedback, and get support.
-
-Subscribe to the [developer email list](http://eepurl.com/g5odab) to keep up with the latest announcements, featured content, events, and developer programs.
diff --git a/markdown/quickstart.md b/markdown/quickstart.md
deleted file mode 100644
index 1d4f3472461b..000000000000
--- a/markdown/quickstart.md
+++ /dev/null
@@ -1,362 +0,0 @@
-# Developer Instant Remix Quickstart
-
-## Summary
-
-On the Koji platform, you can develop JavaScript web applications that can be customized without coding. Instead, non-technical users can use Visual Customization Controls (VCCs) to quickly edit elements of the application, such as images, text, and sounds.
-
-In this quickstart guide, you will start with an existing web application on Koji, called a “template,” and add the ability to customize, or “remix,” it. You will use the Koji editor and an npm package from Koji to define the customizable elements. Then, you will publish your application as a new template so that Koji users can create their own customized versions of it.
-
-## Remixing the starter template
-
-1. If you haven’t already, create an account at [withkoji.com](https://withkoji.com).
-2. Go to [https://withkoji.com/templates/seane/react-project-no-vccs](https://withkoji.com/templates/seane/react-project-no-vccs).
-3. Click **Create Remix**.
-
- This action creates a clone of the starter template, and opens it in the Koji editor.
-
-4. Explore the template and the Koji editor.
- * In the right pane, you can see a live preview of the template.
- * In the left pane, you can click **Source Code** to expand the file browser. From here, you can open and edit your project files in the editor.
- * At the bottom, you can expand a set of terminal tabs. These tabs enable you to run the template locally from inside the editor and to execute other terminal functions, such as adding packages and committing changes.
-
- **Note**: If you make changes to your project’s structure (by adding npm packages, for example), you might need to exit the running process and restart the development server in the `frontend` terminal.
-
-## Installing the @withkoji/vcc package
-
-The @withkoji/vcc package allows your template to access dynamic values that are stored in customization files. It also allows you to expose VCCs so that a user can change the customizable items in your template. Finally, it provides a watcher function that allows you to monitor changes to customization files and perform a real-time set of the dynamic values stored in the customization files.
-
-1. In the terminal, navigate to the `frontend` folder of your template.
-2. Cancel the running process (for example, press **Ctrl+C**).
-3. Install the latest version of the package: \
-`npm install --save @withkoji/vcc`
-4. In the `frontend` folder of your project, reconfigure the `package.json` file to run the watcher concurrently with your development server. You can use a package like npm-run-all. For example:
-
- ```JavaScript
-"build": "NODE_ENV=production webpack --config ./.internals/webpack.production.js --color -p --progress --hide-modules --display-optimization-bailout",
-"start": "npm-run-all -p watch start:server",
-"watch": "koji-vcc watch",
-"start:server": "node index.js" // Replace with the "start" command for your project
-```
-
- **Note**: If you follow the example pattern, you must also install the npm-run-all package: \
- `npm install --save-dev npm-run-all`
-
-5. Restart the process to reflect the new changes:\
- `npm start`
-
-## Creating a customization file
-
-A customization file is a JSON file that defines the names and types of the customizable values in a template, so that Koji can display the appropriate VCCs for remixers.
-
-1. In the `.koji/customization` folder of your project, create a new JSON file.
- 1. In the file browser, click **+** next to the `.koji/customization` folder, and click **New File**.
- 2. Enter a name for the file. For example: `settings.json`.
-2. Paste the following code into your `settings.json` file.
-
- This code defines a scope and the customizable values within that scope.
-
- ```json
- {
- "settings": {
- "title": "Hello World!"
- },
- "@@editor": [
- {
- "key": "settings",
- "name": "App settings",
- "icon": "⚙️",
- "source": "settings.json",
- "fields": [
- {
- "key": "title",
- "name": "App title",
- "type": "text"
- }
- ]
- }
- ]
- }
-```
-
-3. Press **Ctrl-S** to save the file.
-
- A new item appears in the **Customization** section of the left pane.
-
-4. Click the item in the **Customization** section to display the associated VCC in the editor.
-
- In this example, the file stores one customizable value (`settings.title`), and Koji displays a text VCC to collect this value from a remixer.
-
-## Accessing the values stored in a customization file
-
-To access a value from a JSON customization file within a template, you use a getter from the @withkoji/vcc package. Then, update the template to use dynamic values, instead of hard-coded values.
-
-1. From the left pane of the editor, open the `frontend/common/App.js` file.
-
- This file contains most of the template logic.
-
-2. At the top of the file, import the package.
-
- ```JavaScript
- import { InstantRemixing } from '@withkoji/vcc';
- ```
-
-3. In the React component, add the `componentDidMount` method.
-
- This method creates a new instance of the `InstantRemixing` class to use in the template.
-
- ```JavaScript
-componentDidMount() {
- this.instantRemixing = new InstantRemixing();
- console.log('instantRemixing', this.instantRemixing); // Confirm w/log
-
- // Alert Koji we are ready to use instantRemixing
- this.instantRemixing.ready();
-}
-```
-
-4. Create a state to handle updates to the title (`h1`) value, and update the contents of the `h1` element to use the dynamic value.
-
- ```JavaScript
-class App extends React.Component {
- state = {
- title: '',
- };
-
- ...
-
- render() {
- return (
-
-
{this.state.title}
-
-
- );
- }
-}
-```
-
-5. In the `componentDidMount` method, use the getter function from `instantRemixing` to get the default value from the customization file.
-
- The getter accepts an array (`[scope, key]`) that maps to the scope (`settings`) and key (`title`) from the JSON customization file.
-
- ```JavaScript
-componentDidMount() {
- this.instantRemixing = new InstantRemixing();
-
- // Set the default value
- this.setState({
- title: this.instantRemixing.get(['settings', 'title'])
- });
-
- // Alert Koji we are ready to use instantRemixing
- this.instantRemixing.ready();
-}
-```
-
-## Reacting to updated values
-
-When a remixer enters a new value, the template must update automatically to reflect the change.
-
-* In the `componentDidMount` method, set up a listener to monitor for changes to the template value:
-
- ```JavaScript
-componentDidMount() {
- this.instantRemixing = new InstantRemixing();
-
- // Alert Koji we are ready to use instantRemixing
- this.instantRemixing.ready();
-
- // Set the default value
- this.setState({
- title: this.instantRemixing.get(['settings', 'title'])
- });
-
- // Set up a listener to update title value
- this.instantRemixing.onValueChanged((path, newValue) => {
- if (path[0] && path[1] && path[0] === 'settings' && path[1] === 'title') {
- this.setState({ title: newValue });
- }
- });
-}
-```
-
-## Testing the current state of the template
-
-At this point, the template should be configured to use the default value from the customization file and to react to value changes that are made from VCCs. To test this configuration, you can use the built-in VCC and live preview in the Koji editor.
-
-1. In the top right of the **Live Preview** pane, click **Refresh** to make sure you are seeing the latest version.
-2. From the left pane of the editor, click **Customization > App Settings** to open the VCC for the `settings.json` customization file.
-3. In the VCC, update the value in the **App title** field.
-
- The preview window should reflect your update automatically.
-
-## Determining the current view of the template
-
-The template must display differently and expose different click handlers depending on whether a user is viewing or customizing the template. In this example, you will add styles to show that the `h1` element is editable and a click handler to expose a VCC when a user is customizing the template.
-
-1. Create a property (`isRemixing`) to track the current view state, and set the initial state with a placeholder value.
-
- ```JavaScript
-state = {
- isRemixing: false,
- title: '',
-};
-```
-
-2. In the `componentDidMount` method, add the default value (`this.instantRemixing.isRemixing`) to the `setState` function, and add a listener that monitors the template for view changes.
-
- This listener allows you to use `this.state.isRemixing` as a source of truth for the current view of the template.
-
- ```JavaScript
-componentDidMount() {
- this.instantRemixing = new InstantRemixing();
-
- // Set the default value for title and isRemixing state
- this.setState({
- isRemixing: this.instantRemixing.isRemixing,
- title: this.instantRemixing.get(['settings', 'title'])
- });
-
- // Set up a listener to update title value
- this.instantRemixing.onValueChanged((path, newValue) => {
- if (path[0] && path[1] && path[0] === 'settings' && path[1] === 'title') {
- this.setState({ title: newValue });
- }
- });
-
- // Toggle the isRemixing state based on the listener
- this.instantRemixing.onSetRemixing((isRemixing) => {
- this.setState({ isRemixing });
- });
-
- // Alert Koji we are ready to use instantRemixing
- this.instantRemixing.ready();
-}
-```
-
-## Exposing the VCC
-
-The template must expose a way for a remixer to open the VCC when customizing it.
-
-* Add a click handler to the `h1` element that opens the VCC when the remixer clicks the title.
-
- ```JavaScript
-handleClick = () => {
- // Conditionally handle the click, only if the template is being remixed
- if (this.state.isRemixing) {
- this.instantRemixing.onPresentControl(['settings', 'title']);
- }
-};
-
- render() {
- return (
-
-
{this.state.title}
-
-
- );
-}
-```
-
-## Testing the expose function
-
-To test whether the expose function is working, you can use the **Editing** tab of the **Live Preview** pane. This feature enables you to test the template as if it were published on Koji.
-
-1. In the **Live Preview** pane, click **Editing** to switch to the template editing mode.
-2. Click the title in the preview.
-
- The VCC should open automatically and allow for text input. If this test works correctly, the VCC should be exposed correctly to the remixer in your published template.
-
-## Styling the customizable item
-
-To indicate that an item is “editable,” you can add a conditional visual effect that is displayed when the template is being customized. In this example, you’ll add a CSS style class for editable items and then apply the class to the `h1` when a user is customizing the template.
-
-1. From the left pane of the editor, open the `frontend/common/index.html` file.
-2. Add the following CSS style in the `head` element.
-
- ```HTML
-
-```
-
-3. In the `App.js` file, update the `h1` element with a dynamic `className`.
-
- ```JavaScript
-
+
+
+ );
+ }
+ ...
+}
+----
+. Create a `SocialSharePreview` styled component that matches the
+dimensions Koji requires for the rich preview image.
++
+To display correctly, the image dimensions must be 1200x630 and the
+`div` should use an absolute position in the top left of the window.
++
+[source,JavaScript]
+----
+const SocialSharePreview = styled.div`
+ background-color: #395b88;
+ height: 630px;
+ width: 1200px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ font-size: calc(10px + 2vmin);
+ text-align: center;
+ color: #fcfcfc;
+`;
+----
+NOTE: You can test the preview image by opening your staging link and
+appending `?koji-screenshot=1` to the URL.
+
+== Using states in the instant remix experience
+
+When a template includes many customizable elements, you can use states to break up the remixing experience into manageable chunks.
+States are also helpful for specifically targeting different sections of the template experience.
+For example, some of the customizable elements might be visible at different times, and you can use states to control when and how those elements are visible.
+
+In this example, you will first add the ability to customize the logo image in the template.
+Then, you will add two states, one to expose the text as editable, and one to expose the image as editable.
+
+=== Adding remix functionality to the image
+
+. Update the `.koji/customization/settings.json` file to add an entry for the image.
++
+[source,JavaScript]
+----
+{
+ "settings": {
+ "title": "Hello World",
+ "logo": ""
+ },
+ "@@editor": [
+ {
+ "key": "settings",
+ "name": "App settings",
+ "icon": "⚙️",
+ "source": "settings.json",
+ "fields": [
+ {
+ "key": "title",
+ "name": "App title",
+ "type": "text"
+ },
+ {
+ "key": "logo",
+ "name": "App logo",
+ "type": "image"
+ }
+ ]
+ }
+ ]
+}
+----
+
+. In the `App.js` file, add a `logo` state property, and update the default state, `onValueChanged` handler, click handler, and `Image` element to use the same pattern as for handling changes to the title.
++
+[source,JavaScript]
+----
+class App extends React.Component {
+ state = {
+ isRemixing: false,
+ logo: '',
+ title: '',
+ };
+
+ componentDidMount() {
+ this.instantRemixing = new InstantRemixing();
+
+ // Set the default value for our title, logo, and isRemixing state
+ this.setState({
+ logo: this.instantRemixing.get(['settings', 'logo']),
+ isRemixing: this.instantRemixing.isRemixing,
+ title: this.instantRemixing.get(['settings', 'title'])
+ });
+
+ // Set up a listener to update our values
+ this.instantRemixing.onValueChanged((path, newValue) => {
+ if (path[0] && path[1] && path[0] === 'settings' && path[1] === 'title') {
+ this.setState({ title: newValue });
+ }
+
+ if (path[0] && path[1] && path[0] === 'settings' && path[1] === 'logo') {
+ this.setState({ logo: newValue });
+ }
+ });
+
+ // Toggle the isRemixing state based on our listener
+ this.instantRemixing.onSetRemixing((isRemixing) => {
+ this.setState({ isRemixing });
+ });
+
+ // Alert Koji we are ready to use instantRemixing
+ this.instantRemixing.ready();
+
+ this.feed = new FeedSdk();
+ this.feed.load();
+
+ }
+
+ handleTitleClick = () => {
+ if (this.state.isRemixing) {
+ this.instantRemixing.onPresentControl(['settings', 'title']);
+ }
+ };
+
+ handleLogoClick = () => {
+ if (this.state.isRemixing) {
+ this.instantRemixing.onPresentControl(['settings', 'logo']);
+ }
+ };
+
+ render() {
+ if (window.location.search.includes('koji-screenshot=1')) {
+ return (
+
+
+ {this.state.title}
+
+
+
+ );
+ }
+
+ return (
+
+
+ {this.state.title}
+
+
+
+ );
+ }
+}
+----
+
+=== Adding states
+
+. In the `.koji/customization` folder, add a new file: `quickstart.json`.
+. Paste the following JSON code.
++
+This code defines two states that you can leverage when users are remixing the template.
++
+[source,json]
+----
+{
+ "quickstart": {
+ "states": [
+ { "key": "text", "label": "Edit text" },
+ { "key": "logo", "label": "Edit logo" }
+ ]
+ }
+}
+----
+
+=== Tracking template state changes
+
+. In the `App.js` file, add a `templateState` property to the state and set the default state to `text`.
++
+[source,JavaScript]
+----
+state = {
+ isRemixing: false,
+ logo: '',
+ templateState: 'text',
+ title: '',
+};
+----
+. In the `componentDidMount` method, use the `onSetCurrentState` function to update the local state.
++
+[source,JavaScript]
+----
+...
+this.instantRemixing.onSetCurrentState((templateState) => {
+ this.setState({ templateState });
+ });
+
+// Alert Koji we are ready to use instantRemixing
+ this.instantRemixing.ready();
+...
+----
+
+=== Adding conditional rendering based on template state
+
+. Update the `render` method and the click handlers to incorporate the template state as a way to expose elements as being editable and to handle clicks on a conditional basis.
++
+[source,JavaScript]
+----
+...
+
+handleTitleClick = () => {
+ if (this.state.isRemixing && this.state.templateState === 'text') {
+ this.instantRemixing.onPresentControl(['settings', 'title']);
+ }
+ };
+
+handleLogoClick = () => {
+ if (this.state.isRemixing && this.state.templateState === 'logo') {
+ this.instantRemixing.onPresentControl(['settings', 'logo']);
+ }
+};
+
+render() {
+ if (window.location.search.includes('koji-screenshot=1')) {
+ return (
+
+
+ {this.state.title}
+
+
+
+ );
+ }
+
+ return (
+
+
+ {this.state.title}
+
+
+
+ );
+}
+----
+. To test the states, use the buttons at the bottom of the live preview to toggle between the *Edit Text* and *Edit Logo* states.
+
+== Reacting to feed state changes
+
+When users are browsing the Koji feed, they can swipe up and down through the content.
+To optimize the user’s experience, Koji preloads content so that, ideally, any resources required to display a template in the feed have already loaded by the time the user swipes the template into view.
+
+To ensure your template is displayed correctly, you use the FeedSdk from the @withkoji/vcc package.
+For all templates, you must enable the FeedEvents entitlement and call the `load` method in the template to ensure it is preloaded correctly in the feed.
+For templates that include autoplay features, such as slideshows or interactions, you might also monitor visibility in the feed so that you can play the feature when the user swipes the template into view and stop it when the template isn’t in view.
+
+. Add a property (`isPlaying`) to track the state of visibility in the feed, and add a listener (`onPlaybackStateChanged`) to monitor for real-time updates as the template enters and leaves focus.
++
+[source,JavaScript]
+----
+ state = {
+ isPlaying: false,
+ isRemixing: false,
+ logo: '',
+ templateState: 'text',
+ title: '',
+ };
+
+ componentDidMount() {
+ ...
+ this.feed = new FeedSdk();
+ this.feed.load();
+ // Toggle the isPlaying state based on the listener
+ this.feed.onPlaybackStateChanged((isPlaying) => {
+ this.setState({ isPlaying });
+ });
+}
+----
+. In the `frontend/common/index.html` file, add a CSS animation in the `head` element.
++
+[source,CSS]
+----
+.animate-example {
+ animation-name: example;
+ animation-duration: 4s;
+ animation-iteration-count: infinite;
+}
+
+@keyframes example {
+ from {background-color: tomato;}
+ to {background-color: white;}
+}
+----
+. In the `App.js` file, update the `div` element with a dynamic `className` that starts the animation when the template is in view.
++
+[source,JavaScript]
+----
+
+
+ {this.state.title}
+
+
+
+----
++
+NOTE: To test autoplay features, you can open a published template and append `?feedDebug=true` to the URL.
+The template is loaded in the feed 10 times, and you can swipe or scroll through to ensure the animation starts and stops as expected.
+
+== Providing a good remix experience
+
+As a developer, you can take additional steps to create a better remix experience for users.
+In this example, you will use the https://docs.fastly.com/api/imageopto/[Fastly API] to optimize the size of the image while maintaining the correct aspect ratio.
+Then, you will add features that improve the VCC usability and the loading experience for users.
+
+=== Optimizing images
+
+. Add a method that appends Fastly query parameters to the image source.
++
+This example uses the `width` and `height` parameters to define the size of the region where the image is displayed, the `fit` parameter to resize the image so it fits entirely within the `bounds` of the specified region, and the `optimize` parameter to compress the image size while preserving the visual quality.
++
+[source,JavaScript]
+optimizeURL = url => `${url}?fit=bounds&width=${window.innerWidth/2}&height=${window.innerHeight/2}&optimize=medium`;
+. Update the `Image` element to use the optimized image.
++
+[source,JavaScript]
+----
+render() {
+ if (window.location.search.includes('koji-screenshot=1')) {
+ return (
+
+
+ {this.state.title}
+
+
+
+ );
+ }
+ return (
+
+
{this.state.title}
+
+
+ );
+ }
+}
+----
+
+=== Improving remix usability
+
+. Update the `.koji/customization/settings.json` file to enable the `dismissOnCommit` type option for the image VCC.
++
+This option automatically collapses the VCC and returns to the template preview after a remixer chooses a new image, which provides good feedback and saves a step for the user.
++
+[source,json]
+----
+{
+ "settings": {
+ "title": "Hello World",
+ "logo": ""
+ },
+ "@@editor": [
+ {
+ "key": "settings",
+ "name": "App settings",
+ "icon": "⚙️",
+ "source": "settings.json",
+ "fields": [
+ {
+ "key": "title",
+ "name": "App title",
+ "type": "text"
+ },
+ {
+ "key": "logo",
+ "name": "App logo",
+ "type": "image",
+ "typeOptions": {
+ "dismissOnCommit": true
+ }
+ }
+ ]
+ }
+ ]
+}
+----
+. Add a `titleOptions` object that includes the existing text VCC (`title`) as well as a new range VCC (`fontSize`).
++
+The range VCC will enable users to specify the font size quickly, while enforcing sensible minimum and maximum values.
++
+[source,json]
+----
+{
+ "settings": {
+ "titleOptions": {
+ "title": "Hello World!",
+ "fontSize": 48
+ },
+ "logo": ""
+ },
+ "@@editor": [
+ {
+ "key": "settings",
+ "name": "App settings",
+ "icon": "⚙️",
+ "source": "settings.json",
+ "fields": [
+ {
+ "key": "titleOptions",
+ "name": "Title options",
+ "type": "object",
+ "typeOptions": {
+ "TitleOption": {
+ "title": {
+ "name": "App title",
+ "type": "text"
+ },
+ "fontSize": {
+ "name": "Font size",
+ "description": "Select a size for the title font",
+ "type": "range",
+ "typeOptions": {
+ "min": 16,
+ "max": 48,
+ "step": 1
+ }
+ }
+ }
+ }
+ },
+ {
+ "key": "logo",
+ "name": "App logo",
+ "type": "image",
+ "typeOptions": {
+ "dismissOnCommit": true
+ }
+ }
+ ]
+ }
+ ]
+}
+----
+. In the `App.js` file, add a new `H1` styled component that uses the `fontSize` as a variable.
++
+[source,JavaScript]
+----
+const H1 = styled.h1`
+ font-size: ${({ fontSize }) => `${fontSize}px`};
+`;
+----
+. Update the default state, `onValueChanged` handler, click handler, and `render` method to use the new object and style.
++
+[source,JavaScript]
+----
+state = {
+ isPlaying: false,
+ isRemixing: false,
+ logo: '',
+ templateState: 'text', // Our default template state
+ titleOptions: {
+ title: '',
+ fontSize: 10,
+ },
+ };
+
+...
+
+this.setState({
+ titleOptions: this.instantRemixing.get(['settings', 'titleOptions']),
+ ...
+});
+...
+
+this.instantRemixing.onValueChanged((path, newValue) => {
+ if (path[0] && path[1] && path[0] === 'settings' && path[1] === 'titleOptions') {
+ this.setState({ titleOptions: newValue });
+ }
+ ...
+ });
+...
+
+handleTitleClick = () => {
+ if (this.state.isRemixing && this.state.templateState === 'text') {
+ this.instantRemixing.onPresentControl(['settings', 'titleOptions']);
+ }
+ };
+
+render() {
+...
+
+ {this.state.titleOptions.title}
+...}
+----
+
+=== Improving the template loading experience
+
+. To display the template after all images have been preloaded, add an `imagesLoaded` state, and then add a function in the `componentDidMount` method that preloads any images and updates the `imagesLoaded` state after loading is completed.
++
+Waiting for content to load before displaying the template will ensure a
+coordinated start to the experience.
++
+[source,JavaScript]
+----
+state = {
+ isPlaying: false,
+ isRemixing: false,
+ logo: '',
+ templateState: 'text', // Our default template state
+ titleOptions: {
+ title: '',
+ fontSize: 10,
+ },
+ imagesLoaded: false,
+};
+
+componentDidMount() {
+...
+ // Alert Koji we are ready to use instantRemixing
+ this.instantRemixing.ready();
+
+ // Preload images
+ const preloadImages = async () => {
+ const promises = [];
+
+ const images = [this.instantRemixing.get(['settings', 'logo'])].map((src) => this.optimizeURL(src));
+
+ images.forEach((src) => {
+ promises.push(async () => new Promise((res, rej) => {
+ const img = new window.Image();
+ img.onload = () => res();
+ img.src = src;
+ }));
+ });
+
+ await Promise.all(promises.map(async p => p()));
+
+ this.setState({ imagesLoaded: true });
+ };
+
+ preloadImages();
+}
+----
+. To use the standard loading indicator, open the terminal, cancel the running process, and install the skytree-koji-react package in the `frontend` folder of your template.
++
+[source,bash]
+npm install --save skytree-koji-react
++
+This package provides functionality for React applications on Koji, including displaying the standard loading indicator and styling editable elements.
+For more information, see the https://github.com/anderjason/skytree-koji-react[package documentation].
++
+NOTE: For projects that don’t use React, you can install the vanilla JavaScript version of the package: `npm install --save skytree-koji`.
+For more information, see the https://github.com/anderjason/skytree-koji[package documentation].
+. To improve the visual transition from the loading indicator to loaded content, install a library with the desired animation effect.
++
+This example uses the https://www.react-reveal.com/[React Reveal] library.
++
+[source,bash]
+npm install react-reveal --save
+. Restart the process to reflect the new changes:
++
+[source,bash]
+----
+npm start
+----
+. In the `App.js` file, import the `LoadingIndicator` from the skytree-koji-react package and the `Fade` effect from the react-reveal/Fade package.
++
+[source,JavaScript]
+----
+import { LoadingIndicator } from 'skytree-koji-react';
+import Fade from 'react-reveal/Fade';
+----
+. Update the `render` method to show the loading indicator while the images load and to use the animation effect when the template comes into view.
++
+[source,JavaScript]
+----
+render() {
+ if (window.location.search.includes('koji-screenshot=1')) {
+ return (
+
+
+
+
+
+ );
+ }
+ return (
+
+
+
+ )
+}
+----
+. To test the loading experience, add the following code to delay preloading.
+Then, from the *Remote* tab in the right pane, open the template in a new tab.
++
+If this test works correctly, the loading indicator will display for a few seconds, and then the template elements will fade in from the top of the screen.
++
+[source,JavaScript]
+----
+window.setTimeout(() => {
+ preloadImages();
+ }, 3000)
+----
+NOTE: Remember to remove the test delay before publishing the template.
+
+== Republishing the template
+
+At this point, you’re ready to publish the next version of your template.
+The new version replaces the previous version on the Koji platform and is available at the same URL, which is based on the name when you first published it.
+
+. In the upper left of the editor, click *Publish Now* to open the publish settings.
+. Review the name and description, and update them if desired.
+. Click *Publish*.
+. When publishing is completed, click the link to view and test your updated template.
diff --git a/src/asciidoc/vccReference/3DObject.adoc b/src/asciidoc/vccReference/3DObject.adoc
new file mode 100644
index 000000000000..b32d70769134
--- /dev/null
+++ b/src/asciidoc/vccReference/3DObject.adoc
@@ -0,0 +1,33 @@
+= 3D Object
+:page-slug: /vcc/3d-object
+
+* User can browse and import 3d OBJs from Google Poly.
+
+== Sample 3D Object VCC
+
+[source,json]
+----
+{
+ "key": "my3DObject",
+ "name": "My 3D Object",
+ "description": "This is the description of my 3D object",
+ "type": "obj"
+}
+----
+
+The resulting value will have the following shape:
+
+[source,json]
+----
+{
+ "obj": "https://objects.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/Mesh_Cat.obj",
+ "mtl": "https://objects.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/Mesh_Cat.mtl",
+ "texturePath": "https://objects.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/",
+ "rawResources": [
+ "https://objects.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/Mesh_Cat.mtl",
+ "https://images.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/Tex_Cat.png",
+ "https://objects.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/Mesh_Cat.obj"
+ ],
+ "thumbnailUrl": "https://images.koji-cdn.com/c2755e73-1d5f-4b1e-9ede-51bba8e4b7ff/6dM1J6f6pm9/thumbnail.jpg"
+}
+----
diff --git a/src/asciidoc/vccReference/array.adoc b/src/asciidoc/vccReference/array.adoc
new file mode 100644
index 000000000000..f09820daa21b
--- /dev/null
+++ b/src/asciidoc/vccReference/array.adoc
@@ -0,0 +1,27 @@
+= Array (Composition)
+:page-slug: /vcc/array
+
+//tag::description[]
+The array control lets you create a list of multiple values from a single VCC definition.
+//end::description[]
+
+To create an array, define the VCC type as `"type": "array"` or `T[]` where `T` is a valid VCC type.
+For example, to specify an array of images, use a type of `array` or `image[]`.
+You can optionally specify a maximum and/or minimum number of elements using the `arrayOptions` key.
+
+== Sample Array VCC
+
+[source,json]
+----
+{
+ "key": "myControl",
+ "name": "My control",
+ "type": "string[]",
+ "arrayOptions": {
+ "min": 2,
+ "max": 10,
+ "addItemLabel": "Add character" <1>
+ }
+}
+----
+<1> If `addItemLabel` is not set, the button shows "Add item"
diff --git a/src/asciidoc/vccReference/boolean.adoc b/src/asciidoc/vccReference/boolean.adoc
new file mode 100644
index 000000000000..1d3cf84c3cb9
--- /dev/null
+++ b/src/asciidoc/vccReference/boolean.adoc
@@ -0,0 +1,16 @@
+= Boolean
+:page-slug: /vcc/boolean
+
+* Booleans are shown as a toggle that is either off (gray) or on (blue).
+
+== Sample Boolean VCC
+
+[source,json]
+----
+{
+ "key": "myBoolean",
+ "name": "My Boolean",
+ "description": "This is my boolean description",
+ "type": "boolean"
+}
+----
diff --git a/src/asciidoc/vccReference/color.adoc b/src/asciidoc/vccReference/color.adoc
new file mode 100644
index 000000000000..f8a4d5ad0cfd
--- /dev/null
+++ b/src/asciidoc/vccReference/color.adoc
@@ -0,0 +1,16 @@
+= Color
+:page-slug: /vcc/color
+
+* Colors can be changed by clicking the color or by pressing the 'Change' button and a color swatch will appear to choose a color.
+
+== Sample Color VCC
+
+[source,json]
+----
+{
+ "key": "myColor",
+ "name": "My Color",
+ "description": "This is my color description",
+ "type": "color"
+}
+----
diff --git a/src/asciidoc/vccReference/coordinate.adoc b/src/asciidoc/vccReference/coordinate.adoc
new file mode 100644
index 000000000000..12fbf508d052
--- /dev/null
+++ b/src/asciidoc/vccReference/coordinate.adoc
@@ -0,0 +1,25 @@
+= Coordinate
+:page-slug: /vcc/coordinate
+
+* Specify an (x,y) coordinate pair.
+
+== Sample Coordinate VCC
+
+[source,json]
+----
+{
+ "myCoordinate": {
+ "x": 100,
+ "y": 200
+ }
+}
+...
+{
+ "key": "myCoordinate",
+ "name": "My Coordinate",
+ "type": "coordinate",
+ "typeOptions": {
+ "step": 1
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/file.adoc b/src/asciidoc/vccReference/file.adoc
new file mode 100644
index 000000000000..2b203e4425c0
--- /dev/null
+++ b/src/asciidoc/vccReference/file.adoc
@@ -0,0 +1,18 @@
+= File
+:page-slug: /vcc/file
+
+* User can upload any file.
+
+NOTE: For specific file types, use the associated VCC where possible. For example, see link:/vcc/image[Image], link:/vcc/sound[Sound], link:/vcc/video[Video].
+
+== Sample File VCC
+
+[source,json]
+----
+{
+ "key": "myFile",
+ "name": "My File",
+ "description": "This is my file description",
+ "type": "file"
+}
+----
diff --git a/src/asciidoc/vccReference/googleFont.adoc b/src/asciidoc/vccReference/googleFont.adoc
new file mode 100644
index 000000000000..e5a58bceb109
--- /dev/null
+++ b/src/asciidoc/vccReference/googleFont.adoc
@@ -0,0 +1,46 @@
+= Google Font
+:page-slug: /vcc/google-font
+
+* {blank}
+//tag::description[]
+Adds a selector that supports all font families served by Google Fonts.
+//end::description[]
+* Shows a formatted text sample below the selector.
+* Allows developers to limit the available choices for application usability.
+* Provides configuration options for developers to create custom, API-driven selectors by remixing this VCC.
+
+== Sample Google Font VCC
+
+[source,json]
+----
+{
+ "key": "myFont",
+ "name": "My Font",
+ "description": "Select a font",
+ "type": "custom",
+ "typeOptions": {
+ "limitChoices": [
+ "Roboto",
+ "Lobster",
+ "Lato"
+ ]
+ }
+}
+----
+
+=== typeOptions
+
+`limitChoices`: Limits the available selections to the items specified in this array.
+
+=== Implementation
+
+For examples of how to implement the Google Font VCC and the Web Font Loader library in your application, see the https://withkoji.com/templates/JamesHole/google-font-vcc/code[package documentation, window=_blank].
+
+== Custom selector VCC from API
+
+You can remix this VCC to create a custom selector that displays the items returned in an API response.
+To integrate simple APIs without touching the code, this VCC provides configuration options, including the API key and URL.
+
+NOTE: To use this VCC without modifying the code, the API must support passing the key via URL and must return a valid JSON object.
+
+For a complete list of configuration options, see the https://withkoji.com/templates/JamesHole/google-font-vcc/code[package documentation, window=_blank].
diff --git a/src/asciidoc/vccReference/image.adoc b/src/asciidoc/vccReference/image.adoc
new file mode 100644
index 000000000000..288a50608282
--- /dev/null
+++ b/src/asciidoc/vccReference/image.adoc
@@ -0,0 +1,58 @@
+= Image
+:page-slug: /vcc/image
+
+* Images can either be uploaded or obtained from a URL.
+* If the image is loaded through the *Upload* section, the image can be resized or the background can be removed and the image will be stored with the application.
+* If the image is loaded through the *Advanced* section, the application will use the image at the specified URL. Keep in mind that if the link dies, the image will not appear.
+* Remember to keep images small as larger images will take much longer to load.
+
+== Sample Image VCC
+
+[source,json]
+----
+{
+ "key": "myImage",
+ "name": "My Image",
+ "description": "This is my image description",
+ "type": "image"
+}
+----
+
+== Query string manipulation
+
+To automatically manipulate uploaded images, you can append query strings to any `images.koji-cdn.com` URL.
+For example, you can apply parameters resize or crop images to optimize them for your template.
+For a reference of the available parameters, see the https://docs.fastly.com/api/imageopto/#api[Fastly API].
+
+== Custom Image Search
+
+To use a custom image search VCC in your project:
+
+[source,json]
+----
+{
+ "key": "myImage",
+ "name": "My Image",
+ "type": "image",
+ "typeOptions": {
+ "additionalTerms": ["additional", "search", "terms"],
+ "defaultSource": "custom-image-search",
+ "imgColorType": "color",
+ "title": "Custom Search"
+ }
+}
+----
+
+=== typeOptions
+
+`additionalTerms`: An array of terms that will be appended to the user's search.
+You can use this option to provide customized search queries, such as `["album", "covers"]`.
+
+`imgColorType`: You can pass a specific color type, which is especially useful for searching transparent images.
+The following types are supported:
+
+* `color` (default): searches all images.
+* `mono`: searches black and white images.
+* `trans`: searches transparent images.
+
+`title`: The label that is displayed above the search input.
diff --git a/src/asciidoc/vccReference/object.adoc b/src/asciidoc/vccReference/object.adoc
new file mode 100644
index 000000000000..07cdd42e408e
--- /dev/null
+++ b/src/asciidoc/vccReference/object.adoc
@@ -0,0 +1,51 @@
+= Object (Composition)
+:page-slug: /vcc/object
+
+The object control lets you define an object or struct that is made up of more VCCs.
+For example, imagine if you were making a game that let users define multiple enemies.
+Each enemy might need a few pieces of metadata, like a name, image, strength level, and hitpoints.
+You can use the object type to compose a custom VCC that defines an enemy, and then optionally extend it as an array to create a list of enemies!
+
+== Sample Object VCC
+
+[source,json]
+----
+{
+ "key": "enemies",
+ "name": "Enemies",
+ "description": "List of enemies in the game",
+ "type": "object[]",
+ "typeOptions": {
+ "Enemy": {
+ "name": {
+ "name": "Enemy name",
+ "description": "The name of the enemy",
+ "type": "text"
+ },
+ "sprite": {
+ "name": "Enemy sprite",
+ "description": "Image to use for the enemy",
+ "type": "image"
+ },
+ "strLevel": {
+ "name": "Strength level",
+ "type": "range",
+ "typeOptions": {
+ "min": 0,
+ "max": 100,
+ "step": 1
+ }
+ },
+ "hitpoints": {
+ "name": "Hitpoints",
+ "type": "range",
+ "typeOptions": {
+ "min": 0,
+ "max": 20,
+ "step": 1
+ }
+ }
+ }
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/overview.adoc b/src/asciidoc/vccReference/overview.adoc
new file mode 100644
index 000000000000..66909795e745
--- /dev/null
+++ b/src/asciidoc/vccReference/overview.adoc
@@ -0,0 +1,133 @@
+= Overview
+:page-slug: /vcc
+
+Visual Customization Controls (VCCs) enable users to quickly edit elements of your template on Koji.
+The control types and default values are defined in JSON files in your project.
+During remixes, the associated visual controls allow a user to enter or select a custom value.
+
+[.float-group]
+--
+[.left]
+.JSON file for a text VCC
+[source,json]
+----
+{
+"settings": {
+"title": "Hello World!"
+},
+"@@editor": [
+{
+ "key": "settings",
+ "name": "App settings",
+ "icon": "⚙️",
+ "source": "settings.json",
+ "fields": [
+ {
+ "key": "title",
+ "name": "App title",
+ "type": "text"
+ }
+ ]
+ }
+ ]
+}
+----
+
+[.right]
+.Visual control for a text VCC
+image::textVCCRemix.png[Text VCC,45%]
+--
+
+== Using VCCs
+
+To use VCCs in your template, add a customization file to the `.koji/customization` folder of your project.
+The customization file defines the names, types, configuration options, and default values for VCCs used in the template.
+
+.JSON format of a Koji customization file
+[source,JSON]
+----
+{
+ "example": { <1>
+ "param": "this is the value of the param"
+ },
+ "@@editor": [ <2>
+ {
+ "key": "example", <3>
+ "name": "Example", <4>
+ "icon": "😄", <5>
+ "source": "example.json", <6>
+ "fields": [ <7>
+ {
+ "key": "param", <8>
+ "name": "An Example Parameter", <9>
+ "type": "image", <10>
+ "typeOptions": { <11>
+
+ }
+ }
+ ]
+ }
+ ]
+}
+----
+<1> Section that defines the scope and default values for customizable elements.
+<2> Section that defines how VCCs are displayed to remixers.
+<3> Scope used to access values in your template logic. Should match the filename.
+<4> Name displayed in the Koji editor for developers.
+<5> (Optional) Icon displayed in the Koji editor for developers.
+<6> Filename from which to obtain values. Should be the same file, in most cases.
+<7> Array of VCC definitions.
+<8> Key used to access the value in your template logic.
+<9> Display name of the element for remixers.
+<10> VCC type.
+<11> (Optional) Configuration options for the VCC. The available options vary by type.
+
+
+== VCC Types
+
+The Koji platform provides VCCs for standard elements, such as images, text, and sounds.
+To provide more specialized customization types, you can use custom VCCs published on the Koji platform and you can build your own custom VCCs.
+
+To compose higher-order controls, you can combine VCCs into arrays or objects.
+You can also combine arrays and objects to create more elaborate controls.
+
+.Standard VCCs
+* <<../vcc/image#>> – page description here (can we do this automatically?)
+* <>
+* <<../vcc/color.adoc#>>
+* <>
+* <>
+* <>
+* <>
+* <>
+* <<3DObject.adoc#>>
+* <>
+* <>
+* <>
+* <>
+
+.Custom VCC showcase
+[horizontal]
+<>::
++
+--
+include::googleFont.adoc[tag=description]
+--
+
+.VCC composition controls
+[horizontal]
+<>::
++
+--
+include::array.adoc[tag=description]
+--
+<>::
++
+--
+include::object.adoc[tag=description]
+--
+
+== Related Resources
+
+* WithKoji > https://withkoji.com/extensions[Browse custom VCCs]
+* Docs > Customization > link:../customization/customVCC.adoc[Building your first custom VCC]
diff --git a/src/asciidoc/vccReference/range.adoc b/src/asciidoc/vccReference/range.adoc
new file mode 100644
index 000000000000..b5ec177940cc
--- /dev/null
+++ b/src/asciidoc/vccReference/range.adoc
@@ -0,0 +1,22 @@
+= Range
+:page-slug: /vcc/range
+
+* Allows the user to drag a slider to specify a numeric value.
+* Can be configured with a minimum value, maximum value, and a default increment/step size.
+
+== Sample Range VCC
+
+[source,json]
+----
+{
+ "key": "myRange",
+ "name": "My Range",
+ "description": "This is my range description",
+ "type": "range",
+ "typeOptions": {
+ "min": 5,
+ "max": 60,
+ "step": 1
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/secret.adoc b/src/asciidoc/vccReference/secret.adoc
new file mode 100644
index 000000000000..beef749d4308
--- /dev/null
+++ b/src/asciidoc/vccReference/secret.adoc
@@ -0,0 +1,21 @@
+= Secret
+:page-slug: /vcc/secret
+
+* Allows for keys to be set without the need to worry about them showing when a project gets remixed.
+It will only be visible in your project and no others even if they are remixed.
+
+== Sample Secret VCC
+
+[source,json]
+----
+{
+ "key": "mySecret",
+ "name": "My Secret API Key",
+ "type": "secret",
+ "typeOptions": {
+ "suggestedKeystoreName": "my_service/api_key",
+ "usageDescription": "Your Secret API key is used to connect to my_service",
+ "procurementInstructions": "You can find your API key by visiting my_service's website"
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/select.adoc b/src/asciidoc/vccReference/select.adoc
new file mode 100644
index 000000000000..1f75cca67c24
--- /dev/null
+++ b/src/asciidoc/vccReference/select.adoc
@@ -0,0 +1,25 @@
+= Select
+:page-slug: /vcc/select
+
+* Lets the user choose from a predefined set of options.
+* The `typeOptions` must be defined for this VCC to work correctly.
+
+== Sample Select VCC
+
+[source,json]
+----
+{
+ "key": "mySelect",
+ "name": "My Select",
+ "description": "This is my sample select",
+ "type": "select",
+ "typeOptions": {
+ "placeholder": "Choose an option...",
+ "options": [
+ { "value": "one", "label": "Value one" },
+ { "value": "two", "label": "Value two" },
+ { "value": "three", "label": "Value three" }
+ ]
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/size.adoc b/src/asciidoc/vccReference/size.adoc
new file mode 100644
index 000000000000..1a2f3d6220bc
--- /dev/null
+++ b/src/asciidoc/vccReference/size.adoc
@@ -0,0 +1,27 @@
+= Size
+:page-slug: /vcc/size
+
+* Specify a (width,height) pair.
+
+== Sample Size VCC
+
+[source,json]
+----
+{
+ "mySize": {
+ "width": 100,
+ "height": 200
+ }
+}
+...
+{
+ "key": "mySize",
+ "name": "My Size",
+ "type": "size",
+ "typeOptions": {
+ "min": 0,
+ "max": 100,
+ "step": 1
+ }
+}
+----
diff --git a/src/asciidoc/vccReference/sound.adoc b/src/asciidoc/vccReference/sound.adoc
new file mode 100644
index 000000000000..2d07668603f7
--- /dev/null
+++ b/src/asciidoc/vccReference/sound.adoc
@@ -0,0 +1,19 @@
+= Sound
+:page-slug: /vcc/sound
+
+* Sounds can either be uploaded or obtained from a URL.
+* If the sound is loaded through the 'Upload' section, the sound can be cropped to only play a portion of it and the sound will be stored with the game.
+* If the sound is loaded through the 'Advanced' section, it will use the sound that is at this URL, so keep in mind that if the link dies the sound will not play.
+* Remember to keep sounds to a small length, this is part of projects that usually take up the most space and cause the longest load times.
+
+== Sample Sound VCC
+
+[source,json]
+----
+{
+ "key": "mySound",
+ "name": "My Sound",
+ "description": "This is my sound description",
+ "type": "sound"
+}
+----
diff --git a/src/asciidoc/vccReference/text.adoc b/src/asciidoc/vccReference/text.adoc
new file mode 100644
index 000000000000..fd44e70d659d
--- /dev/null
+++ b/src/asciidoc/vccReference/text.adoc
@@ -0,0 +1,18 @@
+= Text, TextArea
+:page-slug: /vcc/text
+
+* Text can be changed by clicking the input field and typing the new text.
+* A TextArea VCC can be used by defining a `type` of `textarea`.
+* The difference between the 'Text Area' and just 'Text' is that a text area allows line breaks within it. Text can be changed by clicking in the input field and typing the new text.
+
+== Sample Text VCC
+
+[source,json]
+----
+{
+ "key": "myText",
+ "name": "My Text",
+ "description": "This is my text description",
+ "type": "text"
+}
+----
diff --git a/src/asciidoc/vccReference/video.adoc b/src/asciidoc/vccReference/video.adoc
new file mode 100644
index 000000000000..b7821b644937
--- /dev/null
+++ b/src/asciidoc/vccReference/video.adoc
@@ -0,0 +1,21 @@
+= Video
+:page-slug: /vcc/video
+
+* Uploaded video is automatically transcoded to be appropriate for playback across devices.
+* Pose detection data can be generated by passing an optional `typeOption`.
+When specified, pose data is available after upload by appending `.poses` to the returned URL.
+For example, `\https://objects.koji-cdn.com/project-id/my-video.mp4.poses`.
+
+== Sample Video VCC
+
+[source,json]
+----
+{
+ "key": "myVideo",
+ "name": "My Video",
+ "type": "video",
+ "typeOptions": {
+ "estimatePoses": true
+ }
+}
+----
diff --git a/src/layouts/index.js b/src/layouts/index.js
new file mode 100644
index 000000000000..6ac4d60fc13c
--- /dev/null
+++ b/src/layouts/index.js
@@ -0,0 +1,19 @@
+import React from "react"
+import { Link } from "gatsby"
+
+class DefaultLayout extends React.Component {
+ render() {
+ return (
+