MC-5710: Beta docs tutorial

bdenham · bdenham · commit fac945a5b536 · 2018-11-26T11:01:38.000-06:00
Updated broken links to images and other topics
diff --git a/docs/create-basic-content-type/step-1-add-configuration.md b/docs/create-basic-content-type/step-1-add-configuration.md
@@ -18,23 +18,23 @@ The following configuration shows the minimal requirements for defining a conten
 
 ``` xml
 <?xml version="1.0"?>
-<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
-        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
-  <type name="heading"
-        label="Heading"
-        component="Magento_PageBuilder/js/content-type"
-        preview_component="Magento_PageBuilder/js/content-type/heading/preview"
-        form="pagebuilder_heading_form"
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
+  <type name="example"
+        label="Example"
         group="elements"
+        component="Magento_PageBuilder/js/content-type"
+        preview_component="Vendor_Module/js/content-type/example/preview"
+        master_component="Magento_PageBuilder/js/content-type/master"
+        form="pagebuilder_example_form"
         icon="icon-pagebuilder-heading"
-        sortOrder="20"
+        sortOrder="21"
         translate="label">
     <children default_policy="deny"/>
     <appearances>
-      <appearance default="true"
-                  name="default"
-                  preview_template="Magento_PageBuilder/content-type/heading/default/preview"
-                  render_template="Magento_PageBuilder/content-type/heading/default/master"
+      <appearance name="default"
+                  default="true"
+                  preview_template="Vendor_Module/content-type/example/default/preview"
+                  render_template="Vendor_Module/content-type/example/default/master"
                   reader="Magento_PageBuilder/js/master-format/read/configurable">
         <elements>
           <element name="main">
@@ -48,8 +48,8 @@ The following configuration shows the minimal requirements for defining a conten
             <style name="padding" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings"/>
             <attribute name="name" source="data-role"/>
             <attribute name="appearance" source="data-appearance"/>
-            <tag name="heading_type"/>
-            <html name="heading_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
+            <tag name="example_type"/>
+            <html name="example_text" converter="Magento_PageBuilder/js/converter/html/tag-escaper"/>
             <css name="css_classes"/>
           </element>
         </elements>
diff --git a/docs/getting-started/install-pagebuilder.md b/docs/getting-started/install-pagebuilder.md
@@ -50,7 +50,7 @@ When a new version of Page Builder is available, destroy your existing 2.3.0-alp
 
 ### Page Builder repositories access problems
 
-If you are having trouble accessing PageBuilder repositories, please contact [Igor Melnykov] or [Olena Tkacheva].
+If you are having trouble accessing PageBuilder repositories, please contact [Olena Tkacheva].
 
 ### 2.3 alpha installation problems
 
@@ -65,7 +65,7 @@ Could not find a matching version of package magento/module-page-builder-commerc
 ```
 
 Check your composer keys in the `auth.json` file.
-If these keys are correct and you still encounter these errors, please contact [Igor Melnykov] or [Olena Tkacheva].
+If these keys are correct and you still encounter these errors, please contact [Olena Tkacheva].
 
 [Olena Tkacheva]: https://magentocommeng.slack.com/messages/@UAFV915FB
 
diff --git a/docs/getting-started/introduction.md b/docs/getting-started/introduction.md
@@ -1,8 +1,113 @@
+<!-- {% raw %} -->
+
 # Introduction
 
 PageBuilder is a module that provides a visual way to build content within the Admin editor for Magento 2.3 and above.
 It replaces the default WYSIWYG Editor in the Admin area with a highly configurable drag-and-drop editing system.
 
