{{ site.description | default: site.github.project_tagline }}
- - {% if site.github.is_project_page %} - - {% endif %} - - {% if site.github.is_user_page %} - - {% endif %} - - {% if site.show_downloads %} - - {% endif %} -
-
-For more information, see the
-[How to Customize FTW](https://www.sharetribe.com/docs/guides/how-to-customize-ftw/) guide in Flex
-Docs.
-
-### Creating a new app
-
-The easiest way is to click the _"Deploy to Heroku"_ button (check the root folder in your forked
-repository) and fill in the needed information.
-
-After deploying you will find your app from your Heroku [dashboard](https://dashboard.heroku.com/).
-If you click your application you will see Overview and some other tabs.
-
-If you don't want to use the deploy button you can also manually create a new application in Heroku
-dashboard but then you have to manually set all the environment variables. If you prefer using the
-command line you can also use [Heroku CLI](https://devcenter.heroku.com/articles/git).
-
-### Connect GitHub to Heroku
-
-Connecting your GitHub account to Heroku makes it possible to do automatic and manual deploys in the
-dashboard using GitHub branches.
-
-1. In Heroku dashboard go to _Deploy tab_ and find _Deployment method_ section.
-2. Click _Connect to GitHub_ button. After that, you will see _Connect to GitHub_ section.
-3. Search the repository you have forked to your account and click connect.
-
-
-
-After this, you can enable automatic deploys from specific GitHub branch or do the manual deploy
-from any branch in the repository.
-
-Read more from Heroku docs:
-
-- [GitHub Integration](https://devcenter.heroku.com/articles/github-integration)
-
-### Heroku settings
-
-In the _Settings tab_ you can manage your application's information, set it to maintenance mode and
-delete the app if needed.
-
-#### Updating enviroment variables
-
-In the _Settings tab_ click _"Reveal Config Vars"_ button to see the applications environment
-variables. Click edit to update them or add new ones if needed.
-
-> **NOTE:** If you change these variables, you need to deploy the app again.
-
-
-
-#### Domains and certificates
-
-Heroku manages SSL certificates automatically for new applications. You can change your domain and
-SSH settings in the _Settings tab_.
-
-Read more from Heroku docs:
-
-- [Custom Domain Names for Apps](https://devcenter.heroku.com/articles/custom-domains)
-- [Manually Acquiring an SSL/TLS Certificate](https://devcenter.heroku.com/articles/acquiring-an-ssl-certificate)
-
-
-
-### Heroku logs
-
-You can find your application's logs by clicking button _"More"_ in the upper right corner and
-selecting _"View logs"_ from the opening dropdown. Logs can be useful if there are problems when
-deploying the app.
-
-
+https://www.sharetribe.com/docs/guides/how-to-deploy-ftw-to-production/
diff --git a/docs/extend-listing.md b/docs/extend-listing.md
index 109d23d6..7c1859c8 100644
--- a/docs/extend-listing.md
+++ b/docs/extend-listing.md
@@ -1,475 +1,5 @@
# Extend listing data
-This guide walks you through the different steps required to expand the listing data model in your
-marketplace. We'll have a look on how the data is added, how it can be presented and finally how it
-can be used to filter searches.
+Documentation moved to the Flex Docs site:
-Adding new attributes to the data model relies on a Flex concept called
-[extended data](./extended-data.md).
-
-Three main areas in extending the listing data model are:
-
-- [Declare the attribute and it's possible values](#declare-the-attribute-and-its-possible-values)
-- [Edit the listing wizard](#edit-the-listing-wizard)
-- [Show the attribute on listing page](#show-the-attribute-on-listing-page)
-- [Use the attribute as a search filter](#use-the-attribute-as-a-search-filter)
-
-In this guide we will extend the listing data model by adding a _capacity_ attribute.
-
-## Add a new attribute
-
-### Declare the attribute and its possible values
-
-So, you have come up with a great new extension to the listing data model, fantastic! Depending of
-the type of data the new attribute is going to be used for it might make sense to define and store
-the possible values for the attribute. In case the data will be free form text there might not be
-use for this but in our case we wan't to fix the possible values that can be used for the capacity.
-Also if the attribute will be used as a search filter it helps to keep track of the possible values
-somewhere.
-
-A commonly used way of storing the possible values for a listing attribute is to declare them in the
-[marketplace-custom-config.js](../src/marketplace-custom-config.js) file. Place the values in an
-array and export the variable containing the array. The exports from that file are included in the
-`src/config.js` file and are available as properties in `config.custom`. Search filters and some
-components used to edit and present the data rely on a data model of an array of objects that
-contain `key` and `label` properties.
-
-For the capacity attribute we'll define a set of values that describe the capacity in a few ranges
-of how many people can fit into a given sauna:
-
-```js
-export const capacityOptions = [
- { key: '1to3', label: '1 to 3' },
- { key: '4to6', label: '4 to 6' },
- { key: '7to9', label: '7 to 9' },
- { key: '10plus', label: '10 plus' },
-];
-```
-
-### Edit the listing wizard
-
-Next step is to add means for modifying the attribute data in listings. This is achieved by adding
-proper inputs to the `EditListingWizard`. It could probably make sense to add the input to the
-_description_ tab or modify the _amenities_ tab to also include capacity but for the sake of clarity
-let's add a new tab to the wizard. The new tab will be placed between the _amenities_ and _policy_
-tabs.
-
-First lets declare the tab in `EditListingWizardTab`:
-
-```js
-export const DESCRIPTION = 'description';
-export const FEATURES = 'features';
-export const CAPACITY = 'capacity';
-export const POLICY = 'policy';
-export const LOCATION = 'location';
-export const PRICING = 'pricing';
-export const PHOTOS = 'photos';
-
-// EditListingWizardTab component supports these tabs
-export const SUPPORTED_TABS = [DESCRIPTION, FEATURES, CAPACITY, POLICY, LOCATION, PRICING, PHOTOS];
-```
-
-Now in `EditListingWizard` we can take that tab declaration into use. Import the tab name variable
-from `EditListingWizardTab` and add it to the `TABS` array.
-
-```js
-export const TABS = [DESCRIPTION, FEATURES, CAPACITY, POLICY, LOCATION, PRICING, PHOTOS];
-```
-
-Also remember to add a label for the tab in the `tabLabel` function:
-
-```js
-const tabLabel = (intl, tab) => {
- let key = null;
- if (tab === DESCRIPTION) {
- key = 'EditListingWizard.tabLabelDescription';
- } else if (tab === FEATURES) {
- key = 'EditListingWizard.tabLabelFeatures';
- } else if (tab === CAPACITY) {
- key = 'EditListingWizard.tabLabelCapacity';
- } else if (tab === POLICY) {
- key = 'EditListingWizard.tabLabelPolicy';
- } else if (tab === LOCATION) {
- key = 'EditListingWizard.tabLabelLocation';
- } else if (tab === PRICING) {
- key = 'EditListingWizard.tabLabelPricing';
- } else if (tab === PHOTOS) {
- key = 'EditListingWizard.tabLabelPhotos';
- }
-
- return intl.formatMessage({ id: key });
-};
-```
-
-The `tabCompleted` function keeps track of which data the user has already provided in order to tell
-which tabs are completed. As we will be storing the capacity information in the listing's _public
-data_ property (see the [extended data](./extended-data.md) documentation for more info on different
-extended data types) we shall look into that property when resolving whether the capacity tab has
-alerady been completed or not:
-
-```js
-/**
- * Check if a wizard tab is completed.
- *
- * @param tab wizard's tab
- * @param listing is contains some specific data if tab is completed
- *
- * @return true if tab / step is completed.
- */
-const tabCompleted = (tab, listing) => {
- const { description, geolocation, price, title, publicData } = listing.attributes;
- const images = listing.images;
-
- switch (tab) {
- case DESCRIPTION:
- return !!(description && title);
- case FEATURES:
- return !!(publicData && publicData.amenities);
- case CAPACITY:
- return !!(publicData && publicData.capacity);
- case POLICY:
- return !!(publicData && typeof publicData.rules !== 'undefined');
- case LOCATION:
- return !!(geolocation && publicData && publicData.location && publicData.location.address);
- case PRICING:
- return !!price;
- case PHOTOS:
- return images && images.length > 0;
- default:
- return false;
- }
-};
-```
-
-Next task is to add form and panel components that render the capacity tab. As for the form, let's
-create a `EditListingCapacityForm` component:
-
-```js
-import React from 'react';
-import { arrayOf, bool, func, shape, string } from 'prop-types';
-import { compose } from 'redux';
-import { Form as FinalForm } from 'react-final-form';
-import { intlShape, injectIntl, FormattedMessage } from 'react-intl';
-import classNames from 'classnames';
-import { propTypes } from '../../util/types';
-import { Form, Button, FieldSelect } from '../../components';
-import { required } from '../../util/validators';
-
-import css from './EditListingCapacityForm.css';
-
-export const EditListingCapacityFormComponent = props => (
-
-
{capacityOption.label}
-