From f36bc32694c86f79b5089451afd7f481863302ba Mon Sep 17 00:00:00 2001 From: Kimmo Puputti Date: Mon, 28 Jan 2019 16:45:52 +0200 Subject: [PATCH] Move documentation to Flex Docs - customization checklist - styling - icons - translations - tos and privacy policy - static pages --- docs/README.md | 40 ++- docs/customization-checklist.md | 42 +-- docs/icons.md | 46 +--- docs/static-pages.md | 257 +----------------- docs/styling.md | 274 +------------------- docs/terms-of-service-and-privacy-policy.md | 15 +- docs/translations.md | 210 +-------------- 7 files changed, 31 insertions(+), 853 deletions(-) diff --git a/docs/README.md b/docs/README.md index 6cc2586b..a88e4061 100644 --- a/docs/README.md +++ b/docs/README.md @@ -39,7 +39,6 @@ Docs: - [Introducing Flex](https://www.sharetribe.com/docs/background/introducing-flex/) - [What development skills are needed?](https://www.sharetribe.com/docs/background/development-skills/) - [Getting started with FTW](https://www.sharetribe.com/docs/tutorials/getting-started-with-ftw/) - tutorial. ## Customization guide @@ -49,18 +48,27 @@ Docs. ## How to customize this template -After going through the customization guide, you probably should start with changing -[translations](translations.md), [common styles](styling.md) in marketplace.css, and then create -[static pages](static-pages.md) and modify -[Terms of Service and Privacy Policy pages](terms-of-service-and-privacy-policy.md). +After going through the customization guide, you should probably start with the following guides in +Flex Docs: -Documentation for specific topics can be found in the following files: +- [How to set up Mapbox for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-mapbox-for-ftw/) +- [How to change FTW UI texts and translations](https://www.sharetribe.com/docs/guides/how-to-change-ftw-ui-texts-and-translations/) +- [How to customize FTW styles](https://www.sharetribe.com/docs/guides/how-to-customize-ftw-styles/) +- [How to change Terms of Service and Privacy Policy in FTW](https://www.sharetribe.com/docs/guides/how-to-change-tos-and-privacy-policy-in-ftw/) +- [How to change FTW icons](https://www.sharetribe.com/docs/guides/how-to-change-ftw-icons/) +- [FTW customization checklist](https://www.sharetribe.com/docs/guides/ftw-customization-checklist/) + +See also the following articles: + +- [How to add static pages in FTW](https://www.sharetribe.com/docs/guides/how-to-add-static-pages-in-ftw/) +- [How to test FTW](https://www.sharetribe.com/docs/guides/how-to-test-ftw/) +- [How to set up Sentry to log errors in FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-sentry-to-log-errors-in-ftw/) +- [How to set up Analytics for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-analytics-for-ftw/) +- [How to set up Content Security Policy (CSP) for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-csp-for-ftw/) + +Extra documentation for specific topics can be found in the following files: - [Folder structure](folder-structure.md) -- [Translations](translations.md) -- [Styling a marketplace](styling.md) -- [Static pages](static-pages.md) -- [Terms of Service and Privacy Policy](terms-of-service-and-privacy-policy.md) - [Routing](routing.md) - [Redux and duck files](redux.md) - [Extended data](extended-data.md) @@ -70,19 +78,9 @@ Documentation for specific topics can be found in the following files: - [Extend the listing data model](extend-listing.md) - [Search filters](search-filters.md) - [Continuous Integration (CI)](ci.md) -- [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md) -- [Customization checklist](customization-checklist.md) -- [Icons](icons.md) - [Improving performance](improving-performance.md) - [Deploying to production](deploying-to-production.md) - -See also the following articles in the [Flex Docs](https://www.sharetribe.com/docs/) website: - -- [How to set up Mapbox for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-mapbox-for-ftw/) -- [How to test FTW](https://www.sharetribe.com/docs/guides/how-to-test-ftw/) -- [How to set up Sentry to log errors in FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-sentry-to-log-errors-in-ftw/) -- [How to set up Analytics for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-analytics-for-ftw/) -- [How to set up Content Security Policy (CSP) for FTW](https://www.sharetribe.com/docs/guides/how-to-set-up-csp-for-ftw/) +- [Original create-react-app documentation](https://github.com/sharetribe/create-react-app/blob/master/packages/react-scripts/template/README.md) The application was bootstrapped with a forked version of [create-react-app](https://github.com/facebookincubator/create-react-app). While most of the diff --git a/docs/customization-checklist.md b/docs/customization-checklist.md index 9c0be55b..4e9ee91f 100644 --- a/docs/customization-checklist.md +++ b/docs/customization-checklist.md @@ -1,43 +1,5 @@ # Customization checklist -Some generic things to update and check when starting to customize the template. +Documentation moved to the Flex Docs site: -- [Marketplace colors](styling.md) -- [Generate app icons](icons.md) -- [Update translations](../src/translations/en.json) or [change the language](translations.md) -- [LandingPage](../src/containers/LandingPage/LandingPage.js): update and create branded sections -- [Footer](../src/components/Footer/Footer.js) -- [AboutPage](../src/containers/AboutPage/AboutPage.js) -- [Terms of Service](terms-of-service-and-privacy-policy.md#terms-of-service) -- [Privacy Policy](terms-of-service-and-privacy-policy.md#privacy-policy) -- [Social media sharing graphics](../src/components/Page/Page.js); -- [Logo](../src/components/Logo/Logo.js) Change and check that it works on Topbar, Footer, and - CheckoutPage -- [Default background image](../src/assets/background-1440.jpg) -- [Maps Marker icon](../src/components/Map/images/marker-32x32.png) -- [Config: update environment variables](../src/config.js) -- [Config: siteTitle](../src/config.js) for page schema (SEO) -- [Config: marketplace address](../src/config.js): contact details also improve SEO -- [Config: social media pages](../src/config.js) -- [Marketplace custom config](../src/marketplace-custom-config.js) -- Update [ListingPage](../src/containers/ListingPage/ListingPage.js) to show extended data (aka - publicData attribute) -- Update [EditListingWizard](../src/components/EditListingWizard/EditListingWizard.js) and panels to - add extended data -- Update [SearchPage](../src/containers/SearchPage/SearchPage.js) to filter with extended data -- Update [routeConfiguration](../src/routeConfiguration.js) if needed -- Update [Email templates](../ext/default-mail-templates), all of them: .html, subject.txt, and - text.txt - - See the [Email template reference](https://www.sharetribe.com/docs/references/email-templates/) - in Flex Docs for more information. -- Update [config: bookingUnitType](../src/config.js) if needed -- If `line-item/units` is used, add quantity handling to - [BookingDatesForm](../src/forms/BookingDatesForm/BookingDatesForm.js), - [ListingPage](../src/containers/ListingPage/ListingPage.js), - [CheckoutPage](../src/containers/CheckoutPage/CheckoutPage.js) - -## What else - -- Do you need more [static pages](static-pages.md)? -- Changes to existing pages -- Changes to transaction process (API + Web app) +https://www.sharetribe.com/docs/guides/ftw-customization-checklist/ diff --git a/docs/icons.md b/docs/icons.md index 999475ae..d8234a8f 100644 --- a/docs/icons.md +++ b/docs/icons.md @@ -1,47 +1,5 @@ # Icons -The default icons are generated with [RealFaviconGenerator](https://realfavicongenerator.net/). You -can upload your original icon to the tool, customize the colors and themes, and download a generated -set if icons and an HTML snippet to point to those images. +Documentation moved to the Flex Docs site: -1. Open https://realfavicongenerator.net/ - -1. Upload your original icon image - -1. Configure platform specific icons - - **Note:** Remember to set the "Theme color" in the Android Chrome section - -1. Configure the paths to use `/static/icons/` as the root path of the icons - -1. Generate the icons - -1. Unzip the favicons.zip archive and replace the default icons and files in - [public/static/icons/](../public/static/icons/) with the new icons - -1. Replace the default HTML snippet in [public/index.html](../public/index.html) with the snippet - from the generator. - - **Note:** Remove the manifest link from the snippet as we have a default manifest with extra - data compared to the generated one. You can edit the default file as you wish. - - **Example HTML snippet:** - - ```html - - - - - - - - - - ``` - -## Map marker icon - -The map marker icon in the listing can be found in -[src/components/Map/images/marker-32x32.png](../src/components/Map/images/marker-32x32.png). The -dimensions should be 32x32 pixels, so the `favicon-32x32.png` file can be used to replace the map -icon. +https://www.sharetribe.com/docs/guides/how-to-change-ftw-icons/ diff --git a/docs/static-pages.md b/docs/static-pages.md index bde9266f..bf6c877e 100644 --- a/docs/static-pages.md +++ b/docs/static-pages.md @@ -1,258 +1,5 @@ # Static pages -If you want to create simple pages that just show static content without need for data fetches, you -can create a static page. +Documentation moved to the Flex Docs site: -Steps for creating a static page: - -1. [Create a new folder under `src/containers/`](#1-creating-a-new-folder) -2. [Create a new JavaScript file using the same name.](#2-creating-a-javascript-file) -3. [Create a new CSS file using the same name.](#3-creating-a-css-file) -4. [Write the content to a JavaScript file (i.e. AboutPage.js in our example).](#4-creating-the-component) -5. [Write the style rules to CSS file (i.e. AboutPage.css in our example).](#5-adding-some-styles-to-the-css-file) -6. [Add the newly created page component to `src/containers/index.js`](#6-adding-the-component-to-the-component-directory) -7. [Add the newly created page to `src/routeConfiguration.js`](#7-adding-a-route-to-the-page) - -## 1. Creating a new folder - -Create a new folder under `src/containers/` with the name of your static page. E.g. "about" page -should be named as `AboutPage`. - -## 2. Creating a JavaScript file - -Create a new JavaScript file using the folder name. The path should look like -`src/containers/AboutPage/AboutPage.js`. - -## 3. Creating a CSS file - -Create a new CSS file using the folder name. The path should look like -`src/containers/AboutPage/AboutPage.css`. - -## 4. Creating the component - -Template for a single column static page (AboutPage.js): (We'll go through this line-by-line below.) - -```jsx -import React from 'react'; -import { StaticPage, TopbarContainer } from '../../containers'; -import { - LayoutSingleColumn, - LayoutWrapperTopbar, - LayoutWrapperMain, - LayoutWrapperFooter, - Footer, - NamedLink, - ExternalLink, -} from '../../components'; - -import css from './AboutPage.css'; -import image from './path/to/image.png'; - -const AboutPage = () => { - return ( - - - - - - -

Some content

- My first ice cream. -
- Go to home page or - Go to Google -
- - -