Merge pull request dotnet#100 from madewithkoji/metadata-updates

Metadata updates

src/asciidoc/docs/_includes/customVCCVanilla.js

@@ -1,6 +1,7 @@
 import './styles.css';
 import Koji from '@withkoji/vcc';
 import CustomVCC from '@withkoji/custom-vcc-sdk';
+// tag::initTheme[]
 import { defaultTheme } from './default-theme';
 
 // tag::initTheme[]
@@ -10,74 +11,73 @@ var items = [];
 var value = '';
 
 const customVCC = new CustomVCC();
-customVCC.onTheme((theme)=>{
-    // theme is a Koji editor theme of the shape: { colors: {}, mixins: {} }
-    // update the theme value and re-render the application
-    activeTheme = theme;
-    render();
+customVCC.onTheme((theme) => {
+  // theme is a Koji editor theme of the shape: { colors: {}, mixins: {} }
+  // update the theme value and re-render the application
+  activeTheme = theme;
+  render();
 });
 // end::initTheme[]
 
 // tag::registerVCC[]
 customVCC.register();
 customVCC.onUpdate((props) => {
-    // update Select value
-    value = props.value;
-    render();
+  // update Select value
+  value = props.value;
+  render();
 });
 // end::registerVCC[]
 
 loadAPIValues();
 
 // tag::selectValue[]
 const selectValue = (e) => {
-    let val = JSON.parse(e.currentTarget.value);
-    customVCC.change(val);
-    customVCC.save();
-}
+  let val = JSON.parse(e.currentTarget.value);
+  customVCC.change(val);
+  customVCC.save();
+};
 // end::selectValue[]
 
 // tag::render[]
 // render app
 const render = () => {
-    let colors = activeTheme.colors;
-    let mixins = activeTheme.mixins;
+  let colors = activeTheme.colors;
+  let mixins = activeTheme.mixins;
 
-    let containerStyle = `
+  let containerStyle = `
         color: ${colors['foreground.default']};
         background-color: ${colors['background.default']};
         ${mixins['font.defaultFamily']};
     `;
-    let selectStyle = `
+  let selectStyle = `
         color: ${colors['input.foreground']};
         background-color: ${colors['input.background']};
         border-color: ${colors['border.default']};
     `;
 
-    document.body.innerHTML = `
+  document.body.innerHTML = `
         <div id="container" style="${containerStyle}">
             <select id="input" style="${selectStyle}">
                 <option>${isLoaded ? 'Select an option...' : 'Loading options...'}</option>
                 ${items.map((item, item_index) => {
-                    let val = JSON.stringify(item).replace(/"/g,'&quot;');
-                    let checked = false;
-                    if (Koji.config.settings.item_name_key) {
-                        checked = item[Koji.config.settings.item_name_key] === value[Koji.config.settings.item_name_key];
-                    } else {
-                        checked = item === value;
-                    }
-                    return(
-                        `<option value="${val}" ${checked ? 'selected':''}>
-                            ${Koji.config.settings.item_name_key ? item[Koji.config.settings.item_name_key]: item}
+    let val = JSON.stringify(item).replace(/"/g, '&quot;');
+    let checked = false;
+    if (Koji.config.settings.item_name_key) {
+      checked = item[Koji.config.settings.item_name_key] === value[Koji.config.settings.item_name_key];
+    } else {
+      checked = item === value;
+    }
+    return (
+      `<option value="${val}" ${checked ? 'selected' : ''}>
+                            ${Koji.config.settings.item_name_key ? item[Koji.config.settings.item_name_key] : item}
                         </option>`
-                    )
-                })}
+    );
+  })}
             </select>
         </div>
     `;
-    let input = document.getElementById('input');
-    input.addEventListener('change', selectValue);
-
+  let input = document.getElementById('input');
+  input.addEventListener('change', selectValue);
 };
 
 // call initial render
@@ -86,14 +86,14 @@ render();
 
 // tag::loadAPI[]
 function loadAPIValues() {
-    let url = Koji.config.settings.api_url;
-    fetch(url)
-        .then(res => res.json())
-        .then((result) => {
-            // Once loaded, set the items then re-render the application
-            isLoaded = true;
-            items = Koji.config.settings.items_key ? result[Koji.config.settings.items_key] : result;
-            render();
-        });
+  let url = Koji.config.settings.api_url;
+  fetch(url)
+    .then(res => res.json())
+    .then((result) => {
+      // Once loaded, set the items then re-render the application
+      isLoaded = true;
+      items = Koji.config.settings.items_key ? result[Koji.config.settings.items_key] : result;
+      render();
+    });
 }
-// end::loadAPI[]
+// end::loadAPI[]

src/asciidoc/docs/_includes/customVCCVanillaDefaultTheme.js

@@ -0,0 +1,14 @@
+export const defaultTheme = {
+  colors: {
+    'background.default': '#1e1e1e',
+    'border.default': '#34342e',
+    'foreground.default': '#d3d3d3',
+    'foreground.primary': '#358aeb',
+    'input.background': 'rgba(255,255,255,0.1)',
+    'input.foreground': '#d3d3d3',
+  },
+  mixins: {
+    'font.defaultFamily': 'font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;',
+  },
+  name: 'default',
+};

src/asciidoc/docs/blueprints/customVCC.adoc

@@ -101,10 +101,25 @@ include::../_includes/customVCCReact.js[tags=constructor,indent=0]
 ----
 
 .Vanilla JS
+====
+[.tabs]
+=====
+.index.js
+======
 [source,javascript]
 ----
 include::../_includes/customVCCVanilla.js[tags=initTheme,indent=0]
 ----
+======
+.default-theme.js
+======
+[source,javascript]
+----
+include::../_includes/customVCCVanillaDefaultTheme.js[indent=0]
+----
+======
+=====
+====
 --
 
 Register your custom VCC to connect to Koji and set a listener to update your application state when the custom VCC updates.

src/asciidoc/docs/customizations/3DObject.adoc

@@ -1,12 +1,13 @@
-= 3D object
+= Obj
 :page-slug: 3d-object
+:page-description: Standard VCC for selecting a 3D object from Google Poly.
 
-* User can
+* Users can
 //tag::description[]
 browse and import 3D objects from Google Poly.
 //end::description[]
 
-== Sample 3D Object VCC
+== Sample obj VCC
 
 [source,json]
 ----

src/asciidoc/docs/customizations/array.adoc

@@ -1,16 +1,17 @@
 = Array (composition)
 :page-slug: array
+:page-description: Composition control for creating a list values with a single VCC definition.
 
 The array control lets you
 //tag::description[]
-create a list of multiple values from a single VCC definition.
+create a list of values of the same type with a single VCC definition.
 //end::description[]
 
 To create an array, define the VCC type as `"type": "array<T>"` or `T[]` where `T` is a valid VCC type.
 For example, to specify an array of images, use a type of `array<image>` or `image[]`.
 You can optionally specify a maximum and/or minimum number of elements using the `arrayOptions` key.
 
-== Sample Array VCC
+== Sample array VCC
 
 [source,json]
 ----

src/asciidoc/docs/customizations/boolean.adoc

@@ -1,10 +1,12 @@
 = Boolean
 :page-slug: boolean
+:page-description: Standard VCC for toggling a Boolean value on or off (true or false).
 
-* Booleans are shown as a
+* Users can
 //tag::description[]
-toggle that is either off (gray) or on (blue).
+toggle a Boolean value on or off (`true` or `false`).
 //end::description[]
+* A `true` value is shown in blue and a `false` value is shown in gray.
 
 == Sample Boolean VCC
 

src/asciidoc/docs/customizations/buildCustomVcc.adoc

@@ -1,5 +1,6 @@
 = Building your first custom VCC
 :page-slug: build-custom-vcc
+:page-description: How to build a custom control for remixing specialized elements in a Koji template.
 
 Visual Customization Controls (VCCs) enable users to quickly edit elements of your application on Koji.
 The Koji platform includes VCCs for standard elements, such as images, text, and sounds.

src/asciidoc/docs/customizations/color.adoc

@@ -1,13 +1,13 @@
 = Color
 :page-slug: color
+:page-description: Standard VCCs for selecting a color.
 
 * Users can
 //tag::description[]
-pick a color
+select a color from a swatch or enter a color code (HEX, RGB, and HSL).
 //end::description[]
-by clicking the color or by clicking *Change* and a color swatch will appear to choose a color.
 
-== Sample Color VCC
+== Sample color VCC
 
 [source,json]
 ----

src/asciidoc/docs/customizations/coordinate.adoc

@@ -1,12 +1,14 @@
 = Coordinate
 :page-slug: coordinate
+:page-description: Standard VCC for specifying a coordinate pair (x,y).
 
-* {blank}
+* Users can
 //tag::description[]
-Specify an (x,y) coordinate pair.
+specify a coordinate pair (x,y).
 //end::description[]
+For example, position an element on a canvas.
 
-== Sample Coordinate VCC
+== Sample coordinate VCC
 
 [source,json]
 ----

src/asciidoc/docs/customizations/file.adoc

@@ -1,14 +1,16 @@
 = File
 :page-slug: file
+:page-description: Standard VCC for uploading a file.
 
 * User can
 //tag::description[]
 upload any file.
 //end::description[]
 
-NOTE: For specific file types, use the associated VCC where possible. For example, see <<image#>>, <<sound#>>, <<video#>>.
+NOTE: For specific file types, use the associated VCC where possible.
+For example, see <<image#>>, <<sound#>>, or <<video#>>.
 
-== Sample File VCC
+== Sample file VCC
 
 [source,json]
 ----

src/asciidoc/docs/customizations/googleFont.adoc

@@ -1,13 +1,15 @@
 = Google Font
 :page-slug: google-font
+:page-description: Custom VCC for selecting a font family from Google Fonts.
 
-* {blank}
+* Users can
 //tag::description[]
-Adds a selector that supports all font families served by Google Fonts.
+select a font family from 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.
+* The selector shows a formatted text sample for each option.
+* The VCC supports all font families served by Google Fonts.
+You can limit the available choices for application usability.
+* The template provides configuration options for developers to create custom, API-driven selectors by remixing the VCC.
 
 == Sample Google Font VCC
 

src/asciidoc/docs/customizations/image.adoc

@@ -1,15 +1,16 @@
 = Image
 :page-slug: image
+:page-description: Standard VCC for selecting an image.
 
-* {blank}
+* Users can
 //tag::description[]
-Pick an image by selecting from the available options, uploading, or entering a URL.
+select an image by selecting from the available options, uploading, or entering a URL.
 //end::description[]
 * 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
+== Sample image VCC
 
 [source,json]
 ----
@@ -27,7 +28,7 @@ To automatically manipulate uploaded images, you can append query strings to any
 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
+== Custom image search
 
 To use a custom image search VCC in your project:
 

src/asciidoc/docs/customizations/object.adoc

@@ -1,15 +1,16 @@
 = Object (composition)
 :page-slug: object
+:page-description: Composition control for defining an object that is composed of multiple VCCs.
 
 The object control lets you
 //tag::description[]
-define an object or struct that is composed of multiple types of VCCs.
+define an object that is composed of multiple VCCs.
 //end::description[]
-For example, imagine if you were making a game that let users define multiple enemies.
+For example, imagine you are 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!
+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
+== Sample object VCC
 
 [source,json]
 ----