-[This page will introduce Page Builder by providing infographics, screenshots, and descriptions for what Page Builder is and how it works.]
+## PageBuilder Early Access Program
+
+The PageBuilder Early Access Program (EAP) gives partners the following perks:
+
+* Explore PageBuilder extension points to build custom modules and integrations for 3rd party services, such as Facebook, Instagram, etc.
+* Try out PageBuilder customization options and extend its functionality beyond its default features.
+* Preview PageBuilder to prepare a migration plan from BlueFoot 1.0 to PageBuilder.
+
+**Note:**
+*This program should not be used to design and launch a production website using early code.*
+
+## Installation
+
+To install Page Builder, use the method described in the topic [Install Page Builder].
+
+[Install Page Builder]: install-pagebuilder.md
+
+<!-- {% comment %} -->
+
+## Developer documentation
+
+### Getting Started
+
+* [Introduction](../getting-started/introduction.md)
+* [Install Page Builder](../getting-started/install-pagebuilder.md)
+* [Activate Page Builder](../getting-started/activate-pagebuilder.md)
+* [View Page Builder](../getting-started/view-pagebuilder.md)
+
+### Create a content type
+
+* [Overview](../create-basic-content-type/overview.md)
+* [Step 1: Add configuration](../create-basic-content-type/step-1-add-configuration.md)
+* [Step 2: Add templates](../create-basic-content-type/step-2-add-templates.md)
+* [Step 3: Add components](../create-basic-content-type/step-3-add-components.md)
+* [Step 4: Add editor](../create-basic-content-type/step-4-add-editor.md)
+* [Step 5: Add styles](../create-basic-content-type/step-5-add-styles.md)
+* [Step 6: Add frontend widget](../create-basic-content-type/step-6-add-frontend-widget.md)
+* [What's next](../create-basic-content-type/whats-next.md)
+
+### Configurations
+
+* [Main configurations](../configurations/content-type-configuration.md)
+* [Additional configurations](../configurations/additional-configurations.md)
+* [Panel configurations](../configurations/panel-configurations.md)
+* [Option menu configurations](../configurations/option-menu-configurations.md)
+* [Iconography](../configurations/iconography.md)
+* [Block chooser configuration](../configurations/block-chooser-configuration.md)
+* [Full-width page layout configuration](../configurations/full-width-page-layout-configuration.md)
+* [Responsive layout configuration](../configurations/responsive-layout-configuration.md)
+* [Storefront configuration](../configurations/storefront-configuration.md)
+* [Selector configuration](../configurations/selector-configuration.md)
+* [Product conditions configuration](../configurations/product-conditions-configuration.md)
+* [Server-side rendered previews](../configurations/server-side-rendered-previews.md)
+
+### How Tos
+
+* [How to develop a new content type](../how-to/how-to-develop-new-content-type.md)
+* [How to develop a container content type](../how-to/how-to-develop-container-content-type.md)
+* [How to use the Image Uploader](../how-to/how-to-use-image-uploader.md)
+* [How to use the Image Uploader](../how-to/how-to-use-image-uploader.md)
+* [How to add inline text editing](../how-to/how-to-add-inline-text-editing.md)
+* [How to add a custom toolbar](../how-to/how-to-add-custom-toolbar.md)
+* [How to convert product attribute fields to use Page Builder](../how-to/how-to-convert-product-attributes-to-use-pagebuilder.md)
+* [How to store a component master format as a widget-directive](../how-to/how-to-store-master-format-as-widget-directive.md)
+
+### Reference
+
+* [Architecture](../reference/architecture.md)
+* [Events](../reference/events.md)
+* [Knockout bindings](../reference/knockout-bindings.md)
+* [Master format](../reference/master-format.md)
+
+### Migration
+
+* [Migrate from BlueFoot](../migration/migrate-from-bluefoot.md)
+* [Migrate custom content types from BlueFoot](../migration/migrate-custom-content-types-from-bluefoot.md)
+  
+<!-- {% endcomment %} -->
+
+## Contribute to PageBuilder
+
+We appreciate any and all contributions to PageBuilder. If you are interested in contributing to this repository, please see our [Contribution Guide].
+
+[Contribution Guide]: CONTRIBUTING.md
+
+## PageBuilder updates from the Magento core team
+
+The PageBuilder team updates the code every 2 weeks.
+**These changes may introduce breaking changes.**
+
+## Provide feedback
+
+We want to hear what you think of PageBuilder!
+We are particularly interested on your thoughts on the following:
+
+* [How would you customize PageBuilder and what do you need to accomplish this task?](https://github.com/magento/magento2-page-builder/issues/57)
+* [What web content API do you use or would like to see in PageBuilder?](https://github.com/magento/magento2-page-builder/issues/58)
+
+To participate in technical discussions and ask questions, join us in [Slack].
+
+For all other questions or requests, contact [Olena Tkacheva].
+
+[Slack]: https://magentocommeng.slack.com/
+[Olena Tkacheva]: https://magentocommeng.slack.com/messages/@UAFV915FB
 
-TBW
+<!-- {% endraw %} -->
diff --git a/docs/how-to/how-to-add-custom-toolbar.md b/docs/how-to/how-to-add-custom-toolbar.md
@@ -6,7 +6,7 @@
 
 This document outlines how to implement the inline editing toolbar for any content type. This feature is used within the heading to allow for easy modification of the heading type and alignment. It can be used within your content types to quickly change common things without needing to open the full editor.
 
-![Page Builder toolbar](images/toolbar.png)
+![Page Builder toolbar](../images/toolbar.png)
 
 ## Overview
 
diff --git a/docs/how-to/how-to-convert-product-attributes-to-use-pagebuilder.md b/docs/how-to/how-to-convert-product-attributes-to-use-pagebuilder.md
@@ -119,8 +119,8 @@ To prevent your form field from switching or using PageBuilder, set the `is_page
 ...
 ```
 
-[Catalog Input Type]: images/catalog-input-type.png
-[PageBuilder button]: images/pagebuilder-button.png
+[Catalog Input Type]: ../images/catalog-input-type.png
+[PageBuilder button]: ../images/pagebuilder-button.png
 [WYSIWYG UI Component]: https://devdocs.magento.com/guides/v2.2/ui_comp_guide/components/ui-wysiwyg.html
 [UI Component configuration file]: https://devdocs.magento.com/guides/v2.2/ui_comp_guide/concepts/ui_comp_xmldeclaration_concept.html
 
diff --git a/docs/how-to/how-to-develop-container-content-type.md b/docs/how-to/how-to-develop-container-content-type.md
@@ -1012,21 +1012,21 @@ bin/magento setup:upgrade
 
 You should now see a new custom content type in PageBuilder called **Custom Container** with a default appearance of **left**.
 
-![Custom Containers Panel](images/custom-containers-panel.png)
+![Custom Containers Panel](../images/custom-containers-panel.png)
 
 When you place it onto the stage, it should be filled with 3 container content types that have only one option to edit.
 
 The left appearance will have 2 rows of containers on the left side and the right appearance will have 2 rows on the right side.
 
 Left:
-![Custom Containers Left Appearance](images/custom-containers-left.png)
+![Custom Containers Left Appearance](../images/custom-containers-left.png)
 
 Right:
-![Custom Containers Right Appearance](images/custom-containers-right.png)
+![Custom Containers Right Appearance](../images/custom-containers-right.png)
 
 Use the configuration form in the container group's edit panel to switch between the left and right appearances.
 
-![Custom Containers Form](images/custom-containers-form.png)
+![Custom Containers Form](../images/custom-containers-form.png)
 
 [How to add a new content type]: how-to-add-new-content-type.md
 [Register your component]: https://devdocs.magento.com/guides/v2.2/extension-dev-guide/build/component-registration.html
diff --git a/docs/how-to/how-to-develop-new-content-type.md b/docs/how-to/how-to-develop-new-content-type.md
@@ -26,7 +26,7 @@ The steps for creating a Page Builder content type are briefly outlined here. Th
 
 ## Step 1: Add a configuration
 
-Adding a new content type starts with an XML [configuration](content-type-configuration.md) file.
+Adding a new content type starts with an XML [configuration](../configurations/content-type-configuration.md) file.
 
 To add configuration for a new content type, create a file under the following location `Vendor\ModuleName\view\adminhtml\pagebuilder\content_type\simple.xml` with the following content:
 
diff --git a/docs/reference/architecture.md b/docs/reference/architecture.md
@@ -49,7 +49,7 @@ To revert back to using the default WYSIWYG, add the following entry to the fiel
 
 ## Big picture
 
-![Page Builder big picture](images/big-picture.png)
+![Page Builder big picture](../images/big-picture.png)
 
 | Entity            | Name in configuration | Description                                                                                                    |
 | ----------------- | --------------------- | -------------------------------------------------------------------------------------------------------------- |
@@ -65,13 +65,13 @@ To revert back to using the default WYSIWYG, add the following entry to the fiel
 
 ## Data flow
 
-![Page Builder data flow](images/data-flow.png)
+![Page Builder data flow](../images/data-flow.png)
 
 The following is a simple overview of the data flow:
 
 1. Data is read by reader `Magento_PageBuilder/js/master-format/read/configurable`.
 2. Data for each element (`border`, `border_color`, `border_width` etc) is converted to an internal format by element converters.
-3. Data is converted by mass converters. For more details see [converter interface](content-type-configuration.md).
+3. Data is converted by mass converters. For more details see [converter interface](../configurations/content-type-configuration.md).
 4. Content type is created and `Magento_PageBuilder/js/data-store` is populated with data.
 5. Data in the data store is modified in the form or using live edit.
 6. Data is converted by mass converters.
@@ -95,13 +95,13 @@ An element converter modifies a single field at a time.
 
 Data for content types are stored in a simple object called the DataStore `Magento_PageBuilder/js/data-store`.
 
-`var` from [content type configuration](content-type-configuration.md) is the name of a parameter in the DataStore.
+`var` from [content type configuration](../configurations/content-type-configuration.md) is the name of a parameter in the DataStore.
 
 You can use the `subscribe` method to subscribe to changes in the data and perform custom action on it.
 
 ## Content type configuration
 
-Please see [content type configuration](content-type-configuration.md#Converter Interfaces) for information on content type configuration.
+Please see [content type configuration](../configurations/content-type-configuration.md#Converter Interfaces) for information on content type configuration.
 
 ## Appearances
 
@@ -127,6 +127,6 @@ Appearances allow you to make the following customization on existing content ty
 
 [TypeScript]: https://www.typescriptlang.org/
 [master format]: master-format.md
-[content type]: how-to-add-new-content-type.md
+[content type]: ../how-to/how-to-develop-new-content-type.md
 
 <!-- {% endraw %} -->
